diff --git a/.changeset/weak-colts-divide.md b/.changeset/weak-colts-divide.md index f3eea18010f..ac5b61000a2 100644 --- a/.changeset/weak-colts-divide.md +++ b/.changeset/weak-colts-divide.md @@ -2,14 +2,18 @@ "@spectrum-css/alertdialog": major "@spectrum-css/asset": major "@spectrum-css/assetcard": major +"@spectrum-css/assetlist": major "@spectrum-css/avatar": major +"@spectrum-css/miller": major "@spectrum-css/well": major --- -This update removes `--mod-*` custom property hooks per SWC-1264, see also the RFC for extensible styling. +This update removes `--mod-*` custom property hooks per SWC-1264, see also the RFC for extensible styling. In addition, this update cleans up any component-level custom properties that did not rely on the CSS cascade to define the styles; this was done to reduce the number of custom properties that are defined at the component level and trim down the size of the CSS we are shipping to consumers. - Remove all `--mod-*` custom property hooks. - Keep existing class selectors and variants unchanged. - Update stories to reflect the removal of the `--mod-*` override layer. +- Remove any component-level custom properties that did not rely on the CSS cascade to define the styles. +- Remove any high contrast mode styles being used where the default styles are sufficient. Breaking change: the `--mod-*` override layer is removed. Consumers should set `--spectrum-*` variables directly where customization is needed. diff --git a/components/assetlist/dist/metadata.json b/components/assetlist/dist/metadata.json index 0da89f4ae57..57d1970ac18 100644 --- a/components/assetlist/dist/metadata.json +++ b/components/assetlist/dist/metadata.json @@ -15,7 +15,6 @@ ".spectrum-AssetList-item.is-selected .spectrum-Checkbox", ".spectrum-AssetList-item.is-selected:focus", ".spectrum-AssetList-item.is-selected:hover", - ".spectrum-AssetList-item:before", ".spectrum-AssetList-item:focus .spectrum-Checkbox", ".spectrum-AssetList-item:focus-within:focus-visible", ".spectrum-AssetList-item:focus-within:focus-visible:before", @@ -26,52 +25,18 @@ ".spectrum-AssetList-itemSelector", ".spectrum-AssetList:dir(rtl)" ], - "modifiers": [ - "--mod-assetlist-border-color-key-focus", - "--mod-assetlist-child-indicator-animation", - "--mod-assetlist-item-animation", - "--mod-assetlist-item-background-color-down", - "--mod-assetlist-item-background-color-hover", - "--mod-assetlist-item-background-color-selected", - "--mod-assetlist-item-background-color-selected-hover", - "--mod-assetlist-item-border-radius", - "--mod-assetlist-item-font-size", - "--mod-assetlist-item-font-weight", - "--mod-assetlist-item-height", - "--mod-assetlist-item-label-padding-inline-start", - "--mod-assetlist-item-margin-bottom", - "--mod-assetlist-item-padding-inline-end", - "--mod-assetlist-item-padding-inline-start", - "--mod-assetlist-label-color", - "--mod-assetlist-thumbnail-margin-left", - "--mod-assetlist-thumbnail-width", - "--mod-assetlist-thumnail-height", - "--mod-assetlist-width" - ], + "modifiers": [], "component": [ - "--spectrum-assetlist-border-color-key-focus", - "--spectrum-assetlist-child-indicator-animation", - "--spectrum-assetlist-item-animation", - "--spectrum-assetlist-item-background-color-down", - "--spectrum-assetlist-item-background-color-hover", "--spectrum-assetlist-item-background-color-selected", - "--spectrum-assetlist-item-background-color-selected-hover", - "--spectrum-assetlist-item-border-radius", - "--spectrum-assetlist-item-font-size", - "--spectrum-assetlist-item-font-weight", - "--spectrum-assetlist-item-height", - "--spectrum-assetlist-item-label-padding-inline-start", - "--spectrum-assetlist-item-margin-block-end", - "--spectrum-assetlist-item-padding-inline-end", - "--spectrum-assetlist-item-padding-inline-start", - "--spectrum-assetlist-label-color", - "--spectrum-assetlist-thumbnail-height", - "--spectrum-assetlist-thumbnail-margin-inline-start", - "--spectrum-assetlist-thumbnail-width", - "--spectrum-assetlist-width" + "--spectrum-assetlist-item-background-color-selected-hover" ], "global": [ "--spectrum-animation-duration-100", + "--spectrum-component-height-200", + "--spectrum-corner-radius-100", + "--spectrum-field-default-width-large", + "--spectrum-focus-indicator-color", + "--spectrum-focus-indicator-thickness", "--spectrum-font-size-100", "--spectrum-gray-100", "--spectrum-gray-200", @@ -80,16 +45,9 @@ "--spectrum-regular-font-weight", "--spectrum-spacing-100", "--spectrum-spacing-300", - "--spectrum-spacing-400", - "--spectrum-spacing-600", - "--spectrum-spacing-75" + "--spectrum-spacing-75", + "--spectrum-thumbnail-size-100" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-assetlist-border-color-key-focus", - "--highcontrast-assetlist-item-background-color-hover", - "--highcontrast-assetlist-item-background-color-selected", - "--highcontrast-assetlist-item-background-color-selected-hover", - "--highcontrast-assetlist-label-color" - ] + "high-contrast": [] } diff --git a/components/assetlist/index.css b/components/assetlist/index.css index 28801db0d89..42b2e96a58b 100644 --- a/components/assetlist/index.css +++ b/components/assetlist/index.css @@ -11,32 +11,8 @@ * governing permissions and limitations under the License. */ +/* Container */ .spectrum-AssetList { - --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-200); - --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-100); - - --spectrum-assetlist-width: 272px; - --spectrum-assetlist-child-indicator-animation: var(--spectrum-animation-duration-100); - - /* item */ - --spectrum-assetlist-item-height: var(--spectrum-spacing-600); - --spectrum-assetlist-item-padding-inline-start: var(--spectrum-spacing-300); - --spectrum-assetlist-item-padding-inline-end: var(--spectrum-spacing-300); - --spectrum-assetlist-item-margin-block-end: var(--spectrum-spacing-75); - --spectrum-assetlist-item-border-radius: var(--spectrum-spacing-75); - --spectrum-assetlist-item-animation: var(--spectrum-animation-duration-100); - --spectrum-assetlist-item-font-size: var(--spectrum-font-size-100); - --spectrum-assetlist-item-font-weight: var(--spectrum-regular-font-weight); - - /* thumbnail */ - --spectrum-assetlist-thumbnail-width: var(--spectrum-spacing-400); - --spectrum-assetlist-thumbnail-height: var(--spectrum-spacing-400); - --spectrum-assetlist-thumbnail-margin-inline-start: var(--spectrum-spacing-100); - - /* label */ - --spectrum-assetlist-item-label-padding-inline-start: var(--spectrum-spacing-100); - --spectrum-assetlist-label-color: var(--spectrum-neutral-content-color-default); - margin-block-start: 0; margin-block-end: 0; padding: 0; @@ -46,48 +22,27 @@ } } +/* Iterable children */ .spectrum-AssetList-item { position: relative; - color: var(--highcontrast-assetlist-label-color, var(--mod-assetlist-label-color, var(--spectrum-assetlist-label-color))); - display: flex; box-sizing: border-box; align-items: center; - - inline-size: var(--mod-assetlist-width, var(--spectrum-assetlist-width)); - block-size: var(--mod-assetlist-item-height, var(--spectrum-assetlist-item-height)); - + inline-size: var(--spectrum-field-default-width-large); + block-size: var(--spectrum-component-height-200); padding-block: 0; - padding-inline: var(--mod-assetlist-item-padding-inline-start, var(--spectrum-assetlist-item-padding-inline-start)) var(--mod-assetlist-item-padding-inline-end, var(--spectrum-assetlist-item-padding-inline-end)); - margin-block: 0 var(--mod-assetlist-item-margin-bottom, var(--spectrum-assetlist-item-margin-block-end)); + padding-inline: var(--spectrum-spacing-300); + margin-block: 0 var(--spectrum-spacing-75); margin-inline: 0; - - border-radius: var(--mod-assetlist-item-border-radius, var(--spectrum-assetlist-item-border-radius)); - - transition: background-color var(--mod-assetlist-item-animation, var(--spectrum-assetlist-item-animation)) ease-in-out; - - font-size: var(--mod-assetlist-item-font-size, var(--spectrum-assetlist-item-font-size)); - font-weight: var(--mod-assetlist-item-font-weight, var(--spectrum-assetlist-item-font-weight)); + border-radius: var(--spectrum-corner-radius-100); + transition: background-color var(--spectrum-animation-duration-100) ease-in-out; + color: var(--spectrum-neutral-content-color-default); + font-size: var(--spectrum-font-size-100); + font-weight: var(--spectrum-regular-font-weight); font-style: normal; - cursor: pointer; - outline: none; - &::before { - content: ""; - - position: absolute; - inset-inline-start: 0; - inset-inline-end: 0; - - block-size: var(--mod-assetlist-item-height, var(--spectrum-assetlist-item-height)); - - background-color: transparent; - - border-radius: var(--mod-assetlist-item-border-radius, var(--spectrum-assetlist-item-border-radius)); - } - &.is-selectable, &.is-selected, &:hover, @@ -98,55 +53,81 @@ } } - &.is-branch { - /* show chevron */ - .spectrum-AssetList-itemChildIndicator { - display: block; - } + /* show chevron */ + &.is-branch .spectrum-AssetList-itemChildIndicator { + display: block; } .spectrum-AssetList-itemThumbnail { /* Remove the border on images inside links in IE 10-. */ border-style: none; - - inline-size: var(--mod-assetlist-thumbnail-width, var(--spectrum-assetlist-thumbnail-width)); - block-size: var(--mod-assetlist-thumnail-height, var(--spectrum-assetlist-thumbnail-height)); - margin-inline-start: var(--mod-assetlist-thumbnail-margin-left, var(--spectrum-assetlist-thumbnail-margin-inline-start)); + inline-size: var(--spectrum-thumbnail-size-100); + block-size: var(--spectrum-thumbnail-size-100); + margin-inline-start: var(--spectrum-spacing-100); vertical-align: middle; } &:hover { - background-color: var(--highcontrast-assetlist-item-background-color-hover, var(--mod-assetlist-item-background-color-hover, var(--spectrum-assetlist-item-background-color-hover))); + background-color: var(--spectrum-gray-100); + + @media (forced-colors: active) { + forced-color-adjust: none; + background-color: Highlight; + color: HighlightText; + } } &:focus-within { &:focus-visible, &.is-focused { - background-color: var(--highcontrast-assetlist-item-background-color-hover, var(--mod-assetlist-item-background-color-hover, var(--spectrum-assetlist-item-background-color-hover))); + background-color: var(--spectrum-gray-100); + + @media (forced-colors: active) { + forced-color-adjust: none; + background-color: Highlight; + color: HighlightText; + } &::before { - /* we cannot achieve rounded corners with outline so we use box-shadow instead */ - box-shadow: 0 0 0 2px var(--highcontrast-assetlist-border-color-key-focus, var(--mod-assetlist-border-color-key-focus, var(--spectrum-assetlist-border-color-key-focus))) inset; + content: ""; + position: absolute; + inset-inline-start: 0; + inset-inline-end: 0; + block-size: 100%; + border-radius: var(--spectrum-corner-radius-100); + + /* outline clips so we use box-shadow instead */ + box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) var(--spectrum-focus-indicator-color) inset; } } } &.is-navigated { - /* gray background */ - background-color: var(--mod-assetlist-item-background-color-down, var(--spectrum-assetlist-item-background-color-down)); - + &, &:hover, &:focus { - background-color: var(--mod-assetlist-item-background-color-down, var(--spectrum-assetlist-item-background-color-down)); + background-color: var(--spectrum-gray-200); } } &.is-selected { - background-color: var(--highcontrast-assetlist-item-background-color-selected, var(--mod-assetlist-item-background-color-selected, var(--spectrum-assetlist-item-background-color-selected))); + background-color: var(--spectrum-assetlist-item-background-color-selected); + + @media (forced-colors: active) { + forced-color-adjust: none; + background-color: SelectedItem; + color: SelectedItemText; + } &:hover, &:focus { - background-color: var(--highcontrast-assetlist-item-background-color-selected-hover, var(--mod-assetlist-item-background-color-selected-hover, var(--spectrum-assetlist-item-background-color-selected-hover))); + background-color: var(--spectrum-assetlist-item-background-color-selected-hover); + + @media (forced-colors: active) { + forced-color-adjust: none; + background-color: SelectedItem; + color: SelectedItemText; + } } } } @@ -157,33 +138,14 @@ .spectrum-AssetList-itemChildIndicator { display: none; - transition: transform ease var(--mod-assetlist-child-indicator-animation, var(--spectrum-assetlist-child-indicator-animation)); + transition: transform ease var(--spectrum-animation-duration-100); transform: var(--spectrum-logical-rotation,); } .spectrum-AssetList-itemLabel { flex: 1; - padding-inline-start: var(--mod-assetlist-item-label-padding-inline-start, var(--spectrum-assetlist-item-label-padding-inline-start)); - + padding-inline-start: var(--spectrum-spacing-100); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } - -@media (forced-colors: active) { - .spectrum-AssetList-item { - --highcontrast-assetlist-border-color-key-focus: Highlight; - --highcontrast-assetlist-item-background-color-hover: Highlight; - --highcontrast-assetlist-item-background-color-selected-hover: Highlight; - --highcontrast-assetlist-label-color: ButtonText; - --highcontrast-assetlist-item-background-color-selected: SelectedItem; - - forced-color-adjust: none; - - &:hover, - &.is-selected, - &.is-navigated { - --highcontrast-assetlist-label-color: HighlightText; - } - } -} diff --git a/components/assetlist/stories/assetlist.stories.js b/components/assetlist/stories/assetlist.stories.js index 4f3bbce7757..23936f901da 100644 --- a/components/assetlist/stories/assetlist.stories.js +++ b/components/assetlist/stories/assetlist.stories.js @@ -1,8 +1,9 @@ import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import { AssetListGroup } from "./assetlist.test.js"; + import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; -import { AssetListGroup } from "./assetlist.test.js"; /** * A selectable list of assets, often used inside of miller columns. @@ -12,9 +13,56 @@ export default { component: "AssetList", argTypes: { items: { table: { disable: true } }, + isSelectable: { + name: "Selectable", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Component", + }, + control: "boolean", + }, }, args: { rootClass: "spectrum-AssetList", + isSelectable: false, + items: [ + { + image: "example-ava.png", + label: "Shantanu.jpg", + isSelectable: true, + ariaLabelledBy: "assetitemlabel-1", + checkboxId: "checkbox-1" + }, + { + iconName: "Document", + iconSet: "workflow", + label: "Resource allocation documentation should truncate", + isSelectable: true, + ariaLabelledby: "assetitemlabel-2", + checkboxId: "checkbox-2", + }, + { + iconName: "Folder", + iconSet: "workflow", + label: "Front-end Projects", + isSelectable: true, + isBranch: true, + isSelected: true, + ariaLabelledby: "assetitemlabel-3", + checkboxId: "checkbox-3", + }, + { + iconName: "Folder", + iconSet: "workflow", + label: "Downloads", + isSelectable: true, + isBranch: true, + isNavigated: true, + ariaLabelledby: "assetitemlabel-4", + checkboxId: "checkbox-4", + }, + ], }, parameters: { actions: { @@ -23,53 +71,14 @@ export default { packageJson, metadata, status: { - type: "unmigrated", + type: "migrated", }, }, - tags: ["unmigrated"], + tags: ["migrated"], }; export const Default = AssetListGroup.bind({}); -Default.args = { - items: [ - { - image: "example-ava.png", - label: "Shantanu.jpg", - isSelectable: true, - ariaLabelledBy: "assetitemlabel-1", - checkboxId: "checkbox-1" - }, - { - iconName: "Document", - iconSet: "workflow", - label: "Resource allocation documentation should truncate", - isSelectable: true, - ariaLabelledby: "assetitemlabel-2", - checkboxId: "checkbox-2", - }, - { - iconName: "Folder", - iconSet: "workflow", - label: "Front-end Projects", - isSelectable: true, - isBranch: true, - isSelected: true, - ariaLabelledby: "assetitemlabel-3", - checkboxId: "checkbox-3", - }, - { - iconName: "Folder", - iconSet: "workflow", - label: "Downloads", - isSelectable: true, - isBranch: true, - isSelected: false, - isNavigated: true, - ariaLabelledby: "assetitemlabel-4", - checkboxId: "checkbox-4", - }, - ], -}; +Default.args = {}; // ********* VRT ONLY ********* // export const WithForcedColors = AssetListGroup.bind({}); diff --git a/components/assetlist/stories/assetlist.test.js b/components/assetlist/stories/assetlist.test.js index 24f14f7971e..d92fc29aa2a 100644 --- a/components/assetlist/stories/assetlist.test.js +++ b/components/assetlist/stories/assetlist.test.js @@ -1,4 +1,73 @@ import { Variants } from "@spectrum-css/preview/decorators"; import { Template } from "./template.js"; -export const AssetListGroup = Variants({ Template }); +const items = [ + { + image: "example-ava.png", + label: "Shantanu.jpg", + ariaLabelledBy: "assetitemlabel-1", + checkboxId: "checkbox-1" + }, + { + iconName: "Document", + iconSet: "workflow", + label: "Resource allocation documentation should truncate", + ariaLabelledby: "assetitemlabel-2", + checkboxId: "checkbox-2", + }, + { + iconName: "Folder", + iconSet: "workflow", + label: "Front-end projects", + ariaLabelledby: "assetitemlabel-3", + checkboxId: "checkbox-3", + isBranch: true, + }, + { + iconName: "Folder", + iconSet: "workflow", + label: "Downloads", + ariaLabelledby: "assetitemlabel-4", + checkboxId: "checkbox-4", + isBranch: true, + }, +]; +export const AssetListGroup = Variants({ + Template, + testData: [ + { + testHeading: "Default", + items, + }, + { + testHeading: "Selectable", + isSelectable: true, + } + ], + stateData: [{ + testHeading: "Navigated", + items: items.map((item, idx) => ({ ...item, isNavigated: idx === 2 })), + }, { + testHeading: "Selected", + items: items.map((item, idx) => ({ ...item, isSelected: idx < 2 })), + }, { + testHeading: "Focused", + items: items.map((item, idx) => ({ + ...item, + isFocused: idx % 2 + })), + }, { + testHeading: "Hovered", + items: items.map((item) => ({ + ...item, + isHovered: true + })), + }, { + testHeading: "Hovered + selected", + items: items.map((item) => ({ + ...item, + isSelected: true, + isHovered: true + })), + }] +}); diff --git a/components/assetlist/stories/template.js b/components/assetlist/stories/template.js index f5c6d9731af..d0b5bf0620e 100644 --- a/components/assetlist/stories/template.js +++ b/components/assetlist/stories/template.js @@ -20,6 +20,8 @@ export const AssetListItem = ({ isSelectable = false, isSelected = false, isBranch = false, + isFocused = false, + isHovered = false, onclick = () => {}, } = {}, context = {}) => html`
  • ({ ...a, [c]: true }), {}), })} > - ${columns.map(({ items }) => { + ${columns.map(({ items, ...args } = { items: [] }) => { return html`
    - ${AssetList({ items }, context)} + ${AssetList({ ...args, items }, context)}
    `; })}