Skip to content

Commit

Permalink
refactor: move validation of breakpoint into bib
Browse files Browse the repository at this point in the history
  • Loading branch information
@sun-mota
sun-mota committed Dec 2, 2024
1 parent bf3a7ce commit 870f9a2
Show file tree
Hide file tree
Showing 9 changed files with 188 additions and 111 deletions.
42 changes: 26 additions & 16 deletions components/combobox/demo/api.min.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2910,7 +2910,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {

var iconVersion$1 = '6.0.3';

var styleCss$8 = i$4`:host{position:relative}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
var styleCss$8 = i$4`:host{position:relative}:host #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;

var colorCss$7 = i$4`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;

Expand All @@ -2924,10 +2924,20 @@ var colorCss$6 = i$4`.container{background-color:var(--ds-auro-dropdownbib-conta
// See LICENSE in the project root for license information.



const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
'lg',
'md',
'sm',
'xs',
];

/**
* @attr { Boolean } common - If declared, will apply all styles for the common theme.
* @attr { Boolean } rounded - If declared, will apply border-radius to the bib.
* @attr { Boolean } inset - If declared, will apply extra padding to bib content.
* @attr { String } mobileFullscreenBreakpoint - passed down from dropdown, which the dropdown switches to fullscreen mode on mobile
* @csspart bibContainer - Apply css to the bib container.
*/

Expand Down Expand Up @@ -2955,9 +2965,17 @@ class AuroDropdownBib extends r$1 {
type: Boolean,
reflect: true
},
mobileBreakpoint: {
mobileFullscreenBreakpoint: {
type: String,
reflect: false
converter: (value) => {
const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined;
if (!validatedValue) {
return undefined;
}
const docStyle = getComputedStyle(document.documentElement);
return docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value);
},
reflect: false,
}
};
}
Expand All @@ -2981,9 +2999,6 @@ if (!customElements.get("auro-dropdownbib")) {
// See LICENSE in the project root for license information.



const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';

/**
* @attr { Boolean } bordered - If declared, applies a border around the trigger slot.
* @attr { Boolean } common - If declared, the dropdown will be styled with the common theme.
Expand All @@ -2998,7 +3013,7 @@ const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
* @attr { Boolean } noToggle - If declared, the trigger will only show the the dropdown bib.
* @attr { Boolean } focusShow - if declared, the the bib will display when focus is applied to the trigger.
* @attr { Boolean } noHideOnThisFocusLoss - If declared, the dropdown will not hide when moving focus outside the element.
* @attr { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. The dropdown will automatically display in fullscreen mode when the screen size is equal to or smaller than the selected breakpoint.
* @attr { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
* @prop { Boolean } isPopoverVisible - If true, the dropdown bib is displayed.
* @slot - Default slot for the popover content.
* @slot label - Defines the content of the label.
Expand Down Expand Up @@ -3191,19 +3206,14 @@ class AuroDropdown extends r$1 {

updated(changedProperties) {
this.floater.handleUpdate(changedProperties);
if (changedProperties.has('mobileFullscreenBreakpoint')) {
this.bibContent.setAttribute('mobileFullscreenBreakpoint', this.mobileFullscreenBreakpoint);
}
}

firstUpdated() {
this.floater.configure(this);
this.bibContent = this.floater.element.bib;
if (this.mobileFullscreenBreakpoint) {
const docStyle = getComputedStyle(document.documentElement);
const breakpointValue = docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + this.mobileFullscreenBreakpoint);
// if (!breakpointValue) {
// console.warn('There is no breakpoint token called', DESIGN_TOKEN_BREAKPOINT_PREFIX + this.mobileFullscreenBreakpoint);
// }
this.bibContent.mobileFullscreenBreakpoint = breakpointValue;
}

// Add the tag name as an attribute if it is different than the component name
this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
Expand Down Expand Up @@ -3330,7 +3340,7 @@ class AuroDropdown extends r$1 {
<div class="slotContent">
<slot @slotchange="${this.handleDefaultSlot}"></slot>
</div>
<div id="bibSizer" part="bib" style="position: absolute; pointer-events: none; opacity: 0; z-index: -1;"></div>
<div id="bibSizer" part="bib"></div>
<auro-dropdownbib
id="bib"
role="tooltip"
Expand Down
42 changes: 26 additions & 16 deletions components/combobox/demo/index.min.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2821,7 +2821,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {

var iconVersion$1 = '6.0.3';

var styleCss$8 = i$4`:host{position:relative}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
var styleCss$8 = i$4`:host{position:relative}:host #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;

var colorCss$7 = i$4`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;

Expand All @@ -2835,10 +2835,20 @@ var colorCss$6 = i$4`.container{background-color:var(--ds-auro-dropdownbib-conta
// See LICENSE in the project root for license information.



const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
'lg',
'md',
'sm',
'xs',
];

/**
* @attr { Boolean } common - If declared, will apply all styles for the common theme.
* @attr { Boolean } rounded - If declared, will apply border-radius to the bib.
* @attr { Boolean } inset - If declared, will apply extra padding to bib content.
* @attr { String } mobileFullscreenBreakpoint - passed down from dropdown, which the dropdown switches to fullscreen mode on mobile
* @csspart bibContainer - Apply css to the bib container.
*/

Expand Down Expand Up @@ -2866,9 +2876,17 @@ class AuroDropdownBib extends r$1 {
type: Boolean,
reflect: true
},
mobileBreakpoint: {
mobileFullscreenBreakpoint: {
type: String,
reflect: false
converter: (value) => {
const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined;
if (!validatedValue) {
return undefined;
}
const docStyle = getComputedStyle(document.documentElement);
return docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value);
},
reflect: false,
}
};
}
Expand All @@ -2892,9 +2910,6 @@ if (!customElements.get("auro-dropdownbib")) {
// See LICENSE in the project root for license information.



const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';

/**
* @attr { Boolean } bordered - If declared, applies a border around the trigger slot.
* @attr { Boolean } common - If declared, the dropdown will be styled with the common theme.
Expand All @@ -2909,7 +2924,7 @@ const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
* @attr { Boolean } noToggle - If declared, the trigger will only show the the dropdown bib.
* @attr { Boolean } focusShow - if declared, the the bib will display when focus is applied to the trigger.
* @attr { Boolean } noHideOnThisFocusLoss - If declared, the dropdown will not hide when moving focus outside the element.
* @attr { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. The dropdown will automatically display in fullscreen mode when the screen size is equal to or smaller than the selected breakpoint.
* @attr { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
* @prop { Boolean } isPopoverVisible - If true, the dropdown bib is displayed.
* @slot - Default slot for the popover content.
* @slot label - Defines the content of the label.
Expand Down Expand Up @@ -3102,19 +3117,14 @@ class AuroDropdown extends r$1 {

updated(changedProperties) {
this.floater.handleUpdate(changedProperties);
if (changedProperties.has('mobileFullscreenBreakpoint')) {
this.bibContent.setAttribute('mobileFullscreenBreakpoint', this.mobileFullscreenBreakpoint);
}
}

firstUpdated() {
this.floater.configure(this);
this.bibContent = this.floater.element.bib;
if (this.mobileFullscreenBreakpoint) {
const docStyle = getComputedStyle(document.documentElement);
const breakpointValue = docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + this.mobileFullscreenBreakpoint);
// if (!breakpointValue) {
// console.warn('There is no breakpoint token called', DESIGN_TOKEN_BREAKPOINT_PREFIX + this.mobileFullscreenBreakpoint);
// }
this.bibContent.mobileFullscreenBreakpoint = breakpointValue;
}

// Add the tag name as an attribute if it is different than the component name
this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
Expand Down Expand Up @@ -3241,7 +3251,7 @@ class AuroDropdown extends r$1 {
<div class="slotContent">
<slot @slotchange="${this.handleDefaultSlot}"></slot>
</div>
<div id="bibSizer" part="bib" style="position: absolute; pointer-events: none; opacity: 0; z-index: -1;"></div>
<div id="bibSizer" part="bib"></div>
<auro-dropdownbib
id="bib"
role="tooltip"
Expand Down
Loading

0 comments on commit 870f9a2

Please sign in to comment.