chore(SegmentedControl): Add dev stories and update e2e tests (#5334)

* chore(SegmentedControl): Add dev stories and update e2e tests * add dev file and update test id * test(vrt): update snapshots --------- Co-authored-by: hussam-i-am <[email protected]>
primer · Nov 26, 2024 · 964bfcd · 964bfcd
1 parent f0603fd
commit 964bfcd
Show file tree

Hide file tree

Showing 30 changed files with 190 additions and 491 deletions.
diff --git a/...ntrol.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-colorblind-linux.png b/...ntrol.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-colorblind-linux.png
diff --git a/...edControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-dimmed-linux.png b/...edControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-dimmed-linux.png
diff --git a/...ol.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-high-contrast-linux.png b/...ol.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-high-contrast-linux.png
diff --git a/...SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-linux.png b/...SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-linux.png
diff --git a/...ntrol.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-tritanopia-linux.png b/...ntrol.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-tritanopia-linux.png
diff --git a/...trol.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-colorblind-linux.png b/...trol.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-colorblind-linux.png
diff --git a/...l.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-high-contrast-linux.png b/...l.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-high-contrast-linux.png
diff --git a/...egmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-linux.png b/...egmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-linux.png
diff --git a/...trol.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-tritanopia-linux.png b/...trol.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-tritanopia-linux.png
diff --git a/...est.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-colorblind-linux.png b/...est.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-colorblind-linux.png
diff --git a/...ol.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-dimmed-linux.png b/...ol.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-dimmed-linux.png
diff --git a/....ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-high-contrast-linux.png b/....ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-high-contrast-linux.png
diff --git a/...edControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-linux.png b/...edControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-linux.png
diff --git a/...est.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-tritanopia-linux.png b/...est.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-tritanopia-linux.png
diff --git a/...st.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-colorblind-linux.png b/...st.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-colorblind-linux.png
diff --git a/...ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-high-contrast-linux.png b/...ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-high-contrast-linux.png
diff --git a/...dControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-linux.png b/...dControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-linux.png
diff --git a/...st.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-tritanopia-linux.png b/...st.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-tritanopia-linux.png
diff --git a/...ontrol.test.ts-snapshots/SegmentedControl-Dev-With-Sx-dark-colorblind-linux.png b/...ontrol.test.ts-snapshots/SegmentedControl-Dev-With-Sx-dark-colorblind-linux.png
diff --git a/...tedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-dark-dimmed-linux.png b/...tedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-dark-dimmed-linux.png
diff --git a/...rol.test.ts-snapshots/SegmentedControl-Dev-With-Sx-dark-high-contrast-linux.png b/...rol.test.ts-snapshots/SegmentedControl-Dev-With-Sx-dark-high-contrast-linux.png
diff --git a/.../SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-dark-linux.png b/.../SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-dark-linux.png
diff --git a/...ontrol.test.ts-snapshots/SegmentedControl-Dev-With-Sx-dark-tritanopia-linux.png b/...ontrol.test.ts-snapshots/SegmentedControl-Dev-With-Sx-dark-tritanopia-linux.png
diff --git a/...ntrol.test.ts-snapshots/SegmentedControl-Dev-With-Sx-light-colorblind-linux.png b/...ntrol.test.ts-snapshots/SegmentedControl-Dev-With-Sx-light-colorblind-linux.png
diff --git a/...ol.test.ts-snapshots/SegmentedControl-Dev-With-Sx-light-high-contrast-linux.png b/...ol.test.ts-snapshots/SegmentedControl-Dev-With-Sx-light-high-contrast-linux.png
diff --git a/...SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-light-linux.png b/...SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-light-linux.png
diff --git a/...ntrol.test.ts-snapshots/SegmentedControl-Dev-With-Sx-light-tritanopia-linux.png b/...ntrol.test.ts-snapshots/SegmentedControl-Dev-With-Sx-light-tritanopia-linux.png
diff --git a/e2e/components/SegmentedControl.test.ts b/e2e/components/SegmentedControl.test.ts
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx b/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx
@@ -0,0 +1,78 @@
+import React from 'react'
+import type {Meta} from '@storybook/react'
+import {SegmentedControl} from '.'
+import SegmentedControlIconButton from './SegmentedControlIconButton'
+import SegmentedControlButton from './SegmentedControlButton'
+import {EyeIcon, FileCodeIcon, PeopleIcon} from '@primer/octicons-react'
+
+const excludedControlKeys = ['variant']
+
+export default {
+  title: 'Components/SegmentedControl/Dev',
+  component: SegmentedControl,
+  subcomponents: {SegmentedControlButton, SegmentedControlIconButton},
+  parameters: {controls: {exclude: excludedControlKeys}},
+} as Meta<typeof SegmentedControl>
+
+export const WithCss = () => (
+  <SegmentedControl aria-label="File view" className="testCustomClassnameMono">
+    <SegmentedControl.Button
+      defaultSelected
+      aria-label={'Preview'}
+      leadingIcon={EyeIcon}
+      className="testCustomClassnameColor"
+    >
+      Preview
+    </SegmentedControl.Button>
+    <SegmentedControl.Button aria-label={'Raw'} leadingIcon={FileCodeIcon} className="testCustomClassnameColor">
+      Raw
+    </SegmentedControl.Button>
+    <SegmentedControl.Button aria-label={'Blame'} leadingIcon={PeopleIcon} className="testCustomClassnameColor">
+      Blame
+    </SegmentedControl.Button>
+  </SegmentedControl>
+)
+
+export const WithSx = () => (
+  <SegmentedControl aria-label="File view" sx={{fontFamily: 'monospace'}}>
+    <SegmentedControl.Button defaultSelected aria-label={'Preview'} leadingIcon={EyeIcon} sx={{color: 'success.fg'}}>
+      Preview
+    </SegmentedControl.Button>
+    <SegmentedControl.Button aria-label={'Raw'} leadingIcon={FileCodeIcon} sx={{color: 'success.fg'}}>
+      Raw
+    </SegmentedControl.Button>
+    <SegmentedControl.Button aria-label={'Blame'} leadingIcon={PeopleIcon} sx={{color: 'success.fg'}}>
+      Blame
+    </SegmentedControl.Button>
+  </SegmentedControl>
+)
+
+export const WithSxAndCss = () => (
+  <SegmentedControl aria-label="File view" sx={{fontFamily: 'monospace'}} className="testCustomClassnameMono">
+    <SegmentedControl.Button
+      defaultSelected
+      aria-label={'Preview'}
+      leadingIcon={EyeIcon}
+      sx={{color: 'success.fg'}}
+      className="testCustomClassnameColor"
+    >
+      Preview
+    </SegmentedControl.Button>
+    <SegmentedControl.Button
+      aria-label={'Raw'}
+      leadingIcon={FileCodeIcon}
+      sx={{color: 'success.fg'}}
+      className="testCustomClassnameColor"
+    >
+      Raw
+    </SegmentedControl.Button>
+    <SegmentedControl.Button
+      aria-label={'Blame'}
+      leadingIcon={PeopleIcon}
+      sx={{color: 'success.fg'}}
+      className="testCustomClassnameColor"
+    >
+      Blame
+    </SegmentedControl.Button>
+  </SegmentedControl>
+)
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.tsx b/packages/react/src/SegmentedControl/SegmentedControl.tsx
@@ -32,6 +32,7 @@ type SegmentedControlProps = {
   size?: 'small' | 'medium'
   /** Configure alternative ways to render the control when it gets rendered in tight spaces */
   variant?: 'default' | Partial<Record<WidthOnlyViewportRangeKeys, 'hideLabels' | 'dropdown' | 'default'>>
+  className?: string
 } & SxProp
 
 const getSegmentedControlStyles = (props: {isFullWidth?: boolean; size?: SegmentedControlProps['size']}) => ({