diff --git a/.changeset/chilly-sheep-clap.md b/.changeset/chilly-sheep-clap.md new file mode 100644 index 0000000000..d015db99bd --- /dev/null +++ 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 index ec8f2094e8..9bb052fe1f 100644 --- 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. - +Segment with can also be controlled individually on the segments using the `width`, `min-width` and `max-width` Style Expression properties. + + 1 month This year - 1 year + 1 year 3 years 5 years 10 years @@ -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. | `} diff --git a/libs/react/src/lib/segmented-control/segmented-control.tsx b/libs/react/src/lib/segmented-control/segmented-control.tsx index 0bb656bd84..a35f8a9d76 100644 --- 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,15 +35,21 @@ 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 = ({ +/** @deprecated - Use `GdsSegmentedControl` instead */ +export const SegmentedControl: React.FC = ({ onChange, className, ...props }: SegmentedControlProps) => { return ( - = ({ ) } -const Segment: React.FC = ({ +/** @deprecated - Use `GdsSegmented` instead */ +export const Segment: React.FC = ({ className, ...props }: SegmentProps) => { - return + return ( + + ) } - -export { SegmentedControl, Segment }