diff --git a/src/dev/pages/list/list.ejs b/src/dev/pages/list/list.ejs index 472c08f2c..cd2910d0c 100644 --- a/src/dev/pages/list/list.ejs +++ b/src/dev/pages/list/list.ejs @@ -230,109 +230,109 @@
- + Secondary Text Tertiary Text - + - + Secondary Text Tertiary Text - + - + Secondary Text Tertiary Text - +
- +
-

Leading Icon

+

Start Icon

- + - + - +
- +
-

Trailing Icon

+

End Icon

- + - + - +
- +
-

Two-Line with Leading and Trailing Icon and Divider

+

Two-Line with Start and End Icon and Divider

- + 9 Jan 2018 - + - + 22 Dec 2017 - + - + 30 Nov 2017 - + - + 17 Oct 2017 - +
@@ -345,9 +345,9 @@ - + - +
@@ -366,9 +366,9 @@ - + - +
@@ -392,106 +392,106 @@
- +
-

List with Leading Checkbox

+

List with Start Checkbox

- List Item One - + List Item One + - List Item Two - + List Item Two + - List Item Three - + List Item Three +
- +
-

List with Trailing Checkbox

+

List with End Checkbox

- - + + - - + + - - + +
- +
-

List with Leading Radio Buttons

+

List with Start Radio Buttons

- - List Item + + List Item - - List Item + + List Item - - List Item + + List Item
- +
-

List with Trailing Radio Buttons

+

List with End Radio Buttons

- - + + - - + + - - + +
- +
-

List with Trailing Switch

+

List with End Switch

- - + + - - + + - - + +
@@ -503,19 +503,19 @@
- + - + - + - + - + - +
@@ -551,33 +551,33 @@
- - + + List Item w/switch - + - + - List Item (ignore trailing) - + List Item (ignore end) + - List Item w/leading - + List Item w/start + - List Item Two w/trailing - + List Item Two w/end + @@ -591,13 +591,13 @@ - + - + @@ -646,15 +646,15 @@ Google - + Bing - + Yahoo - +
diff --git a/src/dev/pages/tabs/tabs.html b/src/dev/pages/tabs/tabs.html index 9906f99da..1f8e4bc74 100644 --- a/src/dev/pages/tabs/tabs.html +++ b/src/dev/pages/tabs/tabs.html @@ -12,8 +12,8 @@ { type: 'switch', label: 'Inverted', id: 'opt-inverted' }, { type: 'switch', label: 'Auto activate', id: 'opt-auto-activate' }, { type: 'switch', label: 'Scroll buttons', id: 'opt-scroll-buttons' }, - { type: 'switch', label: 'Show leading icon', id: 'opt-show-leading' }, - { type: 'switch', label: 'Show trailing icon', id: 'opt-show-trailing' }, + { type: 'switch', label: 'Show start icon', id: 'opt-show-start' }, + { type: 'switch', label: 'Show end icon', id: 'opt-show-end' }, { type: 'select', label: 'Clustered alignment', diff --git a/src/dev/pages/tabs/tabs.ts b/src/dev/pages/tabs/tabs.ts index 06f0b8901..134998c89 100644 --- a/src/dev/pages/tabs/tabs.ts +++ b/src/dev/pages/tabs/tabs.ts @@ -71,26 +71,26 @@ scrollButtonsToggle.addEventListener('forge-switch-change', ({ detail: selected tabBar.scrollButtons = selected; }); -const showLeadingToggle = document.getElementById('opt-show-leading') as ISwitchComponent; -showLeadingToggle.addEventListener('forge-switch-change', ({ detail: selected }) => { +const showStartToggle = document.getElementById('opt-show-start') as ISwitchComponent; +showStartToggle.addEventListener('forge-switch-change', ({ detail: selected }) => { const tabElements = tabBar.querySelectorAll('forge-tab'); tabElements.forEach(tab => { if (selected) { - tab.appendChild(createIcon('favorite', 'leading')); + tab.appendChild(createIcon('favorite', 'start')); } else { - tab.removeChild(tab.querySelector('forge-icon[slot=leading]')); + tab.removeChild(tab.querySelector('forge-icon[slot=start]')); } }); }); -const showTrailingToggle = document.getElementById('opt-show-trailing') as ISwitchComponent; -showTrailingToggle.addEventListener('forge-switch-change', ({ detail: selected }) => { +const showEndToggle = document.getElementById('opt-show-end') as ISwitchComponent; +showEndToggle.addEventListener('forge-switch-change', ({ detail: selected }) => { const tabElements = tabBar.querySelectorAll('forge-tab'); tabElements.forEach(tab => { if (selected) { - tab.appendChild(createIcon('favorite', 'trailing')); + tab.appendChild(createIcon('favorite', 'end')); } else { - tab.removeChild(tab.querySelector('forge-icon[slot=trailing]')); + tab.removeChild(tab.querySelector('forge-icon[slot=end]')); } }); }); diff --git a/src/lib/core/styles/tokens/list/list-item/_tokens.scss b/src/lib/core/styles/tokens/list/list-item/_tokens.scss index 4c01d2982..987ad4809 100644 --- a/src/lib/core/styles/tokens/list/list-item/_tokens.scss +++ b/src/lib/core/styles/tokens/list/list-item/_tokens.scss @@ -26,8 +26,8 @@ $tokens: ( // Selected selected-color: utils.module-val(list-item, selected-color, theme.variable(primary)), selected-opacity: utils.module-val(list-item, selected-opacity, theme.emphasis(lowest)), - selected-leading-color: utils.module-ref(list-item, selected-leading-color, selected-color), - selected-trailing-color: utils.module-ref(list-item, selected-trailing-color, selected-color), + selected-start-color: utils.module-ref(list-item, selected-start-color, selected-color), + selected-end-color: utils.module-ref(list-item, selected-end-color, selected-color), selected-text-color: utils.module-val(list-item, selected-text-color, theme.variable(text-medium)), // Disabled @@ -47,11 +47,11 @@ $tokens: ( dense-indent: utils.module-val(list-item, dense-indent, spacing.variable(xxlarge)), dense-gap: utils.module-val(list-item, dense-gap, spacing.variable(xsmall)), - // Leading - leading-selected-color: utils.module-ref(list-item, leading-selected-color, selected-color), + // Start + start-selected-color: utils.module-ref(list-item, start-selected-color, selected-color), - // Trailing - trailing-selected-color: utils.module-ref(list-item, trailing-selected-color, selected-color), + // end + end-selected-color: utils.module-ref(list-item, end-selected-color, selected-color), // Wrap wrap-padding: utils.module-val(list-item, wrap-padding, spacing.variable(xsmall) spacing.variable(medium)), diff --git a/src/lib/list/list-item/_core.scss b/src/lib/list/list-item/_core.scss index bf422038d..75bbc9041 100644 --- a/src/lib/list/list-item/_core.scss +++ b/src/lib/list/list-item/_core.scss @@ -89,19 +89,19 @@ } } -@mixin leading-selected { - color: #{token(leading-selected-color)}; +@mixin start-selected { + color: #{token(start-selected-color)}; } -@mixin trailing-selected { - color: #{token(trailing-selected-color)}; +@mixin end-selected { + color: #{token(end-selected-color)}; } @mixin text-container-selected { color: #{token(selected-color)}; } -@mixin leading-trailing-selected { +@mixin start-end-selected { color: #{token(selected-color)}; } @@ -156,7 +156,7 @@ margin-inline-start: #{token(dense-indent)}; } -@mixin leading-trailing-base { +@mixin start-end-base { color: #{token(text-color)}; display: inline-flex; flex-shrink: 0; diff --git a/src/lib/list/list-item/list-item-adapter.ts b/src/lib/list/list-item/list-item-adapter.ts index 8e5486c72..8ccd6af45 100644 --- a/src/lib/list/list-item/list-item-adapter.ts +++ b/src/lib/list/list-item/list-item-adapter.ts @@ -25,8 +25,8 @@ export interface IListItemAdapter extends IBaseAdapter { export class ListItemAdapter extends BaseAdapter implements IListItemAdapter { private readonly _rootElement: HTMLElement; private readonly _defaultSlotElement: HTMLSlotElement; - private readonly _leadingSlotElement: HTMLSlotElement; - private readonly _trailingSlotElement: HTMLSlotElement; + private readonly _startSlotElement: HTMLSlotElement; + private readonly _endSlotElement: HTMLSlotElement; private _focusIndicatorElement: IFocusIndicatorComponent | undefined; private _stateLayerElement: IStateLayerComponent | undefined; private _disabledAttrObserver: MutationObserver | undefined; @@ -39,8 +39,8 @@ export class ListItemAdapter extends BaseAdapter implements super(component); this._rootElement = getShadowElement(component, LIST_ITEM_CONSTANTS.selectors.ROOT); this._defaultSlotElement = getShadowElement(component, 'slot:not([name])') as HTMLSlotElement; - this._leadingSlotElement = getShadowElement(component, 'slot[name=leading]') as HTMLSlotElement; - this._trailingSlotElement = getShadowElement(component, 'slot[name=trailing]') as HTMLSlotElement; + this._startSlotElement = getShadowElement(component, 'slot[name=start]') as HTMLSlotElement; + this._endSlotElement = getShadowElement(component, 'slot[name=end]') as HTMLSlotElement; } public get interactiveElement(): HTMLElement | HTMLAnchorElement | undefined { @@ -113,8 +113,8 @@ export class ListItemAdapter extends BaseAdapter implements } private _onSlotChange(evt: Event): void { - // We only care about slot changes in the default slot, leading slot, and trailing slot to search for interactive elements - const interactiveSlotNames = ['', 'leading', 'trailing']; + // We only care about slot changes in the default slot, start/leading slot, and end/trailing slot to search for interactive elements + const interactiveSlotNames = ['', 'start', 'end', 'leading', 'trailing']; const isInteractiveSlot = interactiveSlotNames.includes((evt.target as HTMLSlotElement).name); if (!isInteractiveSlot) { return; @@ -127,10 +127,10 @@ export class ListItemAdapter extends BaseAdapter implements // We always want to check for form control-like elements first as those take precedence over slotted anchor and button // elements as the interactive element. - const assignedLeadingElements = this._leadingSlotElement.assignedElements({ flatten: true }); - const assignedTrailingElements = this._trailingSlotElement.assignedElements({ flatten: true }); - const assignedLeadingTrailingElements = [...assignedLeadingElements, ...assignedTrailingElements]; - const slottedFormControl = assignedLeadingTrailingElements.find(e => e.matches(LIST_ITEM_CONSTANTS.selectors.FORM_CONTROL_LIKE)) as HTMLElement | undefined; + const assignedStartElements = this._startSlotElement.assignedElements({ flatten: true }); + const assignedEndElements = this._endSlotElement.assignedElements({ flatten: true }); + const assignedStartEndElements = [...assignedStartElements, ...assignedEndElements]; + const slottedFormControl = assignedStartEndElements.find(e => e.matches(LIST_ITEM_CONSTANTS.selectors.FORM_CONTROL_LIKE)) as HTMLElement | undefined; if (slottedFormControl) { this._attachInteractiveFormControl(slottedFormControl); return; diff --git a/src/lib/list/list-item/list-item-constants.ts b/src/lib/list/list-item/list-item-constants.ts index 597872ad4..fd35a5b6a 100644 --- a/src/lib/list/list-item/list-item-constants.ts +++ b/src/lib/list/list-item/list-item-constants.ts @@ -31,11 +31,11 @@ const ids = { const selectors = { ROOT: `.${classes.ROOT}`, - FORM_CONTROL_LIKE: ':is([forge-list-item-interactive],forge-radio,forge-checkbox,forge-switch,input[type=checkbox],input[type=radio]):is([slot=leading],[slot=trailing]):not([forge-ignore])', + FORM_CONTROL_LIKE: ':is([forge-list-item-interactive],forge-radio,forge-checkbox,forge-switch,input[type=checkbox],input[type=radio]):is([slot=start],[slot=end],[slot=leading],[slot=trailing]):not([forge-ignore])', BUTTON_LIKE: ':is(button,[role=button][tabindex]:not([tabindex=-1]),[forge-list-item-interactive]):not([forge-ignore])', IGNORE: '[forge-ignore],[data-forge-ignore]', INTERNAL_ANCHOR: `#${ids.INTERNAL_ANCHOR}`, - SLOTTED_LEADING_TRAILING: ':is([slot=leading],[slot=trailing])' + SLOTTED_START_END: ':is([slot=start],[slot=end],[slot=leading],[slot=trailing])' }; const events = { diff --git a/src/lib/list/list-item/list-item-foundation.ts b/src/lib/list/list-item/list-item-foundation.ts index 8835ede19..8e33bce18 100644 --- a/src/lib/list/list-item/list-item-foundation.ts +++ b/src/lib/list/list-item/list-item-foundation.ts @@ -56,13 +56,13 @@ export class ListItemFoundation implements IListItemFoundation { private _onKeydown(evt: KeyboardEvent): void { const composedElements = evt.composedPath().filter((el: Element) => el.nodeType === Node.ELEMENT_NODE); - const isFromLeadingTrailingSlot = composedElements.some((el: HTMLElement) => el.matches(LIST_ITEM_CONSTANTS.selectors.SLOTTED_LEADING_TRAILING)); + const isFromStartEndSlot = composedElements.some((el: HTMLElement) => el.matches(LIST_ITEM_CONSTANTS.selectors.SLOTTED_START_END)); if (evt.key === 'Enter' || evt.key === ' ') { evt.stopPropagation(); } - if (isFromLeadingTrailingSlot) { + if (isFromStartEndSlot) { if (evt.key === 'Enter' || evt.key === ' ') { this._adapter.animateStateLayer(); } diff --git a/src/lib/list/list-item/list-item.html b/src/lib/list/list-item/list-item.html index 89da62ec6..db45e51ff 100644 --- a/src/lib/list/list-item/list-item.html +++ b/src/lib/list/list-item/list-item.html @@ -1,11 +1,15 @@ diff --git a/src/lib/list/list-item/list-item.scss b/src/lib/list/list-item/list-item.scss index b87eba319..edd01273e 100644 --- a/src/lib/list/list-item/list-item.scss +++ b/src/lib/list/list-item/list-item.scss @@ -93,22 +93,26 @@ $_host-tokens: [indent dense-indent disabled-cursor]; } } -// Dense leading/trailing +// Dense start/end :host([selected]) { .forge-list-item { @include selected; + ::slotted([slot=start]), + ::slotted([slot=end]), ::slotted([slot=leading]), ::slotted([slot=trailing]) { - @include leading-trailing-selected; + @include start-end-selected; } + ::slotted([slot=start]), ::slotted([slot=leading]) { - @include leading-selected; + @include start-selected; } + ::slotted([slot=end]), ::slotted([slot=trailing]) { - @include trailing-selected; + @include end-selected; } } @@ -155,31 +159,35 @@ slot[name=tertiary-text] { @include anchor; } -// Leading/trailing slotted elements +// Start/end slotted elements +::slotted([slot=start]), +::slotted([slot=end]), ::slotted([slot=leading]), ::slotted([slot=trailing]) { - @include leading-trailing-base; + @include start-end-base; } // Interactive slotted form controls to hide state-layer and focus-indicator :host(:not([noninteractive])) { - ::slotted(:is(forge-checkbox,forge-radio,forge-switch):is([slot=leading],[slot=trailing]):not([forge-ignore])) { + ::slotted(:is(forge-checkbox,forge-radio,forge-switch):is([slot=start],[slot=end],[slot=leading],[slot=trailing]):not([forge-ignore])) { @include focus-indicator.provide-theme(( display: none )); @include state-layer.provide-theme(( display: none )); } } -// Leading slotted elements +// Start slotted elements +::slotted([slot=start]), ::slotted([slot=leading]) { :host([selected]) & { - @include leading-selected; + @include start-selected; } } -// Trailing slotted elements +// End slotted elements +::slotted([slot=end]), ::slotted([slot=trailing]) { :host([selected]) & { - @include trailing-selected; + @include end-selected; } } diff --git a/src/lib/list/list-item/list-item.ts b/src/lib/list/list-item/list-item.ts index 45a89a9df..e8cf4dc27 100644 --- a/src/lib/list/list-item/list-item.ts +++ b/src/lib/list/list-item/list-item.ts @@ -63,15 +63,10 @@ declare global { * @event {CustomEvent} forge-list-item-select - Fires when the list item is selected. * * @slot - The primary text. - * @slot primary-text - The primary text. A named alias for the default slot. * @slot secondary-text - The secondary text. * @slot tertiary-text - The tertiary text. - * @slot title - The title element. An alias for the primary-text slot for backwards compatibility. - * @slot subtitle - The subtitle element. An alias for the secondary-text slot for backwards compatibility. - * @slot tertiary-title - The tertiary title element. An alias for the tertiary-text slot for backwards compatibility. - * @slot leading - The leading content. - * @slot trailing - The trailing element. - * @slot avatar - The avatar content. + * @slot start - The start content. + * @slot end - The end element. * * @csspart root - The root container element. * @csspart text-container - The container for the text content. @@ -94,8 +89,8 @@ declare global { * @cssproperty --forge-list-item-text-line-height - The line height of the text. * @cssproperty --forge-list-item-selected-color - The color when in the selected state. * @cssproperty --forge-list-item-opacity - The opacity of the background color when in the disabled state. - * @cssproperty --forge-list-item-selected-leading-color - The color of the leading content when in the selected state. - * @cssproperty --forge-list-item-selected-trailing-color - The color of the trailing content when in the selected state. + * @cssproperty --forge-list-item-selected-start-color - The color of the start content when in the selected state. + * @cssproperty --forge-list-item-selected-end-color - The color of the end content when in the selected state. * @cssproperty --forge-list-item-selected-text-color - The color of the text when in the selected state. * @cssproperty --forge-list-item-disabled-opacity - The opacity of the element when in the disabled state. * @cssproperty --forge-list-item-disabled-cursor - The cursor when in the disabled state. @@ -108,8 +103,8 @@ declare global { * @cssproperty --forge-list-item-dense-font-size - The font size when in the dense state. * @cssproperty --forge-list-item-dense-indent - The margin inline state when in the dense indented state. * @cssproperty --forge-list-item-dense-gap - The gap between the slotted content when in the dense state. - * @cssproperty --forge-list-item-leading-selected-color - The color of the leading content when in the selected state. - * @cssproperty --forge-list-item-trailing-selected-color - The color of the trailing content when in the selected state. + * @cssproperty --forge-list-item-start-selected-color - The color of the start content when in the selected state. + * @cssproperty --forge-list-item-end-selected-color - The color of the end content when in the selected state. * @cssproperty --forge-list-item-avatar-background-color - The background color of the avatar container. * @cssproperty --forge-list-item-avatar-color - The foreground color of the avatar container. * @cssproperty --forge-list-item-avatar-shape - The shape of the avatar container. diff --git a/src/lib/list/list.test.ts b/src/lib/list/list.test.ts index 26b966aab..9850256c1 100644 --- a/src/lib/list/list.test.ts +++ b/src/lib/list/list.test.ts @@ -231,7 +231,7 @@ describe('List', () => { it('should have focus indicator when checkbox is present', async () => { const el = await fixture(html` - + Test Item `); @@ -243,7 +243,7 @@ describe('List', () => { it('should have focus indicator when radio button is present', async () => { const el = await fixture(html` - + Test Item `); @@ -308,7 +308,7 @@ describe('List', () => { it('should have state layer when checkbox is present', async () => { const el = await fixture(html` - + Test Item `); @@ -320,7 +320,7 @@ describe('List', () => { it('should have state layer when radio button is present', async () => { const el = await fixture(html` - + Test Item `); @@ -362,7 +362,7 @@ describe('List', () => { Test Item - + `); @@ -747,12 +747,12 @@ describe('List', () => { }); describe('with form control', () => { - it('should toggle slotted leading form control when clicked', async () => { + it('should toggle slotted start form control when clicked', async () => { const el = await fixture(html` Test Item - + `); @@ -766,12 +766,12 @@ describe('List', () => { expect(checkbox.checked).to.be.true; }); - it('should not toggle leading checkbox if forge-ignore attribute is present', async () => { + it('should not toggle start checkbox if forge-ignore attribute is present', async () => { const el = await fixture(html` Test Item - + `); @@ -790,7 +790,7 @@ describe('List', () => { - + `); @@ -814,7 +814,7 @@ describe('List', () => { Test Item - + `); @@ -865,8 +865,8 @@ async function createFixture({ .selectedValue=${selectedValue}> - ${withCheckbox ? html`` : null} - ${withRadioButton ? html`` : null} + ${withCheckbox ? html`` : null} + ${withRadioButton ? html`` : null} diff --git a/src/lib/tabs/tab/tab.html b/src/lib/tabs/tab/tab.html index 4ac34293b..2f4f28ec9 100644 --- a/src/lib/tabs/tab/tab.html +++ b/src/lib/tabs/tab/tab.html @@ -1,11 +1,15 @@