diff --git a/packages/components/src/components/combo-box/_combo-box.scss b/packages/components/src/components/combo-box/_combo-box.scss
index 880a87c3a675..8e7000eb0ec7 100644
--- a/packages/components/src/components/combo-box/_combo-box.scss
+++ b/packages/components/src/components/combo-box/_combo-box.scss
@@ -34,6 +34,8 @@
.#{$prefix}--combo-box .#{$prefix}--list-box__field,
.#{$prefix}--combo-box.#{$prefix}--list-box[data-invalid]
+ .#{$prefix}--list-box__field,
+ .#{$prefix}--combo-box.#{$prefix}--list-box--disabled.#{$prefix}--list-box[data-invalid]
.#{$prefix}--list-box__field {
padding: 0;
}
diff --git a/packages/components/src/components/dropdown/_dropdown.scss b/packages/components/src/components/dropdown/_dropdown.scss
index dc1c9cb864d2..10168aa81243 100644
--- a/packages/components/src/components/dropdown/_dropdown.scss
+++ b/packages/components/src/components/dropdown/_dropdown.scss
@@ -193,6 +193,7 @@
background-color $duration--fast-01 motion(standard, productive);
opacity: 0;
visibility: inherit;
+ position: relative;
&:hover {
background-color: $hover-ui;
@@ -411,6 +412,10 @@
+ .#{$prefix}--dropdown-item .#{$prefix}--dropdown-link {
border-top-color: transparent;
}
+
+ .#{$prefix}--list-box__menu-item__selected-icon {
+ display: block;
+ }
}
// Skeleton State
diff --git a/packages/components/src/components/dropdown/dropdown.hbs b/packages/components/src/components/dropdown/dropdown.hbs
index 4aaae77f29e2..71a7c4b29177 100644
--- a/packages/components/src/components/dropdown/dropdown.hbs
+++ b/packages/components/src/components/dropdown/dropdown.hbs
@@ -140,6 +140,7 @@
{{#each items as |item index|}}
{{label}}
+ {{ carbon-icon 'Checkmark16' class=(add @root.prefix '--list-box__menu-item__selected-icon') aria-hidden="true" }}
{{/each}}
diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss
index 44b446cfda6c..c36822d8461a 100644
--- a/packages/components/src/components/list-box/_list-box.scss
+++ b/packages/components/src/components/list-box/_list-box.scss
@@ -485,6 +485,7 @@ $list-box-menu-width: rem(300px);
line-height: rem(16px);
padding: rem(11px) 0;
margin: 0 $carbon--spacing-05;
+ padding-right: rem(32px); // 40px - `$carbon--spacing-05`
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
border-top-color: $ui-03;
@@ -516,7 +517,7 @@ $list-box-menu-width: rem(300px);
.#{$prefix}--list-box.#{$prefix}--list-box--inline
.#{$prefix}--list-box__menu-item__option {
- margin: 0 $carbon--spacing-03;
+ margin: 0 rem(32px) 0 $carbon--spacing-03;
&:focus {
margin: 0;
@@ -546,11 +547,8 @@ $list-box-menu-width: rem(300px);
.#{$prefix}--list-box__menu-item--active {
color: $text-01;
+ background-color: $selected-ui;
border-bottom-color: $selected-ui;
-
- &:hover {
- background-color: $selected-ui;
- }
}
.#{$prefix}--list-box__menu-item--active
@@ -558,6 +556,25 @@ $list-box-menu-width: rem(300px);
color: $text-01;
}
+ .#{$prefix}--list-box__menu-item__selected-icon {
+ display: none;
+ position: absolute;
+ top: 50%;
+ right: rem(16px);
+ transform: translateY(-50%);
+ fill: $icon-01;
+ }
+
+ .#{$prefix}--list-box--inline
+ .#{$prefix}--list-box__menu-item__selected-icon {
+ right: rem(8px);
+ }
+
+ .#{$prefix}--list-box__menu-item--active
+ .#{$prefix}--list-box__menu-item__selected-icon {
+ display: block;
+ }
+
.#{$prefix}--list-box__menu-item .#{$prefix}--checkbox-label {
width: 100%;
}
diff --git a/packages/components/src/components/list-box/list-box.hbs b/packages/components/src/components/list-box/list-box.hbs
index 87a53ea0fe5d..cc731fe80849 100644
--- a/packages/components/src/components/list-box/list-box.hbs
+++ b/packages/components/src/components/list-box/list-box.hbs
@@ -114,10 +114,11 @@