diff --git a/components/picker/package.json b/components/picker/package.json index e2921d80472..ff8e4b42cde 100644 --- a/components/picker/package.json +++ b/components/picker/package.json @@ -21,7 +21,7 @@ "@spectrum-css/icon": ">=3", "@spectrum-css/menu": ">=4", "@spectrum-css/popover": ">=5 <=6", - "@spectrum-css/tokens": ">=10.0.0" + "@spectrum-css/tokens": ">=11.0.0" }, "devDependencies": { "@spectrum-css/component-builder-simple": "^2.0.15", diff --git a/components/pickerbutton/gulpfile.js b/components/pickerbutton/gulpfile.js index 79fce384ab1..aff190165b0 100644 --- a/components/pickerbutton/gulpfile.js +++ b/components/pickerbutton/gulpfile.js @@ -1 +1 @@ -module.exports = require("@spectrum-css/component-builder"); +module.exports = require("@spectrum-css/component-builder-simple"); diff --git a/components/pickerbutton/index.css b/components/pickerbutton/index.css index 77cf72e27c7..24107f08e07 100644 --- a/components/pickerbutton/index.css +++ b/components/pickerbutton/index.css @@ -10,57 +10,426 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import "../commons/basebutton.css"; -@import "../vars/css/components/spectrum-pickerbutton.css"; +.spectrum-PickerButton { + --spectrum-picker-button-height: var(--spectrum-component-height-100); + --spectrum-picker-button-width: var(--spectrum-component-height-100); + --spectrum-picker-button-gap: var(--spectrum-text-to-visual-50); + + --spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-50); + --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-100); + + --spectrum-picker-button-border-radius-rounded: var( + --spectrum-corner-radius-200 + ); + + --spectrum-picker-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --spectrum-picker-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-picker-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --spectrum-picker-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + + --spectrum-picker-button-font-color: var( + --spectrum-neutral-content-color-default + ); + --spectrum-picker-button-font-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-picker-button-font-color-down: var( + --spectrum-neutral-content-color-down + ); + --spectrum-picker-button-font-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + + --spectrum-picker-button-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-picker-button-font-style: var(--spectrum-default-font-style); + --spectrum-picker-button-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --spectrum-picker-button-font-size: var(--spectrum-font-size-100); + + --spectrum-picker-button-background-animation-duration: var( + --spectrum-animation-duration-100 + ); + + &:disabled { + --mod-picker-button-background-color: var( + --mod-picker-button-background-color-disabled, + var(--spectrum-disabled-background-color) + ); + --mod-picker-button-background-color-hover: var( + --mod-picker-button-background-color-hover-disabled, + var(--spectrum-disabled-background-color) + ); + --mod-picker-button-background-color-down: var( + --mod-picker-button-background-color-down-disabled, + var(--spectrum-disabled-background-color) + ); + --mod-picker-button-border-color: var( + --mod-picker-button-border-color-disabled, + var(--spectrum-disabled-background-color) + ); + + --mod-picker-button-font-color: var( + --mod-picker-button-font-color-disabled, + var(--spectrum-disabled-content-color) + ); + --mod-picker-button-font-color-hover: var( + --mod-picker-button-font-color-hover-disabled, + var(--spectrum-disabled-content-color) + ); + --mod-picker-button-font-color-down: var( + --mod-picker-button-font-color-down-disabled, + var(--spectrum-disabled-content-color) + ); -@import "./pickerbutton-generated.css"; + --mod-picker-button-icon-color: var( + --mod-picker-button-icon-color-disabled, + var(--spectrum-disabled-content-color) + ); + --mod-picker-button-icon-color-hover: var( + --mod-picker-button-icon-color-hover-disabled, + var(--spectrum-disabled-content-color) + ); + --mod-picker-button-icon-color-down: var( + --mod-picker-button-icon-color-down-disabled, + var(--spectrum-disabled-content-color) + ); + } + + &.spectrum-PickerButton--quiet { + --mod-picker-button-background-color: var( + --mod-picker-button-background-color-quiet, + transparent + ); + --mod-picker-button-background-color-hover: var( + --mod-picker-button-background-color-hover-quiet, + transparent + ); + --mod-picker-button-background-color-down: var( + --mod-picker-button-background-color-down-quiet, + transparent + ); + --mod-picker-button-background-color-key-focus: var( + --mod-picker-button-background-color-key-focus-quiet, + transparent + ); + + --mod-picker-button-border-color: var( + --mod-picker-button-border-color-quiet, + transparent + ); + } + + &.spectrum-PickerButton--sizeS { + --spectrum-picker-button-height: var(--spectrum-component-height-75); + --spectrum-picker-button-width: var(--spectrum-component-height-75); + --spectrum-picker-button-label-padding: var(--spectrum-spacing-75); + --spectrum-picker-button-font-size: var(--spectrum-font-size-75); + --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-75); + } + + &.spectrum-PickerButton--sizeL { + --spectrum-picker-button-height: var(--spectrum-component-height-200); + --spectrum-picker-button-width: var(--spectrum-component-height-200); + --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-200); + --spectrum-picker-button-font-size: var(--spectrum-font-size-200); + --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-200); + } + + &.spectrum-PickerButton--sizeXL { + --spectrum-picker-button-height: var(--spectrum-component-height-300); + --spectrum-picker-button-width: var(--spectrum-component-height-300); + --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-300); + --spectrum-picker-button-font-size: var(--spectrum-font-size-300); + --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-300); + } +} .spectrum-PickerButton { - @inherit: %spectrum-BaseButton; + border-style: none; + background-color: transparent; + block-size: var( + --mod-picker-button-width, + var(--spectrum-picker-button-width) + ); + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + padding: var( + --mod-picker-button-padding, + var(--spectrum-picker-button-padding) + ); + + &:hover { + .spectrum-PickerButton-fill { + background-color: var( + --mod-picker-button-background-color-hover, + var(--spectrum-picker-button-background-color-hover) + ); + } + + .spectrum-PickerButton-label { + color: var( + --mod-picker-button-font-color-hover, + var(--spectrum-picker-button-font-color-hover) + ); + } - border-style: none; - background-color: transparent; + .spectrum-PickerButton-icon { + color: var( + --mod-picker-button-icon-color-hover, + var(--spectrum-picker-button-icon-color-hover) + ); + } + } - display: flex; - justify-content: center; - align-items: center; + &:active, + &.is-open { + .spectrum-PickerButton-fill { + background-color: var( + --mod-picker-button-background-color-down, + var(--spectrum-picker-button-background-color-down) + ); + } - --spectrum-infieldbutton-border-color-override: initial; + .spectrum-PickerButton-label { + color: var( + --mod-picker-button-font-color-down, + var(--spectrum-picker-button-font-color-down) + ); + } + + .spectrum-PickerButton-icon { + color: var( + --mod-picker-button-icon-color-down, + var(--spectrum-picker-button-icon-color-down) + ); + } + } + + &:focus, + &.is-focused, + &:focus-visible, + &.is-keyboardFocused { + .spectrum-PickerButton-fill { + background-color: var( + --mod-picker-button-background-color-key-focus, + var(--spectrum-picker-button-background-color-key-focus) + ); + } + .spectrum-PickerButton-label { + color: var( + --mod-picker-button-font-color-key-focus, + var(--spectrum-picker-button-font-color-key-focus) + ); + } + .spectrum-PickerButton-icon { + color: var( + --mod-picker-button-icon-color-key-focus, + var(--spectrum-picker-button-icon-color-key-focus) + ); + } + } +} + +.spectrum-PickerButton--right { + .spectrum-PickerButton-fill { + border-end-start-radius: var( + --mod-picker-button-border-radius-sided, + var(--spectrum-picker-button-border-radius-sided) + ); + border-start-start-radius: var( + --mod-picker-button-border-radius-sided, + var(--spectrum-picker-button-border-radius-sided) + ); + } + + &.spectrum-PickerButton--rounded { + .spectrum-PickerButton-fill { + border-end-start-radius: var( + --mod-picker-button-border-radius-rounded-sided, + var(--spectrum-picker-button-border-radius-rounded-sided) + ); + border-start-start-radius: var( + --mod-picker-button-border-radius-rounded-sided, + var(--spectrum-picker-button-border-radius-rounded-sided) + ); + } + } +} + +.spectrum-PickerButton--left { + .spectrum-PickerButton-fill { + border-end-end-radius: var( + --mod-picker-button-border-radius-sided, + var(--spectrum-picker-button-border-radius-sided) + ); + border-start-end-radius: var( + --mod-picker-button-border-radius-sided, + var(--spectrum-picker-button-border-radius-sided) + ); + } + + &.spectrum-PickerButton--rounded { + .spectrum-PickerButton-fill { + border-end-end-radius: var( + --mod-picker-button-border-radius-rounded-sided, + var(--spectrum-picker-button-border-radius-rounded-sided) + ); + border-start-end-radius: var( + --mod-picker-button-border-radius-rounded-sided, + var(--spectrum-picker-button-border-radius-rounded-sided) + ); + } + } } .spectrum-PickerButton-label { - /* Be the biggest, but also shrink! */ - flex: 1 1 auto; + /* Be the biggest, but also shrink! */ + flex: 1 1 auto; + color: var( + --mod-picker-button-font-color, + var(--spectrum-picker-button-font-color) + ); - white-space: nowrap; - overflow: hidden; + white-space: nowrap; + overflow: hidden; + padding-block-end: var( + --mod-picker-button-label-padding, + var(--spectrum-picker-button-label-padding) + ); + padding-block-start: var( + --mod-picker-button-label-padding, + var(--spectrum-picker-button-label-padding) + ); + + font-family: var( + --mod-picker-button-font-family, + var(--spectrum-picker-button-font-family) + ); + font-style: var( + --mod-picker-button-font-style, + var(--spectrum-picker-button-font-style) + ); + font-weight: var( + --mod-picker-button-font-weight, + var(--spectrum-picker-button-font-weight) + ); + font-size: var( + --mod-picker-button-font-size, + var(--spectrum-picker-button-font-size) + ); } .spectrum-PickerButton-fill { - box-sizing: border-box; - border-color: var(--spectrum-infieldbutton-border-color-override); + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + block-size: 100%; + inline-size: 100%; + gap: var(--mod-picker-button-gap, var(--spectrum-picker-button-gap)); + + background-color: var( + --mod-picker-button-background-color, + var(--spectrum-picker-button-background-color) + ); + border-color: var( + --mod-picker-button-border-color, + var(--spectrum-picker-button-border-color) + ); + border-width: var( + --mod-picker-button-border-width, + var(--spectrum-picker-button-border-width) + ); + border-style: solid; + padding: calc(var(--mod-picker-button-fill-padding, var(--spectrum-picker-button-fill-padding)) - + var(--mod-picker-button-padding, var(--spectrum-picker-button-padding)) - + var( + --mod-picker-button-border-width, + var(--spectrum-picker-button-border-width) + )); - /* center icon */ - display: flex; - align-items: center; - justify-content: center; + border-end-end-radius: var( + --mod-picker-button-border-radius, + var(--spectrum-picker-button-border-radius) + ); + border-end-start-radius: var( + --mod-picker-button-border-radius, + var(--spectrum-picker-button-border-radius) + ); + border-start-end-radius: var( + --mod-picker-button-border-radius, + var(--spectrum-picker-button-border-radius) + ); + border-start-start-radius: var( + --mod-picker-button-border-radius, + var(--spectrum-picker-button-border-radius) + ); - transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out; + transition: border-color + var( + --mod-picker-button-background-animation-duration, + var(--spectrum-picker-button-background-animation-duration) + ) + ease-in-out; } -.spectrum-PickerButton--uiicononly { - .spectrum-PickerButton-fill { - /* let icons position correctly */ - padding: 0 !important; - } +.spectrum-PickerButton-icon { + /* don't be small, ever */ + flex-shrink: 0; + color: var( + --mod-picker-button-icon-color, + var(--spectrum-picker-button-icon-color) + ); } -.spectrum-PickerButton-UIIcon { - /* remove margin used for centering */ - margin: 0 !important; +.spectrum-PickerButton--rounded { + .spectrum-PickerButton-fill { + border-end-end-radius: var( + --mod-picker-button-border-radius-rounded, + var(--spectrum-picker-button-border-radius-rounded) + ); + border-end-start-radius: var( + --mod-picker-button-border-radius-rounded, + var(--spectrum-picker-button-border-radius-rounded) + ); + border-start-end-radius: var( + --mod-picker-button-border-radius-rounded, + var(--spectrum-picker-button-border-radius-rounded) + ); + border-start-start-radius: var( + --mod-picker-button-border-radius-rounded, + var(--spectrum-picker-button-border-radius-rounded) + ); + } } -.spectrum-PickerButton-icon { - /* don't be small, ever */ - flex-shrink: 0; +.spectrum-PickerButton--uiicononly { + inline-size: var( + --mod-picker-button-height, + var(--spectrum-picker-button-height) + ); + .spectrum-PickerButton-label { + display: none; + } + .spectrum-PickerButton-fill { + padding: 0px; + } +} + +.spectrum-PickerButton--textuiicon { + .spectrum-PickerButton-fill { + inline-size: auto; + } } diff --git a/components/pickerbutton/metadata/mods.md b/components/pickerbutton/metadata/mods.md new file mode 100644 index 00000000000..cf73c6a25c7 --- /dev/null +++ b/components/pickerbutton/metadata/mods.md @@ -0,0 +1,46 @@ +| Modifiable Custom Properties | +| ------------------------------------------------------ | +| `--mod-picker-button-background-animation-duration` | +| `--mod-picker-button-background-color` | +| `--mod-picker-button-background-color-disabled` | +| `--mod-picker-button-background-color-down` | +| `--mod-picker-button-background-color-down-disabled` | +| `--mod-picker-button-background-color-down-quiet` | +| `--mod-picker-button-background-color-hover` | +| `--mod-picker-button-background-color-hover-disabled` | +| `--mod-picker-button-background-color-hover-quiet` | +| `--mod-picker-button-background-color-key-focus` | +| `--mod-picker-button-background-color-key-focus-quiet` | +| `--mod-picker-button-background-color-quiet` | +| `--mod-picker-button-border-color` | +| `--mod-picker-button-border-color-disabled` | +| `--mod-picker-button-border-color-quiet` | +| `--mod-picker-button-border-radius` | +| `--mod-picker-button-border-radius-rounded` | +| `--mod-picker-button-border-radius-rounded-sided` | +| `--mod-picker-button-border-radius-sided` | +| `--mod-picker-button-border-width` | +| `--mod-picker-button-fill-padding` | +| `--mod-picker-button-font-color` | +| `--mod-picker-button-font-color-disabled` | +| `--mod-picker-button-font-color-down` | +| `--mod-picker-button-font-color-down-disabled` | +| `--mod-picker-button-font-color-hover` | +| `--mod-picker-button-font-color-hover-disabled` | +| `--mod-picker-button-font-color-key-focus` | +| `--mod-picker-button-font-family` | +| `--mod-picker-button-font-size` | +| `--mod-picker-button-font-style` | +| `--mod-picker-button-font-weight` | +| `--mod-picker-button-gap` | +| `--mod-picker-button-height` | +| `--mod-picker-button-icon-color` | +| `--mod-picker-button-icon-color-disabled` | +| `--mod-picker-button-icon-color-down` | +| `--mod-picker-button-icon-color-down-disabled` | +| `--mod-picker-button-icon-color-hover` | +| `--mod-picker-button-icon-color-hover-disabled` | +| `--mod-picker-button-icon-color-key-focus` | +| `--mod-picker-button-label-padding` | +| `--mod-picker-button-padding` | +| `--mod-picker-button-width` | diff --git a/components/pickerbutton/metadata/pickerbutton.yml b/components/pickerbutton/metadata/pickerbutton.yml index ed4f33c8017..be4fbe0f6a6 100644 --- a/components/pickerbutton/metadata/pickerbutton.yml +++ b/components/pickerbutton/metadata/pickerbutton.yml @@ -4,7 +4,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/picker/ sections: - name: Migration Guide description: | - ### Picker Button uses the [Quiet](pickerbutton.html#quiet) variant instead of loudness levels. + ### Picker button uses the [Quiet](pickerbutton.html#quiet) variant instead of loudness levels. The Loudness level classes, `.spectrum-PickerButton--low`, `.spectrum-PickerButton--medium`, and `.spectrum-PickerButton--high`, have been removed. @@ -13,6 +13,10 @@ sections: The Loudness - Medium variant has been removed, so there is no equivalent. + ### .spectrum-PickerButton-UIIcon class removed + + The `.spectrum-PickerButton-UIIcon` class no longer matches our naming convention. Both types of icons now use the `spectrum-PickerButton-icon` class + examples: - id: pickerbutton-sizing name: Sizing @@ -23,8 +27,8 @@ examples: @@ -35,8 +39,8 @@ examples: @@ -47,8 +51,8 @@ examples: @@ -59,8 +63,8 @@ examples: @@ -73,8 +77,8 @@ examples: @@ -85,8 +89,8 @@ examples: @@ -94,20 +98,20 @@ examples: - id: pickerbutton-icononly name: UI icon only markup: | - - - id: pickerbutton-icononly - name: Workflow icon only + - id: pickerbutton-icononly-custom + name: Custom icon only markup: | - @@ -131,8 +135,8 @@ examples: @@ -143,20 +147,8 @@ examples: - - - id: pickerbutton-invalid - name: Invalid - markup: | - diff --git a/components/pickerbutton/package.json b/components/pickerbutton/package.json index 15e0834790a..eb9667e23a3 100644 --- a/components/pickerbutton/package.json +++ b/components/pickerbutton/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/pickerbutton", - "version": "3.0.34", + "version": "4.0.0-beta.1", "description": "The Spectrum CSS picker button component", "license": "Apache-2.0", "author": "Adobe", @@ -21,14 +21,14 @@ "@spectrum-css/icon": ">=3", "@spectrum-css/menu": ">=4", "@spectrum-css/popover": ">=5 <=6", - "@spectrum-css/vars": ">=9" + "@spectrum-css/tokens": ">=11" }, "devDependencies": { - "@spectrum-css/component-builder": "^4.0.12", + "@spectrum-css/component-builder-simple": "^2.0.14", "@spectrum-css/icon": "^3.0.50", "@spectrum-css/menu": "^4.0.49", "@spectrum-css/popover": "^6.0.61", - "@spectrum-css/vars": "^9.0.8", + "@spectrum-css/tokens": "^11.0.0", "gulp": "^4.0.0" }, "publishConfig": { diff --git a/components/pickerbutton/pickerbutton-generated.css b/components/pickerbutton/pickerbutton-generated.css deleted file mode 100644 index 23a952245f5..00000000000 --- a/components/pickerbutton/pickerbutton-generated.css +++ /dev/null @@ -1,739 +0,0 @@ -/*! -Copyright 2023 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 - -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. -*/ - -/* begin generated CSS for pickerbutton */ -.spectrum-PickerButton { - --spectrum-PickerButton-border-radius-right: var(--spectrum-alias-infieldbutton-border-radius); - --spectrum-PickerButton-border-radius-left: var(--spectrum-alias-infieldbutton-border-radius); - --spectrum-PickerButton-border-radius-right-rounded: var(--spectrum-alias-pickerbutton-border-radius-rounded); - --spectrum-PickerButton-border-radius-left-rounded: var(--spectrum-alias-pickerbutton-border-radius-rounded); - - &.spectrum-PickerButton--sizeS { - padding: var(--spectrum-alias-infieldbutton-padding-s); - --spectrum-PickerButton-label-padding-y: var(--spectrum-alias-pickerbutton-label-padding-y-s); - --spectrum-PickerButton-icon-margin-y: var(--spectrum-alias-pickerbutton-icon-margin-y-s); - --spectrum-PickerButton-icononly-padding-x: var(--spectrum-alias-pickerbutton-icononly-padding-x-s); - - .spectrum-PickerButton-fill { - --spectrum-PickerButton-Fill-size: var(--spectrum-alias-infieldbutton-full-height-s); - block-size: var(--spectrum-alias-infieldbutton-full-height-s); - inline-size: var(--spectrum-alias-infieldbutton-full-height-s); - gap: var(--spectrum-global-dimension-size-75) - } - - .spectrum-PickerButton-label { - font-size: var(--spectrum-global-dimension-font-size-75); - padding-block-end: var(--spectrum-alias-pickerbutton-label-padding-y-s); - padding-block-start: var(--spectrum-alias-pickerbutton-label-padding-y-s) - } - - .spectrum-PickerButton-icon { - gap: var(--spectrum-global-dimension-size-85); - --spectrum-PickerButton-Fill-Icon-size: var(--spectrum-global-dimension-size-200); - block-size: var(--spectrum-global-dimension-size-200); - inline-size: var(--spectrum-global-dimension-size-200); - margin-block-end: var(--spectrum-alias-infieldbutton-icon-margin-y-s); - margin-block-start: var(--spectrum-alias-infieldbutton-icon-margin-y-s) - } - - .spectrum-PickerButton-UIIcon { - --spectrum-PickerButton-Fill-UIIcon-size: var(--spectrum-alias-ui-icon-chevron-size-100); - block-size: var(--spectrum-alias-ui-icon-chevron-size-100); - inline-size: var(--spectrum-alias-ui-icon-chevron-size-100); - margin-block-end: var(--spectrum-alias-pickerbutton-icon-margin-y-s); - margin-block-start: var(--spectrum-alias-pickerbutton-icon-margin-y-s) - } - } - - &.spectrum-PickerButton--sizeM { - padding: var(--spectrum-alias-infieldbutton-padding-m); - --spectrum-PickerButton-label-padding-y: var(--spectrum-alias-pickerbutton-label-padding-y-m); - --spectrum-PickerButton-icon-margin-y: var(--spectrum-alias-pickerbutton-icon-margin-y-m); - --spectrum-PickerButton-icononly-padding-x: var(--spectrum-alias-pickerbutton-icononly-padding-x-m); - - .spectrum-PickerButton-fill { - --spectrum-PickerButton-Fill-size: var(--spectrum-alias-infieldbutton-full-height-m); - block-size: var(--spectrum-alias-infieldbutton-full-height-m); - inline-size: var(--spectrum-alias-infieldbutton-full-height-m); - gap: var(--spectrum-global-dimension-size-85) - } - - .spectrum-PickerButton-label { - font-size: var(--spectrum-global-dimension-font-size-100); - padding-block-end: var(--spectrum-alias-pickerbutton-label-padding-y-m); - padding-block-start: var(--spectrum-alias-pickerbutton-label-padding-y-m) - } - - .spectrum-PickerButton-icon { - gap: var(--spectrum-global-dimension-size-100); - --spectrum-PickerButton-Fill-Icon-size: var(--spectrum-global-dimension-size-225); - block-size: var(--spectrum-global-dimension-size-225); - inline-size: var(--spectrum-global-dimension-size-225); - margin-block-end: var(--spectrum-alias-infieldbutton-icon-margin-y-m); - margin-block-start: var(--spectrum-alias-infieldbutton-icon-margin-y-m) - } - - .spectrum-PickerButton-UIIcon { - --spectrum-PickerButton-Fill-UIIcon-size: var(--spectrum-alias-ui-icon-chevron-size-200); - block-size: var(--spectrum-alias-ui-icon-chevron-size-200); - inline-size: var(--spectrum-alias-ui-icon-chevron-size-200); - margin-block-end: var(--spectrum-alias-pickerbutton-icon-margin-y-m); - margin-block-start: var(--spectrum-alias-pickerbutton-icon-margin-y-m) - } - } - - &.spectrum-PickerButton--sizeL { - padding: var(--spectrum-alias-infieldbutton-padding-l); - --spectrum-PickerButton-label-padding-y: var(--spectrum-alias-pickerbutton-label-padding-y-l); - --spectrum-PickerButton-icon-margin-y: var(--spectrum-alias-pickerbutton-icon-margin-y-l); - --spectrum-PickerButton-icononly-padding-x: var(--spectrum-alias-pickerbutton-icononly-padding-x-l); - - .spectrum-PickerButton-fill { - --spectrum-PickerButton-Fill-size: var(--spectrum-alias-infieldbutton-full-height-l); - block-size: var(--spectrum-alias-infieldbutton-full-height-l); - inline-size: var(--spectrum-alias-infieldbutton-full-height-l); - gap: var(--spectrum-global-dimension-size-65) - } - - .spectrum-PickerButton-label { - font-size: var(--spectrum-global-dimension-font-size-200); - padding-block-end: var(--spectrum-alias-pickerbutton-label-padding-y-l); - padding-block-start: var(--spectrum-alias-pickerbutton-label-padding-y-l) - } - - .spectrum-PickerButton-icon { - gap: var(--spectrum-global-dimension-size-115); - margin-block-end: var(--spectrum-alias-infieldbutton-icon-margin-y-l); - margin-block-start: var(--spectrum-alias-infieldbutton-icon-margin-y-l) - } - - .spectrum-PickerButton-UIIcon { - --spectrum-PickerButton-Fill-UIIcon-size: var(--spectrum-alias-ui-icon-chevron-size-300); - block-size: var(--spectrum-alias-ui-icon-chevron-size-300); - inline-size: var(--spectrum-alias-ui-icon-chevron-size-300); - margin-block-end: var(--spectrum-alias-pickerbutton-icon-margin-y-l); - margin-block-start: var(--spectrum-alias-pickerbutton-icon-margin-y-l) - } - } - - &.spectrum-PickerButton--sizeXL { - padding: var(--spectrum-alias-infieldbutton-padding-xl); - --spectrum-PickerButton-label-padding-y: var(--spectrum-alias-pickerbutton-label-padding-y-xl); - --spectrum-PickerButton-icon-margin-y: var(--spectrum-alias-pickerbutton-icon-margin-y-xl); - --spectrum-PickerButton-icononly-padding-x: var(--spectrum-alias-pickerbutton-icononly-padding-x-xl); - - .spectrum-PickerButton-fill { - --spectrum-PickerButton-Fill-size: var(--spectrum-alias-infieldbutton-full-height-xl); - block-size: var(--spectrum-alias-infieldbutton-full-height-xl); - inline-size: var(--spectrum-alias-infieldbutton-full-height-xl); - gap: var(--spectrum-global-dimension-size-85) - } - - .spectrum-PickerButton-label { - font-size: var(--spectrum-global-dimension-font-size-300); - padding-block-end: var(--spectrum-alias-pickerbutton-label-padding-y-xl); - padding-block-start: var(--spectrum-alias-pickerbutton-label-padding-y-xl) - } - - .spectrum-PickerButton-icon { - gap: var(--spectrum-global-dimension-size-125); - --spectrum-PickerButton-Fill-Icon-size: var(--spectrum-global-dimension-size-275); - block-size: var(--spectrum-global-dimension-size-275); - inline-size: var(--spectrum-global-dimension-size-275); - margin-block-end: var(--spectrum-alias-infieldbutton-icon-margin-y-xl); - margin-block-start: var(--spectrum-alias-infieldbutton-icon-margin-y-xl) - } - - .spectrum-PickerButton-UIIcon { - --spectrum-PickerButton-Fill-UIIcon-size: var(--spectrum-alias-ui-icon-chevron-size-400); - block-size: var(--spectrum-alias-ui-icon-chevron-size-400); - inline-size: var(--spectrum-alias-ui-icon-chevron-size-400); - margin-block-end: var(--spectrum-alias-pickerbutton-icon-margin-y-xl); - margin-block-start: var(--spectrum-alias-pickerbutton-icon-margin-y-xl) - } - } - - &:disabled { - &:not(.is-open) { - .spectrum-PickerButton-fill { - background-color: var(--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-disabled); - } - } - - .spectrum-PickerButton-fill { - border-color: var(--spectrum-alias-infieldbutton-fill-loudnessHigh-border-color-disabled); - } - } - - &:not(:disabled) { - &:not(.is-open) { - .spectrum-PickerButton-fill { - background-color: var(--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default); - } - - &:hover { - .spectrum-PickerButton-fill { - background-color: var(--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover); - } - } - - &:active { - .spectrum-PickerButton-fill { - background-color: var(--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down); - } - } - } - } - - &.is-invalid { - &:not(:disabled) { - .spectrum-PickerButton-fill { - border-color: var(--spectrum-alias-input-border-color-invalid-default) - } - - &:hover { - .spectrum-PickerButton-fill { - border-color: var(--spectrum-alias-input-border-color-invalid-hover) - } - } - - &:active { - .spectrum-PickerButton-fill { - border-color: var(--spectrum-alias-input-border-color-invalid-down) - } - } - - &:focus { - .spectrum-PickerButton-fill { - border-color: var(--spectrum-alias-input-border-color-invalid-mouse-focus) - } - } - - &.is-focused { - .spectrum-PickerButton-fill { - border-color: var(--spectrum-alias-input-border-color-invalid-mouse-focus) - } - } - - &:focus-visible { - .spectrum-PickerButton-fill { - border-color: var(--spectrum-alias-input-border-color-invalid-key-focus) - } - } - - &.is-keyboardFocused { - .spectrum-PickerButton-fill { - border-color: var(--spectrum-alias-input-border-color-invalid-key-focus) - } - } - } - } - - &:not(.is-invalid) { - &:not(:disabled) { - .spectrum-PickerButton-fill { - border-color: var(--spectrum-alias-infieldbutton-fill-border-color-default) - } - - &:hover { - .spectrum-PickerButton-fill { - border-color: var(--spectrum-alias-infieldbutton-fill-border-color-hover) - } - } - - &:active { - .spectrum-PickerButton-fill { - border-color: var(--spectrum-alias-infieldbutton-fill-border-color-down) - } - } - - &:focus { - .spectrum-PickerButton-fill { - border-color: var(--spectrum-alias-infieldbutton-fill-border-color-mouse-focus) - } - } - - &.is-focused { - .spectrum-PickerButton-fill { - border-color: var(--spectrum-alias-infieldbutton-fill-border-color-mouse-focus) - } - } - - &:focus-visible { - .spectrum-PickerButton-fill { - border-color: var(--spectrum-alias-infieldbutton-fill-border-color-key-focus) - } - } - - &.is-keyboardFocused { - .spectrum-PickerButton-fill { - border-color: var(--spectrum-alias-infieldbutton-fill-border-color-key-focus) - } - } - } - } - - &.spectrum-PickerButton--right { - --spectrum-PickerButton-border-radius-left: var(--spectrum-alias-infieldbutton-border-radius-sided); - --spectrum-PickerButton-border-radius-left-rounded: var(--spectrum-alias-pickerbutton-border-radius-rounded-sided); - - &:not(.spectrum-PickerButton--rounded) { - .spectrum-PickerButton-fill { - border-end-start-radius: var(--spectrum-alias-infieldbutton-border-radius-sided); - border-start-start-radius: var(--spectrum-alias-infieldbutton-border-radius-sided) - } - } - - &.spectrum-PickerButton--rounded { - .spectrum-PickerButton-fill { - border-end-start-radius: var(--spectrum-alias-pickerbutton-border-radius-rounded-sided); - border-start-start-radius: var(--spectrum-alias-pickerbutton-border-radius-rounded-sided) - } - } - } - - &.spectrum-PickerButton--left { - --spectrum-PickerButton-border-radius-right: var(--spectrum-alias-infieldbutton-border-radius-sided); - --spectrum-PickerButton-border-radius-right-rounded: var(--spectrum-alias-pickerbutton-border-radius-rounded-sided); - - &:not(.spectrum-PickerButton--rounded) { - .spectrum-PickerButton-fill { - border-end-end-radius: var(--spectrum-alias-infieldbutton-border-radius-sided); - border-start-end-radius: var(--spectrum-alias-infieldbutton-border-radius-sided) - } - } - - &.spectrum-PickerButton--rounded { - .spectrum-PickerButton-fill { - border-end-end-radius: var(--spectrum-alias-pickerbutton-border-radius-rounded-sided); - border-start-end-radius: var(--spectrum-alias-pickerbutton-border-radius-rounded-sided) - } - } - } - - &:not(.spectrum-PickerButton--rounded) { - .spectrum-PickerButton-fill { - border-end-end-radius: var(--spectrum-alias-infieldbutton-border-radius); - border-end-start-radius: var(--spectrum-alias-infieldbutton-border-radius); - border-start-end-radius: var(--spectrum-alias-infieldbutton-border-radius); - border-start-start-radius: var(--spectrum-alias-infieldbutton-border-radius) - } - } - - &.spectrum-PickerButton--rounded { - .spectrum-PickerButton-fill { - border-end-end-radius: var(--spectrum-alias-pickerbutton-border-radius-rounded); - border-end-start-radius: var(--spectrum-alias-pickerbutton-border-radius-rounded); - border-start-end-radius: var(--spectrum-alias-pickerbutton-border-radius-rounded); - border-start-start-radius: var(--spectrum-alias-pickerbutton-border-radius-rounded) - } - } - - &.spectrum-PickerButton--uiicononly { - .spectrum-PickerButton-fill { - padding-inline-end: var(--spectrum-PickerButton-icononly-padding-x); - padding-inline-start: var(--spectrum-PickerButton-icononly-padding-x); - inline-size: var(--spectrum-PickerButton-Fill-size) - } - - &.spectrum-PickerButton--sizeS { - .spectrum-PickerButton-fill { - padding-inline-end: var(--spectrum-alias-pickerbutton-icononly-padding-x-s); - padding-inline-start: var(--spectrum-alias-pickerbutton-icononly-padding-x-s); - inline-size: var(--spectrum-alias-infieldbutton-full-height-s) - } - } - - &.spectrum-PickerButton--sizeM { - .spectrum-PickerButton-fill { - padding-inline-end: var(--spectrum-alias-pickerbutton-icononly-padding-x-m); - padding-inline-start: var(--spectrum-alias-pickerbutton-icononly-padding-x-m); - inline-size: var(--spectrum-alias-infieldbutton-full-height-m) - } - } - - &.spectrum-PickerButton--sizeL { - .spectrum-PickerButton-fill { - padding-inline-end: var(--spectrum-alias-pickerbutton-icononly-padding-x-l); - padding-inline-start: var(--spectrum-alias-pickerbutton-icononly-padding-x-l); - inline-size: var(--spectrum-alias-infieldbutton-full-height-l) - } - } - - &.spectrum-PickerButton--sizeXL { - .spectrum-PickerButton-fill { - padding-inline-end: var(--spectrum-alias-pickerbutton-icononly-padding-x-xl); - padding-inline-start: var(--spectrum-alias-pickerbutton-icononly-padding-x-xl); - inline-size: var(--spectrum-alias-infieldbutton-full-height-xl) - } - } - - .spectrum-PickerButton-label { - display: none - } - - .spectrum-PickerButton-icon { - display: none - } - - .spectrum-PickerButton-UIIcon { - display: initial - } - } - - &.spectrum-PickerButton--icononly { - .spectrum-PickerButton-fill { - inline-size: var(--spectrum-PickerButton-Fill-size) - } - - &.spectrum-PickerButton--sizeS { - .spectrum-PickerButton-fill { - padding-inline-end: var(--spectrum-global-dimension-size-50); - padding-inline-start: var(--spectrum-global-dimension-size-50); - inline-size: var(--spectrum-alias-infieldbutton-full-height-s) - } - } - - &.spectrum-PickerButton--sizeM { - .spectrum-PickerButton-fill { - padding-inline-end: var(--spectrum-global-dimension-size-85); - padding-inline-start: var(--spectrum-global-dimension-size-85); - inline-size: var(--spectrum-alias-infieldbutton-full-height-m) - } - } - - &.spectrum-PickerButton--sizeL { - .spectrum-PickerButton-fill { - padding-inline-end: var(--spectrum-global-dimension-size-125); - padding-inline-start: var(--spectrum-global-dimension-size-125); - inline-size: var(--spectrum-alias-infieldbutton-full-height-l) - } - } - - &.spectrum-PickerButton--sizeXL { - .spectrum-PickerButton-fill { - padding-inline-end: var(--spectrum-global-dimension-size-160); - padding-inline-start: var(--spectrum-global-dimension-size-160); - inline-size: var(--spectrum-alias-infieldbutton-full-height-xl) - } - } - - .spectrum-PickerButton-label { - display: none - } - - .spectrum-PickerButton-icon { - display: initial - } - - .spectrum-PickerButton-UIIcon { - display: none - } - } - - &.spectrum-PickerButton--textuiicon { - .spectrum-PickerButton-fill { - inline-size: auto - } - - &.spectrum-PickerButton--sizeS { - .spectrum-PickerButton-fill { - padding-inline-end: var(--spectrum-global-dimension-size-100); - padding-inline-start: var(--spectrum-global-dimension-size-115) - } - } - - &.spectrum-PickerButton--sizeM { - .spectrum-PickerButton-fill { - padding-inline-end: var(--spectrum-global-dimension-size-125); - padding-inline-start: var(--spectrum-global-dimension-size-160) - } - } - - &.spectrum-PickerButton--sizeL { - .spectrum-PickerButton-fill { - padding-inline-end: var(--spectrum-global-dimension-size-150); - padding-inline-start: var(--spectrum-global-dimension-size-185) - } - } - - &.spectrum-PickerButton--sizeXL { - .spectrum-PickerButton-fill { - padding-inline-end: var(--spectrum-global-dimension-size-200); - padding-inline-start: var(--spectrum-global-dimension-size-225) - } - } - - .spectrum-PickerButton-label { - display: initial - } - - .spectrum-PickerButton-icon { - display: none - } - - .spectrum-PickerButton-UIIcon { - display: initial - } - } - - &.spectrum-PickerButton--quiet { - &:disabled { - &:not(.is-open) { - .spectrum-PickerButton-fill { - background-color: var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-disabled) - } - } - - .spectrum-PickerButton-fill { - border-color: var(--spectrum-alias-infieldbutton-fill-loudnessLow-border-color-disabled) - } - } - - &:not(:disabled) { - &:not(.is-open) { - .spectrum-PickerButton-fill { - background-color: var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default) - } - - &:hover { - .spectrum-PickerButton-fill { - background-color: var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover) - } - } - - &:active { - .spectrum-PickerButton-fill { - background-color: var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down) - } - } - } - } - - &.is-invalid { - &:not(:disabled) { - .spectrum-PickerButton-fill { - border-color: transparent - } - } - } - - &:not(.is-invalid) { - &:not(:disabled) { - .spectrum-PickerButton-fill { - border-color: transparent - } - - &:hover { - .spectrum-PickerButton-fill { - border-color: transparent - } - } - - &:active { - .spectrum-PickerButton-fill { - border-color: transparent - } - } - - &:focus { - .spectrum-PickerButton-fill { - border-color: transparent - } - } - - &.is-focused { - .spectrum-PickerButton-fill { - border-color: transparent - } - } - - &:focus-visible { - .spectrum-PickerButton-fill { - border-color: transparent - } - } - - &.is-keyboardFocused { - .spectrum-PickerButton-fill { - border-color: transparent - } - } - } - } - } - - &.is-open { - .spectrum-PickerButton-fill { - background-color: var(--spectrum-alias-component-background-color-down) - } - - .spectrum-PickerButton-label { - color: var(--spectrum-alias-component-text-color-down) - } - - .spectrum-PickerButton-icon { - color: var(--spectrum-alias-component-icon-color-down) - } - - .spectrum-PickerButton-UIIcon { - color: var(--spectrum-alias-component-icon-color-down) - } - } - - &:not(.is-open) { - .spectrum-PickerButton-label { - color: var(--spectrum-alias-component-text-color) - } - - .spectrum-PickerButton-icon { - color: var(--spectrum-alias-component-icon-color) - } - - .spectrum-PickerButton-UIIcon { - color: var(--spectrum-alias-component-icon-color) - } - } - - &:disabled { - &:not(.is-open) { - .spectrum-PickerButton-label { - color: var(--spectrum-alias-component-text-color-disabled) - } - - .spectrum-PickerButton-icon { - color: var(--spectrum-alias-component-icon-color-disabled) - } - - .spectrum-PickerButton-UIIcon { - color: var(--spectrum-alias-component-icon-color-disabled) - } - } - } - - &:not(:disabled) { - &:not(.is-open) { - .spectrum-PickerButton-label { - color: var(--spectrum-alias-component-text-color-default) - } - - &:hover { - .spectrum-PickerButton-label { - color: var(--spectrum-alias-component-text-color-hover) - } - - .spectrum-PickerButton-icon { - color: var(--spectrum-alias-component-icon-color-hover) - } - - .spectrum-PickerButton-UIIcon { - color: var(--spectrum-alias-component-icon-color-hover) - } - } - - &:active { - .spectrum-PickerButton-label { - color: var(--spectrum-alias-component-text-color-down) - } - - .spectrum-PickerButton-icon { - color: var(--spectrum-alias-component-icon-color-down) - } - - .spectrum-PickerButton-UIIcon { - color: var(--spectrum-alias-component-icon-color-down) - } - } - - .spectrum-PickerButton-icon { - color: var(--spectrum-alias-component-icon-color-default) - } - - .spectrum-PickerButton-UIIcon { - color: var(--spectrum-alias-component-icon-color-default) - } - } - } - - &.spectrum-PickerButton--error { - &:not(:disabled) { - &:not(.is-open) { - .spectrum-PickerButton-label { - color: var(--spectrum-alias-component-text-color-error-default) - } - - &:hover { - .spectrum-PickerButton-label { - color: var(--spectrum-alias-component-text-color-error-hover) - } - } - - &:active { - .spectrum-PickerButton-label { - color: var(--spectrum-alias-component-text-color-error-down) - } - } - } - } - } -} - -.spectrum-PickerButton-fill { - border-width: var(--spectrum-alias-infieldbutton-border-size); - border-style: solid; - flex-direction: row; - display: flex -} - -.spectrum-PickerButton-label { - text-transform: none; - letter-spacing: var(--spectrum-global-font-letter-spacing-none); - line-height: var(--spectrum-global-font-component-text-line-height); - font-weight: var(--spectrum-global-font-body-text-font-weight); - font-style: var(--spectrum-global-font-style-regular); - font-family: var(--spectrum-global-font-body-text-font-family); - padding-block-end: var(--spectrum-PickerButton-label-padding-y); - padding-block-start: var(--spectrum-PickerButton-label-padding-y) -} - -.spectrum--medium { - .spectrum-PickerButton { - &.spectrum-PickerButton--sizeL { - .spectrum-PickerButton-icon { - --spectrum-PickerButton-Fill-Icon-size: var(--spectrum-global-dimension-static-size-250); - block-size: var(--spectrum-global-dimension-static-size-250); - inline-size: var(--spectrum-global-dimension-static-size-250) - } - } - } -} - -.spectrum--large { - .spectrum-PickerButton { - &.spectrum-PickerButton--sizeL { - .spectrum-PickerButton-icon { - --spectrum-PickerButton-Fill-Icon-size: var(--spectrum-global-dimension-static-size-300); - block-size: var(--spectrum-global-dimension-static-size-300); - inline-size: var(--spectrum-global-dimension-static-size-300) - } - } - } -} - -.spectrum-PickerButton-UIIcon { - margin-block-end: var(--spectrum-PickerButton-icon-margin-y); - margin-block-start: var(--spectrum-PickerButton-icon-margin-y); - --spectrum-PickerButton-Fill-UIIcon-rotate: 90deg; - transform: rotate(90deg) -} - -/* end generated CSS for pickerbutton */ diff --git a/components/pickerbutton/stories/pickerbutton.stories.js b/components/pickerbutton/stories/pickerbutton.stories.js index 93ad467acfc..df8f4a99324 100644 --- a/components/pickerbutton/stories/pickerbutton.stories.js +++ b/components/pickerbutton/stories/pickerbutton.stories.js @@ -5,7 +5,7 @@ import { default as Icon } from "@spectrum-css/icon/stories/icon.stories.js"; export default { title: "Components/Picker button", - description: "The Picker button component is...", + description: "The Picker button component is used as a dropdown trigger. See Combobox.", component: "Pickerbutton", argTypes: { size: { @@ -30,7 +30,7 @@ export default { }, iconName: { ...Icon.argTypes.iconName, - if: { arg: "iconType", eq: "ui" }, + if: { arg: "iconType", eq: "workflow" }, }, label: { name: "Label", @@ -49,6 +49,7 @@ export default { category: "State", }, control: "boolean", + if: { arg: 'isDisabled', truthy: false } }, isRounded: { name: "Rounded", @@ -59,24 +60,6 @@ export default { }, control: "boolean", }, - isValid: { - name: "Valid input", - type: { name: "boolean" }, - table: { - type: { summary: "boolean" }, - category: "State", - }, - control: "boolean", - }, - isInvalid: { - name: "Invalid input", - type: { name: "boolean" }, - table: { - type: { summary: "boolean" }, - category: "State", - }, - control: "boolean", - }, isQuiet: { name: "Quiet styling", type: { name: "boolean" }, @@ -103,15 +86,7 @@ export default { category: "State", }, control: "boolean", - }, - isKeyboardFocused: { - name: "Keyboard Focused", - type: { name: "boolean" }, - table: { - type: { summary: "boolean" }, - category: "State", - }, - control: "boolean", + if: { arg: 'isDisabled', truthy: false } }, position: { name: "Position", @@ -126,18 +101,17 @@ export default { }, args: { rootClass: "spectrum-PickerButton", - label: "Select a Country", + label: undefined, size: "m", isOpen: false, isRounded: false, - isValid: false, - isInvalid: false, isQuiet: false, isDisabled: false, isFocused: false, isKeyboardFocused: false, iconType: "ui", iconName: "ChevronDown", + position: "right" }, parameters: { actions: { @@ -153,3 +127,23 @@ export default { export const Default = Template.bind({}); Default.args = {}; + +export const WithLabel = Template.bind({}); +WithLabel.args = { + label: "Select", +}; + +export const Disabled = Template.bind({}); +Disabled.args = { + isDisabled: true +}; + +export const Quiet = Template.bind({}); +Quiet.args = { + isQuiet: true +}; + +export const Express = Template.bind({}); +Express.args = { + express: true +}; diff --git a/components/pickerbutton/stories/template.js b/components/pickerbutton/stories/template.js index 710e0973bab..ed548ac6f2e 100644 --- a/components/pickerbutton/stories/template.js +++ b/components/pickerbutton/stories/template.js @@ -19,10 +19,7 @@ export const Template = ({ iconName = "ChevronDown", isDisabled = false, isFocused = false, - isKeyboardFocused = false, isOpen = false, - isValid = false, - isInvalid = false, isQuiet = false, customClasses = [], isRounded = false, @@ -31,6 +28,14 @@ export const Template = ({ ...globals }) => { const [_, updateArgs] = useArgs(); + const { express } = globals; + + try { + if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css"); + else import(/* webpackPrefetch: true */ "../themes/express.css"); + } catch (e) { + console.warn(e); + } return html` diff --git a/components/pickerbutton/themes/express.css b/components/pickerbutton/themes/express.css new file mode 100644 index 00000000000..42db9ddedef --- /dev/null +++ b/components/pickerbutton/themes/express.css @@ -0,0 +1,26 @@ +/*! +Copyright 2023 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 + +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. +*/ + +@container (--system: express) { + .spectrum-PickerButton { + --spectrum-picker-button-background-color: var(--spectrum-gray-200); + --spectrum-picker-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-picker-button-background-color-down: var(--spectrum-gray-400); + --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-300); + + --spectrum-picker-button-border-color: none; + --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-75); + --spectrum-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200); + --spectrum-picker-button-border-radius-sided: var(--spectrum-corner-radius-75); + --spectrum-picker-button-border-width: 0px; + } +} diff --git a/components/pickerbutton/themes/spectrum.css b/components/pickerbutton/themes/spectrum.css new file mode 100644 index 00000000000..5250be4186e --- /dev/null +++ b/components/pickerbutton/themes/spectrum.css @@ -0,0 +1,26 @@ +/*! +Copyright 2023 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 + +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. +*/ + +@container (--system: spectrum) { + .spectrum-PickerButton { + --spectrum-picker-button-background-color: var(--spectrum-gray-75); + --spectrum-picker-button-background-color-hover: var(--spectrum-gray-200); + --spectrum-picker-button-background-color-down: var(--spectrum-gray-300); + --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-200); + + --spectrum-picker-button-border-color: inherit; + --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-100); + --spectrum-picker-button-border-radius-rounded-sided: 0; + --spectrum-picker-button-border-radius-sided: 0; + --spectrum-picker-button-border-width: var(--spectrum-border-width-100); + } +} diff --git a/components/searchwithin/index.css b/components/searchwithin/index.css index 66035038c96..9feea931412 100644 --- a/components/searchwithin/index.css +++ b/components/searchwithin/index.css @@ -30,6 +30,7 @@ governing permissions and limitations under the License. flex-shrink: 0; border-start-end-radius: var(--spectrum-searchwithin-border-radius); border-end-end-radius: var(--spectrum-searchwithin-border-radius); + border-inline-end: 0; } .spectrum-SearchWithin-input { diff --git a/components/searchwithin/metadata/mods.md b/components/searchwithin/metadata/mods.md new file mode 100644 index 00000000000..4d369a98b6e --- /dev/null +++ b/components/searchwithin/metadata/mods.md @@ -0,0 +1,3 @@ +| Modifiable Custom Properties | +| ---------------------------------- | +| `--mod-picker-button-border-color` | diff --git a/components/searchwithin/stories/template.js b/components/searchwithin/stories/template.js index ca244ec0585..e432db5bd20 100644 --- a/components/searchwithin/stories/template.js +++ b/components/searchwithin/stories/template.js @@ -3,7 +3,7 @@ import { classMap } from "lit/directives/class-map.js"; import { styleMap } from "lit/directives/style-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; -import { Template as PickerButton } from "@spectrum-css/pickerbutton/stories/template.js"; +import { Template as Picker } from "@spectrum-css/picker/stories/template.js"; import { Template as Popover } from "@spectrum-css/popover/stories/template.js"; import { Template as Textfield } from "@spectrum-css/textfield/stories/template.js"; import { Template as ClearButton } from "@spectrum-css/clearbutton/stories/template.js"; @@ -28,10 +28,11 @@ export const Template = ({ })} style=${ifDefined(styleMap(customStyles))} > - ${PickerButton({ + ${Picker({ ...globals, size, - label: "All", + placeholder: "All", + label: undefined, isOpen, position: "left", customClasses: [`${rootClass}-picker`], diff --git a/yarn.lock b/yarn.lock index 128ee81ac3b..a0a3164d347 100644 --- a/yarn.lock +++ b/yarn.lock @@ -405,7 +405,7 @@ "@babel/helper-string-parser@^7.21.5": version "7.21.5" - resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz" + resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz#2b3eea65443c6bdc31c22d037c65f6d323b6b2bd" integrity sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w== "@babel/helper-string-parser@^7.22.5": @@ -2590,6 +2590,11 @@ resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz#96116f2a912e0c02817345b3c10751069920d553" integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg== +"@spectrum-css/pickerbutton@^3.0.34": + version "3.0.34" + resolved "https://registry.yarnpkg.com/@spectrum-css/pickerbutton/-/pickerbutton-3.0.34.tgz#987c639a281f0a54e72695cf38127faa60b9fcce" + integrity sha512-D8cfc9nvGNiLlY/y6TsgyZpj6zdGMh2ENUQi846DYS6ONRtDh9M2xoigpRcbIXc6Cm8kgCiZcTFsk07B/TT+pg== + "@spectrum-css/thumbnail@^2.0.34": version "2.0.34" resolved "https://registry.yarnpkg.com/@spectrum-css/thumbnail/-/thumbnail-2.0.34.tgz#b10c6474490ca1ae88992cbecf752ae12b3e986f" @@ -5768,7 +5773,7 @@ chalk@5.2.0: chalk@^1.1.1, chalk@^1.1.3: version "1.1.3" - resolved "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz" + resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98" integrity sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A== dependencies: ansi-styles "^2.2.1" @@ -17001,7 +17006,7 @@ url-parse-lax@^3.0.0: url-regex@^5.0.0: version "5.0.0" - resolved "https://registry.npmjs.org/url-regex/-/url-regex-5.0.0.tgz" + resolved "https://registry.yarnpkg.com/url-regex/-/url-regex-5.0.0.tgz#8f5456ab83d898d18b2f91753a702649b873273a" integrity sha512-O08GjTiAFNsSlrUWfqF1jH0H1W3m35ZyadHrGv5krdnmPPoxP27oDTqux/579PtaroiSGm5yma6KT1mHFH6Y/g== dependencies: ip-regex "^4.1.0"