feat: Add children-based API for button group

Author: gethinwebster

package-lock.json

@@ -0,0 +1,31 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+import { Box, Button, ButtonDropdown, ButtonGroup, Header } from '~components';
+
+export default function ButtonGroupPage() {
+  return (
+    <Box margin={'m'}>
+      <Header variant="h1">ButtonGroup composition API</Header>
+      <input data-testid="focus-before" aria-label="Focus helper" />
+      <br />
+
+      <ButtonGroup variant="children" ariaLabel="Actions">
+        <Button data-itemid="one">Normal button</Button>
+        <Button data-itemid="two">Another button</Button>
+        <Button data-itemid="three" variant="icon" iconName="ticket" ariaLabel="Icon button" />
+        <ButtonDropdown
+          nativeTriggerAttributes={{ 'data-itemid': 'dropdown' }}
+          ariaLabel="Icon button dropdown"
+          items={[
+            { id: 'four', text: 'Button dropdown item' },
+            { id: 'another', text: 'Item 2' },
+          ]}
+          variant="icon"
+        />
+      </ButtonGroup>
+    </Box>
+  );
+}

pages/button-group/composition.page.tsx

@@ -6106,18 +6106,35 @@ use the \`id\` attribute, consider setting it on a parent element instead.",
 * \`text\` (string) - The name of the group rendered as ARIA label for this group.
 * \`items\` ((ButtonGroupProps.IconButton | ButtonGroupProps.MenuDropdown)[]) - The array of items that belong to this group.",
       "name": "items",
-      "optional": false,
+      "optional": true,
       "type": "ReadonlyArray<ButtonGroupProps.ItemOrGroup>",
     },
     {
+      "defaultValue": "'icon'",
       "description": "Determines the general styling of the button dropdown.
 * \`icon\` for icon buttons.",
       "name": "variant",
-      "optional": false,
+      "optional": true,
       "type": ""icon"",
     },
   ],
-  "regions": [],
+  "regions": [
+    {
+      "description": "Instead of passing \`items\`, group items can be passed as children. When using this,
+you will need to manage click handlers and state of buttons.
+
+Each item should contain a single focusable element which must have a unique \`data-itemid\` attribute.
+
+For example:
+- \`<Button data-itemid="button-one">One</Button>\`
+- \`<ButtonDropdown nativeButtonAttributes={{'data-itemid': 'button-two'}} items={...} />\`",
+      "isDefault": true,
+      "name": "children",
+      "systemTags": [
+        "core",
+      ],
+    },
+  ],
   "releaseStatus": "stable",
 }
 `;

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -0,0 +1,59 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
+import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
+
+import createWrapper from '../../../lib/components/test-utils/selectors';
+
+const buttonGroup = createWrapper().findButtonGroup();
+
+// First button group elements
+const button1 = buttonGroup.findContent().findButton('[data-itemid=one]').toSelector();
+const button2 = buttonGroup.findContent().findButton('[data-itemid=two]').toSelector();
+const dropdown = buttonGroup.findContent().findButtonDropdown().findNativeButton().toSelector();
+
+const beforeSelector = '[data-testid="focus-before"]';
+
+function setup(testFn: (page: BasePageObject) => Promise<void>) {
+  return useBrowser(async browser => {
+    const page = new BasePageObject(browser);
+    await browser.url('/#/light/button-group/composition');
+    await testFn(page);
+  });
+}
+
+test(
+  'navigates between buttons with arrow keys',
+  setup(async page => {
+    await page.click(beforeSelector);
+
+    await page.keys(['Tab']);
+    await expect(page.isFocused(button1)).resolves.toBe(true);
+    
+    await page.keys(['ArrowRight']);
+    debugger;
+    await expect(page.isFocused(button2)).resolves.toBe(true);
+
+    await page.keys(['ArrowRight', 'ArrowRight']);
+    await expect(page.isFocused(dropdown)).resolves.toBe(true);
+  })
+);
+
+test(
+  'maintains focus when moving back to group',
+  setup(async page => {
+    await page.click(beforeSelector);
+
+    await page.keys(['Tab']);
+    await expect(page.isFocused(button1)).resolves.toBe(true);
+
+    await page.keys(['ArrowRight']);
+    await expect(page.isFocused(button2)).resolves.toBe(true);
+
+    await page.keys(['Shift', 'Tab']);
+    await expect(page.isFocused(beforeSelector)).resolves.toBe(true);
+
+    await page.keys(['Tab']);
+    await expect(page.isFocused(button2)).resolves.toBe(true);
+  })
+);

src/button-group/__integ__/keyboard-navigation-composition.test.ts

@@ -0,0 +1,29 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Button from '../../../lib/components/button';
+import ButtonGroup from '../../../lib/components/button-group';
+import createWrapper from '../../../lib/components/test-utils/dom';
+
+describe('ButtonGroup children property', () => {
+  test('renders children', () => {
+    const { container } = render(
+      <ButtonGroup variant="children">
+        <Button data-testid="child-element">Button one</Button>
+        <Button data-testid="child-element-two">Another button</Button>
+      </ButtonGroup>
+    );
+
+    const wrapper = createWrapper(container);
+    const buttonGroup = wrapper.findButtonGroup()!;
+
+    expect(buttonGroup.findContent().findAllButtons()).toHaveLength(2);
+
+    const childElement = wrapper.find('[data-testid="child-element"]');
+    expect(childElement).not.toBeNull();
+    expect(childElement!.getElement()).toHaveTextContent('Button one');
+  });
+});