diff --git a/components/infieldbutton/gulpfile.js b/components/infieldbutton/gulpfile.js index 79fce384ab1..f13104999f1 100644 --- a/components/infieldbutton/gulpfile.js +++ b/components/infieldbutton/gulpfile.js @@ -1 +1 @@ -module.exports = require("@spectrum-css/component-builder"); +module.exports = require('@spectrum-css/component-builder-simple'); diff --git a/components/infieldbutton/index.css b/components/infieldbutton/index.css index 54479ea5656..657c70adb8a 100644 --- a/components/infieldbutton/index.css +++ b/components/infieldbutton/index.css @@ -10,28 +10,323 @@ 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 "./infieldbutton-generated.css"; - .spectrum-InfieldButton { - @inherit: %spectrum-BaseButton; + /* Medium size is the default */ + --spectrum-infield-button-height: var(--spectrum-component-height-100); + --spectrum-infield-button-width: var(--spectrum-component-height-100); + --spectrum-infield-button-stacked-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding); - border-style: none; - background-color: transparent; + --spectrum-infield-button-edge-to-fill: var( + --spectrum-in-field-button-edge-to-fill + ); + --spectrum-infield-button-inner-edge-to-fill: var( + --spectrum-in-field-button-stacked-inner-edge-to-fill + ); + --spectrum-infield-button-fill-padding: 0px; + --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium); + --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium); + --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium); - display: flex; - justify-content: center; - align-items: center; + --spectrum-infield-button-animation-duration: var( + --spectrum-animation-duration-100 + ); + + --spectrum-infield-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --spectrum-infield-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-infield-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --spectrum-infield-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + + &:disabled { + --mod-infield-button-background-color: var( + --mod-infield-button-background-color-disabled, + var(--spectrum-disabled-background-color) + ); + --mod-infield-button-background-color-hover: var( + --mod-infield-button-background-color-hover-disabled, + var(--spectrum-disabled-background-color) + ); + --mod-infield-button-background-color-down: var( + --mod-infield-button-background-color-down-disabled, + var(--spectrum-disabled-background-color) + ); + --mod-infield-button-border-color: var( + --mod-infield-button-border-color-disabled, + var(--spectrum-disabled-background-color) + ); + + --mod-infield-button-icon-color: var( + --mod-infield-button-icon-color-disabled, + var(--spectrum-disabled-content-color) + ); + --mod-infield-button-icon-color-hover: var( + --mod-infield-button-icon-color-hover-disabled, + var(--spectrum-disabled-content-color) + ); + --mod-infield-button-icon-color-down: var( + --mod-infield-button-icon-color-down-disabled, + var(--spectrum-disabled-content-color) + ); + --mod-infield-button-icon-color-key-focus: var( + --mod-infield-button-icon-color-key-focus-disabled, + var(--spectrum-disabled-content-color) + ); + } + + &.spectrum-InfieldButton--sizeS { + --spectrum-infield-button-height: var(--spectrum-component-height-75); + --spectrum-infield-button-width: var(--spectrum-component-height-75); + --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small); + --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small); + --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small); + + } + + &.spectrum-InfieldButton--sizeL { + --spectrum-infield-button-height: var(--spectrum-component-height-200); + --spectrum-infield-button-width: var(--spectrum-component-height-200); + --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large); + --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large); + --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large); + + } + + &.spectrum-InfieldButton--sizeXL { + --spectrum-infield-button-height: var(--spectrum-component-height-300); + --spectrum-infield-button-width: var(--spectrum-component-height-300); + --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large); + --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large); + --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large); + + } + + &.spectrum-InfieldButton--top, + &.spectrum-InfieldButton--bottom { + --mod-infield-button-width: var( + --mod-infield-button-width-stacked, + var(--spectrum-in-field-button-width-stacked-medium) + ); + + &.spectrum-InfieldButton--sizeS { + --mod-infield-button-width: var( + --mod-infield-button-width-stacked, + var(--spectrum-in-field-button-width-stacked-small) + ); + } + + &.spectrum-InfieldButton--sizeL { + --mod-infield-button-width: var( + --mod-infield-button-width-stacked, + var(--spectrum-in-field-button-width-stacked-large) + ); + } + + &.spectrum-InfieldButton--sizeXL { + --mod-infield-button-width: var( + --mod-infield-button-width-stacked, + var(--spectrum-in-field-button-width-stacked-extra-large) + ); + } + } + + &.spectrum-InfieldButton--quiet { + --mod-infield-button-background-color: var( + --mod-infield-button-background-color-quiet, + transparent + ); + --mod-infield-button-background-color-hover: var( + --mod-infield-button-background-color-hover-quiet, + transparent + ); + --mod-infield-button-background-color-down: var( + --mod-infield-button-background-color-down-quiet, + transparent + ); + --mod-infield-button-background-color-key-focus: var( + --mod-infield-button-background-color-key-focus-quiet, + transparent + ); + + --mod-infield-border-color: var( + --mod-infield-border-color-quiet, + transparent + ); + --mod-infield-button-border-width: var( + --mod-infield-button-border-width-quiet, + 0 + ); + + &:disabled { + --mod-infield-button-background-color: var( + --mod-infield-button-background-color-quiet-disabled, + transparent + ); + --mod-infield-button-border-color: var( + --mod-infield-button-border-color-quiet-disabled, + transparent + ); + } + } } -a.spectrum-InfieldButton { - @inherit: %spectrum-AnchorButton; +.spectrum-InfieldButton { + border-style: none; + background-color: transparent; + cursor: pointer; + + display: flex; + justify-content: center; + align-items: center; + + block-size: var( + --mod-infield-button-height, + var(--spectrum-infield-button-height) + ); + inline-size: var( + --mod-infield-button-width, + var(--spectrum-infield-button-width) + ); + + padding: var( + --mod-infield-button-edge-to-fill, + var(--spectrum-infield-button-edge-to-fill) + ); + + .spectrum-InfieldButton-fill { + block-size: 100%; + inline-size: 100%; + + background-color: var( + --mod-infield-button-background-color, + var(--spectrum-infield-button-background-color) + ); + + border-width: var( + --mod-infield-button-border-width, + var(--spectrum-infield-button-border-width) + ); + border-style: solid; + border-color: var( + --mod-infield-button-border-color, + var(--spectrum-infield-button-border-color) + ); + border-end-end-radius: var( + --mod-infield-button-border-radius, + var(--spectrum-infield-button-border-radius) + ); + border-start-end-radius: var( + --mod-infield-button-border-radius, + var(--spectrum-infield-button-border-radius) + ); + border-end-start-radius: var( + --mod-infield-button-border-radius, + var(--spectrum-infield-button-border-radius) + ); + border-start-start-radius: var( + --mod-infield-button-border-radius, + var(--spectrum-infield-button-border-radius) + ); + + padding: var( + --mod-infield-button-fill-padding, + var(--spectrum-infield-button-fill-padding) + ); + } + + .spectrum-InfieldButton-icon { + color: var( + --mod-infield-button-icon-color, + var(--spectrum-infield-button-icon-color) + ); + } + + &.spectrum-InfieldButton--right { + .spectrum-InfieldButton-fill { + border-end-start-radius: var( + --mod-infield-button-border-radius-reset, + var(--spectrum-infield-button-border-radius-reset) + ); + border-start-start-radius: var( + --mod-infield-button-border-radius-reset, + var(--spectrum-infield-button-border-radius-reset) + ); + } + } + + &.spectrum-InfieldButton--left { + .spectrum-InfieldButton-fill { + border-end-end-radius: var( + --mod-infield-button-border-radius-reset, + var(--spectrum-infield-button-border-radius-reset) + ); + border-start-end-radius: var( + --mod-infield-button-border-radius-reset, + var(--spectrum-infield-button-border-radius-reset) + ); + } + } + + &:disabled { + cursor: auto; + } + + &:hover { + .spectrum-InfieldButton-fill { + background-color: var( + --mod-infield-button-background-color-hover, + var(--spectrum-infield-button-background-color-hover) + ); + } + .spectrum-InfieldButton-icon { + color: var( + --mod-infield-button-icon-color-hover, + var(--spectrum-infield-button-icon-color-hover) + ); + } + } + + &:active { + .spectrum-InfieldButton-fill { + background-color: var( + --mod-infield-button-background-color-down, + var(--spectrum-infield-button-background-color-down) + ); + } + .spectrum-InfieldButton-icon { + color: var( + --mod-infield-button-icon-color-down, + var(--spectrum-infield-button-icon-color-down) + ); + } + } + + &.is-keyboardFocused, + &:focus-visible, + &.is-focused, + &:focus { + .spectrum-InfieldButton-fill { + background-color: var( + --mod-infield-button-background-color-key-focus, + var(--spectrum-infield-button-background-color-key-focus) + ); + } + .spectrum-InfieldButton-icon { + color: var( + --mod-infield-button-icon-color-key-focus, + var(--spectrum-infield-button-icon-color-key-focus) + ); + } + } } .spectrum-InfieldButton-fill { - /* override generated CSS */ - padding: 0 !important; - /* center icon */ display: flex; align-items: center; @@ -40,9 +335,91 @@ a.spectrum-InfieldButton { transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out; } +/* Stacked in-field buttons */ +/* Not currently in use (stepper uses Action Buttons) but adding the CSS so the option is there */ +.spectrum-InfieldButton--top, +.spectrum-InfieldButton--bottom { + block-size: calc( + var(--mod-infield-button-height, var(--spectrum-infield-button-height)) / 2 + ); + + .spectrum-InfieldButton-fill { + box-sizing: border-box; + padding-inline-start: calc(var(--mod-infield-button-stacked-fill-padding-inline, var(--spectrum-infield-button-stacked-fill-padding-inline)) - + var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - + var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)) + ); + padding-inline-end: calc(var(--mod-infield-button-stacked-fill-padding-inline, var(--spectrum-infield-button-stacked-fill-padding-inline)) - + var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - + var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)) + ); + } +} + +.spectrum-InfieldButton--top { + padding-block-end: var( + --mod-infield-button-inner-edge-to-fill, + var(--spectrum-infield-button-inner-edge-to-fill) + ); + .spectrum-InfieldButton-fill { + padding-block-start: calc(var(--mod-infield-button-stacked-fill-padding-outer, var(--spectrum-infield-button-stacked-fill-padding-outer)) - + var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - + var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)) + ); + padding-block-end: calc(var(--mod-infield-button-stacked-fill-padding-inner, var(--spectrum-infield-button-stacked-fill-padding-inner)) - + var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill)) + ); + border-bottom: none; + border-start-start-radius: var( + --mod-infield-button-stacked-top-border-radius-start-start, + var(--spectrum-infield-button-stacked-top-border-radius-start-start) + ); + border-end-start-radius: var( + --mod-infield-button-stacked-border-radius-reset, + var(--spectrum-infield-button-stacked-border-radius-reset) + ); + border-end-end-radius: var( + --mod-infield-button-stacked-border-radius-reset, + var(--spectrum-infield-button-stacked-border-radius-reset) + ); + } +} +.spectrum-InfieldButton--bottom { + padding-block-start: var( + --mod-infield-button-inner-edge-to-fill, + var(--spectrum-infield-button-inner-edge-to-fill) + ); + .spectrum-InfieldButton-fill { + padding-block-start: calc(var(--mod-infield-button-stacked-fill-padding-inner, var(--spectrum-infield-button-stacked-fill-padding-inner)) - + var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - + var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)) + ); + padding-block-end: calc(var(--mod-infield-button-stacked-fill-padding-outer, var(--spectrum-infield-button-stacked-fill-padding-outer)) - + var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill)) - + var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)) + ); + border-end-start-radius: var( + --mod-infield-button-stacked-bottom-border-radius-end-start, + var(--spectrum-infield-button-stacked-bottom-border-radius-end-start) + ); + border-start-start-radius: var( + --mod-infield-button-stacked-border-radius-reset, + var(--spectrum-infield-button-stacked-border-radius-reset) + ); + border-start-end-radius: var( + --mod-infield-button-stacked-border-radius-reset, + var(--spectrum-infield-button-stacked-border-radius-reset) + ); + } +} + + + .spectrum-InfieldButton-icon { - /* don't be small, ever */ - flex-shrink: 0; + display: initial; + + /* don't be small, ever */ + flex-shrink: 0; /* remove margin used for centering */ margin: 0 !important; diff --git a/components/infieldbutton/infieldbutton-generated.css b/components/infieldbutton/infieldbutton-generated.css deleted file mode 100644 index 1624e3f089e..00000000000 --- a/components/infieldbutton/infieldbutton-generated.css +++ /dev/null @@ -1,421 +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 infieldbutton */ -.spectrum-InfieldButton { - --spectrum-InfieldButton-border-radius-right: var(--spectrum-alias-infieldbutton-border-radius); - --spectrum-InfieldButton-border-radius-left: var(--spectrum-alias-infieldbutton-border-radius); - - &.spectrum-InfieldButton--right { - --spectrum-InfieldButton-border-radius-left: var(--spectrum-alias-infieldbutton-border-radius-sided); - - .spectrum-InfieldButton-fill { - border-end-start-radius: var(--spectrum-alias-infieldbutton-border-radius-sided); - border-start-start-radius: var(--spectrum-alias-infieldbutton-border-radius-sided) - } - } - - &.spectrum-InfieldButton--left { - --spectrum-InfieldButton-border-radius-right: var(--spectrum-alias-infieldbutton-border-radius-sided); - - .spectrum-InfieldButton-fill { - border-end-end-radius: var(--spectrum-alias-infieldbutton-border-radius-sided); - border-start-end-radius: var(--spectrum-alias-infieldbutton-border-radius-sided) - } - } - - &.spectrum-InfieldButton--sizeS { - padding: var(--spectrum-alias-infieldbutton-padding-s); - - .spectrum-InfieldButton-fill { - padding-inline-end: var(--spectrum-alias-infieldbutton-fill-padding-s); - padding-inline-start: var(--spectrum-alias-infieldbutton-fill-padding-s); - --spectrum-InfieldButton-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) - } - - .spectrum-InfieldButton-icon { - gap: var(--spectrum-global-dimension-size-85); - --spectrum-InfieldButton-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-InfieldButton--sizeM { - padding: var(--spectrum-alias-infieldbutton-padding-m); - - .spectrum-InfieldButton-fill { - padding-inline-end: var(--spectrum-alias-infieldbutton-fill-padding-m); - padding-inline-start: var(--spectrum-alias-infieldbutton-fill-padding-m); - --spectrum-InfieldButton-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) - } - - .spectrum-InfieldButton-icon { - gap: var(--spectrum-global-dimension-size-100); - --spectrum-InfieldButton-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-InfieldButton--sizeL { - padding: var(--spectrum-alias-infieldbutton-padding-l); - - .spectrum-InfieldButton-fill { - padding-inline-end: var(--spectrum-alias-infieldbutton-fill-padding-l); - padding-inline-start: var(--spectrum-alias-infieldbutton-fill-padding-l); - --spectrum-InfieldButton-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) - } - - .spectrum-InfieldButton-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-InfieldButton--sizeXL { - padding: var(--spectrum-alias-infieldbutton-padding-xl); - - .spectrum-InfieldButton-fill { - padding-inline-end: var(--spectrum-alias-infieldbutton-fill-padding-xl); - padding-inline-start: var(--spectrum-alias-infieldbutton-fill-padding-xl); - --spectrum-InfieldButton-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) - } - - .spectrum-InfieldButton-icon { - gap: var(--spectrum-global-dimension-size-125); - --spectrum-InfieldButton-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-InfieldButton { - &:disabled { - .spectrum-InfieldButton-fill { - border-color: var(--spectrum-alias-infieldbutton-fill-loudnessHigh-border-color-disabled); - background-color: var(--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-disabled); - } - } - - &:not(:disabled) { - .spectrum-InfieldButton-fill { - background-color: var(--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default); - } - - &:hover { - .spectrum-InfieldButton-fill { - background-color: var(--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover); - } - } - - &:active { - .spectrum-InfieldButton-fill { - background-color: var(--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down); - } - } - - &:focus-visible { - .spectrum-InfieldButton-fill { - background-color: var(--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus); - } - } - - &.is-keyboardFocused { - .spectrum-InfieldButton-fill { - background-color: var(--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus); - } - } - } - - &.is-invalid { - &:not(:disabled) { - .spectrum-InfieldButton-fill { - border-color: var(--spectrum-alias-input-border-color-invalid-default); - } - - &:hover { - .spectrum-InfieldButton-fill { - border-color: var(--spectrum-alias-input-border-color-invalid-hover); - } - } - - &:active { - .spectrum-InfieldButton-fill { - border-color: var(--spectrum-alias-input-border-color-invalid-down); - } - } - - &:focus { - .spectrum-InfieldButton-fill { - border-color: var(--spectrum-alias-input-border-color-invalid-mouse-focus); - } - } - - &.is-focused { - .spectrum-InfieldButton-fill { - border-color: var(--spectrum-alias-input-border-color-invalid-mouse-focus); - } - } - - &:focus-visible { - .spectrum-InfieldButton-fill { - border-color: var(--spectrum-alias-input-border-color-invalid-key-focus); - } - } - - &.is-keyboardFocused { - .spectrum-InfieldButton-fill { - border-color: var(--spectrum-alias-input-border-color-invalid-key-focus); - } - } - } - } - - &:not(.is-invalid) { - &:not(:disabled) { - .spectrum-InfieldButton-fill { - border-color: var(--spectrum-alias-infieldbutton-fill-border-color-default); - } - - &:hover { - .spectrum-InfieldButton-fill { - border-color: var(--spectrum-alias-infieldbutton-fill-border-color-hover); - } - } - - &:active { - .spectrum-InfieldButton-fill { - border-color: var(--spectrum-alias-infieldbutton-fill-border-color-down); - } - } - - &:focus { - .spectrum-InfieldButton-fill { - border-color: var(--spectrum-alias-infieldbutton-fill-border-color-mouse-focus); - } - } - - &.is-focused { - .spectrum-InfieldButton-fill { - border-color: var(--spectrum-alias-infieldbutton-fill-border-color-mouse-focus); - } - } - - &:focus-visible { - .spectrum-InfieldButton-fill { - border-color: var(--spectrum-alias-infieldbutton-fill-border-color-key-focus); - } - } - - &.is-keyboardFocused { - .spectrum-InfieldButton-fill { - border-color: var(--spectrum-alias-infieldbutton-fill-border-color-key-focus); - } - } - } - } - } - - &.spectrum-InfieldButton--quiet { - &:disabled { - .spectrum-InfieldButton-fill { - border-color: var(--spectrum-alias-infieldbutton-fill-loudnessLow-border-color-disabled); - background-color: var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-disabled); - } - } - - &:not(:disabled) { - .spectrum-InfieldButton-fill { - background-color: var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default); - } - - &:hover { - .spectrum-InfieldButton-fill { - background-color: var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover); - } - } - - &:active { - .spectrum-InfieldButton-fill { - background-color: var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down); - } - } - - &:focus-visible { - .spectrum-InfieldButton-fill { - background-color: var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus); - } - } - - &.is-keyboardFocused { - .spectrum-InfieldButton-fill { - background-color: var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus); - } - } - } - - &.is-invalid { - &:not(:disabled) { - .spectrum-InfieldButton-fill { - border-color: transparent; - } - } - } - - &:not(.is-invalid) { - &:not(:disabled) { - .spectrum-InfieldButton-fill { - border-color: transparent; - } - - &:hover { - .spectrum-InfieldButton-fill { - border-color: transparent; - } - } - - &:active { - .spectrum-InfieldButton-fill { - border-color: transparent; - } - } - - &:focus { - .spectrum-InfieldButton-fill { - border-color: transparent; - } - } - - &.is-focused { - .spectrum-InfieldButton-fill { - border-color: transparent; - } - } - - &:focus-visible { - .spectrum-InfieldButton-fill { - border-color: transparent; - } - } - - &.is-keyboardFocused { - .spectrum-InfieldButton-fill { - border-color: transparent; - } - } - } - } - } - - &:disabled { - .spectrum-InfieldButton-icon { - color: var(--spectrum-alias-component-icon-color-disabled); - } - } - - &:not(:disabled) { - .spectrum-InfieldButton-icon { - color: var(--spectrum-alias-component-icon-color-default); - } - - &:hover { - .spectrum-InfieldButton-icon { - color: var(--spectrum-alias-component-icon-color-hover); - } - } - - &:active { - .spectrum-InfieldButton-icon { - color: var(--spectrum-alias-component-icon-color-down); - } - } - - &:focus-visible { - .spectrum-InfieldButton-icon { - color: var(--spectrum-alias-component-icon-color-key-focus); - } - } - - &.is-keyboardFocused { - .spectrum-InfieldButton-icon { - color: var(--spectrum-alias-component-icon-color-key-focus); - } - } - - &:focus { - .spectrum-InfieldButton-icon { - color: var(--spectrum-alias-component-icon-color-mouse-focus); - } - } - - &.is-focused { - .spectrum-InfieldButton-icon { - color: var(--spectrum-alias-component-icon-color-mouse-focus); - } - } - } -} - -.spectrum-InfieldButton-fill { - border-width: var(--spectrum-alias-infieldbutton-border-size); - border-style: solid; - border-end-end-radius: var(--spectrum-alias-infieldbutton-border-radius); - border-start-end-radius: var(--spectrum-alias-infieldbutton-border-radius); - border-end-start-radius: var(--spectrum-alias-infieldbutton-border-radius); - border-start-start-radius: var(--spectrum-alias-infieldbutton-border-radius); -} - -.spectrum-InfieldButton-icon { - display: initial; -} - -.spectrum--medium { - .spectrum-InfieldButton { - &.spectrum-InfieldButton--sizeL { - .spectrum-InfieldButton-icon { - --spectrum-InfieldButton-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-InfieldButton { - &.spectrum-InfieldButton--sizeL { - .spectrum-InfieldButton-icon { - --spectrum-InfieldButton-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); - } - } - } -} - -/* end generated CSS for infieldbutton */ diff --git a/components/infieldbutton/metadata/infieldbutton.yml b/components/infieldbutton/metadata/infieldbutton.yml index 777df26dd02..63e0670b80a 100644 --- a/components/infieldbutton/metadata/infieldbutton.yml +++ b/components/infieldbutton/metadata/infieldbutton.yml @@ -4,7 +4,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/picker/ sections: - name: Migration Guide description: | - ### In-Field Button uses the [Quiet](infieldbutton.html#quiet) variant instead of loudness levels. + ### In-field button uses the [Quiet](infieldbutton.html#quiet) variant instead of loudness levels. The Loudness level classes, `.spectrum-InfieldButton--low`, `.spectrum-InfieldButton--medium`, and `.spectrum-InfieldButton--high`, have been removed. @@ -13,6 +13,10 @@ sections: The Loudness - Medium variant has been removed, so there is no equivalent. + ### Stacked in-field buttons + + In order to create the stacked In-field buttons, give the first button a class of `spectrum-InfieldButton--top` and the second a class of `spectrum-InfieldButton--bottom` + examples: - id: infieldbutton-sizing name: Sizing @@ -20,9 +24,9 @@ examples:

S

-

End

-
- - id: infieldbutton-icononly - name: Workflow icon only - markup: | - - - id: infieldbutton-disabled name: Disabled markup: | - - - id: infieldbutton-invalid - name: Invalid + - id: infieldbutton-stacked + name: Stacked markup: | - + - + +
+

L

+ + +
+ +
+

XL

+ + +
+ + diff --git a/components/infieldbutton/metadata/mods.md b/components/infieldbutton/metadata/mods.md new file mode 100644 index 00000000000..ad28b109dde --- /dev/null +++ b/components/infieldbutton/metadata/mods.md @@ -0,0 +1,43 @@ +| Modifiable Custom Properties | +| ------------------------------------------------------------- | +| `--mod-infield-border-color` | +| `--mod-infield-border-color-quiet` | +| `--mod-infield-button-background-color` | +| `--mod-infield-button-background-color-disabled` | +| `--mod-infield-button-background-color-down` | +| `--mod-infield-button-background-color-down-disabled` | +| `--mod-infield-button-background-color-down-quiet` | +| `--mod-infield-button-background-color-hover` | +| `--mod-infield-button-background-color-hover-disabled` | +| `--mod-infield-button-background-color-hover-quiet` | +| `--mod-infield-button-background-color-key-focus` | +| `--mod-infield-button-background-color-key-focus-quiet` | +| `--mod-infield-button-background-color-quiet` | +| `--mod-infield-button-background-color-quiet-disabled` | +| `--mod-infield-button-border-color` | +| `--mod-infield-button-border-color-disabled` | +| `--mod-infield-button-border-color-quiet-disabled` | +| `--mod-infield-button-border-radius` | +| `--mod-infield-button-border-radius-reset` | +| `--mod-infield-button-border-width` | +| `--mod-infield-button-border-width-quiet` | +| `--mod-infield-button-edge-to-fill` | +| `--mod-infield-button-fill-padding` | +| `--mod-infield-button-height` | +| `--mod-infield-button-icon-color` | +| `--mod-infield-button-icon-color-disabled` | +| `--mod-infield-button-icon-color-down` | +| `--mod-infield-button-icon-color-down-disabled` | +| `--mod-infield-button-icon-color-hover` | +| `--mod-infield-button-icon-color-hover-disabled` | +| `--mod-infield-button-icon-color-key-focus` | +| `--mod-infield-button-icon-color-key-focus-disabled` | +| `--mod-infield-button-inner-edge-to-fill` | +| `--mod-infield-button-stacked-border-radius-reset` | +| `--mod-infield-button-stacked-bottom-border-radius-end-start` | +| `--mod-infield-button-stacked-fill-padding-inline` | +| `--mod-infield-button-stacked-fill-padding-inner` | +| `--mod-infield-button-stacked-fill-padding-outer` | +| `--mod-infield-button-stacked-top-border-radius-start-start` | +| `--mod-infield-button-width` | +| `--mod-infield-button-width-stacked` | diff --git a/components/infieldbutton/package.json b/components/infieldbutton/package.json index dcca5a45e4c..8b2588df357 100644 --- a/components/infieldbutton/package.json +++ b/components/infieldbutton/package.json @@ -18,12 +18,12 @@ "build": "gulp" }, "peerDependencies": { - "@spectrum-css/vars": ">=9" + "@spectrum-css/tokens": ">=11" }, "devDependencies": { - "@spectrum-css/component-builder": "^4.0.12", + "@spectrum-css/component-builder-simple": "^2.0.13", "@spectrum-css/icon": "^3.0.50", - "@spectrum-css/vars": "^9.0.8", + "@spectrum-css/tokens": "^11.0.0", "gulp": "^4.0.0" }, "publishConfig": { diff --git a/components/infieldbutton/stories/infieldbutton.stories.js b/components/infieldbutton/stories/infieldbutton.stories.js index 165e788629d..841d6790d2c 100644 --- a/components/infieldbutton/stories/infieldbutton.stories.js +++ b/components/infieldbutton/stories/infieldbutton.stories.js @@ -4,79 +4,86 @@ import { Template } from "./template"; import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; export default { - title: "Components/In-field button", - description: "The Infield button component is...", - component: "Infieldbutton", - argTypes: { - size: { - name: "Size", - type: { name: "string", required: true }, - table: { - type: { summary: "string" }, - category: "Component", - }, - options: ["s", "m", "l", "xl"], - control: "select", - }, - quiet: { - name: "Quiet", - type: { name: "boolean" }, - table: { - type: { summary: "boolean" }, - category: "Component", - }, - control: "boolean", - }, - position: { - name: "Position", - type: { name: "string", required: true }, - table: { - type: { summary: "string" }, - category: "Component", - }, - options: ["left", "right"], - control: "select", - }, - iconName: { - ...(IconStories?.argTypes?.iconName ?? {}), - if: false, - }, - isDisabled: { - name: "Disabled", - type: { name: "boolean" }, - table: { - type: { summary: "boolean" }, - category: "State", - }, - control: "boolean", - }, - isInvalid: { - name: "Invalid", - type: { name: "boolean" }, - table: { - type: { summary: "boolean" }, - category: "State", - }, - control: "boolean", - }, - }, - args: { - rootClass: "spectrum-InfieldButton", - size: "m", - position: "left", - iconName: "Add", - }, - parameters: { - actions: { - handles: [], - }, - status: { - type: process.env.MIGRATED_PACKAGES.includes("infieldbutton") - ? "migrated" - : undefined, - }, - }, + title: "Components/In-field button", + description: "The In-field button component is a button used inside a textfield", + component: "Infieldbutton", + argTypes: { + size: { + name: "Size", + type: { name: "string", required: true }, + table: { + type: { summary: "string" }, + category: "Component", + }, + options: ["s", "m", "l", "xl"], + control: "select" + }, + isQuiet: { + name: "Quiet", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Component", + }, + control: "boolean" + }, + position: { + name: "Position", + type: { name: "string", required: true }, + table: { + type: { summary: "string" }, + category: "Component", + }, + options: ["left", "right"], + control: "select" + }, + iconName: { + ...IconStories?.argTypes?.iconName ?? {}, + if: false, + }, + isDisabled: { + name: "Disabled", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean" + }, + }, + args: { + rootClass: "spectrum-InfieldButton", + size: "m", + position: "left", + iconName: "Add", + isQuiet: false, + isDisabled: false + }, + parameters: { + actions: { + handles: [] + }, + status: { + type: process.env.MIGRATED_PACKAGES.includes('infieldbutton') ? 'migrated' : undefined + } + } }; export const Default = Template.bind({}); Default.args = {}; + +export const Right = Template.bind({}); +Right.args = { + position: "right" +}; + +export const Quiet = Template.bind({}); +Quiet.args = { + isQuiet: true +}; + +export const Disabled = Template.bind({}); +Disabled.args = { + isDisabled: true +}; + diff --git a/components/infieldbutton/stories/template.js b/components/infieldbutton/stories/template.js index 28deb3b51e9..f570cacdbc5 100644 --- a/components/infieldbutton/stories/template.js +++ b/components/infieldbutton/stories/template.js @@ -7,40 +7,42 @@ import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; import "../index.css"; export const Template = ({ - rootClass = "spectrum-InfieldButton", - customClasses = [], - size = "m", - position = "start", - quiet, - iconName = "Add", - isDisabled, - isInvalid, - ...globals + rootClass = "spectrum-InfieldButton", + customClasses = [], + size = "m", + position, + isQuiet, + iconName = "Add", + isDisabled, + isInvalid, + ...globals }) => { - return html` - - `; -}; + 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/infieldbutton/themes/express.css b/components/infieldbutton/themes/express.css new file mode 100644 index 00000000000..4314b585bd2 --- /dev/null +++ b/components/infieldbutton/themes/express.css @@ -0,0 +1,30 @@ +/*! +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-InfieldButton { + --spectrum-infield-button-border-width: 0; + --spectrum-infield-button-border-color: transparent; + + --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-75); + --spectrum-infield-button-border-radius-reset: var(--spectrum-corner-radius-75); + + --spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-corner-radius-75); + --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-corner-radius-75); + + --spectrum-infield-button-background-color: var(--spectrum-gray-200); + --spectrum-infield-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-infield-button-background-color-down: var(--spectrum-gray-400); + --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-300); + + } +} diff --git a/components/infieldbutton/themes/spectrum.css b/components/infieldbutton/themes/spectrum.css new file mode 100644 index 00000000000..ae22ee72443 --- /dev/null +++ b/components/infieldbutton/themes/spectrum.css @@ -0,0 +1,30 @@ +/*! +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-InfieldButton { + --spectrum-infield-button-border-width: var(--spectrum-border-width-100); + --spectrum-infield-button-border-color: inherit; + + --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-100); + --spectrum-infield-button-border-radius-reset: 0; + + /* Have to call these out specifically due to Express differences */ + --spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-infield-button-border-radius-reset); + --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-infield-button-border-radius-reset); + + --spectrum-infield-button-background-color: var(--spectrum-gray-75); + --spectrum-infield-button-background-color-hover: var(--spectrum-gray-200); + --spectrum-infield-button-background-color-down: var(--spectrum-gray-300); + --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-200); + } +} diff --git a/yarn.lock b/yarn.lock index f0f6b3d84fa..0e1aa218be1 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.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz#2b3eea65443c6bdc31c22d037c65f6d323b6b2bd" + resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz" integrity sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w== "@babel/helper-string-parser@^7.22.5": @@ -5763,7 +5763,7 @@ chalk@5.2.0: chalk@^1.1.1, chalk@^1.1.3: version "1.1.3" - resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98" + resolved "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz" integrity sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A== dependencies: ansi-styles "^2.2.1" @@ -16996,7 +16996,7 @@ url-parse-lax@^3.0.0: url-regex@^5.0.0: version "5.0.0" - resolved "https://registry.yarnpkg.com/url-regex/-/url-regex-5.0.0.tgz#8f5456ab83d898d18b2f91753a702649b873273a" + resolved "https://registry.npmjs.org/url-regex/-/url-regex-5.0.0.tgz" integrity sha512-O08GjTiAFNsSlrUWfqF1jH0H1W3m35ZyadHrGv5krdnmPPoxP27oDTqux/579PtaroiSGm5yma6KT1mHFH6Y/g== dependencies: ip-regex "^4.1.0"