add disabled styling for inlineLabelText

cloudscape-design · Jun 27, 2024 · 855d161 · 855d161
1 parent 74665a1
commit 855d161
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 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
@@ -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
@@ -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
@@ -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>