refactor(FluidDropdown): move styles to fluid-list-box to share styles

carbon-design-system · Sep 22, 2022 · 526052a · 526052a
1 parent adf300b
commit 526052a
Show file tree

Hide file tree

Showing 7 changed files with 199 additions and 159 deletions.
diff --git 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
@@ -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
@@ -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}
       </div>
-      {isFluid && <hr className={`${prefix}--dropdown__divider`} />}
+      {isFluid && <hr className={`${prefix}--list-box__divider`} />}
       {invalid ? (
         <div className={`${prefix}--form-requirement`}>{invalidText}</div>
       ) : null}

diff --git 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
@@ -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
@@ -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;
+  }
+}