chore: Add action button to control group

package.json

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

pages/control-group/action-button.page.tsx

@@ -0,0 +1,107 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Autosuggest, { AutosuggestProps } from '~components/autosuggest';
+import Input from '~components/input';
+import ControlGroup, { ControlGroupProps } from '~components/internal/components/control-group';
+import Multiselect from '~components/multiselect';
+import SegmentedControl from '~components/segmented-control';
+import Select from '~components/select';
+
+import { PermutationsPage } from '../app/templates';
+import createPermutations from '../utils/permutations';
+import PermutationsView from '../utils/permutations-view';
+import {
+  DirectionSettings,
+  enteredTextLabel,
+  multiOptions,
+  noop,
+  operators,
+  segments,
+  useControlGroupDirection,
+} from './common';
+
+const suggestions: AutosuggestProps.Option[] = [{ value: 'CPUUtilization' }, { value: 'MemoryUtilization' }];
+
+const input = <Input ariaLabel="Value" value="service" onChange={noop} />;
+const select = <Select ariaLabel="Operator" selectedOption={operators[0]} options={operators} onChange={noop} />;
+const multiselect = (
+  <Multiselect
+    ariaLabel="Labels"
+    inlineTokens={true}
+    selectedOptions={[multiOptions[0]]}
+    options={multiOptions}
+    onChange={noop}
+  />
+);
+const segmentedControl = <SegmentedControl selectedId="and" options={segments} label="Join" onChange={noop} />;
+const autosuggest = (
+  <Autosuggest
+    ariaLabel="Metric"
+    value="CPU"
+    onChange={noop}
+    options={suggestions}
+    enteredTextLabel={enteredTextLabel}
+  />
+);
+
+const permutations = createPermutations<ControlGroupProps>([
+  {
+    children: [
+      input,
+      <>
+        {input}
+        {select}
+      </>,
+      <>
+        {autosuggest}
+        {segmentedControl}
+      </>,
+      <>
+        {input}
+        {select}
+        {input}
+      </>,
+      <>
+        {autosuggest}
+        {select}
+        {multiselect}
+      </>,
+      <>
+        {input}
+        {select}
+        {multiselect}
+        {input}
+      </>,
+    ],
+    actionButton: [
+      { iconName: 'remove', ariaLabel: 'Remove' },
+      { iconName: 'close', ariaLabel: 'Close' },
+      { iconName: 'remove', ariaLabel: 'Remove', disabled: true },
+      {
+        iconName: 'remove',
+        ariaLabel: 'Remove',
+        disabled: true,
+        disabledReason: 'Cannot remove the last clause',
+      },
+    ],
+  },
+]);
+
+export default function ControlGroupActionPermutations() {
+  const { direction, setDirection } = useControlGroupDirection();
+
+  return (
+    <PermutationsPage
+      title="Control group action button"
+      i18n={{}}
+      settings={<DirectionSettings direction={direction} setDirection={setDirection} />}
+    >
+      <PermutationsView
+        permutations={permutations}
+        render={permutation => <ControlGroup {...permutation} direction={direction} />}
+      />
+    </PermutationsPage>
+  );
+}

pages/control-group/common.tsx

@@ -3,9 +3,10 @@
 import React from 'react';
 
 import FormField from '~components/form-field';
-import { InternalControlGroupProps } from '~components/internal/components/control-group';
+import { ControlGroupProps } from '~components/internal/components/control-group/interfaces';
 import { MultiselectProps } from '~components/multiselect';
 import RadioGroup from '~components/radio-group';
+import { SegmentedControlProps } from '~components/segmented-control';
 import { SelectProps } from '~components/select';
 
 import { useAppContext } from '../app/app-context';
@@ -24,9 +25,14 @@ export const multiOptions: MultiselectProps.Option[] = [
   { value: '2', label: 'Option 2' },
 ];
 
+export const segments: SegmentedControlProps.Option[] = [
+  { id: 'and', text: 'AND' },
+  { id: 'or', text: 'OR' },
+];
+
 export const enteredTextLabel = (value: string) => `Use: ${value}`;
 
-export type Direction = NonNullable<InternalControlGroupProps['direction']>;
+export type Direction = NonNullable<ControlGroupProps['direction']>;
 
 export function useControlGroupDirection() {
   const { urlParams, setUrlParams } = useAppContext<'controlGroupDirection'>(); // The name `direction` is already taken for the LTR/RTL URL parameter

pages/control-group/permutations.page.tsx

@@ -4,20 +4,23 @@ import React from 'react';
 
 import Autosuggest, { AutosuggestProps } from '~components/autosuggest';
 import Input from '~components/input';
-import ControlGroup, { InternalControlGroupProps } from '~components/internal/components/control-group';
+import ControlGroup, { ControlGroupProps } from '~components/internal/components/control-group';
 import Multiselect from '~components/multiselect';
-import SegmentedControl, { SegmentedControlProps } from '~components/segmented-control';
+import SegmentedControl from '~components/segmented-control';
 import Select from '~components/select';
 
 import { PermutationsPage } from '../app/templates';
 import createPermutations from '../utils/permutations';
 import PermutationsView from '../utils/permutations-view';
-import { DirectionSettings, enteredTextLabel, multiOptions, noop, operators, useControlGroupDirection } from './common';
-
-const segments: SegmentedControlProps.Option[] = [
-  { id: 'and', text: 'AND' },
-  { id: 'or', text: 'OR' },
-];
+import {
+  DirectionSettings,
+  enteredTextLabel,
+  multiOptions,
+  noop,
+  operators,
+  segments,
+  useControlGroupDirection,
+} from './common';
 
 const suggestions: AutosuggestProps.Option[] = [{ value: 'CPUUtilization' }, { value: 'MemoryUtilization' }];
 
@@ -43,7 +46,7 @@ const autosuggest = (
   />
 );
 
-const permutations = createPermutations<InternalControlGroupProps>([
+const permutations = createPermutations<ControlGroupProps>([
   {
     children: [
       input,

src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap

@@ -393,6 +393,7 @@ exports[`test-utils selectors 1`] = `
     "awsui_root_2rhyz",
   ],
   "internal": [
+    "awsui_action-slot_1gp1v",
     "awsui_actions_x6dl3",
     "awsui_application_1fcus",
     "awsui_axis-label--x_f0fot",
@@ -420,8 +421,7 @@ exports[`test-utils selectors 1`] = `
     "awsui_header_dgs8z",
     "awsui_highlighted_15o6u",
     "awsui_icon_x6dl3",
-    "awsui_inline-label-wrapper_o08jm",
-    "awsui_inline-label_o08jm",
+    "awsui_inline-label_1gp1v",
     "awsui_inner-list-item_10ipo",
     "awsui_key_10ipo",
     "awsui_label-tag_1p2cx",
@@ -440,6 +440,7 @@ exports[`test-utils selectors 1`] = `
     "awsui_root_15oj2",
     "awsui_root_1b522",
     "awsui_root_1fcus",
+    "awsui_root_1gp1v",
     "awsui_root_1kjc7",
     "awsui_root_1om0h",
     "awsui_root_1qprf",

src/button/internal.tsx

@@ -21,7 +21,9 @@ import {
   getSubStepAllSelector,
   getTextFromSelector,
 } from '../internal/analytics/selectors';
+import { getGroupedControlClassNames } from '../internal/components/control-group/grouped-control-styles';
 import { useButtonContext } from '../internal/context/button-context';
+import { GroupedControlContextProps } from '../internal/context/control-group-context';
 import { fireCancelableEvent, isPlainLeftClick } from '../internal/events';
 import useForwardFocus from '../internal/hooks/forward-focus';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
@@ -59,6 +61,7 @@ export type InternalButtonProps = Omit<ButtonProps, 'variant'> & {
   __emitPerformanceMarks?: boolean;
   __skipNativeAttributesWarnings?: boolean;
   __compact?: boolean;
+  __groupedControlProps?: GroupedControlContextProps;
   styleClassNames?: StyleClassNames;
 } & InternalBaseComponentProps;
 
@@ -110,6 +113,7 @@ export const InternalButton = React.forwardRef(
       __emitPerformanceMarks = true,
       __skipNativeAttributesWarnings,
       __compact = false,
+      __groupedControlProps,
       analyticsAction = 'click',
       styleClassNames,
       ...props
@@ -199,15 +203,22 @@ export const InternalButton = React.forwardRef(
     };
 
     const stylingClassName = styleClassNames?.root;
-    const buttonClass = clsx(props.className, stylingClassName, styles.button, styles[`variant-${variant}`], {
-      [styles.disabled]: isNotInteractive,
-      [styles['disabled-with-reason']]: isDisabledWithReason,
-      [styles['button-no-wrap']]: !wrapText,
-      [styles['button-no-text']]: !shouldHaveContent,
-      [styles['full-width']]: shouldHaveContent && fullWidth,
-      [styles['button-compact']]: __compact,
-      [styles.link]: isAnchor,
-    });
+    const buttonClass = clsx(
+      props.className,
+      stylingClassName,
+      styles.button,
+      styles[`variant-${variant}`],
+      ...(__groupedControlProps ? getGroupedControlClassNames(styles, __groupedControlProps) : []),
+      {
+        [styles.disabled]: isNotInteractive,
+        [styles['disabled-with-reason']]: isDisabledWithReason,
+        [styles['button-no-wrap']]: !wrapText,
+        [styles['button-no-text']]: !shouldHaveContent,
+        [styles['full-width']]: shouldHaveContent && fullWidth,
+        [styles['button-compact']]: __compact,
+        [styles.link]: isAnchor,
+      }
+    );
 
     const explicitTabIndex = nativeButtonAttributes?.tabIndex ?? nativeAnchorAttributes?.tabIndex;
     const { tabIndex } = useSingleTabStopNavigation(buttonRef, {