revert: Revert "fix: Align disabled select controls styles (#3638)" (#3656)

Author: Al-Dani

pages/button-trigger/permutations.page.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 import * as React from 'react';
 
-import Box from '~components/box';
 import ButtonTrigger, { ButtonTriggerProps } from '~components/internal/components/button-trigger';
 import Option from '~components/internal/components/option';
 import { OptionDefinition } from '~components/internal/components/option/interfaces';
@@ -58,18 +57,6 @@ const permutations = createPermutations<ButtonTriggerProps>([
     children: [<Option option={{ ...option2, disabled: true }} />],
   },
 ]);
-
-const responsivePermutations = createPermutations<ButtonTriggerProps>([
-  {
-    disabled: [true, false],
-    children: ['Long label to check the regression'],
-  },
-  {
-    disabled: [false],
-    readOnly: [true],
-    children: ['Long label to check the regression'],
-  },
-]);
 /* eslint-enable react/jsx-key */
 
 export default function ButtonTriggerPermutations() {
@@ -78,20 +65,6 @@ export default function ButtonTriggerPermutations() {
       <h1>ButtonTrigger permutations</h1>
       <ScreenshotArea>
         <PermutationsView permutations={permutations} render={permutation => <ButtonTrigger {...permutation} />} />
-        <Box margin={{ top: 'm' }}>
-          {/* Permutations to check that the width of the trigger doesn't change between states */}
-          <PermutationsView
-            permutations={responsivePermutations}
-            render={permutation => (
-              <div style={{ display: 'flex' }}>
-                <div>
-                  <ButtonTrigger {...permutation} />
-                </div>
-                <div style={{ border: '1px solid' }}>Test</div>
-              </div>
-            )}
-          />
-        </Box>
       </ScreenshotArea>
     </>
   );

src/button-dropdown/internal.tsx

@@ -258,6 +258,7 @@ const InternalButtonDropdown = React.forwardRef(
               styles['trigger-item'],
               styles['split-trigger'],
               styles[`variant-${variant}`],
+              mainActionProps.disabled && styles.disabled,
               mainActionProps.loading && styles.loading
             )}
             // Close dropdown upon main action click unless event is cancelled.
@@ -281,6 +282,7 @@ const InternalButtonDropdown = React.forwardRef(
                 styles['dropdown-trigger'],
                 isVisualRefresh && styles['visual-refresh'],
                 styles[`variant-${variant}`],
+                baseTriggerProps.disabled && styles.disabled,
                 baseTriggerProps.loading && styles.loading
               )}
               {...getAnalyticsMetadataAttribute(analyticsMetadata)}

src/internal/components/button-trigger/styles.scss

@@ -84,7 +84,7 @@ $padding-block-inner-filtering-token: 0px;
   }
 
   &.disabled {
-    @include styles.form-disabled-element;
+    @include styles.button-trigger-disabled-element;
 
     > .arrow {
       color: awsui.$color-text-button-inline-icon-disabled;

src/internal/styles/forms/mixins.scss

@@ -132,6 +132,14 @@
   cursor: auto;
 }
 
+@mixin button-trigger-disabled-element {
+  background-color: awsui.$color-background-input-disabled;
+  border-block: awsui.$border-width-token solid awsui.$color-border-input-disabled;
+  border-inline: awsui.$border-width-token solid awsui.$color-border-input-disabled;
+  color: awsui.$color-text-input-disabled;
+  cursor: auto;
+}
+
 @mixin form-readonly-element {
   background-color: awsui.$color-background-input-default;
   border-block: awsui.$border-width-field solid awsui.$color-border-input-disabled;