Basic SegmentedControl functionality

src/SegmentedControl/SegmentedControl.test.tsx

@@ -4,7 +4,7 @@ import {render} from '@testing-library/react'
 import {EyeIcon, FileCodeIcon, PeopleIcon} from '@primer/octicons-react'
 import userEvent from '@testing-library/user-event'
 import {behavesAsComponent, checkExports, checkStoriesForAxeViolations} from '../utils/testing'
-import SegmentedControl from '.' // TODO: update import when we move this to the global index
+import {SegmentedControl} from '.' // TODO: update import when we move this to the global index
 
 const segmentData = [
   {label: 'Preview', iconLabel: 'EyeIcon', icon: () => <EyeIcon aria-label="EyeIcon" />},

src/SegmentedControl/SegmentedControl.tsx

@@ -31,13 +31,7 @@ const getSegmentedControlStyles = (props?: SegmentedControlProps) => ({
 // TODO: implement `loading` prop
 // TODO: log a warning if no `ariaLabel` or `ariaLabelledBy` prop is passed
 // TODO: implement keyboard behavior to move focus using the arrow keys
-const SegmentedControl: React.FC<SegmentedControlProps> = ({
-  children,
-  fullWidth,
-  onChange,
-  sx: sxProp = {},
-  ...rest
-}) => {
+const Root: React.FC<SegmentedControlProps> = ({children, fullWidth, onChange, sx: sxProp = {}, ...rest}) => {
   const {theme} = useTheme()
   const selectedChildren = React.Children.toArray(children).map(
     child =>
@@ -75,7 +69,9 @@ const SegmentedControl: React.FC<SegmentedControlProps> = ({
   )
 }
 
-export default Object.assign(SegmentedControl, {
+Root.displayName = 'SegmentedControl'
+
+export const SegmentedControl = Object.assign(Root, {
   Button,
   IconButton: SegmentedControlIconButton
 })

src/SegmentedControl/examples.stories.tsx

@@ -3,7 +3,7 @@ import {Meta} from '@storybook/react'
 
 import {BaseStyles, ThemeProvider} from '..'
 import {ComponentProps} from '../utils/types'
-import SegmentedControl from '.'
+import {SegmentedControl} from '.'
 import {EyeIcon, FileCodeIcon, PeopleIcon} from '@primer/octicons-react'
 
 type Args = ComponentProps<typeof SegmentedControl>

src/SegmentedControl/fixtures.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import {Meta} from '@storybook/react'
 
 import {BaseStyles, Box, Text, ThemeProvider} from '../'
-import SegmentedControl from '.'
+import {SegmentedControl} from '.'
 
 export default {
   title: 'SegmentedControl/fixtures',

src/SegmentedControl/index.ts

@@ -1 +1 @@
-export {default} from './SegmentedControl'
+export * from './SegmentedControl'

tsconfig.build.json

@@ -11,5 +11,12 @@
   // See also:
   //   - https://github.com/primer/react/issues/1163
   //   - https://github.com/primer/react/issues/1849
-  "exclude": ["**/*.stories.tsx", "script/**/*.ts", "src/__tests__/", "src/utils/test-*.tsx", "src/utils/testing.tsx"]
+  "exclude": [
+    "**/*.stories.tsx",
+    "**/*.test.tsx",
+    "script/**/*.ts",
+    "src/__tests__/",
+    "src/utils/test-*.tsx",
+    "src/utils/testing.tsx"
+  ]
 }