diff --git a/.changeset/beige-dragons-tickle.md b/.changeset/beige-dragons-tickle.md new file mode 100644 index 00000000000..1f5e66fd674 --- /dev/null +++ b/.changeset/beige-dragons-tickle.md @@ -0,0 +1,49 @@ +--- +"@spectrum-css/illustratedmessage": major +"@spectrum-css/dropzone": major +--- + +# S2 Illustrated Message Migration + +This migration contains new tokens for t-shirt sizes (S, M, L), vertical and horizontal orientation along with their maximum width, illustration sizes, and content spacing. Dropzone `--mod` names are renamed to match the semantic tokens in illustrated message. + +## Illustrated Message + +New properties +`--spectrum-illustrated-message-heading-to-description` +`--spectrum-illustrated-message-illustration-to-heading` +`--spectrum-illustrated-message-illustration-to-content` +`--spectrum-illustrated-message-description-to-action` +`--spectrum-illustrated-message-illustration-color` +`--spectrum-illustrated-message-illustration-size` +`--spectrum-illustrated-message-small-cjk-title-font-size` +`--spectrum-illustrated-message-large-cjk-title-font-size` +`--spectrum-illustrated-message-large-body-font-size` +`--spectrum-illustrated-message-horizontal-maximum-width` + +New mods +`--mod-illustrated-message-description-to-action` +`--mod-illustrated-message-heading-to-description` +`--mod-illustrated-message-illustration-to-content` +`--mod-illustrated-message-horizontal-maximum-width` + +Removed properties +`--spectrum-illustrated-message-title-to-heading` +`--spectrum-illustrated-message-description-max-inline-size` +`--spectrum-illustrated-message-heading-max-inline-size` +`--spectrum-illustrated-message-illustration-accent-color` +`--mod-illustrated-message-illustration-accent-color` +`--highcontrast-illustrated-message-illustration-accent-color` + +## Dropzone + +New mods +`--mod-drop-zone-body-to-action` +`--mod-drop-zone-illustration-to-title` + +## Dropzone nested mods + +Renamed mods +`--mod-illustrated-message-title-to-heading` > `--mod-illustrated-message-illustration-to-heading` +`--mod-illustrated-message-heading-to-body` > `--mod-illustrated-message-heading-to-description` +`--mod-illustrated-message-content-maximum-width` > `--mod-illustrated-message-vertical-maximum-width` diff --git a/components/dropzone/dist/metadata.json b/components/dropzone/dist/metadata.json index 2912a8fc239..dbbe449c8a9 100644 --- a/components/dropzone/dist/metadata.json +++ b/components/dropzone/dist/metadata.json @@ -24,6 +24,7 @@ "--mod-drop-zone-body-font-style", "--mod-drop-zone-body-font-weight", "--mod-drop-zone-body-line-height", + "--mod-drop-zone-body-to-action", "--mod-drop-zone-border-color", "--mod-drop-zone-border-color-hover", "--mod-drop-zone-border-style", @@ -70,6 +71,7 @@ "--spectrum-drop-zone-body-font-weight", "--spectrum-drop-zone-body-line-height", "--spectrum-drop-zone-body-size", + "--spectrum-drop-zone-body-to-action", "--spectrum-drop-zone-border-color", "--spectrum-drop-zone-border-color-hover", "--spectrum-drop-zone-border-width", @@ -98,6 +100,7 @@ "--spectrum-drop-zone-illustration-color", "--spectrum-drop-zone-illustration-color-hover", "--spectrum-drop-zone-illustration-to-heading", + "--spectrum-drop-zone-illustration-to-title", "--spectrum-drop-zone-padding", "--spectrum-drop-zone-title-size", "--spectrum-drop-zone-width" @@ -125,6 +128,8 @@ "--spectrum-line-height-100", "--spectrum-neutral-visual-color", "--spectrum-sans-font-family-stack", + "--spectrum-spacing-200", + "--spectrum-spacing-300", "--spectrum-spacing-400", "--spectrum-spacing-75", "--spectrum-white" @@ -133,7 +138,6 @@ "--mod-actionbutton-edge-to-text", "--mod-actionbutton-font-size", "--mod-actionbutton-label-color", - "--mod-illustrated-message-content-maximum-width", "--mod-illustrated-message-description-color", "--mod-illustrated-message-description-font-family", "--mod-illustrated-message-description-font-size", @@ -141,18 +145,19 @@ "--mod-illustrated-message-description-font-weight", "--mod-illustrated-message-description-line-height", "--mod-illustrated-message-description-position", + "--mod-illustrated-message-description-to-action", "--mod-illustrated-message-description-z-index", "--mod-illustrated-message-display", - "--mod-illustrated-message-heading-to-body", "--mod-illustrated-message-heading-to-description", "--mod-illustrated-message-illustration-color", + "--mod-illustrated-message-illustration-to-heading", "--mod-illustrated-message-title-color", "--mod-illustrated-message-title-font-family", "--mod-illustrated-message-title-font-size", "--mod-illustrated-message-title-font-style", "--mod-illustrated-message-title-font-weight", "--mod-illustrated-message-title-line-height", - "--mod-illustrated-message-title-to-heading" + "--mod-illustrated-message-vertical-maximum-width" ], "high-contrast": [ "--highcontrast-drop-zone-border-color-hover", diff --git a/components/dropzone/index.css b/components/dropzone/index.css index c19618c0ee0..4f0f4fb322e 100644 --- a/components/dropzone/index.css +++ b/components/dropzone/index.css @@ -12,162 +12,187 @@ */ .spectrum-DropZone { - --spectrum-drop-zone-padding: var(--spectrum-spacing-400); - --spectrum-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); - --spectrum-drop-zone-heading-to-body: var(--spectrum-spacing-75); - - --spectrum-drop-zone-border-width: var(--spectrum-border-width-200); - --spectrum-drop-zone-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-drop-zone-border-color: var(--spectrum-gray-200); - - --spectrum-drop-zone-heading-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-drop-zone-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --spectrum-drop-zone-heading-font-style: var(--spectrum-heading-sans-serif-font-style); - --spectrum-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size); - --spectrum-drop-zone-heading-line-height: var(--spectrum-heading-line-height); - --spectrum-drop-zone-heading-color: var(--spectrum-heading-color); - - --spectrum-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-drop-zone-body-font-weight: var(--spectrum-body-sans-serif-font-weight); - --spectrum-drop-zone-body-font-style: var(--spectrum-body-sans-serif-font-style); - --spectrum-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size); - --spectrum-drop-zone-body-line-height: var(--spectrum-body-line-height); - --spectrum-drop-zone-body-color: var(--spectrum-body-color); - - --spectrum-drop-zone-background-color: var(--spectrum-drop-zone-background-color-rgb); - --spectrum-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); - --spectrum-drop-zone-illustration-color: var(--spectrum-neutral-visual-color); - --spectrum-drop-zone-illustration-color-hover: var(--spectrum-accent-visual-color); - - /* Filled styles */ - --spectrum-drop-zone-content-height: var(--spectrum-component-height-300); - --spectrum-drop-zone-content-max-width: var(--spectrum-drop-zone-content-maximum-width); - --spectrum-drop-zone-content-edge-to-text: var(--spectrum-component-edge-to-text-300); - --spectrum-drop-zone-content-top-to-text: var(--spectrum-component-top-to-text-300); - --spectrum-drop-zone-content-bottom-to-text: var(--spectrum-component-bottom-to-text-300); - - --spectrum-drop-zone-content-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-drop-zone-content-font-weight: var(--spectrum-bold-font-weight); - --spectrum-drop-zone-content-font-style: var(--spectrum-default-font-style); - --spectrum-drop-zone-content-font-size: var(--spectrum-font-size-300); - --spectrum-drop-zone-content-line-height: var(--spectrum-line-height-100); - - --spectrum-drop-zone-content-background-color: var(--spectrum-accent-visual-color); - --spectrum-drop-zone-content-color: var(--spectrum-white); - - /* Settings for a nested illustrated message */ - --mod-illustrated-message-content-maximum-width: var(--mod-drop-zone-content-maximum-width, var(--spectrum-drop-zone-content-maximum-width)); - --mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color, var(--spectrum-drop-zone-illustration-color)); - --mod-illustrated-message-title-to-heading: var(--mod-drop-zone-illustration-to-heading, var(--spectrum-drop-zone-illustration-to-heading)); - --mod-illustrated-message-heading-to-body: var(--mod-drop-zone-heading-to-body, var(--spectrum-drop-zone-heading-to-body)); - --mod-illustrated-message-title-font-family: var(--mod-drop-zone-heading-font-family, var(--spectrum-drop-zone-heading-font-family)); - --mod-illustrated-message-title-font-weight: var(--mod-drop-zone-heading-font-weight, var(--spectrum-drop-zone-heading-font-weight)); - --mod-illustrated-message-title-font-style: var(--mod-drop-zone-heading-font-style, var(--spectrum-drop-zone-heading-font-style)); - --mod-illustrated-message-title-font-size: var(--mod-drop-zone-heading-font-size, var(--spectrum-drop-zone-heading-font-size)); - --mod-illustrated-message-title-line-height: var(--mod-drop-zone-heading-line-height, var(--spectrum-drop-zone-heading-line-height)); - --mod-illustrated-message-title-color: var(--mod-drop-zone-heading-color, var(--spectrum-drop-zone-heading-color)); - --mod-illustrated-message-description-position: relative; - --mod-illustrated-message-description-z-index: 10; - --mod-illustrated-message-heading-to-description: 0; - --mod-illustrated-message-description-font-family: var(--mod-drop-zone-body-font-family, var(--spectrum-drop-zone-body-font-family)); - --mod-illustrated-message-description-font-weight: var(--mod-drop-zone-body-font-weight, var(--spectrum-drop-zone-body-font-weight)); - --mod-illustrated-message-description-font-style: var(--mod-drop-zone-body-font-style, var(--spectrum-drop-zone-body-font-style)); - --mod-illustrated-message-description-font-size: var(--mod-drop-zone-body-font-size, var(--spectrum-drop-zone-body-font-size)); - --mod-illustrated-message-description-line-height: var(--mod-drop-zone-body-line-height, var(--spectrum-drop-zone-body-line-height)); - --mod-illustrated-message-description-color: var(--mod-drop-zone-body-color, var(--spectrum-drop-zone-body-color)); - - /* Settings for a nested actionbutton */ - --mod-actionbutton-font-size: var(--mod-drop-zone-content-font-size, var(--spectrum-drop-zone-content-font-size)); - --mod-actionbutton-label-color: var(--mod-drop-zone-content-color, var(--spectrum-drop-zone-content-color)); - --mod-actionbutton-edge-to-text: var(--mod-drop-zone-content-edge-to-text, var(--spectrum-drop-zone-content-edge-to-text)); - - /* cjk language support */ - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-drop-zone-heading-font-size: var(--spectrum-drop-zone-cjk-title-size); - } + --spectrum-drop-zone-padding: var(--spectrum-spacing-400); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-heading-to-body: var(--spectrum-spacing-75); + + --spectrum-drop-zone-border-width: var(--spectrum-border-width-200); + --spectrum-drop-zone-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-drop-zone-border-color: var(--spectrum-gray-200); + + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-heading-font-family: var(--spectrum-sans-font-family-stack); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-heading-font-style: var(--spectrum-heading-sans-serif-font-style); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-heading-line-height: var(--spectrum-heading-line-height); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-heading-color: var(--spectrum-heading-color); + + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-body-font-weight: var(--spectrum-body-sans-serif-font-weight); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-body-font-style: var(--spectrum-body-sans-serif-font-style); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-body-line-height: var(--spectrum-body-line-height); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-body-color: var(--spectrum-body-color); + + --spectrum-drop-zone-background-color: var(--spectrum-drop-zone-background-color-rgb); + --spectrum-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-illustration-color: var(--spectrum-neutral-visual-color); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-illustration-color-hover: var(--spectrum-accent-visual-color); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-illustration-to-title: var(--spectrum-spacing-200); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-body-to-action: var(--spectrum-spacing-300); + + /* Filled styles */ + --spectrum-drop-zone-content-height: var(--spectrum-component-height-300); + --spectrum-drop-zone-content-max-width: var(--spectrum-drop-zone-content-maximum-width); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-content-edge-to-text: var(--spectrum-component-edge-to-text-300); + --spectrum-drop-zone-content-top-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-drop-zone-content-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + + --spectrum-drop-zone-content-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-drop-zone-content-font-weight: var(--spectrum-bold-font-weight); + --spectrum-drop-zone-content-font-style: var(--spectrum-default-font-style); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-content-font-size: var(--spectrum-font-size-300); + --spectrum-drop-zone-content-line-height: var(--spectrum-line-height-100); + + --spectrum-drop-zone-content-background-color: var(--spectrum-accent-visual-color); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-content-color: var(--spectrum-white); + + /* Settings for a nested illustrated message */ + --mod-illustrated-message-vertical-maximum-width: var(--mod-drop-zone-content-maximum-width, var(--spectrum-drop-zone-content-maximum-width)); + --mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color, var(--spectrum-drop-zone-illustration-color)); + --mod-illustrated-message-illustration-to-heading: var(--mod-drop-zone-illustration-to-heading, var(--spectrum-drop-zone-illustration-to-heading)); + --mod-illustrated-message-heading-to-description: var(--mod-drop-zone-heading-to-body, var(--spectrum-drop-zone-heading-to-body)); + --mod-illustrated-message-description-to-action: var(--mod-drop-zone-body-to-action, var(--spectrum-drop-zone-body-to-action)); + --mod-illustrated-message-title-font-family: var(--mod-drop-zone-heading-font-family, var(--spectrum-drop-zone-heading-font-family)); + --mod-illustrated-message-title-font-weight: var(--mod-drop-zone-heading-font-weight, var(--spectrum-drop-zone-heading-font-weight)); + --mod-illustrated-message-title-font-style: var(--mod-drop-zone-heading-font-style, var(--spectrum-drop-zone-heading-font-style)); + --mod-illustrated-message-title-font-size: var(--mod-drop-zone-heading-font-size, var(--spectrum-drop-zone-heading-font-size)); + --mod-illustrated-message-title-line-height: var(--mod-drop-zone-heading-line-height, var(--spectrum-drop-zone-heading-line-height)); + --mod-illustrated-message-title-color: var(--mod-drop-zone-heading-color, var(--spectrum-drop-zone-heading-color)); + --mod-illustrated-message-description-position: relative; + --mod-illustrated-message-description-z-index: 10; + --mod-illustrated-message-description-font-family: var(--mod-drop-zone-body-font-family, var(--spectrum-drop-zone-body-font-family)); + --mod-illustrated-message-description-font-weight: var(--mod-drop-zone-body-font-weight, var(--spectrum-drop-zone-body-font-weight)); + --mod-illustrated-message-description-font-style: var(--mod-drop-zone-body-font-style, var(--spectrum-drop-zone-body-font-style)); + --mod-illustrated-message-description-font-size: var(--mod-drop-zone-body-font-size, var(--spectrum-drop-zone-body-font-size)); + --mod-illustrated-message-description-line-height: var(--mod-drop-zone-body-line-height, var(--spectrum-drop-zone-body-line-height)); + --mod-illustrated-message-description-color: var(--mod-drop-zone-body-color, var(--spectrum-drop-zone-body-color)); + + /* Settings for a nested actionbutton */ + --mod-actionbutton-font-size: var(--mod-drop-zone-content-font-size, var(--spectrum-drop-zone-content-font-size)); + --mod-actionbutton-label-color: var(--mod-drop-zone-content-color, var(--spectrum-drop-zone-content-color)); + --mod-actionbutton-edge-to-text: var(--mod-drop-zone-content-edge-to-text, var(--spectrum-drop-zone-content-edge-to-text)); + + /* cjk language support */ + &:lang(ja), + &:lang(zh), + &:lang(ko) { + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-heading-font-size: var(--spectrum-drop-zone-cjk-title-size); + } } .spectrum-DropZone { - box-sizing: border-box; - inline-size: var(--mod-drop-zone-width, var(--spectrum-drop-zone-width)); - padding: calc(var(--mod-drop-zone-padding, var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width))); - text-align: center; - border-color: var(--mod-drop-zone-border-color, var(--spectrum-drop-zone-border-color)); - border-width: var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width)); - border-radius: var(--mod-drop-zone-corner-radius, var(--spectrum-drop-zone-corner-radius)); - border-style: var(--mod-drop-zone-border-style, dashed); - background-size: cover; - background-color: var(--mod-drop-zone-background-color, var(--spectrum-drop-zone-background-color)); - - &.is-dragged { - /* @deprecation --mod-drop-zone-border-style--dragged will be removed during the S2 migration; please update your code to --mod-drop-zone-border-style-dragged */ - --mod-drop-zone-border-style: var(--mod-drop-zone-border-style--dragged, var(--mod-drop-zone-border-style-dragged, solid)); - --mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity, var(--spectrum-drop-zone-background-color-opacity))); - --spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))); - - /* Updated values for a nested illustrated message when state changes */ - --mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color-hover, var(--spectrum-drop-zone-illustration-color-hover)); - } - - &.is-filled { - /* note: the below applies to .is-filled.is-dragged but works here b/c dragged is the only state applying background color */ - --mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity-filled, var(--spectrum-drop-zone-background-color-opacity-filled))); - - /* Updated values for a nested illustrated message when state changes */ - --mod-illustrated-message-display: none; - } - - &.is-filled.is-dragged { - --mod-drop-zone-content-display: flex; - } - - &:focus-visible { - --mod-drop-zone-border-style: solid; - --spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))); - - outline: 0; - } + box-sizing: border-box; + inline-size: var(--mod-drop-zone-width, var(--spectrum-drop-zone-width)); + padding: calc(var(--mod-drop-zone-padding, var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width))); + text-align: center; + border-color: var(--mod-drop-zone-border-color, var(--spectrum-drop-zone-border-color)); + border-width: var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width)); + border-radius: var(--mod-drop-zone-corner-radius, var(--spectrum-drop-zone-corner-radius)); + border-style: var(--mod-drop-zone-border-style, dashed); + background-size: cover; + background-color: var(--mod-drop-zone-background-color, var(--spectrum-drop-zone-background-color)); + + &.is-dragged { + /* @deprecation --mod-drop-zone-border-style--dragged will be removed during the S2 migration; please update your code to --mod-drop-zone-border-style-dragged */ + --mod-drop-zone-border-style: var(--mod-drop-zone-border-style--dragged, var(--mod-drop-zone-border-style-dragged, solid)); + --mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity, var(--spectrum-drop-zone-background-color-opacity))); + --spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))); + + /* Updated values for a nested illustrated message when state changes */ + --mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color-hover, var(--spectrum-drop-zone-illustration-color-hover)); + } + + &.is-filled { + /* note: the below applies to .is-filled.is-dragged but works here b/c dragged is the only state applying background color */ + --mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity-filled, var(--spectrum-drop-zone-background-color-opacity-filled))); + + /* Updated values for a nested illustrated message when state changes */ + --mod-illustrated-message-display: none; + } + + &.is-filled.is-dragged { + --mod-drop-zone-content-display: flex; + } + + &:focus-visible { + --mod-drop-zone-border-style: solid; + --spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))); + outline: 0; + } } .spectrum-DropZone-content { - display: var(--mod-drop-zone-content-display, none); - block-size: 100%; - align-items: center; - justify-content: center; - position: relative; - z-index: 10; + display: var(--mod-drop-zone-content-display, none); + block-size: 100%; + align-items: center; + justify-content: center; + position: relative; + z-index: 10; } .spectrum-DropZone-button { - box-sizing: border-box; - border: none; - block-size: var(--mod-drop-zone-content-height, var(--spectrum-drop-zone-content-height)); - max-inline-size: var(--mod-drop-zone-content-max-width, var(--spectrum-drop-zone-content-max-width)); - padding-block-start: var(--mod-drop-zone-content-top-to-text, var(--spectrum-drop-zone-content-top-to-text)); - padding-block-end: var(--mod-drop-zone-content-bottom-to-text, var(--spectrum-drop-zone-content-bottom-to-text)); - background-color: var(--mod-drop-zone-content-background-color, var(--spectrum-drop-zone-content-background-color)); - - font-family: var(--mod-drop-zone-content-font-family, var(--spectrum-drop-zone-content-font-family)); - font-weight: var(--mod-drop-zone-content-font-weight, var(--spectrum-drop-zone-content-font-weight)); - font-style: var(--mod-drop-zone-content-font-style, var(--spectrum-drop-zone-content-font-style)); - line-height: var(--mod-drop-zone-content-line-height, var(--spectrum-drop-zone-content-line-height)); - - &:hover, - &:focus { - background-color: var(--mod-drop-zone-content-background-color, var(--spectrum-drop-zone-content-background-color)); - } + box-sizing: border-box; + border: none; + block-size: var(--mod-drop-zone-content-height, var(--spectrum-drop-zone-content-height)); + max-inline-size: var(--mod-drop-zone-content-max-width, var(--spectrum-drop-zone-content-max-width)); + padding-block-start: var(--mod-drop-zone-content-top-to-text, var(--spectrum-drop-zone-content-top-to-text)); + padding-block-end: var(--mod-drop-zone-content-bottom-to-text, var(--spectrum-drop-zone-content-bottom-to-text)); + background-color: var(--mod-drop-zone-content-background-color, var(--spectrum-drop-zone-content-background-color)); + + font-family: var(--mod-drop-zone-content-font-family, var(--spectrum-drop-zone-content-font-family)); + font-weight: var(--mod-drop-zone-content-font-weight, var(--spectrum-drop-zone-content-font-weight)); + font-style: var(--mod-drop-zone-content-font-style, var(--spectrum-drop-zone-content-font-style)); + line-height: var(--mod-drop-zone-content-line-height, var(--spectrum-drop-zone-content-line-height)); + + &:hover, + &:focus { + background-color: var(--mod-drop-zone-content-background-color, var(--spectrum-drop-zone-content-background-color)); + } } /********* WHCM *********/ @media (forced-colors: active) { - .spectrum-DropZone { - --highcontrast-drop-zone-illustration-color: CanvasText; + .spectrum-DropZone { + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --highcontrast-drop-zone-illustration-color: CanvasText; - --highcontrast-drop-zone-border-color-hover: Highlight; + --highcontrast-drop-zone-border-color-hover: Highlight; - /* Updated values for a nested illustrated message when in a high contrast state */ - --highcontrast-illustrated-message-illustration-color: var(--highcontrast-drop-zone-illustration-color); - } + /* Updated values for a nested illustrated message when in a high contrast state */ + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --highcontrast-illustrated-message-illustration-color: var(--highcontrast-drop-zone-illustration-color); + } } diff --git a/components/dropzone/stories/dropzone.stories.js b/components/dropzone/stories/dropzone.stories.js index 9d0d7e4c3d2..7bca0bd87a7 100644 --- a/components/dropzone/stories/dropzone.stories.js +++ b/components/dropzone/stories/dropzone.stories.js @@ -27,12 +27,16 @@ export default { if: { arg: "isDragged", truthy: true }, }, ...IllustratedMessage.argTypes, + hasButtons: { table: { disable: true }}, + isHorizontal: { table: { disable: true }}, label: ActionButton.argTypes.label, }, args: { rootClass: "spectrum-DropZone", isDragged: false, isFilled: false, + title: "Drag and drop your file", + description: "Or, select a file from your computer.", }, parameters: { design: { @@ -46,14 +50,12 @@ export default { export const Default = DropzoneGroup.bind({}); Default.args = { - heading: "Drag and drop your file", description: [ () => { return html`${Link({ url: "#", text: "Select a file" })} from your computer.`; }, ], label: "Drop file to replace", - useAccentColor: true, customStyles: { width: "300px", }, diff --git a/components/dropzone/stories/template.js b/components/dropzone/stories/template.js index 3363790eccc..b9d6013a0b0 100644 --- a/components/dropzone/stories/template.js +++ b/components/dropzone/stories/template.js @@ -14,7 +14,7 @@ export const Template = ({ isFilled = false, customClasses = [], customStyles = {}, - heading, + title, description, label, id = getRandomId("dropzone"), @@ -32,7 +32,7 @@ export const Template = ({ tabindex="0" style=${styleMap(customStyles)} > - ${IllustratedMessage({ heading, description }, context)} + ${IllustratedMessage({ title, description }, context)}
${ActionButton( diff --git a/components/illustratedmessage/dist/metadata.json b/components/illustratedmessage/dist/metadata.json index 313c6d71885..12705f6822e 100644 --- a/components/illustratedmessage/dist/metadata.json +++ b/components/illustratedmessage/dist/metadata.json @@ -2,7 +2,18 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-IllustratedMessage", - ".spectrum-IllustratedMessage-accent", + ".spectrum-IllustratedMessage--horizontal", + ".spectrum-IllustratedMessage--horizontal .spectrum-IllustratedMessage-illustration", + ".spectrum-IllustratedMessage--sizeL", + ".spectrum-IllustratedMessage--sizeL:lang(ja)", + ".spectrum-IllustratedMessage--sizeL:lang(ko)", + ".spectrum-IllustratedMessage--sizeL:lang(zh)", + ".spectrum-IllustratedMessage--sizeS", + ".spectrum-IllustratedMessage--sizeS:lang(ja)", + ".spectrum-IllustratedMessage--sizeS:lang(ko)", + ".spectrum-IllustratedMessage--sizeS:lang(zh)", + ".spectrum-IllustratedMessage-actions", + ".spectrum-IllustratedMessage-content", ".spectrum-IllustratedMessage-description", ".spectrum-IllustratedMessage-heading", ".spectrum-IllustratedMessage-illustration", @@ -11,23 +22,24 @@ ".spectrum-IllustratedMessage:lang(zh)" ], "modifiers": [ - "--mod-illustrated-message-content-maximum-width", "--mod-illustrated-message-description-color", "--mod-illustrated-message-description-font-family", "--mod-illustrated-message-description-font-size", "--mod-illustrated-message-description-font-style", "--mod-illustrated-message-description-font-weight", "--mod-illustrated-message-description-line-height", - "--mod-illustrated-message-description-max-inline-size", "--mod-illustrated-message-description-pointer-events", "--mod-illustrated-message-description-position", + "--mod-illustrated-message-description-to-action", "--mod-illustrated-message-description-z-index", "--mod-illustrated-message-display", - "--mod-illustrated-message-heading-max-inline-size", - "--mod-illustrated-message-heading-to-body", "--mod-illustrated-message-heading-to-description", - "--mod-illustrated-message-illustration-accent-color", + "--mod-illustrated-message-horizontal-maximum-width", + "--mod-illustrated-message-illustrated-inline-size", + "--mod-illustrated-message-illustration-block-size", "--mod-illustrated-message-illustration-color", + "--mod-illustrated-message-illustration-size", + "--mod-illustrated-message-illustration-to-heading", "--mod-illustrated-message-pointer-events", "--mod-illustrated-message-title-color", "--mod-illustrated-message-title-font-family", @@ -35,50 +47,55 @@ "--mod-illustrated-message-title-font-style", "--mod-illustrated-message-title-font-weight", "--mod-illustrated-message-title-line-height", - "--mod-illustrated-message-title-to-heading" + "--mod-illustrated-message-vertical-maximum-width" ], "component": [ - "--spectrum-illustrated-message-body-size", - "--spectrum-illustrated-message-cjk-title-size", "--spectrum-illustrated-message-description-color", "--spectrum-illustrated-message-description-font-family", "--spectrum-illustrated-message-description-font-size", "--spectrum-illustrated-message-description-font-style", "--spectrum-illustrated-message-description-font-weight", "--spectrum-illustrated-message-description-line-height", - "--spectrum-illustrated-message-description-max-inline-size", - "--spectrum-illustrated-message-heading-max-inline-size", + "--spectrum-illustrated-message-description-to-action", "--spectrum-illustrated-message-heading-to-description", - "--spectrum-illustrated-message-illustration-accent-color", + "--spectrum-illustrated-message-horizontal-maximum-width", "--spectrum-illustrated-message-illustration-color", - "--spectrum-illustrated-message-maximum-width", + "--spectrum-illustrated-message-illustration-size", + "--spectrum-illustrated-message-illustration-to-content", + "--spectrum-illustrated-message-illustration-to-heading", + "--spectrum-illustrated-message-large-body-font-size", + "--spectrum-illustrated-message-large-cjk-title-font-size", + "--spectrum-illustrated-message-large-title-font-size", + "--spectrum-illustrated-message-medium-body-font-size", + "--spectrum-illustrated-message-medium-cjk-title-font-size", + "--spectrum-illustrated-message-medium-title-font-size", + "--spectrum-illustrated-message-small-body-font-size", + "--spectrum-illustrated-message-small-cjk-title-font-size", + "--spectrum-illustrated-message-small-title-font-size", "--spectrum-illustrated-message-title-color", "--spectrum-illustrated-message-title-font-family", "--spectrum-illustrated-message-title-font-size", "--spectrum-illustrated-message-title-font-style", "--spectrum-illustrated-message-title-font-weight", "--spectrum-illustrated-message-title-line-height", - "--spectrum-illustrated-message-title-size", - "--spectrum-illustrated-message-title-to-heading" + "--spectrum-illustrated-message-vertical-maximum-width" ], "global": [ - "--spectrum-accent-visual-color", "--spectrum-body-color", - "--spectrum-body-line-height", "--spectrum-body-sans-serif-font-style", "--spectrum-body-sans-serif-font-weight", "--spectrum-heading-color", - "--spectrum-heading-line-height", - "--spectrum-heading-sans-serif-font-style", - "--spectrum-heading-sans-serif-font-weight", - "--spectrum-neutral-visual-color", + "--spectrum-line-height-200", + "--spectrum-neutral-content-color-default", "--spectrum-sans-font-family-stack", - "--spectrum-spacing-400", - "--spectrum-spacing-75" + "--spectrum-spacing-100", + "--spectrum-spacing-200", + "--spectrum-spacing-300", + "--spectrum-spacing-75", + "--spectrum-title-line-height", + "--spectrum-title-sans-serif-font-style", + "--spectrum-title-sans-serif-font-weight" ], - "passthroughs": [], - "high-contrast": [ - "--highcontrast-illustrated-message-illustration-accent-color", - "--highcontrast-illustrated-message-illustration-color" - ] + "passthroughs": ["--mod-buttongroup-justify-content"], + "high-contrast": ["--highcontrast-illustrated-message-illustration-color"] } diff --git a/components/illustratedmessage/index.css b/components/illustratedmessage/index.css index 6b588504d11..39894c695a1 100644 --- a/components/illustratedmessage/index.css +++ b/components/illustratedmessage/index.css @@ -1,82 +1,96 @@ /*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ +Copyright 2024 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 -@media (forced-colors: active) { - .spectrum-IllustratedMessage { - --highcontrast-illustrated-message-illustration-color: CanvasText; - --highcontrast-illustrated-message-illustration-accent-color: Highlight; - } -} +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ .spectrum-IllustratedMessage { /* Size & Spacing */ - --spectrum-illustrated-message-description-max-inline-size: var(--spectrum-illustrated-message-maximum-width); - --spectrum-illustrated-message-heading-max-inline-size: var(--spectrum-illustrated-message-maximum-width); - --spectrum-illustrated-message-title-to-heading: var(--spectrum-spacing-400); --spectrum-illustrated-message-heading-to-description: var(--spectrum-spacing-75); + --spectrum-illustrated-message-illustration-to-heading: var(--spectrum-spacing-200); + --spectrum-illustrated-message-illustration-to-content: var(--spectrum-spacing-200); + --spectrum-illustrated-message-description-to-action: var(--spectrum-spacing-300); + /* @passthrough -- settings for nested button group */ + --mod-buttongroup-justify-content: center; /* Illustration */ - --spectrum-illustrated-message-illustration-color: var(--spectrum-neutral-visual-color); - --spectrum-illustrated-message-illustration-accent-color: var(--spectrum-accent-visual-color); + --spectrum-illustrated-message-illustration-color: var(--spectrum-neutral-content-color-default); + --spectrum-illustrated-message-illustration-size: 96px; /* Title */ --spectrum-illustrated-message-title-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-illustrated-message-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --spectrum-illustrated-message-title-font-style: var(--spectrum-heading-sans-serif-font-style); - --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-title-size); - --spectrum-illustrated-message-title-line-height: var(--spectrum-heading-line-height); + --spectrum-illustrated-message-title-font-weight: var(--spectrum-title-sans-serif-font-weight); + --spectrum-illustrated-message-title-font-style: var(--spectrum-title-sans-serif-font-style); + --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-medium-title-font-size); + --spectrum-illustrated-message-title-line-height: var(--spectrum-title-line-height); --spectrum-illustrated-message-title-color: var(--spectrum-heading-color); /* Description */ --spectrum-illustrated-message-description-font-family: var(--spectrum-sans-font-family-stack); --spectrum-illustrated-message-description-font-weight: var(--spectrum-body-sans-serif-font-weight); --spectrum-illustrated-message-description-font-style: var(--spectrum-body-sans-serif-font-style); - --spectrum-illustrated-message-description-font-size: var(--spectrum-illustrated-message-body-size); - --spectrum-illustrated-message-description-line-height: var(--spectrum-body-line-height); + --spectrum-illustrated-message-description-font-size: var(--spectrum-illustrated-message-medium-body-font-size); + --spectrum-illustrated-message-description-line-height: var(--spectrum-line-height-200); --spectrum-illustrated-message-description-color: var(--spectrum-body-color); - block-size: 100%; - - display: var(--mod-illustrated-message-display, flex); - flex-direction: column; - align-items: center; - justify-content: center; + /* CJK (Chinese, Japanese, and Korean) language support */ + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-medium-cjk-title-font-size); + } +} - text-align: center; - pointer-events: var(--mod-illustrated-message-pointer-events, auto); - max-inline-size: var(--mod-illustrated-message-content-maximum-width); +.spectrum-IllustratedMessage--sizeS { + --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-small-title-font-size); + --spectrum-illustrated-message-description-font-size: var(--spectrum-illustrated-message-small-body-font-size); - /* CJK (Chinese, Japanese, and Korean) language support */ &:lang(ja), &:lang(zh), &:lang(ko) { - --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-cjk-title-size); + --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-small-cjk-title-font-size); } } -.spectrum-IllustratedMessage-illustration { - margin-block-end: var(--mod-illustrated-message-title-to-heading, var(--spectrum-illustrated-message-title-to-heading)); - color: var(--highcontrast-illustrated-message-illustration-color, var(--mod-illustrated-message-illustration-color, var(--spectrum-illustrated-message-illustration-color))); - fill: currentColor; - stroke: currentColor; +.spectrum-IllustratedMessage--sizeL { + --spectrum-illustrated-message-illustration-size: 160px; + --spectrum-illustrated-message-illustration-to-heading: var(--spectrum-spacing-100); + --spectrum-illustrated-message-illustration-to-content: var(--spectrum-spacing-100); + --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-large-title-font-size); + --spectrum-illustrated-message-description-font-size: var(--spectrum-illustrated-message-large-body-font-size); + + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-large-cjk-title-font-size); + } } -.spectrum-IllustratedMessage-accent { - color: var(--highcontrast-illustrated-message-illustration-accent-color, var(--mod-illustrated-message-illustration-accent-color, var(--spectrum-illustrated-message-illustration-accent-color))); +.spectrum-IllustratedMessage { + block-size: 100%; + display: var(--mod-illustrated-message-display, grid); + grid-template-areas: + ". illustration ." + "body body body"; + text-align: center; + pointer-events: var(--mod-illustrated-message-pointer-events, auto); + max-inline-size: var(--mod-illustrated-message-vertical-maximum-width, var(--spectrum-illustrated-message-vertical-maximum-width)); +} - /* Safari 16.3 🐛🛠️: Repeated stroke/fill properties is a workaround for a currentcolor bug that was fixed in 16.4. */ +.spectrum-IllustratedMessage-illustration { + margin-block-end: var(--mod-illustrated-message-illustration-to-heading, var(--spectrum-illustrated-message-illustration-to-heading)); + color: var(--highcontrast-illustrated-message-illustration-color, var(--mod-illustrated-message-illustration-color, var(--spectrum-illustrated-message-illustration-color))); fill: currentColor; stroke: currentColor; + block-size: var(--mod-illustrated-message-illustration-block-size, var(--mod-illustrated-message-illustration-size, var(--spectrum-illustrated-message-illustration-size))); + inline-size: var(--mod-illustrated-message-illustrated-inline-size, var(--mod-illustrated-message-illustration-size, var(--spectrum-illustrated-message-illustration-size))); + grid-area: illustration; } .spectrum-IllustratedMessage-heading { @@ -88,9 +102,8 @@ color: var(--mod-illustrated-message-title-color, var(--spectrum-illustrated-message-title-color)); - max-inline-size: var(--mod-illustrated-message-heading-max-inline-size, var(--spectrum-illustrated-message-heading-max-inline-size)); margin-block-start: 0; - margin-block-end: var(--mod-illustrated-message-heading-to-body, 0); + margin-block-end: var(--mod-illustrated-message-heading-to-description, var(--spectrum-illustrated-message-heading-to-description)); } .spectrum-IllustratedMessage-description { @@ -106,7 +119,32 @@ color: var(--mod-illustrated-message-description-color, var(--spectrum-illustrated-message-description-color)); - max-inline-size: var(--mod-illustrated-message-description-max-inline-size, var(--spectrum-illustrated-message-description-max-inline-size)); - margin-block-start: var(--mod-illustrated-message-heading-to-description, var(--spectrum-illustrated-message-heading-to-description)); - margin-block-end: 0; + margin-block: 0; +} + +.spectrum-IllustratedMessage--horizontal { + --mod-buttongroup-justify-content: flex-start; + max-inline-size: var(--mod-illustrated-message-horizontal-maximum-width, var(--spectrum-illustrated-message-horizontal-maximum-width)); + text-align: start; + gap: var(--spectrum-illustrated-message-illustration-to-content); + grid-template-areas: "illustration body"; + align-items: center; + + .spectrum-IllustratedMessage-illustration { + margin-block-end: 0; + } +} + +.spectrum-IllustratedMessage-actions { + margin-block-start: var(--mod-illustrated-message-description-to-action, var(--spectrum-illustrated-message-description-to-action)); +} + +.spectrum-IllustratedMessage-content { + grid-area: body; +} + +@media (forced-colors: active) { + .spectrum-IllustratedMessage { + --highcontrast-illustrated-message-illustration-color: CanvasText; + } } diff --git a/components/illustratedmessage/stories/illustratedmessage.stories.js b/components/illustratedmessage/stories/illustratedmessage.stories.js index 2b00b063d31..794accd74da 100644 --- a/components/illustratedmessage/stories/illustratedmessage.stories.js +++ b/components/illustratedmessage/stories/illustratedmessage.stories.js @@ -1,20 +1,38 @@ -import { Template as Link } from "@spectrum-css/link/stories/template.js"; +import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { html } from "lit"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { IllustratedMessageGroup } from "./illustratedmessage.test.js"; import { Template } from "./template.js"; /** - * The Illustrated Message displays an illustration along with a heading and description. Optionally, part of the illustration can use an accent color. It can be used for status and errors, or as a call to action. For example, the Drop Zone component makes use of Illustrated Message as an area to drag and drop files. + * The Illustrated Message displays an illustration along with a heading, description and group of buttons. It can be used for status and errors, or as a call to action. For example, the Drop Zone component makes use of Illustrated Message as an area to drag and drop files. */ export default { title: "Illustrated message", component: "IllustratedMessage", argTypes: { - useAccentColor: { - name: "Illustration accent color", + title: { + name: "Title", + type: { name: "string" }, + table: { + type: { summary: "string" }, + category: "Content", + }, + control: "text", + }, + description: { + name: "Description", + type: { name: "string" }, + table: { + type: { summary: "string" }, + category: "Content", + }, + control: "text", + }, + isHorizontal: { + name: "Horizontal orientation", + description: "The default content orientation is vertical. Add the horizontal class to horizontally align the illustration with the content. The illustration will align left or right determined by the global direction of the text.", type: { name: "boolean" }, table: { type: { summary: "boolean" }, @@ -22,26 +40,33 @@ export default { }, control: "boolean", }, - heading: { - name: "Heading", - type: { name: "string" }, + size: { + name: "Size", + type: { name: "string", required: true }, table: { type: { summary: "string" }, - category: "Content", + category: "Component", }, - control: "text", + options: ["s", "m", "l"], + control: "select", }, - description: { - name: "Description", + hasButtons: { + name: "Show button group", + type: { name: "boolean" }, table: { - category: "Content", - disable: true, + type: { summary: "boolean" }, + category: "Component", }, + control: "boolean", }, }, args: { rootClass: "spectrum-IllustratedMessage", - useAccentColor: false, + isHorizontal: false, + size: "m", + hasButtons: true, + title: "Error 404: Page not found", + description: "This page isn't available. Try checking the URL or visit a different page.", }, parameters: { design: { @@ -50,32 +75,22 @@ export default { }, packageJson, metadata, + layout: "centered" }, }; export const Default = IllustratedMessageGroup.bind({}); -Default.args = { - heading: "Error 404: Page not found", - description: [ - "This page isn't available. Try checking the URL or visit a different page.", - ], -}; +Default.args = {}; /** - * To use the accent color, the class `.spectrum-IllustratedMessage-accent` can be added to element(s) within the illustration SVG. - */ -export const AccentColor = Template.bind({}); -AccentColor.tags = ["!dev"]; -AccentColor.args = { - heading: "Drag and drop your file", - description: [ - () => { - return html`${Link({ url: "#", text: "Select a file" })} from your computer.`; - }, - ], - useAccentColor: true, + * Horizontal illustrated messages are displayed on extra large screen sizes or in a menu. +*/ +export const Horizontal = Template.bind({}); +Horizontal.tags = ["!dev"]; +Horizontal.args = { + isHorizontal: true }; -AccentColor.parameters = { +Horizontal.parameters = { chromatic: { disableSnapshot: true }, }; @@ -88,3 +103,21 @@ WithForcedColors.parameters = { modes: disableDefaultModes }, }; +/** + * Illustrated message comes in three sizes: small, medium, and large. + * - Small illustrated message is typically used in quick or in-line actions. + * - The medium size is the default, and often used in panels. + * - The large size illustrated message is generally used in full page layouts and dialogs. + */ +export const Sizing = (args, context) => Sizes({ + Template: Template, + withBorder: false, + withHeader: false, + ...args +}, context); + +Sizing.args = {}; +Sizing.tags = ["!dev"]; +Sizing.parameters = { + chromatic: { disableSnapshot: true }, +}; diff --git a/components/illustratedmessage/stories/illustratedmessage.test.js b/components/illustratedmessage/stories/illustratedmessage.test.js index 2b7b85946a1..a6da8059521 100644 --- a/components/illustratedmessage/stories/illustratedmessage.test.js +++ b/components/illustratedmessage/stories/illustratedmessage.test.js @@ -1,25 +1,17 @@ -import { Template as Link } from "@spectrum-css/link/stories/template.js"; import { Variants } from "@spectrum-css/preview/decorators"; -import { html } from "lit"; import { Template } from "./template.js"; export const IllustratedMessageGroup = Variants({ Template, testData: [{ - heading: "Error 404: Page not found", - description: [ - "This page isn't available. Try checking the URL or visit a different page.", - ], - useAccentColor: false, - }, { - testHeading: "With accent color", - heading: "Drag and drop your file", - description: [ - () => { - return html`${Link({ url: "#", text: "Select a file" })} from your computer.`; - }, - ], - useAccentColor: true, - } + }, + { + testHeading: "Horizontal layout", + isHorizontal: true + }, + { + testHeading: "W/o button group", + hasButtons: false + }, ], }); diff --git a/components/illustratedmessage/stories/template.js b/components/illustratedmessage/stories/template.js index ace824ddae9..8ee5daa77b0 100644 --- a/components/illustratedmessage/stories/template.js +++ b/components/illustratedmessage/stories/template.js @@ -1,4 +1,4 @@ -import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; +import { Template as ButtonGroup } from "@spectrum-css/buttongroup/stories/template.js"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { when } from "lit/directives/when.js"; @@ -7,111 +7,76 @@ import "../index.css"; export const Template = ({ rootClass = "spectrum-IllustratedMessage", - heading, + title, description, customClasses = [], - useAccentColor = false, -} = {}, context = {}) => { + hasButtons = false, + isHorizontal = false, + size = "m", + customIllustration, +}) => { + const descriptionContent = Array.isArray(description) + ? description + : [() => html`${description}`]; return html` -
({ ...a, [c]: true }), {}), - })} - > - ${illustrationSvgMarkup(useAccentColor)} - ${when(heading, () => - Typography({ - semantics: "heading", - "size": "m", - customClasses: [`${rootClass}-heading`], - content: [heading], - }, context) +
({ ...a, [c]: true }), {}), + })} + > + ${customIllustration + ? customIllustration() + : illustrationSvgMarkup(size)} +
+ ${when( + title, + () => + html`

+ ${title} +

` )} - ${when(description, () => - Typography({ - semantics: "body", - "size": "s", - customClasses: [`${rootClass}-description`], - content: [ - ...description.map((c) => (typeof c === "function" ? c({}) : c)) - ], - }, context) + ${when( + descriptionContent, + () => + html`

+ ${descriptionContent.map((c) => + typeof c === "function" ? c({}) : c + )} +

` + )} + ${when(hasButtons, () => + ButtonGroup({ + size, + customClasses: ["spectrum-IllustratedMessage-actions"], + items: [ + { + variant: "secondary", + treatment: "outline", + label: "Remind me later", + }, + { + variant: "accent", + treatment: "fill", + label: "Rate now", + }, + ] + }) )}
- `; +
+`; }; -const illustrationSvgMarkup = (withAccentColorClass = false) => html` - - - - - - - - - - - - - - - -`; +const illustrationSvgMarkup = (size = "m") => { + const computedSize = size === "l" ? 160 : 96; + return html` + + + + `; +};