From 526052aeeea5ad9a17a230a4a1e6c6536731eaf3 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Thu, 22 Sep 2022 13:57:56 -0400 Subject: [PATCH] refactor(FluidDropdown): move styles to fluid-list-box to share styles --- .../react/src/components/Dropdown/Dropdown.js | 4 +- .../components/FluidDropdown/FluidDropdown.js | 4 +- .../react/src/components/ListBox/ListBox.js | 3 +- packages/styles/scss/components/_index.scss | 3 +- .../fluid-dropdown/_fluid-dropdown.scss | 155 +-------------- .../fluid-list-box/_fluid-list-box.scss | 178 ++++++++++++++++++ .../components/fluid-list-box/_index.scss | 11 ++ 7 files changed, 199 insertions(+), 159 deletions(-) create mode 100644 packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss create mode 100644 packages/styles/scss/components/fluid-list-box/_index.scss diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js index f1d8950ddce3..f034e61f0c7b 100644 --- a/packages/react/src/components/Dropdown/Dropdown.js +++ b/packages/react/src/components/Dropdown/Dropdown.js @@ -124,8 +124,8 @@ const Dropdown = React.forwardRef(function Dropdown( [`${prefix}--list-box__wrapper--inline`]: inline, [`${prefix}--dropdown__wrapper--inline--invalid`]: inline && invalid, [`${prefix}--list-box__wrapper--inline--invalid`]: inline && invalid, - [`${prefix}--dropdown__wrapper--fluid--invalid`]: isFluid && invalid, - [`${prefix}--dropdown__wrapper--fluid--focus`]: + [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid, + [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused && !isOpen, } ); diff --git a/packages/react/src/components/FluidDropdown/FluidDropdown.js b/packages/react/src/components/FluidDropdown/FluidDropdown.js index 140985e3a4fd..52c3d2deca62 100644 --- a/packages/react/src/components/FluidDropdown/FluidDropdown.js +++ b/packages/react/src/components/FluidDropdown/FluidDropdown.js @@ -18,9 +18,9 @@ const FluidDropdown = React.forwardRef(function FluidDropdown( ) { const prefix = usePrefix(); const classNames = classnames( - `${prefix}--dropdown__wrapper--fluid`, + `${prefix}--list-box__wrapper--fluid`, className, - { [`${prefix}--dropdown__wrapper--fluid--condensed`]: isCondensed } + { [`${prefix}--list-box__wrapper--fluid--condensed`]: isCondensed } ); return ( diff --git a/packages/react/src/components/ListBox/ListBox.js b/packages/react/src/components/ListBox/ListBox.js index 62395e22374c..371cbb399590 100644 --- a/packages/react/src/components/ListBox/ListBox.js +++ b/packages/react/src/components/ListBox/ListBox.js @@ -61,6 +61,7 @@ const ListBox = React.forwardRef(function ListBox( [`${prefix}--list-box--disabled`]: disabled, [`${prefix}--list-box--light`]: light, [`${prefix}--list-box--expanded`]: isOpen, + [`${prefix}--list-box--invalid`]: invalid, [`${prefix}--list-box--warning`]: showWarning, }); return ( @@ -75,7 +76,7 @@ const ListBox = React.forwardRef(function ListBox( data-invalid={invalid || undefined}> {children} - {isFluid &&
} + {isFluid &&
} {invalid ? (
{invalidText}
) : null} diff --git a/packages/styles/scss/components/_index.scss b/packages/styles/scss/components/_index.scss index c9593a36e734..53fd1819a236 100644 --- a/packages/styles/scss/components/_index.scss +++ b/packages/styles/scss/components/_index.scss @@ -22,8 +22,9 @@ @use 'date-picker'; @use 'dropdown'; @use 'file-uploader'; -@use 'fluid-text-input'; @use 'fluid-dropdown'; +@use 'fluid-list-box'; +@use 'fluid-text-input'; @use 'form'; @use 'inline-loading'; @use 'link'; diff --git a/packages/styles/scss/components/fluid-dropdown/_fluid-dropdown.scss b/packages/styles/scss/components/fluid-dropdown/_fluid-dropdown.scss index 547cbd5a1ada..661581644f7f 100644 --- a/packages/styles/scss/components/fluid-dropdown/_fluid-dropdown.scss +++ b/packages/styles/scss/components/fluid-dropdown/_fluid-dropdown.scss @@ -15,159 +15,8 @@ @use '../../utilities/convert' as *; @use '../../utilities/focus-outline' as *; @use '../dropdown'; +@use '../fluid-list-box'; @mixin fluid-dropdown { - .#{$prefix}--dropdown__wrapper--fluid.#{$prefix}--dropdown__wrapper { - position: relative; - height: 100%; - background: $field; - transition: background-color $duration-fast-01 motion(standard, productive), - outline $duration-fast-01 motion(standard, productive); - } - - .#{$prefix}--dropdown__wrapper--fluid .#{$prefix}--dropdown { - min-height: rem(64px); - padding: rem(32px) $spacing-05 rem(13px); - } - - .#{$prefix}--dropdown__wrapper--fluid .#{$prefix}--label { - position: absolute; - z-index: 1; - top: rem(13px); - left: $spacing-05; - display: flex; - height: rem(16px); - align-items: center; - margin: 0; - } - - .#{$prefix}--dropdown__wrapper--fluid .#{$prefix}--list-box { - padding: 0; - } - - .#{$prefix}--dropdown__wrapper--fluid .#{$prefix}--list-box__field { - padding-top: rem(33px); - padding-bottom: rem(13px); - padding-left: $spacing-05; - } - - .#{$prefix}--dropdown__wrapper--fluid .#{$prefix}--list-box__menu-icon { - width: 1rem; - height: 1rem; - } - - .#{$prefix}--dropdown__wrapper--fluid:not(.#{$prefix}--dropdown__wrapper--fluid--condensed) - .#{$prefix}--list-box__menu-item { - height: $spacing-10; - } - - .#{$prefix}--dropdown__wrapper--fluid:not(.#{$prefix}--dropdown__wrapper--fluid--condensed) - .#{$prefix}--list-box__menu-item__selected-icon { - top: rem(20px); - } - - // Disabled styles - .#{$prefix}--dropdown__wrapper--fluid - .#{$prefix}--label--disabled - .#{$prefix}--toggletip-label { - color: $text-disabled; - } - - .#{$prefix}--dropdown__wrapper--fluid - .#{$prefix}--label--disabled - .#{$prefix}--toggletip-button { - cursor: not-allowed; - pointer-events: none; - } - - .#{$prefix}--dropdown__wrapper--fluid - .#{$prefix}--label--disabled - .#{$prefix}--toggletip-button - svg { - fill: $icon-disabled; - } - - // Focus styles - .#{$prefix}--dropdown__wrapper--fluid.#{$prefix}--dropdown__wrapper--fluid--focus { - @include focus-outline('outline'); - - outline-offset: 0; - } - - .#{$prefix}--dropdown__wrapper--fluid.#{$prefix}--dropdown__wrapper--fluid--focus - .#{$prefix}--dropdown:not(.#{$prefix}--dropdown--invalid) { - border-bottom: 1px solid transparent; - } - - .#{$prefix}--dropdown__wrapper--fluid .#{$prefix}--list-box__field:focus { - outline: none; - outline-offset: 0; - } - - // Invalid / Warning styles - .#{$prefix}--dropdown__wrapper--fluid.#{$prefix}--dropdown__wrapper--fluid--invalid:not(.#{$prefix}--dropdown__wrapper--fluid--focus) { - @include focus-outline('invalid'); - - outline-offset: 0; - } - - .#{$prefix}--dropdown__wrapper--fluid.#{$prefix}--dropdown__wrapper--fluid--invalid - .#{$prefix}--dropdown--invalid, - .#{$prefix}--dropdown__wrapper--fluid.#{$prefix}--dropdown__wrapper--fluid--invalid - .#{$prefix}--list-box__field:focus { - outline: none; - outline-offset: 0; - } - - .#{$prefix}--dropdown__wrapper--fluid.#{$prefix}--dropdown__wrapper--fluid--invalid:focus-within { - outline-offset: 0; - } - - .#{$prefix}--dropdown__wrapper--fluid.#{$prefix}--dropdown__wrapper--fluid--invalid - .#{$prefix}--dropdown, - .#{$prefix}--dropdown__wrapper--fluid .#{$prefix}--dropdown--warning { - border-bottom: 1px solid transparent; - } - - .#{$prefix}--dropdown__wrapper--fluid.#{$prefix}--dropdown__wrapper--fluid--invalid - .#{$prefix}--form-requirement, - .#{$prefix}--dropdown__wrapper--fluid - .#{$prefix}--list-box--warning - ~ .#{$prefix}--form-requirement { - padding: rem(8px) 4rem rem(8px) $spacing-05; - margin-top: 0; - } - - .#{$prefix}--dropdown__wrapper--fluid.#{$prefix}--dropdown__wrapper--fluid--invalid - .#{$prefix}--list-box__invalid-icon, - .#{$prefix}--dropdown__wrapper--fluid - .#{$prefix}--dropdown--warning - .#{$prefix}--list-box__invalid-icon { - top: rem(81px); - right: $spacing-05; - pointer-events: none; - } - - // Error + Warning divider - .#{$prefix}--dropdown__wrapper--fluid .#{$prefix}--dropdown__divider { - display: none; - } - - .#{$prefix}--dropdown__wrapper--fluid - .#{$prefix}--dropdown--invalid - ~ .#{$prefix}--dropdown__divider, - .#{$prefix}--dropdown__wrapper--fluid - .#{$prefix}--dropdown--warning - ~ .#{$prefix}--dropdown__divider { - display: block; - border: 1px solid $border-subtle; - margin: 0 1rem; - } - - // direction - top - .#{$prefix}--dropdown__wrapper--fluid - .#{$prefix}--list-box--up - .#{$prefix}--list-box__menu { - bottom: $spacing-10; - } + // Style overrides can be added here as needed } diff --git a/packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss b/packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss new file mode 100644 index 000000000000..583697d05633 --- /dev/null +++ b/packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss @@ -0,0 +1,178 @@ +// +// Copyright IBM Corp. 2022 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +//----------------------------- +// Fluid List-box +//----------------------------- +@use '../../config' as *; +@use '../../motion' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../utilities/convert' as *; +@use '../../utilities/focus-outline' as *; + +@mixin fluid-list-box { + .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper { + position: relative; + height: 100%; + background: $field; + transition: background-color $duration-fast-01 motion(standard, productive), + outline $duration-fast-01 motion(standard, productive); + } + + .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box { + min-height: rem(64px); + padding: 0; + } + + .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--label { + position: absolute; + z-index: 1; + top: rem(13px); + left: $spacing-05; + display: flex; + height: rem(16px); + align-items: center; + margin: 0; + } + + .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__field { + padding-top: rem(33px); + padding-bottom: rem(13px); + padding-left: $spacing-05; + } + + .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__menu-icon { + width: 1rem; + height: 1rem; + } + + .#{$prefix}--list-box__wrapper--fluid:not(.#{$prefix}--list-box__wrapper--fluid--condensed) + .#{$prefix}--list-box__menu-item { + height: $spacing-10; + } + + .#{$prefix}--list-box__wrapper--fluid:not(.#{$prefix}--list-box__wrapper--fluid--condensed) + .#{$prefix}--list-box__menu-item__selected-icon { + top: rem(20px); + } + + // Disabled styles + .#{$prefix}--list-box__wrapper--fluid + .#{$prefix}--label--disabled + .#{$prefix}--toggletip-label { + color: $text-disabled; + } + + .#{$prefix}--list-box__wrapper--fluid + .#{$prefix}--label--disabled + .#{$prefix}--toggletip-button { + cursor: not-allowed; + pointer-events: none; + } + + .#{$prefix}--list-box__wrapper--fluid + .#{$prefix}--label--disabled + .#{$prefix}--toggletip-button + svg { + fill: $icon-disabled; + } + + // Focus styles + .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--focus { + @include focus-outline('outline'); + + outline-offset: 0; + } + + .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__field:focus { + outline: none; + outline-offset: 0; + } + + // Invalid / Warning styles + .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid:not(.#{$prefix}--list-box__wrapper--fluid--focus) { + @include focus-outline('invalid'); + + outline-offset: 0; + } + + .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--focus + .#{$prefix}--list-box:not(.#{$prefix}--list-box--invalid) { + border-bottom: 1px solid transparent; + } + + .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid + .#{$prefix}--list-box, + .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid + .#{$prefix}--list-box__field:focus { + outline: none; + outline-offset: 0; + } + + .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid:focus-within { + outline-offset: 0; + } + + .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid + .#{$prefix}--list-box, + .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box--warning { + border-bottom: 1px solid transparent; + } + + .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid + .#{$prefix}--form-requirement, + .#{$prefix}--list-box__wrapper--fluid + .#{$prefix}--list-box--warning + ~ .#{$prefix}--form-requirement { + padding: rem(8px) 4rem rem(8px) $spacing-05; + margin-top: 0; + } + + .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid + .#{$prefix}--list-box__invalid-icon, + .#{$prefix}--list-box__wrapper--fluid + .#{$prefix}--list-box--warning + .#{$prefix}--list-box__invalid-icon { + top: rem(81px); + right: $spacing-05; + pointer-events: none; + } + + // Error + Warning divider + .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__divider { + display: none; + transition: border-color $duration-fast-01 motion(standard, productive); + } + + .#{$prefix}--list-box__wrapper--fluid + .#{$prefix}--list-box--invalid + ~ .#{$prefix}--list-box__divider, + .#{$prefix}--list-box__wrapper--fluid + .#{$prefix}--list-box--warning + ~ .#{$prefix}--list-box__divider { + display: block; + border: 1px solid $border-subtle; + margin: 0 1rem; + } + + .#{$prefix}--list-box__wrapper--fluid + .#{$prefix}--list-box--invalid:hover + ~ .#{$prefix}--list-box__divider, + .#{$prefix}--list-box__wrapper--fluid + .#{$prefix}--list-box--warning:hover + ~ .#{$prefix}--list-box__divider { + border-color: transparent; + } + + // direction - top + .#{$prefix}--list-box__wrapper--fluid + .#{$prefix}--list-box--up + .#{$prefix}--list-box__menu { + bottom: $spacing-10; + } +} diff --git a/packages/styles/scss/components/fluid-list-box/_index.scss b/packages/styles/scss/components/fluid-list-box/_index.scss new file mode 100644 index 000000000000..15be2eee1b5e --- /dev/null +++ b/packages/styles/scss/components/fluid-list-box/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2022 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'fluid-list-box'; +@use 'fluid-list-box'; + +@include fluid-list-box.fluid-list-box;