From 855d161c6c11c0b4277d615f448fd5306ed45edb Mon Sep 17 00:00:00 2001
From: Jory Cunningham <jorycunn@amazon.com>
Date: Thu, 27 Jun 2024 10:57:00 -0400
Subject: [PATCH] add disabled styling for inlineLabelText

---
 .../with-table-collection-select-filter.page.tsx          | 1 +
 src/select/parts/styles.scss                              | 8 ++++++++
 src/select/parts/trigger.tsx                              | 5 ++++-
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/pages/app-layout/with-table-collection-select-filter.page.tsx b/pages/app-layout/with-table-collection-select-filter.page.tsx
index 4515a72bbe..6b2afcf3c9 100644
--- a/pages/app-layout/with-table-collection-select-filter.page.tsx
+++ b/pages/app-layout/with-table-collection-select-filter.page.tsx
@@ -129,6 +129,7 @@ export default function () {
               </div>
               <div className={styles['select-filter']}>
                 <Select
+                  disabled={true}
                   data-testid="state-filter"
                   inlineLabelText="Filtrar secuencias de registros por nombre"
                   options={stateOptions}
diff --git a/src/select/parts/styles.scss b/src/select/parts/styles.scss
index e504f6ec4d..09f450c81c 100644
--- a/src/select/parts/styles.scss
+++ b/src/select/parts/styles.scss
@@ -151,4 +151,12 @@ $checkbox-size: awsui.$size-control;
   );
   background-position: bottom;
   z-index: 1;
+
+  &.inline-label-disabled {
+    background-image: linear-gradient(
+      to bottom,
+      transparent calc(100% - (styles.$control-border-width + 3px)),
+      awsui.$color-background-input-disabled 1px
+    );
+  }
 }
diff --git a/src/select/parts/trigger.tsx b/src/select/parts/trigger.tsx
index de34812a71..042852bf1b 100644
--- a/src/select/parts/trigger.tsx
+++ b/src/select/parts/trigger.tsx
@@ -124,7 +124,10 @@ const Trigger = React.forwardRef(
       <>
         {inlineLabelText ? (
           <div className={styles['inline-label-wrapper']}>
-            <label htmlFor={controlId} className={styles['inline-label']}>
+            <label
+              htmlFor={controlId}
+              className={clsx(styles['inline-label'], disabled && styles['inline-label-disabled'])}
+            >
               {inlineLabelText}
             </label>
             <div className={styles['inline-label-trigger-wrapper']}>{triggerButton}</div>