SuperSelect - fix Showcase rich content functionality & disabled option color (HDS-5545) (#3331)

KristinLBradley · web-flow · commit 90e515c74775 · 2025-10-28T11:17:17.000-07:00
diff --git a/.changeset/stupid-wombats-spend.md b/.changeset/stupid-wombats-spend.md
@@ -0,0 +1,7 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+<!-- START components/form/super-select -->
+`SuperSelect` - Fixed color style for disabled option items.
+<!-- END -->
diff --git a/packages/components/src/styles/components/form/super-select.scss b/packages/components/src/styles/components/form/super-select.scss
@@ -198,6 +198,10 @@ $hds-super-select-item-height: 36px;
         background-color: var(--token-color-foreground-action-active);
       }
     }
+
+    &[aria-disabled="true"] {
+      color: var(--token-form-control-disabled-foreground-color);
+    }
   }
 
   // Option Groups (similar to HTML optgroup)
diff --git a/showcase/app/components/page-components/form/super-select/code-fragments/with-multiple-field-element.gts b/showcase/app/components/page-components/form/super-select/code-fragments/with-multiple-field-element.gts
@@ -31,13 +31,11 @@ const CLUSTER_SIZE_OPTIONS = [
     size: 'Small',
     description: '2 vCPU | 2 GiB RAM',
     price: '$0.04',
-    disabled: true,
   },
   {
     size: 'Medium',
     description: '4 vCPU | 4 GiB RAM',
     price: '$0.08',
-    disabled: true,
   },
   { size: 'Large', description: '8 vCPU | 8 GiB RAM', price: '$0.16' },
   {
diff --git a/showcase/app/components/page-components/form/super-select/code-fragments/with-single-field-element.gts b/showcase/app/components/page-components/form/super-select/code-fragments/with-single-field-element.gts
@@ -31,13 +31,11 @@ const CLUSTER_SIZE_OPTIONS = [
     size: 'Small',
     description: '2 vCPU | 2 GiB RAM',
     price: '$0.04',
-    disabled: true,
   },
   {
     size: 'Medium',
     description: '4 vCPU | 4 GiB RAM',
     price: '$0.08',
-    disabled: true,
   },
   { size: 'Large', description: '8 vCPU | 8 GiB RAM', price: '$0.16' },
   {

Original file line number	Diff line number	Diff line change
`@@ -198,6 +198,10 @@ $hds-super-select-item-height: 36px;`
`198`	`198`	`background-color: var(--token-color-foreground-action-active);`
`199`	`199`	`}`
`200`	`200`	`}`
	`201`	`+`
	`202`	`+ &[aria-disabled="true"] {`
	`203`	`+ color: var(--token-form-control-disabled-foreground-color);`
	`204`	`+ }`
`201`	`205`	`}`
`202`	`206`
`203`	`207`	`// Option Groups (similar to HTML optgroup)`
Original file line number	Diff line number	Diff line change
`@@ -31,13 +31,11 @@ const CLUSTER_SIZE_OPTIONS = [`
`31`	`31`	`size: 'Small',`
`32`	`32`	`description: '2 vCPU \| 2 GiB RAM',`
`33`	`33`	`price: '$0.04',`
`34`		`- disabled: true,`
`35`	`34`	`},`
`36`	`35`	`{`
`37`	`36`	`size: 'Medium',`
`38`	`37`	`description: '4 vCPU \| 4 GiB RAM',`
`39`	`38`	`price: '$0.08',`
`40`		`- disabled: true,`
`41`	`39`	`},`
`42`	`40`	`{ size: 'Large', description: '8 vCPU \| 8 GiB RAM', price: '$0.16' },`
`43`	`41`	`{`