chore: change prop onSelectionChange to onChange for select component (…

…#2733)
marigold-ui · Jan 31, 2023 · 9cb030c · 9cb030c
1 parent 1f33094
commit 9cb030c
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 10 deletions.
diff --git a/.changeset/seven-moose-guess.md b/.changeset/seven-moose-guess.md
@@ -0,0 +1,6 @@
+---
+"@marigold/docs": patch
+"@marigold/components": major
+---
+
+chore: change prop onSelectionChange to onChange for select component
diff --git a/docs/src/demos/components/Table/core-table-print.demo.tsx b/docs/src/demos/components/Table/core-table-print.demo.tsx
@@ -177,7 +177,7 @@ export const CorePrintTable = () => {
             label="Sammelaktion"
             placeholder="Bitte wählen"
             width="unset"
-            onSelectionChange={handleSelect}
+            onChange={handleSelect}
           >
             <Select.Option key="choose">Bitte wählen</Select.Option>
             <Select.Option key="ticketprint">Ticket drucken</Select.Option>

diff --git a/docs/src/pages/components/select.mdx b/docs/src/pages/components/select.mdx
@@ -95,7 +95,7 @@ import { Select } from '@marigold/components';
       default: '100%',
     },
     {
-      property: 'onSelectionChange',
+      property: 'onChange',
       type: '(key: Key) => any',
       description: 'Handler that is called when the selection changes.',
       default: 'none',

diff --git a/packages/components/src/Select/Select.stories.tsx b/packages/components/src/Select/Select.stories.tsx
@@ -65,11 +65,7 @@ export const Basic: ComponentStory<typeof Select> = args => {
   const [selected, setSelected] = useState<string | number>('');
   return (
     <Container size="small">
-      <Select
-        {...args}
-        onSelectionChange={setSelected}
-        disabledKeys={['Firefly']}
-      >
+      <Select {...args} onChange={setSelected} disabledKeys={['Firefly']}>
         <Select.Option key="Harry Potter">Harry Potter</Select.Option>
         <Select.Option key="Lord of the Rings">Lord of the Rings</Select.Option>
         <Select.Option key="Star Wars">Star Wars</Select.Option>

diff --git a/packages/components/src/Select/Select.test.tsx b/packages/components/src/Select/Select.test.tsx
@@ -432,7 +432,7 @@ test('controlled', () => {
   render(
     <OverlayProvider>
       <ThemeProvider theme={theme}>
-        <Select label="Label" data-testid="select" onSelectionChange={spy}>
+        <Select label="Label" data-testid="select" onChange={spy}>
           <Select.Option key="one">one</Select.Option>
           <Select.Option key="two">two</Select.Option>
           <Select.Option key="three">three</Select.Option>

diff --git a/packages/components/src/Select/Select.tsx b/packages/components/src/Select/Select.tsx
@@ -64,10 +64,17 @@ export interface SelectProps
       | 'isDisabled'
       | 'isRequired'
       | 'validationState'
+      | 'onSelectionChange'
     >,
     Omit<
       ComponentProps<'select'>,
-      'onKeyUp' | 'onKeyDown' | 'onFocus' | 'onBlur' | 'children' | 'size'
+      | 'onKeyUp'
+      | 'onKeyDown'
+      | 'onFocus'
+      | 'onBlur'
+      | 'children'
+      | 'size'
+      | 'onChange'
     > {
   variant?: string;
   size?: string;
@@ -76,12 +83,26 @@ export interface SelectProps
   disabled?: boolean;
   required?: boolean;
   error?: boolean;
+  onChange?: AriaSelectProps<object>['onSelectionChange'];
 }
 
 // Component
 // ---------------
 export const Select = forwardRef<HTMLButtonElement, SelectProps>(
-  ({ variant, size, width, open, disabled, required, error, ...rest }, ref) => {
+  (
+    {
+      variant,
+      size,
+      width,
+      open,
+      disabled,
+      required,
+      error,
+      onChange,
+      ...rest
+    },
+    ref
+  ) => {
     // Set up i18n
     const formatMessage = useLocalizedStringFormatter(messages);
 
@@ -91,6 +112,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
       isRequired: required,
       validationState: error ? 'invalid' : 'valid',
       placeholder: rest.placeholder || formatMessage.format('placeholder'),
+      onSelectionChange: onChange,
       ...rest,
     } as const;