From c7cd86d18af218f4934f2ba8cf52fc91f9a93805 Mon Sep 17 00:00:00 2001 From: Allan Kerr Date: Mon, 11 May 2020 13:49:22 -0400 Subject: [PATCH 01/12] Add d2l-expand-collapse component to create collapsable areas --- .../expand-collapse/demo/expand-collapse.html | 57 +++++++ components/expand-collapse/expand-collapse.js | 140 ++++++++++++++++++ index.html | 1 + 3 files changed, 198 insertions(+) create mode 100644 components/expand-collapse/demo/expand-collapse.html create mode 100644 components/expand-collapse/expand-collapse.js diff --git a/components/expand-collapse/demo/expand-collapse.html b/components/expand-collapse/demo/expand-collapse.html new file mode 100644 index 00000000000..a1c8d97e70e --- /dev/null +++ b/components/expand-collapse/demo/expand-collapse.html @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + +

Default

+ + + + + + + + + diff --git a/components/expand-collapse/expand-collapse.js b/components/expand-collapse/expand-collapse.js new file mode 100644 index 00000000000..86de62cc6e8 --- /dev/null +++ b/components/expand-collapse/expand-collapse.js @@ -0,0 +1,140 @@ +import { css, html, LitElement } from 'lit-element/lit-element.js'; +import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js'; +import { styleMap } from 'lit-html/directives/style-map.js'; + +const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches; + +const states = { + COLLAPSING: 'collapsing', // in the process of collapsing + COLLAPSED: 'collapsed', // fully collapsed + EXPANDING: 'expanding', // in the process of expanding + EXPANDED: 'expanded', // fully expanded +}; + +class ExpandCollapse extends LitElement { + + static get properties() { + return { + expanded: { type: Boolean, reflect: true }, + _height: { type: Number }, + _state: { type: String } + }; + } + + static get styles() { + return css` + :host { + display: block; + } + + :host([hidden]) { + display: none; + } + + .d2l-expand-collapse-container { + display: none; + height: 0px; + overflow: hidden; + transition: height 400ms cubic-bezier(0, 0.7, 0.5, 1); + } + + .d2l-expand-collapse-container:not([data-state="collapsed"]) { + display: block; + } + + .d2l-expand-collapse-container[data-state="expanded"] { + overflow: visible; + } + + /* prevent margin colapse on slotted children */ + .d2l-expand-collapse-content:before, + .d2l-expand-collapse-content:after { + content: ' '; + display: table; + } + + @media (prefers-reduced-motion: reduce) { + .d2l-expand-collapse-container { + transition: none; + } + } + `; + } + + constructor() { + super(); + this._onContentResize = this._onContentResize.bind(this); + this.expanded = false; + this._state = states.COLLAPSED; + } + + get expanded() { + return this._expanded; + } + + set expanded(val) { + const oldVal = this._expanded; + if (oldVal !== val) { + this._expanded = val; + this.requestUpdate('expanded', oldVal); + this._expandedChanged(val); + } + } + + firstUpdated() { + super.firstUpdated(); + + const content = this.shadowRoot.querySelector('.d2l-expand-collapse-content'); + this._resizeObserver = new ResizeObserver(this._onContentResize); + this._resizeObserver.observe(content); + } + + render() { + const styles = { + height: this.expanded ? `${this._height}px` : null + }; + return html` +
+
+ +
+
+ `; + } + + _expandedChanged(val) { + if (val) { + this._state = reduceMotion ? states.EXPANDED : states.EXPANDING; + this._updateHeight(); + } else { + this._state = reduceMotion ? states.COLLAPSED : states.COLLAPSING; + this._height = null; + } + } + + _getContent() { + return this.shadowRoot.querySelector('.d2l-expand-collapse-content'); + } + + _onTransitionEnd() { + if (this._state === states.EXPANDING) { + this._state = states.EXPANDED; + } else if (this._state === states.COLLAPSING) { + this._state = states.COLLAPSED; + } + } + + _onContentResize() { + if (!this.expanded) { + return; + } + this._updateHeight(); + } + + _updateHeight() { + const content = this._getContent(); + this._height = content.scrollHeight; + } + +} +customElements.define('d2l-expand-collapse', ExpandCollapse); diff --git a/index.html b/index.html index afe515bde60..79fa34d4d2a 100644 --- a/index.html +++ b/index.html @@ -57,6 +57,7 @@

Components

  • d2l-dropdown-tabs
    • +
  • d2l-expand-collapse
  • d2l-focus-trap
  • d2l-hierarchical-view
  • d2l-icon
    • From fb0dcf8def680b632e871b407fa103363cedae7f Mon Sep 17 00:00:00 2001 From: Allan Kerr Date: Mon, 11 May 2020 16:34:40 -0400 Subject: [PATCH 02/12] Misc changes: Add aria-expanded to the button in the demo as an example of how to use it. Remove px from height: 0. Use the _getContent helper instead of calling querySelector. --- components/expand-collapse/demo/expand-collapse.html | 1 + components/expand-collapse/expand-collapse.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/components/expand-collapse/demo/expand-collapse.html b/components/expand-collapse/demo/expand-collapse.html index a1c8d97e70e..32f3b20b2c7 100644 --- a/components/expand-collapse/demo/expand-collapse.html +++ b/components/expand-collapse/demo/expand-collapse.html @@ -45,6 +45,7 @@

    Default

    button.addEventListener('click', () => { const section = document.querySelector('d2l-expand-collapse'); section.expanded = !section.expanded; + button.setAttribute('aria-expanded', section.expanded ? 'true' : 'false'); }); diff --git a/components/expand-collapse/expand-collapse.js b/components/expand-collapse/expand-collapse.js index 86de62cc6e8..8fbd115207a 100644 --- a/components/expand-collapse/expand-collapse.js +++ b/components/expand-collapse/expand-collapse.js @@ -33,7 +33,7 @@ class ExpandCollapse extends LitElement { .d2l-expand-collapse-container { display: none; - height: 0px; + height: 0; overflow: hidden; transition: height 400ms cubic-bezier(0, 0.7, 0.5, 1); } @@ -84,7 +84,7 @@ class ExpandCollapse extends LitElement { firstUpdated() { super.firstUpdated(); - const content = this.shadowRoot.querySelector('.d2l-expand-collapse-content'); + const content = this._getContent(); this._resizeObserver = new ResizeObserver(this._onContentResize); this._resizeObserver.observe(content); } From cd323d0e041cee05f774a933cfbe45cc2e6d39ac Mon Sep 17 00:00:00 2001 From: Allan Kerr Date: Tue, 12 May 2020 09:19:07 -0400 Subject: [PATCH 03/12] Add visual diff tests --- components/expand-collapse/README.md | 0 components/expand-collapse/expand-collapse.js | 49 +++++++++---------- .../expand-collapse/test/.eslintrc.json | 3 ++ .../test/expand-collapse.visual-diff.html | 46 +++++++++++++++++ .../test/expand-collapse.visual-diff.js | 30 ++++++++++++ 5 files changed, 101 insertions(+), 27 deletions(-) create mode 100644 components/expand-collapse/README.md create mode 100644 components/expand-collapse/test/.eslintrc.json create mode 100644 components/expand-collapse/test/expand-collapse.visual-diff.html create mode 100644 components/expand-collapse/test/expand-collapse.visual-diff.js diff --git a/components/expand-collapse/README.md b/components/expand-collapse/README.md new file mode 100644 index 00000000000..e69de29bb2d diff --git a/components/expand-collapse/expand-collapse.js b/components/expand-collapse/expand-collapse.js index 8fbd115207a..353d4aabc9b 100644 --- a/components/expand-collapse/expand-collapse.js +++ b/components/expand-collapse/expand-collapse.js @@ -68,19 +68,6 @@ class ExpandCollapse extends LitElement { this._state = states.COLLAPSED; } - get expanded() { - return this._expanded; - } - - set expanded(val) { - const oldVal = this._expanded; - if (oldVal !== val) { - this._expanded = val; - this.requestUpdate('expanded', oldVal); - this._expandedChanged(val); - } - } - firstUpdated() { super.firstUpdated(); @@ -89,6 +76,12 @@ class ExpandCollapse extends LitElement { this._resizeObserver.observe(content); } + updated(changedProperties) { + if (changedProperties.has('expanded')) { + this._expandedChanged(this.expanded); + } + } + render() { const styles = { height: this.expanded ? `${this._height}px` : null @@ -102,10 +95,14 @@ class ExpandCollapse extends LitElement { `; } - _expandedChanged(val) { + async _expandedChanged(val) { if (val) { this._state = reduceMotion ? states.EXPANDED : states.EXPANDING; - this._updateHeight(); + await this.updateComplete; + const content = this._getContent(); + if (content) { + this._height = content.scrollHeight; + } } else { this._state = reduceMotion ? states.COLLAPSED : states.COLLAPSING; this._height = null; @@ -116,6 +113,16 @@ class ExpandCollapse extends LitElement { return this.shadowRoot.querySelector('.d2l-expand-collapse-content'); } + _onContentResize(e) { + if (!this.expanded) { + return; + } + const entry = e[0]; + if (entry.contentRect) { + this._height = entry.contentRect.height; + } + } + _onTransitionEnd() { if (this._state === states.EXPANDING) { this._state = states.EXPANDED; @@ -124,17 +131,5 @@ class ExpandCollapse extends LitElement { } } - _onContentResize() { - if (!this.expanded) { - return; - } - this._updateHeight(); - } - - _updateHeight() { - const content = this._getContent(); - this._height = content.scrollHeight; - } - } customElements.define('d2l-expand-collapse', ExpandCollapse); diff --git a/components/expand-collapse/test/.eslintrc.json b/components/expand-collapse/test/.eslintrc.json new file mode 100644 index 00000000000..b3d86243e15 --- /dev/null +++ b/components/expand-collapse/test/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "brightspace/open-wc-testing-config" +} diff --git a/components/expand-collapse/test/expand-collapse.visual-diff.html b/components/expand-collapse/test/expand-collapse.visual-diff.html new file mode 100644 index 00000000000..ad1231be6e7 --- /dev/null +++ b/components/expand-collapse/test/expand-collapse.visual-diff.html @@ -0,0 +1,46 @@ + + + + + + + + d2l-expand-collapse + + + + + + + +
    + +
      +
    • Coffee
      • +
    • Tea
      • +
    • Milk
      • +
    +     +
    +
    + +
      +
    • Coffee
      • +
    • Tea
      • +
    • Milk
      • +
    +     +
    + + + diff --git a/components/expand-collapse/test/expand-collapse.visual-diff.js b/components/expand-collapse/test/expand-collapse.visual-diff.js new file mode 100644 index 00000000000..98754b09c77 --- /dev/null +++ b/components/expand-collapse/test/expand-collapse.visual-diff.js @@ -0,0 +1,30 @@ +const puppeteer = require('puppeteer'); +const VisualDiff = require('@brightspace-ui/visual-diff'); + +describe('d2l-expand-collapse', () => { + + const visualDiff = new VisualDiff('expand-collapse', __dirname); + + let browser, page; + + before(async() => { + browser = await puppeteer.launch(); + page = await visualDiff.createPage(browser, { viewport: { width: 400, height: 400 } }); + await page.goto(`${visualDiff.getBaseUrl()}/components/expand-collapse/test/expand-collapse.visual-diff.html`, { waitUntil: ['networkidle0', 'load'] }); + await page.bringToFront(); + }); + + after(async() => await browser.close()); + + [ + 'collapsed', + 'expanded' + ].forEach((testName) => { + it(testName, async function() { + const selector = `#${testName}`; + const rect = await visualDiff.getRect(page, selector); + await visualDiff.screenshotAndCompare(page, this.test.fullTitle(), { clip: rect }); + }); + }); + +}); From 158b7f81ba0755e150a7c7868b3c0a3908d79ece Mon Sep 17 00:00:00 2001 From: Allan Kerr Date: Thu, 14 May 2020 12:20:38 -0400 Subject: [PATCH 04/12] Fix defect were transition would get skipped periodically when transitioning from display: none or from auto to 0 This was fixed by adding a double requestAnimationFrame wait. The reason for this is that when a Lit property gets updated, the browser will not immediately perform a style recalc. The next style recalc will happens after the next requestAnimationFrame. If we try to update styles again in the first requestAnimationFrame block then the first style change from the property change will be overwritten and never get displayed by the browser causing the transition to be skipped. In the second requestAnimationFrame we can guarantee that the property style change has taken effect so it is now safe to make our dependent style update. --- components/expand-collapse/expand-collapse.js | 64 +++++++++---------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/components/expand-collapse/expand-collapse.js b/components/expand-collapse/expand-collapse.js index 353d4aabc9b..89487b31c9e 100644 --- a/components/expand-collapse/expand-collapse.js +++ b/components/expand-collapse/expand-collapse.js @@ -1,12 +1,13 @@ import { css, html, LitElement } from 'lit-element/lit-element.js'; -import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js'; import { styleMap } from 'lit-html/directives/style-map.js'; const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches; const states = { + PRECOLLAPSING: 'precollapsing', // setting up the styles so the collapse transition will run COLLAPSING: 'collapsing', // in the process of collapsing COLLAPSED: 'collapsed', // fully collapsed + PREEXPANDING: 'preexpanding', // setting up the styles so the expand transition will run EXPANDING: 'expanding', // in the process of expanding EXPANDED: 'expanded', // fully expanded }; @@ -16,7 +17,7 @@ class ExpandCollapse extends LitElement { static get properties() { return { expanded: { type: Boolean, reflect: true }, - _height: { type: Number }, + _height: { type: String }, _state: { type: String } }; } @@ -33,7 +34,6 @@ class ExpandCollapse extends LitElement { .d2l-expand-collapse-container { display: none; - height: 0; overflow: hidden; transition: height 400ms cubic-bezier(0, 0.7, 0.5, 1); } @@ -63,17 +63,9 @@ class ExpandCollapse extends LitElement { constructor() { super(); - this._onContentResize = this._onContentResize.bind(this); this.expanded = false; this._state = states.COLLAPSED; - } - - firstUpdated() { - super.firstUpdated(); - - const content = this._getContent(); - this._resizeObserver = new ResizeObserver(this._onContentResize); - this._resizeObserver.observe(content); + this._height = '0'; } updated(changedProperties) { @@ -83,9 +75,7 @@ class ExpandCollapse extends LitElement { } render() { - const styles = { - height: this.expanded ? `${this._height}px` : null - }; + const styles = { height: this._height }; return html`
    @@ -97,15 +87,34 @@ class ExpandCollapse extends LitElement { async _expandedChanged(val) { if (val) { - this._state = reduceMotion ? states.EXPANDED : states.EXPANDING; - await this.updateComplete; - const content = this._getContent(); - if (content) { - this._height = content.scrollHeight; + if (reduceMotion) { + this._state = states.EXPANDED; + this._height = 'auto'; + } else { + this._state = states.PREEXPANDING; + await this.updateComplete; + await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r))); + if (this._state === states.PREEXPANDING) { + this._state = states.EXPANDING; + const content = this._getContent(); + this._height = `${content.scrollHeight}px`; + } } } else { - this._state = reduceMotion ? states.COLLAPSED : states.COLLAPSING; - this._height = null; + if (reduceMotion) { + this._state = states.COLLAPSED; + this._height = '0'; + } else { + this._state = states.PRECOLLAPSING; + const content = this._getContent(); + this._height = `${content.scrollHeight}px`; + await this.updateComplete; + await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r))); + if (this._state === states.PRECOLLAPSING) { + this._state = states.COLLAPSING; + this._height = '0'; + } + } } } @@ -113,19 +122,10 @@ class ExpandCollapse extends LitElement { return this.shadowRoot.querySelector('.d2l-expand-collapse-content'); } - _onContentResize(e) { - if (!this.expanded) { - return; - } - const entry = e[0]; - if (entry.contentRect) { - this._height = entry.contentRect.height; - } - } - _onTransitionEnd() { if (this._state === states.EXPANDING) { this._state = states.EXPANDED; + this._height = 'auto'; } else if (this._state === states.COLLAPSING) { this._state = states.COLLAPSED; } From c67a7cbd0c71c3cf60933f5b102b13c44ce86b3e Mon Sep 17 00:00:00 2001 From: Allan Kerr Date: Thu, 14 May 2020 12:48:57 -0400 Subject: [PATCH 05/12] Fix defect where the expand-collapse section opens with the wrong height when starting already expanded --- components/expand-collapse/expand-collapse.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/components/expand-collapse/expand-collapse.js b/components/expand-collapse/expand-collapse.js index 89487b31c9e..258445c2784 100644 --- a/components/expand-collapse/expand-collapse.js +++ b/components/expand-collapse/expand-collapse.js @@ -122,6 +122,15 @@ class ExpandCollapse extends LitElement { return this.shadowRoot.querySelector('.d2l-expand-collapse-content'); } + async _getUpdateComplete() { + const fontsPromise = document.fonts ? document.fonts.ready : Promise.resolve(); + await super._getUpdateComplete(); + /* wait for the fonts to load because browsers have a font block period + where they will render an invisible fallback font face that may result in + improper height calculations if the expand-collapse starts expanded */ + await fontsPromise; + } + _onTransitionEnd() { if (this._state === states.EXPANDING) { this._state = states.EXPANDED; From 330b986918898a68bf2dbd1bf0c8f9539a7b144f Mon Sep 17 00:00:00 2001 From: Allan Kerr Date: Thu, 14 May 2020 12:56:06 -0400 Subject: [PATCH 06/12] Add expand-collapse unit tests --- .../expand-collapse/test/expand-collapse.test.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 components/expand-collapse/test/expand-collapse.test.js diff --git a/components/expand-collapse/test/expand-collapse.test.js b/components/expand-collapse/test/expand-collapse.test.js new file mode 100644 index 00000000000..48fd6d5bd44 --- /dev/null +++ b/components/expand-collapse/test/expand-collapse.test.js @@ -0,0 +1,14 @@ +import '../expand-collapse.js'; +import { runConstructor } from '../../../tools/constructor-test-helper.js'; + +describe('d2l-expand-collapse', () => { + + describe('constructor', () => { + + it('should construct', () => { + runConstructor('d2l-expand-collapse'); + }); + + }); + +}); From 57908c022353d199231e934623a24ff6b713ac16 Mon Sep 17 00:00:00 2001 From: Allan Kerr Date: Thu, 14 May 2020 13:49:37 -0400 Subject: [PATCH 07/12] Add expand-collapse README --- README.md | 1 + components/expand-collapse/README.md | 37 ++++++++++++++++++ .../screenshots/expand-collapse.gif | Bin 0 -> 6670 bytes 3 files changed, 38 insertions(+) create mode 100644 components/expand-collapse/screenshots/expand-collapse.gif diff --git a/README.md b/README.md index 561a296e98d..6a9e9706624 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,7 @@ npm install @brightspace-ui/core * [Colors](components/colors/): color palette * [Dialogs](components/dialog/): generic and confirmation dialogs * [Dropdowns](components/dropdown/): dropdown openers and content containers + * [Expand Collapse](components/expand-collapse): component to create expandable and collapsible sections * [Focus Trap](components/focus-trap/): generic container that traps focus * [Icons](components/icons/): iconography SVGs and web components * [Inputs](components/inputs/): text, search, select, checkbox and radio inputs diff --git a/components/expand-collapse/README.md b/components/expand-collapse/README.md index e69de29bb2d..04ae542098b 100644 --- a/components/expand-collapse/README.md +++ b/components/expand-collapse/README.md @@ -0,0 +1,37 @@ +# Expand Collapse + +The `d2l-expand-collapse` element can be used to used to create expandable and collapsible sections. This component only provides the logic to expand and collapse the section. Controlling when and how the section expands or collapses is the responsibility of the user. + +![More-Less](./screenshots/expand-collapse.gif?raw=true) + +```html + + + + +

    My expand collapse content.

    +     + + +``` + +**Properties:** + +- `expanded` (Boolean, default: `false`): Specifies the expanded/collapsed state of the content + +**Accessibility:** + +To make your usage of `d2l-expand-collapse` accessible, the `aria-expanded` attribute should be added to the element that controls expanding and collapsing section with `"true"` or `"false"` to indicate that the section is expanded or collapsed. + +## Future Enhancements + +Looking for an enhancement not listed here? Create a GitHub issue! diff --git a/components/expand-collapse/screenshots/expand-collapse.gif b/components/expand-collapse/screenshots/expand-collapse.gif new file mode 100644 index 0000000000000000000000000000000000000000..fe5740500257da6fc358cb6356fb233cd0f601a1 GIT binary patch literal 6670 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 a?auwb?Wbj5Gr7>zgZI-nm;d~J+W%kj`4J5O literal 0 HcmV?d00001 From 0c769a02c339b916f84f0141a0d1555bf8ef47e5 Mon Sep 17 00:00:00 2001 From: BrightspaceGitHubReader Date: Thu, 14 May 2020 18:40:50 +0000 Subject: [PATCH 08/12] Updating golden with changes made in branch akerr/expand-collapse/dev --- .../d2l-expand-collapse-collapsed.png | Bin 0 -> 392 bytes .../d2l-expand-collapse-expanded.png | Bin 0 -> 9166 bytes 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 components/expand-collapse/test/screenshots/ci/golden/expand-collapse/d2l-expand-collapse-collapsed.png create mode 100644 components/expand-collapse/test/screenshots/ci/golden/expand-collapse/d2l-expand-collapse-expanded.png diff --git a/components/expand-collapse/test/screenshots/ci/golden/expand-collapse/d2l-expand-collapse-collapsed.png b/components/expand-collapse/test/screenshots/ci/golden/expand-collapse/d2l-expand-collapse-collapsed.png new file mode 100644 index 0000000000000000000000000000000000000000..5061cc931e39cc9d82c035d42e14d117e92737b8 GIT binary patch literal 392 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 d_h-F Date: Fri, 15 May 2020 12:10:25 -0400 Subject: [PATCH 09/12] Update expand-collapse so that it doesn't have a transition on its initial state change so it can start expanded or collapsed --- components/expand-collapse/expand-collapse.js | 22 +++++++------------ 1 file changed, 8 insertions(+), 14 deletions(-) diff --git a/components/expand-collapse/expand-collapse.js b/components/expand-collapse/expand-collapse.js index 258445c2784..aa28a280ad1 100644 --- a/components/expand-collapse/expand-collapse.js +++ b/components/expand-collapse/expand-collapse.js @@ -64,13 +64,16 @@ class ExpandCollapse extends LitElement { constructor() { super(); this.expanded = false; - this._state = states.COLLAPSED; this._height = '0'; + this._isFirstUpdate = true; + this._state = states.COLLAPSED; } updated(changedProperties) { + super.updated(changedProperties); if (changedProperties.has('expanded')) { - this._expandedChanged(this.expanded); + this._expandedChanged(this.expanded, this._isFirstUpdate); + this._isFirstUpdate = false; } } @@ -85,9 +88,9 @@ class ExpandCollapse extends LitElement { `; } - async _expandedChanged(val) { + async _expandedChanged(val, firstUpdate) { if (val) { - if (reduceMotion) { + if (reduceMotion || firstUpdate) { this._state = states.EXPANDED; this._height = 'auto'; } else { @@ -101,7 +104,7 @@ class ExpandCollapse extends LitElement { } } } else { - if (reduceMotion) { + if (reduceMotion || firstUpdate) { this._state = states.COLLAPSED; this._height = '0'; } else { @@ -122,15 +125,6 @@ class ExpandCollapse extends LitElement { return this.shadowRoot.querySelector('.d2l-expand-collapse-content'); } - async _getUpdateComplete() { - const fontsPromise = document.fonts ? document.fonts.ready : Promise.resolve(); - await super._getUpdateComplete(); - /* wait for the fonts to load because browsers have a font block period - where they will render an invisible fallback font face that may result in - improper height calculations if the expand-collapse starts expanded */ - await fontsPromise; - } - _onTransitionEnd() { if (this._state === states.EXPANDING) { this._state = states.EXPANDED; From 9a1bb3612d69870f692c24786743304b1db263c0 Mon Sep 17 00:00:00 2001 From: Allan Kerr Date: Fri, 15 May 2020 12:27:00 -0400 Subject: [PATCH 10/12] Respond to PR feedback: Add quotes around attribute Remove separate _getContent helper and inline it Add link to w3 aria-expanded in README --- components/expand-collapse/README.md | 6 +++--- components/expand-collapse/expand-collapse.js | 10 +++------- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/components/expand-collapse/README.md b/components/expand-collapse/README.md index 04ae542098b..e9b79f6b96b 100644 --- a/components/expand-collapse/README.md +++ b/components/expand-collapse/README.md @@ -1,8 +1,8 @@ # Expand Collapse -The `d2l-expand-collapse` element can be used to used to create expandable and collapsible sections. This component only provides the logic to expand and collapse the section. Controlling when and how the section expands or collapses is the responsibility of the user. +The `d2l-expand-collapse` element can be used to used to create expandable and collapsible content. This component only provides the logic to expand and collapse the content; controlling when and how it expands or collapses is the responsibility of the user. -![More-Less](./screenshots/expand-collapse.gif?raw=true) +![Expand Collapse](./screenshots/expand-collapse.gif?raw=true) ```html - - +

    My expand collapse content.

    -     - - + ``` **Properties:** @@ -30,7 +22,7 @@ The `d2l-expand-collapse` element can be used to used to create expandable and c **Accessibility:** -To make your usage of `d2l-expand-collapse` accessible, the [`aria-expanded` attribute](https://www.w3.org/TR/wai-aria/#aria-expanded) should be added to the element that controls expanding and collapsing the content with `"true"` or `"false"` to indicate that the content is expanded or collapsed. +To make your usage of `d2l-expand-collapse-content` accessible, the [`aria-expanded` attribute](https://www.w3.org/TR/wai-aria/#aria-expanded) should be added to the element that controls expanding and collapsing the content with `"true"` or `"false"` to indicate that the content is expanded or collapsed. ## Future Enhancements diff --git a/components/expand-collapse/demo/expand-collapse.html b/components/expand-collapse/demo/expand-collapse-content.html similarity index 90% rename from components/expand-collapse/demo/expand-collapse.html rename to components/expand-collapse/demo/expand-collapse-content.html index 32f3b20b2c7..05a98d38eda 100644 --- a/components/expand-collapse/demo/expand-collapse.html +++ b/components/expand-collapse/demo/expand-collapse-content.html @@ -10,19 +10,19 @@ - +

    Default