chore: Add validation states to control group

package.json

@@ -183,7 +183,7 @@
     {
       "path": "lib/components/internal/widget-exports.js",
       "brotli": false,
-      "limit": "1450 kB",
+      "limit": "1470 kB",
       "ignore": "react-dom"
     }
   ],

pages/control-group/validation.page.tsx

@@ -0,0 +1,63 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import FormField from '~components/form-field';
+import ControlGroup, { ControlGroupProps } from '~components/internal/components/control-group';
+
+import { PermutationsPage } from '../app/templates';
+import createPermutations from '../utils/permutations';
+import PermutationsView from '../utils/permutations-view';
+import { input, multiselect, segmentedControl, select } from './common';
+
+type ValidationPermutation = ControlGroupProps & { errorText?: string; warningText?: string };
+
+const children = [
+  <>
+    {input}
+    {select}
+  </>,
+  <>
+    {input}
+    {segmentedControl}
+  </>,
+  <>
+    {select}
+    {multiselect}
+  </>,
+];
+
+const directions: ReadonlyArray<ControlGroupProps['direction']> = ['horizontal', 'vertical'];
+
+const actionButtons: ReadonlyArray<ControlGroupProps['actionButton']> = [
+  undefined,
+  { iconName: 'remove', ariaLabel: 'Remove' },
+];
+
+const labels = [undefined, 'Label'];
+
+const permutations = createPermutations<ValidationPermutation>([
+  { children, errorText: ['This value is required'], direction: directions, actionButton: actionButtons },
+  {
+    children,
+    warningText: ['Double-check this value'],
+    direction: directions,
+    actionButton: actionButtons,
+    inlineLabelText: labels,
+  },
+]);
+
+export default function ControlGroupValidation() {
+  return (
+    <PermutationsPage title="Control group validation" i18n={{}}>
+      <PermutationsView
+        permutations={permutations}
+        render={({ errorText, warningText, ...controlGroupProps }) => (
+          <FormField errorText={errorText} warningText={warningText}>
+            <ControlGroup {...controlGroupProps} />
+          </FormField>
+        )}
+      />
+    </PermutationsPage>
+  );
+}

pages/multiselect/validation-focus.page.tsx

@@ -0,0 +1,46 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Multiselect from '~components/multiselect';
+import SpaceBetween from '~components/space-between';
+
+import { SimplePage } from '../app/templates';
+import FocusTarget from '../common/focus-target';
+
+const options = [
+  { value: 'option1', label: 'Option 1' },
+  { value: 'option2', label: 'Option 2' },
+  { value: 'option3', label: 'Option 3' },
+];
+
+export default function MultiselectValidationFocusPage() {
+  return (
+    <SimplePage
+      title="Multiselect validation focus"
+      screenshotArea={{ disableAnimations: true }}
+      settings={<FocusTarget />}
+    >
+      <SpaceBetween size="m">
+        <Multiselect
+          data-testid="multiselect-invalid"
+          ariaLabel="multiselect invalid"
+          invalid={true}
+          options={options}
+          selectedOptions={[]}
+          placeholder="Choose options"
+          onChange={() => {}}
+        />
+        <Multiselect
+          data-testid="multiselect-warning"
+          ariaLabel="multiselect warning"
+          warning={true}
+          options={options}
+          selectedOptions={[]}
+          placeholder="Choose options"
+          onChange={() => {}}
+        />
+      </SpaceBetween>
+    </SimplePage>
+  );
+}

pages/select/validation-focus.page.tsx

@@ -0,0 +1,42 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Select from '~components/select';
+import SpaceBetween from '~components/space-between';
+
+import { SimplePage } from '../app/templates';
+import FocusTarget from '../common/focus-target';
+
+const options = [
+  { value: 'option1', label: 'Option 1' },
+  { value: 'option2', label: 'Option 2' },
+  { value: 'option3', label: 'Option 3' },
+];
+
+export default function SelectValidationFocusPage() {
+  return (
+    <SimplePage title="Select validation focus" screenshotArea={{ disableAnimations: true }} settings={<FocusTarget />}>
+      <SpaceBetween size="m">
+        <Select
+          data-testid="select-invalid"
+          ariaLabel="select invalid"
+          invalid={true}
+          options={options}
+          selectedOption={null}
+          placeholder="Choose an option"
+          onChange={() => {}}
+        />
+        <Select
+          data-testid="select-warning"
+          ariaLabel="select warning"
+          warning={true}
+          options={options}
+          selectedOption={null}
+          placeholder="Choose an option"
+          onChange={() => {}}
+        />
+      </SpaceBetween>
+    </SimplePage>
+  );
+}

src/button/styles.scss

@@ -10,6 +10,7 @@
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use './constants' as constants;
+@use '../internal/styles/forms/constants' as form-constants;
 @use '../internal/styles/style-api' as style-api;
 
 $props: style-api.combine(style-api.$surface, (box-shadow, padding-block, padding-inline), style-api.$focus-ring);
@@ -100,6 +101,9 @@ $tokens: style-api.resolve($props, carrier);
   @include styles.styles-reset;
   @include styles.text-wrapping;
   @include styles.font-button;
+
+  $focus-border-color: var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
+
   letter-spacing: awsui.$font-button-letter-spacing;
   border-start-start-radius: style-api.value($tokens, border-radius, awsui.$border-radius-button);
   border-start-end-radius: style-api.value($tokens, border-radius, awsui.$border-radius-button);
@@ -128,10 +132,9 @@ $tokens: style-api.resolve($props, carrier);
   @include focus-visible.when-visible {
     $radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring);
     $width: var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width);
-    $color: var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
 
     &:not(.variant-control-group-action) {
-      @include style-api.focus-highlight($radius: $radius, $width: $width, $color: $color);
+      @include style-api.focus-highlight($radius: $radius, $width: $width, $color: $focus-border-color);
     }
 
     &.variant-icon,
@@ -141,7 +144,7 @@ $tokens: style-api.resolve($props, carrier);
         $gutter-block: awsui.$space-button-icon-focus-outline-gutter-vertical,
         $radius: $radius,
         $width: $width,
-        $color: $color
+        $color: $focus-border-color
       );
     }
 
@@ -152,14 +155,7 @@ $tokens: style-api.resolve($props, carrier);
         $gutter-inline: awsui.$space-button-inline-icon-focus-outline-gutter,
         $radius: $radius,
         $width: $width,
-        $color: $color
-      );
-    }
-
-    &.variant-control-group-action {
-      @include styles.form-focus-element(
-        $border-color: $color,
-        $box-shadow: var(#{custom-props.$styleBoxShadowFocus}, foundation.$box-shadow-focused-light)
+        $color: $focus-border-color
       );
     }
   }
@@ -219,6 +215,18 @@ $tokens: style-api.resolve($props, carrier);
     padding-block: awsui.$space-field-vertical;
     padding-inline: awsui.$space-xs;
     min-block-size: awsui.$size-vertical-input;
+
+    &,
+    &:hover {
+      border-inline-start-color: transparent;
+    }
+
+    @include focus-visible.when-visible {
+      @include styles.form-focus-element(
+        $border-color: $focus-border-color,
+        $box-shadow: var(#{custom-props.$styleBoxShadowFocus}, foundation.$box-shadow-focused-light)
+      );
+    }
   }
 
   > .icon-left {

src/input/styles.scss

@@ -162,7 +162,15 @@
       var(#{custom-props.$styleColorDefault}, awsui.$color-text-form-secondary)
     );
     background-color: var(#{custom-props.$styleBackgroundFocus}, awsui.$color-background-input-default);
-    @include styles.input-focus-styles;
+    &:not(.grouped-validation) {
+      @include styles.input-focus-styles;
+    }
+    &.grouped-validation {
+      @include styles.form-focus-element(
+        $border-color: false,
+        $box-shadow: var(#{custom-props.$styleBoxShadowFocus}, foundation.$box-shadow-focused-light)
+      );
+    }
   }
 
   // Keep disabled styles before validation modifiers so invalid/warning border colors win when both modifiers are present.
@@ -186,6 +194,9 @@
     }
 
     &:focus-within {
+      // Re-assert the validation border under focus so the neutral focus color
+      // (.input-field:focus-within, equal specificity) does not win by order.
+      border-color: var(#{custom-props.$styleBorderColorDefault}, awsui.$color-text-status-error);
       box-shadow: var(#{custom-props.$styleBoxShadowFocus}, foundation.$box-shadow-focused-light-invalid);
     }
   }
@@ -200,6 +211,9 @@
     }
 
     &:focus-within {
+      // Re-assert the validation border under focus so the neutral focus color
+      // (.input-field:focus-within, equal specificity) does not win by order.
+      border-color: var(#{custom-props.$styleBorderColorDefault}, awsui.$color-text-status-warning);
       box-shadow: var(#{custom-props.$styleBoxShadowFocus}, foundation.$box-shadow-focused-light-invalid);
     }
   }
@@ -226,6 +240,15 @@
 
   &.grouped {
     @include styles.grouped-control;
+
+    // The grouped inset (bar + cph) assumes a single-element control. Input's
+    // inner native .input already supplies its own cph, so the wrapper adds only
+    // one border width; wrapper(1px) + inner(cph) nets the same bar + invalid gap
+    // as single-element controls. The doubled selector matches the grouped-control
+    // validation rule's specificity and wins by source order.
+    &#{&}-validation {
+      padding-inline-start: awsui.$border-width-field;
+    }
   }
 }
 
@@ -262,8 +285,11 @@
   cursor: default;
 }
 
-// The wider invalid/warning start border is absorbed by the first cell, so the content does not shift.
-// The first cell is the prefix when present, otherwise the native input.
+// Standalone only: the wider invalid/warning start border is absorbed by the first
+// cell, so the content does not shift. The first cell is the prefix when present,
+// otherwise the native input. Grouped controls keep their 1px gray border under the
+// overlay bar and get their inset from the grouped wrapper, so the inner cell keeps
+// its normal cph (no re-pad here).
 .input-field-invalid,
 .input-field-warning {
   > .input-prefix,

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

@@ -128,8 +128,10 @@ $icon-offset: awsui.$space-xxxs;
   }
 
   &:not(.in-filtering-token):not(.compact) {
-    @include focus-visible.when-visible {
-      @include styles.form-focus-element();
+    &:not(.grouped) {
+      @include focus-visible.when-visible {
+        @include styles.form-focus-element();
+      }
     }
 
     &:invalid {
@@ -146,6 +148,15 @@ $icon-offset: awsui.$space-xxxs;
     &.warning:focus {
       @include styles.form-warning-control();
     }
+
+    @include focus-visible.when-visible {
+      &.invalid {
+        border-color: awsui.$color-text-status-error;
+      }
+      &.warning {
+        border-color: awsui.$color-text-status-warning;
+      }
+    }
   }
 
   &.custom-option {

src/internal/components/control-group/grouped-control-styles.ts

@@ -11,11 +11,25 @@ import { GroupedControlContextProps } from '../../context/control-group-context'
  */
 export function getGroupedControlClassNames(
   styles: Record<string, string>,
-  { position, direction, hasAction }: GroupedControlContextProps
+  { position, direction, hasAction, validation }: GroupedControlContextProps
 ): string[] {
   if (!position) {
     return [];
   }
-  const baseClassNames = [styles.grouped, styles[`grouped-${direction}-${position}`]];
-  return hasAction ? [...baseClassNames, styles['grouped-with-action']] : baseClassNames;
+  const classNames = [styles.grouped, styles[`grouped-${direction}-${position}`]];
+  if (hasAction) {
+    classNames.push(styles['grouped-with-action']);
+  }
+  if (validation) {
+    // State class drives the outward validation color (and invalid ring) in SCSS.
+    // Every control gets it so each re-asserts its own outward edges on focus.
+    classNames.push(validation === 'error' ? styles['grouped-in-error'] : styles['grouped-in-warning']);
+    // Only the leading (inline-start) controls draw the thick validation seam:
+    // the first/only control horizontally, every control vertically.
+    const isLeading = direction === 'vertical' || position === 'first' || position === 'only';
+    if (isLeading) {
+      classNames.push(styles['grouped-validation']);
+    }
+  }
+  return classNames;
 }