From 6fc60cb78674140351d42077b534495a02208e5e Mon Sep 17 00:00:00 2001 From: garthdb Date: Tue, 28 Jul 2020 14:59:46 -0600 Subject: [PATCH] fix: renamed dropdown to picker --- components/dropdown/index.css | 139 -------------- components/dropdown/skin.css | 80 -------- components/{dropdown => picker}/.npmignore | 0 components/{dropdown => picker}/CHANGELOG.md | 0 components/{dropdown => picker}/README.md | 5 +- .../embed/Down-Chevron.svg | 0 components/{dropdown => picker}/gulpfile.js | 0 components/picker/index.css | 174 ++++++++++++++++++ .../metadata/dropdown.yml | 124 ++++++------- components/{dropdown => picker}/package.json | 8 +- components/picker/skin.css | 80 ++++++++ 11 files changed, 323 insertions(+), 287 deletions(-) delete mode 100644 components/dropdown/index.css delete mode 100644 components/dropdown/skin.css rename components/{dropdown => picker}/.npmignore (100%) rename components/{dropdown => picker}/CHANGELOG.md (100%) rename components/{dropdown => picker}/README.md (80%) rename components/{dropdown => picker}/embed/Down-Chevron.svg (100%) rename components/{dropdown => picker}/gulpfile.js (100%) create mode 100644 components/picker/index.css rename components/{dropdown => picker}/metadata/dropdown.yml (79%) rename components/{dropdown => picker}/package.json (87%) create mode 100644 components/picker/skin.css diff --git a/components/dropdown/index.css b/components/dropdown/index.css deleted file mode 100644 index 87c45822e23..00000000000 --- a/components/dropdown/index.css +++ /dev/null @@ -1,139 +0,0 @@ -/* -Copyright 2019 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. -*/ - -@import '../commons/index.css'; - -:root { - --spectrum-dropdown-popover-max-width: var(--spectrum-global-dimension-size-3000); - --spectrum-dropdown-width: var(--spectrum-global-dimension-size-2400); - - /* This needs to be a variable so it overrides when using multiStops */ - --spectrum-dropdown-quiet-width: auto; -} - -.spectrum-Dropdown { - position: relative; - display: inline-block; - - /* Truncate if menu options make us too wide */ - max-inline-size: 100%; - inline-size: var(--spectrum-dropdown-width); - min-inline-size: var(--spectrum-dropdown-min-width); - - /* Hack to enable select-powered Dropdowns */ - select { - appearance: none; - -ms-appearance: none; /* Edge */ - - &::-ms-expand { - display: none; - } - - &::-ms-value { - background-color: transparent; - } - - & + .spectrum-Dropdown-icon { - position: absolute; - inset-inline-end: var(--spectrum-dropdown-padding-x); - inset-block-start: 50%; - margin-block-start: calc(var(--spectrum-icon-chevron-down-medium-height) / -2); - } - } -} - -.spectrum-Dropdown-trigger { - position: relative; - inline-size: 100%; - display: flex; - justify-content: space-between; - align-items: center; -} - -.spectrum-Dropdown-label { - /* Be the biggest, but also shrink! */ - flex: 1 1 auto; - - white-space: nowrap; - overflow: hidden; - - block-size: calc(var(--spectrum-dropdown-height) - calc(var(--spectrum-dropdown-border-size) * 2)); - line-height: calc(var(--spectrum-dropdown-height) - calc(var(--spectrum-dropdown-border-size) * 2)); - - font-size: var(--spectrum-dropdown-text-size); - - text-overflow: ellipsis; - text-align: start; - - &.is-placeholder { - font-weight: var(--spectrum-dropdown-placeholder-text-font-weight); - font-style: var(--spectrum-dropdown-placeholder-text-font-style); - transition: color var(--spectrum-global-animation-duration-100) ease-in-out; - } -} - -/* Only apply margin to the icon if there's a label */ -.spectrum-Dropdown-label + .spectrum-Dropdown-icon { - margin-inline-start: var(--spectrum-dropdown-icon-margin-left); -} - -.spectrum-Icon + .spectrum-Dropdown-label { - margin-inline-start: var(--spectrum-selectlist-thumbnail-image-padding-x); -} - -/* Only apply margin if there's a label */ -.spectrum-Dropdown-label ~ .spectrum-Dropdown-icon { - margin-inline-start: var(--spectrum-dropdown-icon-margin-left); -} - -.spectrum-Dropdown-icon { - display: inline-block; - position: relative; - vertical-align: top; - transition: color var(--spectrum-global-animation-duration-100) ease-out; - - /* Fix Safari 10 bug where align-items is ignored inside of buttons */ - margin-block-start: calc(calc(var(--spectrum-dropdown-height) - calc(var(--spectrum-dropdown-border-size) * 2) - var(--spectrum-icon-chevron-down-medium-height)) / 2); - margin-block-end: calc(calc(var(--spectrum-dropdown-height) - calc(var(--spectrum-dropdown-border-size) * 2) - var(--spectrum-icon-chevron-down-medium-height)) / 2); - - opacity: 1; -} - -/* Error icons */ -.spectrum-Dropdown-trigger { - .spectrum-Icon:not(.spectrum-Dropdown-icon) { - /* Fix Safari 10 bug where align-items is ignored inside of buttons */ - margin-block-start: calc(calc(var(--spectrum-dropdown-height) - calc(var(--spectrum-dropdown-border-size) * 2) - var(--spectrum-dropdown-icon-size)) / 2); - margin-block-end: calc(calc(var(--spectrum-dropdown-height) - calc(var(--spectrum-dropdown-border-size) * 2) - var(--spectrum-dropdown-icon-size)) / 2); - } - - .spectrum-Dropdown-label + .spectrum-Icon:not(.spectrum-Dropdown-icon) { - margin-inline-start: var(--spectrum-dropdown-icon-margin-left); - } -} - -.spectrum-Icon + .spectrum-Dropdown-icon { - margin-inline-start: var(--spectrum-dropdown-icon-gap); -} - -.spectrum-Dropdown--quiet { - inline-size: var(--spectrum-dropdown-quiet-width); - min-inline-size: var(--spectrum-dropdown-quiet-min-width); -} - -.spectrum-Dropdown-popover { - max-inline-size: var(--spectrum-dropdown-popover-max-width); -} - -.spectrum-Dropdown-popover--quiet { - margin-inline-start: calc(-1 * calc(var(--spectrum-dropdown-quiet-popover-offset-x) + var(--spectrum-popover-border-size))); -} diff --git a/components/dropdown/skin.css b/components/dropdown/skin.css deleted file mode 100644 index dacded6e869..00000000000 --- a/components/dropdown/skin.css +++ /dev/null @@ -1,80 +0,0 @@ -/* -Copyright 2019 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. -*/ - -.spectrum-Dropdown { - .spectrum-Dropdown-trigger:hover { - .spectrum-Dropdown-icon { - color: var(--spectrum-dropdown-icon-color-hover); - } - } - - .spectrum-Dropdown-trigger { - &.is-selected { - .is-placeholder { - color: var(--spectrum-dropdown-placeholder-text-color-down); - } - } - } - - &.is-invalid { - .spectrum-Icon:not(.spectrum-Dropdown-icon):not(.spectrum-Menu-checkmark) { - color: var(--spectrum-dropdown-validation-icon-color-error); - } - - &.is-disabled { - .spectrum-Icon, - .spectrum-Icon:not(.spectrum-Dropdown-icon):not(.spectrum-Menu-checkmark) { - color: var(--spectrum-dropdown-icon-color-disabled); - } - } - } - - &.is-disabled { - &, - .spectrum-Dropdown-trigger:hover { - .spectrum-Dropdown-icon { - color: var(--spectrum-dropdown-icon-color-disabled); - } - } - .spectrum-Dropdown-label { - &.is-placeholder { - color: var(--spectrum-dropdown-placeholder-text-color-disabled); - } - } - } -} - -.spectrum-Dropdown-icon { - color: var(--spectrum-dropdown-icon-color); -} - -.spectrum-Dropdown-label { - &.is-placeholder { - color: var(--spectrum-dropdown-placeholder-text-color); - - &:hover { - color: var(--spectrum-dropdown-placeholder-text-color-hover); - } - - &:active { - color: var(--spectrum-dropdown-placeholder-text-color-mouse-focus); - } - } -} -.spectrum-Dropdown-trigger.focus-ring { - .spectrum-Dropdown-label.is-placeholder { - color: var(--spectrum-dropdown-placeholder-text-color-key-focus); - } - .spectrum-Dropdown-icon { - color: var(--spectrum-dropdown-icon-color-key-focus) - } -} diff --git a/components/dropdown/.npmignore b/components/picker/.npmignore similarity index 100% rename from components/dropdown/.npmignore rename to components/picker/.npmignore diff --git a/components/dropdown/CHANGELOG.md b/components/picker/CHANGELOG.md similarity index 100% rename from components/dropdown/CHANGELOG.md rename to components/picker/CHANGELOG.md diff --git a/components/dropdown/README.md b/components/picker/README.md similarity index 80% rename from components/dropdown/README.md rename to components/picker/README.md index b76ddce91ed..40b52ecba05 100644 --- a/components/dropdown/README.md +++ b/components/picker/README.md @@ -1,5 +1,6 @@ -# @spectrum-css/dropdown -> The Spectrum CSS dropdown component +# @spectrum-css/picker + +> The Spectrum CSS picker component This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). diff --git a/components/dropdown/embed/Down-Chevron.svg b/components/picker/embed/Down-Chevron.svg similarity index 100% rename from components/dropdown/embed/Down-Chevron.svg rename to components/picker/embed/Down-Chevron.svg diff --git a/components/dropdown/gulpfile.js b/components/picker/gulpfile.js similarity index 100% rename from components/dropdown/gulpfile.js rename to components/picker/gulpfile.js diff --git a/components/picker/index.css b/components/picker/index.css new file mode 100644 index 00000000000..b559a6f9648 --- /dev/null +++ b/components/picker/index.css @@ -0,0 +1,174 @@ +/* +Copyright 2019 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. +*/ + +@import "../commons/index.css"; + +:root { + --spectrum-picker-popover-max-width: var( + --spectrum-global-dimension-size-3000 + ); + --spectrum-picker-width: var(--spectrum-global-dimension-size-2400); + + /* This needs to be a variable so it overrides when using multiStops */ + --spectrum-picker-quiet-width: auto; +} + +.spectrum-Picker { + position: relative; + display: inline-block; + + /* Truncate if menu options make us too wide */ + max-inline-size: 100%; + inline-size: var(--spectrum-picker-width); + min-inline-size: var(--spectrum-picker-min-width); + + /* Hack to enable select-powered Dropdowns */ + select { + appearance: none; + -ms-appearance: none; /* Edge */ + + &::-ms-expand { + display: none; + } + + &::-ms-value { + background-color: transparent; + } + + & + .spectrum-Picker-icon { + position: absolute; + inset-inline-end: var(--spectrum-picker-padding-x); + inset-block-start: 50%; + margin-block-start: calc( + var(--spectrum-icon-chevron-down-medium-height) / -2 + ); + } + } +} + +.spectrum-Picker-trigger { + position: relative; + inline-size: 100%; + display: flex; + justify-content: space-between; + align-items: center; +} + +.spectrum-Picker-label { + /* Be the biggest, but also shrink! */ + flex: 1 1 auto; + + white-space: nowrap; + overflow: hidden; + + block-size: calc( + var(--spectrum-picker-height) - calc(var(--spectrum-picker-border-size) * 2) + ); + line-height: calc( + var(--spectrum-picker-height) - calc(var(--spectrum-picker-border-size) * 2) + ); + + font-size: var(--spectrum-picker-text-size); + + text-overflow: ellipsis; + text-align: start; + + &.is-placeholder { + font-weight: var(--spectrum-picker-placeholder-text-font-weight); + font-style: var(--spectrum-picker-placeholder-text-font-style); + transition: color var(--spectrum-global-animation-duration-100) ease-in-out; + } +} + +/* Only apply margin to the icon if there's a label */ +.spectrum-Picker-label + .spectrum-Picker-icon { + margin-inline-start: var(--spectrum-picker-icon-margin-left); +} + +.spectrum-Icon + .spectrum-Picker-label { + margin-inline-start: var(--spectrum-selectlist-thumbnail-image-padding-x); +} + +/* Only apply margin if there's a label */ +.spectrum-Picker-label ~ .spectrum-Picker-icon { + margin-inline-start: var(--spectrum-picker-icon-margin-left); +} + +.spectrum-Picker-icon { + display: inline-block; + position: relative; + vertical-align: top; + transition: color var(--spectrum-global-animation-duration-100) ease-out; + + /* Fix Safari 10 bug where align-items is ignored inside of buttons */ + margin-block-start: calc( + calc( + var(--spectrum-picker-height) - + calc(var(--spectrum-picker-border-size) * 2) - + var(--spectrum-icon-chevron-down-medium-height) + ) / 2 + ); + margin-block-end: calc( + calc( + var(--spectrum-picker-height) - + calc(var(--spectrum-picker-border-size) * 2) - + var(--spectrum-icon-chevron-down-medium-height) + ) / 2 + ); + + opacity: 1; +} + +/* Error icons */ +.spectrum-Picker-trigger { + .spectrum-Icon:not(.spectrum-Picker-icon) { + /* Fix Safari 10 bug where align-items is ignored inside of buttons */ + margin-block-start: calc( + calc( + var(--spectrum-picker-height) - + calc(var(--spectrum-picker-border-size) * 2) - + var(--spectrum-picker-icon-size) + ) / 2 + ); + margin-block-end: calc( + calc( + var(--spectrum-picker-height) - + calc(var(--spectrum-picker-border-size) * 2) - + var(--spectrum-picker-icon-size) + ) / 2 + ); + } + + .spectrum-Picker-label + .spectrum-Icon:not(.spectrum-Picker-icon) { + margin-inline-start: var(--spectrum-picker-icon-margin-left); + } +} + +.spectrum-Icon + .spectrum-Picker-icon { + margin-inline-start: var(--spectrum-picker-icon-gap); +} + +.spectrum-Picker--quiet { + inline-size: var(--spectrum-picker-quiet-width); + min-inline-size: var(--spectrum-picker-quiet-min-width); +} + +.spectrum-Picker-popover { + max-inline-size: var(--spectrum-picker-popover-max-width); +} + +.spectrum-Picker-popover--quiet { + margin-inline-start: calc( + -1 * calc(var(--spectrum-picker-quiet-popover-offset-x) + + var(--spectrum-popover-border-size)) + ); +} diff --git a/components/dropdown/metadata/dropdown.yml b/components/picker/metadata/dropdown.yml similarity index 79% rename from components/dropdown/metadata/dropdown.yml rename to components/picker/metadata/dropdown.yml index 4f20b83c002..6830bf28be9 100644 --- a/components/dropdown/metadata/dropdown.yml +++ b/components/picker/metadata/dropdown.yml @@ -6,24 +6,24 @@ examples: name: Standard markup: |

Closed

-
-

Open

-
- -
+
  • Donaudampfschifffahrtsgesellschaftskapitän @@ -57,17 +57,17 @@ examples:

    With Thumbnails

    -
    - -
    +

    • Disabled

      -
      -

      Closed

      -
      -

      Open

      -
      - -
      +
      • Ballard @@ -180,13 +180,13 @@ examples:

        Disabled

        -
        - @@ -196,25 +196,25 @@ examples: status: Verified markup: |

        Closed

        -
        -

        Open

        -
        -
        -
        +
        • Ballard @@ -247,18 +247,18 @@ examples:

          With Thumbnails

          -
          -
          -
          +

          • Disabled

            -
            -

            Closed

            -
            -

            Open

            -
            -
            -
            +
            • Ballard @@ -370,13 +370,13 @@ examples:

              Disabled

              -
              - diff --git a/components/dropdown/package.json b/components/picker/package.json similarity index 87% rename from components/dropdown/package.json rename to components/picker/package.json index 93019604fe7..84f6d2e1e5a 100644 --- a/components/dropdown/package.json +++ b/components/picker/package.json @@ -1,13 +1,13 @@ { - "name": "@spectrum-css/dropdown", + "name": "@spectrum-css/picker", "version": "3.0.0-beta.3", - "description": "The Spectrum CSS dropdown component", + "description": "The Spectrum CSS picker component", "license": "Apache-2.0", "main": "dist/index-vars.css", "repository": { "type": "git", "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/dropdown" + "directory": "components/picker" }, "bugs": { "url": "https://github.com/adobe/spectrum-css/issues" @@ -35,4 +35,4 @@ "access": "public" }, "homepage": "https://opensource.adobe.com/spectrum-css/" -} \ No newline at end of file +} diff --git a/components/picker/skin.css b/components/picker/skin.css new file mode 100644 index 00000000000..29fbb6235f2 --- /dev/null +++ b/components/picker/skin.css @@ -0,0 +1,80 @@ +/* +Copyright 2019 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. +*/ + +.spectrum-Picker { + .spectrum-Picker-trigger:hover { + .spectrum-Picker-icon { + color: var(--spectrum-picker-icon-color-hover); + } + } + + .spectrum-Picker-trigger { + &.is-selected { + .is-placeholder { + color: var(--spectrum-picker-placeholder-text-color-down); + } + } + } + + &.is-invalid { + .spectrum-Icon:not(.spectrum-Picker-icon):not(.spectrum-Menu-checkmark) { + color: var(--spectrum-picker-validation-icon-color-error); + } + + &.is-disabled { + .spectrum-Icon, + .spectrum-Icon:not(.spectrum-Picker-icon):not(.spectrum-Menu-checkmark) { + color: var(--spectrum-picker-icon-color-disabled); + } + } + } + + &.is-disabled { + &, + .spectrum-Picker-trigger:hover { + .spectrum-Picker-icon { + color: var(--spectrum-picker-icon-color-disabled); + } + } + .spectrum-Picker-label { + &.is-placeholder { + color: var(--spectrum-picker-placeholder-text-color-disabled); + } + } + } +} + +.spectrum-Picker-icon { + color: var(--spectrum-picker-icon-color); +} + +.spectrum-Picker-label { + &.is-placeholder { + color: var(--spectrum-picker-placeholder-text-color); + + &:hover { + color: var(--spectrum-picker-placeholder-text-color-hover); + } + + &:active { + color: var(--spectrum-picker-placeholder-text-color-mouse-focus); + } + } +} +.spectrum-Picker-trigger.focus-ring { + .spectrum-Picker-label.is-placeholder { + color: var(--spectrum-picker-placeholder-text-color-key-focus); + } + .spectrum-Picker-icon { + color: var(--spectrum-picker-icon-color-key-focus) + } +}