From 194f9d0ff67a434b8a387a7fcbd271b5b29b198a Mon Sep 17 00:00:00 2001 From: bruno-amorim Date: Fri, 15 Sep 2023 10:28:20 -0300 Subject: [PATCH] =?UTF-8?q?fix(filter-panel)=20Fixing=20the=20placement/di?= =?UTF-8?q?splay=20of=20the=20clear=20button=20|=20=E2=80=A6=20(#10812)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(filter-panel) Fixing the placement/display of the clear button | Fixing the focus handling of the mobile version's popup window Co-authored-by: Matthew Oliveira Co-authored-by: Anna Wen <54281166+annawen1@users.noreply.github.com> Co-authored-by: Ariella Gilmore Co-authored-by: ibmdotcom-bot Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com> Co-authored-by: John Kaeser Co-authored-by: Pauline Co-authored-by: Sangeetha Babu Co-authored-by: Sangeetha Babu Co-authored-by: Sangeetha Babu --- .../filter-panel/_filter-panel.scss | 3 +- .../expressive-modal/expressive-modal.ts | 100 +++++++++--------- .../filter-panel/filter-panel-modal.ts | 27 +++-- .../components/filter-panel/filter-panel.ts | 5 +- 4 files changed, 74 insertions(+), 61 deletions(-) diff --git a/packages/styles/scss/components/filter-panel/_filter-panel.scss b/packages/styles/scss/components/filter-panel/_filter-panel.scss index 577e11b184f..9fea2ef116d 100644 --- a/packages/styles/scss/components/filter-panel/_filter-panel.scss +++ b/packages/styles/scss/components/filter-panel/_filter-panel.scss @@ -134,7 +134,8 @@ &:not([has-selections]) { .#{$prefix}--clear { - display: none; + color: $disabled-02; + cursor: not-allowed; } } @include carbon--breakpoint-down('lg') { diff --git a/packages/web-components/src/components/expressive-modal/expressive-modal.ts b/packages/web-components/src/components/expressive-modal/expressive-modal.ts index ac6ea69c5e9..385d5a3d574 100644 --- a/packages/web-components/src/components/expressive-modal/expressive-modal.ts +++ b/packages/web-components/src/components/expressive-modal/expressive-modal.ts @@ -42,52 +42,6 @@ const FOLLOWING = const WITHIN = Node.DOCUMENT_POSITION_CONTAINED_BY; /* eslint-enable no-bitwise */ -/** - * Tries to focus on the given elements and bails out if one of the is successful. - * - * @param elems The elements. - * @param reverse `true` to go through the list in reverse order. - * @param fallback element to focus on if none - * @returns `true` if one of the attempts is successful, `false` otherwise. - */ -function tryFocusElems( - elems: NodeListOf | [HTMLElement], - reverse: boolean = false, - fallback: HTMLElement | null = null -) { - if (!reverse) { - for (let i = 0; i < elems.length; ++i) { - const elem = elems[i]; - if ( - elem.offsetWidth || - elem.offsetHeight || - elem.getClientRects().length - ) { - elem.focus(); - if ((elem.getRootNode() as Document).activeElement === elem) { - return true; - } - } - } - } else { - for (let i = elems.length - 1; i >= 0; --i) { - const elem = elems[i]; - if ( - elem.offsetWidth || - elem.offsetHeight || - elem.getClientRects().length - ) { - elem.focus(); - if ((elem.getRootNode() as Document).activeElement === elem) { - return true; - } - } - } - } - fallback?.focus(); - return false; -} - // TODO: Wait for `.d.ts` update to support `ResizeObserver` // @ts-ignore const onResize: ResizeObserverCallback = ([entry]) => { @@ -171,7 +125,7 @@ class DDSExpressiveModal extends StableSelectorMixin( ]; } - private get _focusableElements() { + get _focusableElements() { const { hasFocusableElements } = this; const focusableElements: [HTMLElement?] = []; @@ -242,7 +196,8 @@ class DDSExpressiveModal extends StableSelectorMixin( * * @param event The event. */ - private _handleFocusIn = ({ target, relatedTarget }) => { + protected _handleFocusIn = ({ target, relatedTarget }) => { + const { tryFocusElems } = this.constructor as typeof DDSExpressiveModal; let focusFromWithin = false; if (target && relatedTarget) { const comparedToThis = this.compareDocumentPosition(relatedTarget); @@ -284,6 +239,7 @@ class DDSExpressiveModal extends StableSelectorMixin( // If no target/relatedTarget, focus has entered/left the window. Do nothing. if (!target || !relatedTarget) return; + const { tryFocusElems } = this.constructor as typeof DDSExpressiveModal; const { _focusableElements: focusableElements } = this; // See if element gaining focus is inside `this` or `this.shadowRoot`. @@ -514,7 +470,7 @@ class DDSExpressiveModal extends StableSelectorMixin( async updated(changedProperties) { const { _focusableElements: focusableElements, size } = this; - const { selectorCloseButton } = this + const { selectorCloseButton, tryFocusElems } = this .constructor as typeof DDSExpressiveModal; if (changedProperties.has('size')) { @@ -601,6 +557,52 @@ class DDSExpressiveModal extends StableSelectorMixin( return `${ddsPrefix}-expressive-modal-closed`; } + /** + * Tries to focus on the given elements and bails out if one of the is successful. + * + * @param elems The elements. + * @param reverse `true` to go through the list in reverse order. + * @param fallback element to focus on if none + * @returns `true` if one of the attempts is successful, `false` otherwise. + */ + static tryFocusElems( + elems: NodeListOf | [HTMLElement], + reverse: boolean = false, + fallback: HTMLElement | null = null + ) { + if (!reverse) { + for (let i = 0; i < elems.length; ++i) { + const elem = elems[i]; + if ( + elem.offsetWidth || + elem.offsetHeight || + elem.getClientRects().length + ) { + elem.focus(); + if ((elem.getRootNode() as Document).activeElement === elem) { + return true; + } + } + } + } else { + for (let i = elems.length - 1; i >= 0; --i) { + const elem = elems[i]; + if ( + elem.offsetWidth || + elem.offsetHeight || + elem.getClientRects().length + ) { + elem.focus(); + if ((elem.getRootNode() as Document).activeElement === elem) { + return true; + } + } + } + } + fallback?.focus(); + return false; + } + static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader } diff --git a/packages/web-components/src/components/filter-panel/filter-panel-modal.ts b/packages/web-components/src/components/filter-panel/filter-panel-modal.ts index a599d169ee7..c8e9b887890 100644 --- a/packages/web-components/src/components/filter-panel/filter-panel-modal.ts +++ b/packages/web-components/src/components/filter-panel/filter-panel-modal.ts @@ -13,7 +13,7 @@ import HostListenerMixin from '../../internal/vendor/@carbon/web-components/glob import './filter-group'; import './filter-modal-button'; import './filter-modal-heading'; -import BXModal from '../../internal/vendor/@carbon/web-components/components/modal/modal.js'; +import DDSExpressiveModal from '../expressive-modal/expressive-modal'; import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; import './filter-modal-footer'; import StableSelectorMixin from '../../globals/mixins/stable-selector'; @@ -33,7 +33,7 @@ const { stablePrefix: ddsPrefix } = ddsSettings; */ @customElement(`${ddsPrefix}-filter-panel-modal`) class DDSFilterPanelModal extends HostListenerMixin( - StableSelectorMixin(BXModal) + StableSelectorMixin(DDSExpressiveModal) ) { /** * Renders the selected values. @@ -91,26 +91,32 @@ class DDSFilterPanelModal extends HostListenerMixin( if ( this.dispatchEvent( new CustomEvent( - (this.constructor as typeof BXModal).eventBeforeClose, + (this.constructor as typeof DDSExpressiveModal).eventBeforeClose, init ) ) ) { this.open = false; this.dispatchEvent( - new CustomEvent((this.constructor as typeof BXModal).eventClose, init) + new CustomEvent( + (this.constructor as typeof DDSExpressiveModal).eventClose, + init + ) ); } } } render() { + const { _handleFocusIn: handleFocusIn } = this; + return html` - + @focusin="${handleFocusIn}"> + START +
- + @focusin="${handleFocusIn}"> + END + `; } diff --git a/packages/web-components/src/components/filter-panel/filter-panel.ts b/packages/web-components/src/components/filter-panel/filter-panel.ts index bdc3bf93641..755809b229e 100644 --- a/packages/web-components/src/components/filter-panel/filter-panel.ts +++ b/packages/web-components/src/components/filter-panel/filter-panel.ts @@ -73,7 +73,10 @@ class DDSFilterPanel extends HostListenerMixin(
${this.heading}
-