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;