fix: Align styles between disabled input and select form controls (#3702)

Author: Al-Dani

pages/button-trigger/permutations.page.tsx

@@ -2,6 +2,7 @@
 // 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';
@@ -23,6 +24,18 @@ const option2: OptionDefinition = {
   filteringTags: ['tag 1', 'tag 2'],
 };
 
+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-disable react/jsx-key */
 const permutations = createPermutations<ButtonTriggerProps>([
   {
@@ -65,6 +78,20 @@ 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>
     </>
   );

pages/form-controls/base-form-elements.page.tsx

@@ -0,0 +1,56 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Input from '~components/input';
+import Select from '~components/select';
+import SpaceBetween from '~components/space-between';
+
+import ScreenshotArea from '../utils/screenshot-area';
+
+function Inputs() {
+  return (
+    <SpaceBetween size="xs">
+      <div>
+        <Input ariaLabel="input" placeholder="Enter something" value="" onChange={() => {}} />
+        <Select placeholder="Enter something" selectedOption={null} onChange={() => {}} />
+      </div>
+
+      <div>
+        <Input ariaLabel="input" value="Something" onChange={() => {}} />
+        <Select selectedOption={{ label: 'Label', value: 'value' }} onChange={() => {}} />
+      </div>
+
+      <div>
+        <Input ariaLabel="input" value="Something" readOnly={true} onChange={() => {}} />
+        <Select selectedOption={{ label: 'Label', value: 'value' }} readOnly={true} onChange={() => {}} />
+      </div>
+
+      <div>
+        <Input ariaLabel="input" value="Something" disabled={true} onChange={() => {}} />
+        <Select selectedOption={{ label: 'Label', value: 'value' }} disabled={true} onChange={() => {}} />
+      </div>
+
+      <div>
+        <Input ariaLabel="input" value="Something" readOnly={true} disabled={true} onChange={() => {}} />
+        <Select
+          selectedOption={{ label: 'Label', value: 'value' }}
+          readOnly={true}
+          disabled={true}
+          onChange={() => {}}
+        />
+      </div>
+    </SpaceBetween>
+  );
+}
+
+export default function InputsPage() {
+  return (
+    <div style={{ padding: 10 }}>
+      <h1>Inputs VS Selects demo</h1>
+      <ScreenshotArea>
+        <Inputs />
+      </ScreenshotArea>
+    </div>
+  );
+}

src/button-dropdown/internal.tsx

@@ -263,7 +263,6 @@ 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.
@@ -287,7 +286,6 @@ 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,13 +84,15 @@ $padding-block-inner-filtering-token: 0px;
   }
 
   &.disabled {
-    @include styles.button-trigger-disabled-element;
+    @include styles.form-disabled-element;
 
     > .arrow {
       color: awsui.$color-text-button-inline-icon-disabled;
     }
 
     &.in-filtering-token {
+      // select in property filter has different border style
+      @include styles.button-trigger-disabled-element;
       border-color: awsui.$color-border-control-disabled;
     }
 
@@ -102,7 +104,7 @@ $padding-block-inner-filtering-token: 0px;
   // read-only in-filtering-token (i.e. for property filter readOnlyOperations)
   // should retain standard borders, only the icon changes
   &.readonly:not(&.disabled):not(&.in-filtering-token) {
-    @include styles.button-trigger-readonly-element;
+    @include styles.form-readonly-element;
   }
 
   &:focus {