Skip to content

Commit

Permalink
Merge branch 'main' into GAUD-7397/dialog-resize-logic
Browse files Browse the repository at this point in the history
  • Loading branch information
KearseTrevor committed Jan 10, 2025
2 parents 947ae56 + de3dd73 commit d184a4a
Show file tree
Hide file tree
Showing 17 changed files with 143 additions and 122 deletions.
2 changes: 1 addition & 1 deletion components/demo/demo-snippet.js
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@ class DemoSnippet extends LitElement {

return lines.join('\n')
.replace(/ class=""/g, '') // replace empty class attributes (class="")
.replace(/_[^=]*="[^"]*"/, '') // replace private reflected properties (_attr="value")
.replace(/\s+_[^\s/>"'=]*(=(?<q>['"]).*?(?<!\\)\k<q>)?/g, '') // replace private reflected properties (_attr, _attr="value", but not target="_blank")
.replace(/=""/g, ''); // replace empty strings for boolean attributes (="")
}

Expand Down
4 changes: 3 additions & 1 deletion components/list/list-item-drag-handle.js
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,6 @@ class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(RtlMixin(LitElem
:host {
display: flex;
margin: 0.25rem;
pointer-events: auto; /* required since its parent may set point-events: none; (see generic layout) */
}
:host([hidden]) {
display: none;
Expand Down Expand Up @@ -116,6 +115,9 @@ class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(RtlMixin(LitElem
.d2l-list-item-drag-handle-tooltip-key {
font-weight: 700;
}
d2l-button-move {
pointer-events: auto; /* required since ancestors may set point-events: none; (see generic layout) */
}
`];
}

Expand Down
22 changes: 22 additions & 0 deletions components/list/test/list.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -298,6 +298,28 @@ describe('d2l-list-item', () => {

});

it('has clickable drag arrows', async() => {
const list = await fixture(html`
<d2l-list>
<d2l-list-item draggable key="1">Item 1</d2l-list-item>
<d2l-list-item draggable key="2">Item 2</d2l-list-item>
</d2l-list>`);

const item = list.children[0];
expect(item.innerText).to.equal('Item 1');
const handle = item.shadowRoot.querySelector('d2l-list-item-drag-handle');
let handleRealClicks = 0;
handle.addEventListener('click', () => ++handleRealClicks);
await clickElem(handle.shadowRoot.querySelector('button')); // focus drag handle
expect(handleRealClicks).to.equal(0);
await clickElem(handle.shadowRoot.querySelector('button')); // enable keyboard mode
const downArrow = handle.shadowRoot.querySelector('d2l-button-move').shadowRoot.querySelector('.down-layer');
expect(downArrow).to.exist;
clickElem(downArrow);
await oneEvent(item, 'd2l-list-item-position-change');
expect(handleRealClicks).to.equal(0);
});

});

describe('d2l-list-item-button', () => {
Expand Down
1 change: 0 additions & 1 deletion components/more-less/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ The `d2l-more-less` element can be used to minimize the display of long content,

| Property | Type | Description |
|---|---|---|
| `blur-color` | String | Gradient HEX formatted color of the blurring effect (defaults to white). |
| `expanded` | Boolean | Specifies the expanded/collapsed state of the content |
| `h-align` | String | A value of `text` aligns the leading edge of text |
| `height` | String, default: `'4em'` | Maximum height of the content when in "less" mode. The `d2l-more-less` element itself will take up additional vertical space for the fading effect as well as the more/less button itself. |
Expand Down
10 changes: 0 additions & 10 deletions components/more-less/demo/more-less.html
Original file line number Diff line number Diff line change
Expand Up @@ -45,16 +45,6 @@ <h2>More-less expanded</h2>
</template>
</d2l-demo-snippet>

<h2>More-less with custom blur color</h2>

<d2l-demo-snippet>
<template>
<d2l-more-less blur-color="#f00">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="">Vestibulum</a> elementum venenatis arcu sit amet varius. Maecenas posuere magna arcu, quis maximus odio fringilla ac. Integer ligula lorem, faucibus sit amet cursus vel, pellentesque a justo. Aliquam urna metus, molestie at tempor eget, vestibulum a purus. Donec aliquet rutrum mi. Duis ornare congue tempor. Nullam sed massa fermentum, tincidunt leo eu, vestibulum orci. Sed ultrices est in lacus venenatis, posuere suscipit arcu scelerisque. In aliquam ipsum rhoncus, lobortis ligula ut, molestie orci. Proin scelerisque tempor posuere. Phasellus consequat, lorem quis hendrerit tempor, sem lectus sagittis nunc, in tristique dui arcu non arcu. Nunc aliquam nisi et sapien commodo lacinia. <a href="">Quisque</a> iaculis orci vel odio varius porta. Fusce tincidunt dolor enim, vitae sollicitudin purus suscipit eu.</p>
</d2l-more-less>
</template>
</d2l-demo-snippet>

</d2l-demo-page>

<script>
Expand Down
50 changes: 3 additions & 47 deletions components/more-less/more-less.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,6 @@ class MoreLess extends LocalizeCoreElement(LitElement) {

static get properties() {
return {
/**
* The gradient color of the blurring effect
* @type {string}
*/
blurColor: { type: String, attribute: 'blur-color' },

/**
* Indicates whether element is in "more" state
* @type {boolean}
Expand All @@ -49,7 +43,6 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
* @type {boolean}
*/
inactive: { type: Boolean, reflect: true },
__blurBackground: { state: true },
__maxHeight: { state: true },
__transitionAdded: { state: true }
};
Expand All @@ -67,16 +60,9 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
.d2l-more-less-transition {
transition: max-height ${transitionDur}ms cubic-bezier(0, 0.7, 0.5, 1);
}
.d2l-more-less-blur {
display: none;
}
:host(:not([expanded]):not([inactive])) .d2l-more-less-blur {
bottom: 1em;
content: "";
display: block;
height: 1em;
margin-bottom: -0.75em;
position: relative;
:host(:not([expanded]):not([inactive])) .d2l-more-less-content {
-webkit-mask-image: linear-gradient(to top, transparent, #000000 1em);
mask-image: linear-gradient(to top, transparent, #000000 1em);
}
:host([inactive]) .d2l-more-less-toggle {
display: none;
Expand All @@ -96,7 +82,6 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
this.height = '4em';
this.inactive = false;

this.__blurBackground = 'linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%)';
this.__transitionAdded = false;
this.__maxHeight = this.height;

Expand Down Expand Up @@ -145,7 +130,6 @@ class MoreLess extends LocalizeCoreElement(LitElement) {

this.__content = this.shadowRoot.querySelector('.d2l-more-less-content');
this.__contentSlot = this.shadowRoot.querySelector('.d2l-more-less-content slot');
this.__init_setupBlurColour();
this.__init_setupListeners();

this.__bound_transitionEvents = this.__transitionEvents.bind(this);
Expand All @@ -164,7 +148,6 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
<div id="${this.__contentId}" class=${classMap(contentClasses)} style=${styleMap({ maxHeight: `${this.__maxHeight}` })}>
<slot></slot>
</div>
<div class="d2l-more-less-blur" style=${styleMap({ background: `${this.__blurBackground}` })}></div>
<d2l-button-subtle
class="d2l-more-less-toggle"
icon="${this.__computeIcon()}"
Expand Down Expand Up @@ -300,33 +283,6 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
});
}

__init_setupBlurColour() {
if (!this.blurColor
|| this.blurColor[0] !== '#'
|| (this.blurColor.length !== 4 && this.blurColor.length !== 7)
) {
return;
}

let hex = this.blurColor.substring(1);

// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
if (hex.length === 3) {
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, (m, r, g, b) => {
return r + r + g + g + b + b;
});
}

const bigint = parseInt(hex, 16);
const r = (bigint >> 16) & 255;
const g = (bigint >> 8) & 255;
const b = bigint & 255;

this.__blurBackground =
`linear-gradient(rgba(${r}, ${g}, ${b}, 0) 0%, rgb(${r}, ${g}, ${b}) 100%)`;
}

__init_setupListeners() {
this.__startObserving();
if (this.__contentSlot) {
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 5 additions & 1 deletion components/more-less/test/more-less.vdiff.js
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,11 @@ describe('more-less', () => {
});

it('with custom blur', async() => {
const elem = await fixture(html`<d2l-more-less blur-color="#f00">${content()}</d2l-more-less>`, { viewport });
const elem = await fixture(html`
<div style="background-color: #ff0000; padding: 10px;">
<d2l-more-less>${content()}</d2l-more-less>
</div>
`, { viewport });
await expect(elem).to.be.golden();
});
});
Loading

0 comments on commit d184a4a

Please sign in to comment.