refactor/update-react-segmented-control-props (#1927)

* refactor: 💡 update segmented-control props * docs: ✏️ update storybook docs * Compat fix and add deprecation warnings * Create chilly-sheep-clap.md --------- Co-authored-by: Joacim Magnusson <[email protected]>
seb-oss · Jan 21, 2025 · 23f052c · 23f052c
1 parent de43417
commit 23f052c
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 19 deletions.
diff --git a/.changeset/chilly-sheep-clap.md b/.changeset/chilly-sheep-clap.md
@@ -0,0 +1,5 @@
+---
+'@sebgroup/green-react': minor
+---
+
+**SegmentedControl**: Update to match core component
diff --git a/libs/react/src/lib/segmented-control/segmented-control.mdx b/libs/react/src/lib/segmented-control/segmented-control.mdx
@@ -37,14 +37,14 @@ There is a small and a medium version which can be configured using the `size` p
 
 ### Segment Size
 
-The size of the segments can be configured using the `segMinWidth` prop. This influences how many segments will be visible at the same time.
-If you have long segment labels and want to avoid concatenation, you can increase the `segMinWidth` prop.
-But keep in mind that the best practice is to keep the segment labels short.
+Segments can have different widths depending on the content, and if there are too many segments to fit in the container, scroll buttons will appear to the left and/or right.
 
-<SegmentedControl segMinWidth={200}>
+Segment with can also be controlled individually on the segments using the `width`, `min-width` and `max-width` Style Expression properties.
+
+<SegmentedControl>
   <Segment value="1">1 month</Segment>
   <Segment value="2">This year</Segment>
-  <Segment value="3">1 year</Segment>
+  <Segment value="3" min-width='350px' >1 year</Segment>
   <Segment value="4">3 years</Segment>
   <Segment value="5">5 years</Segment>
   <Segment value="6">10 years</Segment>
@@ -57,7 +57,6 @@ Available `SegmentedControl` component props
   | Props        | Type                                                                    | Description                    |
   | :----------- | :---------------------------------------------------------------------- | :----------------------------- |
   |  value       | \` string \`                                                            | The value of the currently selected segment. Setting this property will select the segment with the matching value.  |
-  |  segMinWidth | \` number \`                                                            | Minimum width of each segment. Used for calculating the number of visible segments that can fit based on the available space. |
   |  size        | \` small | medium \`                                                    | Size of the segmented control |
   |  onChange    | \` (event: Event) => void \`                                            | Fires when the selected segment is changed, use \` event.target.value \` to retrive the value         |
   |  className   | \` string \`                                                            | Component className         |
@@ -77,5 +76,8 @@ Available `Segment` component props
   |  className   | \` string \`                                                            | Component className         |
   |  disabled    | \` boolean \`                                                           | To disabled segment button |
   |  children    | \` ReactNode | ReactNode[] \`                                           | Pass down labels or Reactnode as child |
+  |  width       | \` string \`                                                            | Controls the \` width \` css property of the segment. |
+  |  min-width   | \` string \`                                                            | Controls the \` min-width \` css property of the segment. |
+  |  max-width   | \` string \`                                                            | Controls the \` max-width \` css property of the segment. |
   `}
 </Markdown>
diff --git a/libs/react/src/lib/segmented-control/segmented-control.tsx b/libs/react/src/lib/segmented-control/segmented-control.tsx
@@ -2,29 +2,28 @@ import React, { ReactNode } from 'react'
 import { createComponent } from '@lit/react'
 import classNames from 'classnames'
 
-import { GdsSegmentedControl } from '@sebgroup/green-core/components/segmented-control/index.js'
-import { GdsSegment } from '@sebgroup/green-core/components/segmented-control/segment/index.js'
+import { GdsSegmentedControl as CoreSegmentedControl } from '@sebgroup/green-core/components/segmented-control/index.js'
+import { GdsSegment as CoreSegment } from '@sebgroup/green-core/components/segmented-control/segment/index.js'
 import { getScopedTagName } from '@sebgroup/green-core/scoping'
 import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles'
 
 registerTransitionalStyles()
 
-export const CoreSegementedControl = createComponent({
+export const GdsSegementedControl = createComponent({
   tagName: getScopedTagName('gds-segmented-control'),
-  elementClass: GdsSegmentedControl,
+  elementClass: CoreSegmentedControl,
   events: { onchange: 'change' },
   react: React,
 })
 
-export const CoreSegment = createComponent({
+export const GdsSegment = createComponent({
   tagName: getScopedTagName('gds-segment'),
-  elementClass: GdsSegment,
+  elementClass: CoreSegment,
   react: React,
 })
 
 export interface SegmentedControlProps {
   value?: string
-  segMinWidth?: number
   size?: 'small' | 'medium'
   onChange?: (event: Event) => void
   className?: string
@@ -36,27 +35,38 @@ export interface SegmentProps {
   className?: string
   disabled?: boolean
   children?: ReactNode | ReactNode[]
+  width?: string
+  'min-Width'?: string
+  'max-Width'?: string
+  /** @deprecated */
+  segMinWidth?: number
 }
 
-const SegmentedControl: React.FC<SegmentedControlProps> = ({
+/** @deprecated - Use `GdsSegmentedControl` instead */
+export const SegmentedControl: React.FC<SegmentedControlProps> = ({
   onChange,
   className,
   ...props
 }: SegmentedControlProps) => {
   return (
-    <CoreSegementedControl
+    <GdsSegementedControl
       onchange={onChange}
       className={classNames(className)}
       {...props}
     />
   )
 }
 
-const Segment: React.FC<SegmentProps> = ({
+/** @deprecated - Use `GdsSegmented` instead */
+export const Segment: React.FC<SegmentProps> = ({
   className,
   ...props
 }: SegmentProps) => {
-  return <CoreSegment className={classNames(className)} {...props} />
+  return (
+    <GdsSegment
+      className={classNames(className)}
+      {...props}
+      min-width={props['min-Width'] || props.segMinWidth?.toString()}
+    />
+  )
 }
-
-export { SegmentedControl, Segment }