refactor(RichSelect): renamed RichSelect and RichSelectField to Selec… (

#2216) * refactor(RichSelect): renamed RichSelect and RichSelectField to SelectInput and SelectInputField
scaleway · Jan 23, 2023 · 5b6d970 · 5b6d970
1 parent b7ef22b
commit 5b6d970
Show file tree

Hide file tree

Showing 58 changed files with 773 additions and 766 deletions.
diff --git a/packages/form/src/components/Form/__stories__/Playground.stories.tsx b/packages/form/src/components/Form/__stories__/Playground.stories.tsx
@@ -7,7 +7,7 @@ import {
   DateField,
   Form,
   RadioField,
-  RichSelectField,
+  SelectInputField,
   SelectableCardField,
   Submit,
   SubmitErrorAlert,
@@ -78,10 +78,10 @@ export const Playground: ComponentStory<typeof Form> = args => {
           regex={[emailRegex]}
         />
 
-        <RichSelectField name="select" required>
-          <RichSelectField.Option value="1">1</RichSelectField.Option>
-          <RichSelectField.Option value="2">2</RichSelectField.Option>
-        </RichSelectField>
+        <SelectInputField name="select" required>
+          <SelectInputField.Option value="1">1</SelectInputField.Option>
+          <SelectInputField.Option value="2">2</SelectInputField.Option>
+        </SelectInputField>
 
         <TagsField name="tags" placeholder="Tags..." />
 

diff --git a/packages/form/src/components/RichSelectField/__stories__/Template.stories.tsx b/packages/form/src/components/RichSelectField/__stories__/Template.stories.tsx
diff --git a/...electField/__stories__/Groups.stories.tsx → ...InputField/__stories__/Groups.stories.tsx b/...electField/__stories__/Groups.stories.tsx → ...InputField/__stories__/Groups.stories.tsx
@@ -1,9 +1,9 @@
 import type { Story } from '@storybook/react'
-import type { RichSelectFieldProps } from '..'
-import { RichSelectField } from '..'
+import type { SelectInputFieldProps } from '..'
+import { SelectInputField } from '..'
 
-export const Groups: Story<RichSelectFieldProps> = () => (
-  <RichSelectField
+export const Groups: Story<SelectInputFieldProps> = () => (
+  <SelectInputField
     name="options"
     options={[
       {

diff --git a/...tField/__stories__/Playground.stories.tsx → ...tField/__stories__/Playground.stories.tsx b/...tField/__stories__/Playground.stories.tsx → ...tField/__stories__/Playground.stories.tsx
diff --git a/packages/form/src/components/SelectInputField/__stories__/Template.stories.tsx b/packages/form/src/components/SelectInputField/__stories__/Template.stories.tsx
@@ -0,0 +1,10 @@
+import type { Story } from '@storybook/react'
+import type { SelectInputFieldProps } from '..'
+import { SelectInputField } from '..'
+
+export const Template: Story<SelectInputFieldProps> = args => (
+  <SelectInputField {...args}>
+    <SelectInputField.Option value="value">Label</SelectInputField.Option>
+    <SelectInputField.Option value="value2">Label 2</SelectInputField.Option>
+  </SelectInputField>
+)
diff --git a/...SelectField/__stories__/index.stories.tsx → ...tInputField/__stories__/index.stories.tsx b/...SelectField/__stories__/index.stories.tsx → ...tInputField/__stories__/index.stories.tsx
@@ -1,14 +1,14 @@
 import styled from '@emotion/styled'
 import type { Meta } from '@storybook/react'
-import { Form, RichSelectField } from '../..'
+import { Form, SelectInputField } from '../..'
 import { mockErrors } from '../../../mocks'
 
 const Container = styled.div`
   min-height: 300px;
 `
 
 export default {
-  component: RichSelectField,
+  component: SelectInputField,
   decorators: [
     ChildStory => (
       <Form onRawSubmit={() => {}} errors={mockErrors}>
@@ -23,7 +23,7 @@ export default {
       },
     },
   },
-  title: 'Form/Components/Fields/RichSelectField',
+  title: 'Form/Components/Fields/SelectInputField',
 } as Meta
 
 export { Playground } from './Playground.stories'

diff --git a/...tests__/__snapshots__/index.spec.tsx.snap → ...tests__/__snapshots__/index.spec.tsx.snap b/...tests__/__snapshots__/index.spec.tsx.snap → ...tests__/__snapshots__/index.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RichSelectField should display right value on grouped options 1`] = `
+exports[`SelectInputField should display right value on grouped options 1`] = `
 <DocumentFragment>
   .cache-1gb28ew-container-StyledContainer {
   width: 100%;
@@ -277,8 +277,8 @@ exports[`RichSelectField should display right value on grouped options 1`] = `
     novalidate=""
   >
     <div
-      class=" cache-1gb28ew-container-StyledContainer e1lzna4r5"
-      data-testid="rich-select-test"
+      class=" cache-1gb28ew-container-StyledContainer e1o1qsrh5"
+      data-testid="select-input-test"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -299,7 +299,7 @@ exports[`RichSelectField should display right value on grouped options 1`] = `
           <label
             aria-live="assertive"
             as="label"
-            class="cache-isgbik e1lzna4r2"
+            class="cache-isgbik e1o1qsrh2"
             for=":r4:"
           >
             Select...
@@ -362,18 +362,18 @@ exports[`RichSelectField should display right value on grouped options 1`] = `
         value="Group Value"
       />
       <div
-        class="cache-9vn1ol e1lzna4r3"
+        class="cache-9vn1ol e1o1qsrh3"
       >
         <div
-          class="cache-19pioxy e1lzna4r4"
+          class="cache-19pioxy e1o1qsrh4"
         />
       </div>
     </div>
   </form>
 </DocumentFragment>
 `;
 
-exports[`RichSelectField should render correctly 1`] = `
+exports[`SelectInputField should render correctly 1`] = `
 <DocumentFragment>
   .cache-1gb28ew-container-StyledContainer {
   width: 100%;
@@ -635,8 +635,8 @@ exports[`RichSelectField should render correctly 1`] = `
     novalidate=""
   >
     <div
-      class=" cache-1gb28ew-container-StyledContainer e1lzna4r5"
-      data-testid="rich-select-test"
+      class=" cache-1gb28ew-container-StyledContainer e1o1qsrh5"
+      data-testid="select-input-test"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -657,7 +657,7 @@ exports[`RichSelectField should render correctly 1`] = `
           <label
             aria-live="assertive"
             as="label"
-            class="cache-xrmeok e1lzna4r2"
+            class="cache-xrmeok e1o1qsrh2"
             for=":r0:"
           >
             Select...
@@ -722,18 +722,18 @@ exports[`RichSelectField should render correctly 1`] = `
         value=""
       />
       <div
-        class="cache-9vn1ol e1lzna4r3"
+        class="cache-9vn1ol e1o1qsrh3"
       >
         <div
-          class="cache-19pioxy e1lzna4r4"
+          class="cache-19pioxy e1o1qsrh4"
         />
       </div>
     </div>
   </form>
 </DocumentFragment>
 `;
 
-exports[`RichSelectField should render correctly disabled 1`] = `
+exports[`SelectInputField should render correctly disabled 1`] = `
 <DocumentFragment>
   .cache-iwdjsb-container-StyledContainer {
   width: 100%;
@@ -981,8 +981,8 @@ exports[`RichSelectField should render correctly disabled 1`] = `
     novalidate=""
   >
     <div
-      class=" cache-iwdjsb-container-StyledContainer e1lzna4r5"
-      data-testid="rich-select-test"
+      class=" cache-iwdjsb-container-StyledContainer e1o1qsrh5"
+      data-testid="select-input-test"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -1003,7 +1003,7 @@ exports[`RichSelectField should render correctly disabled 1`] = `
           <label
             aria-live="assertive"
             as="label"
-            class="cache-xrmeok e1lzna4r2"
+            class="cache-xrmeok e1o1qsrh2"
             for=":r1:"
           >
             Select...
@@ -1064,18 +1064,18 @@ exports[`RichSelectField should render correctly disabled 1`] = `
         </div>
       </div>
       <div
-        class="cache-9vn1ol e1lzna4r3"
+        class="cache-9vn1ol e1o1qsrh3"
       >
         <div
-          class="cache-19pioxy e1lzna4r4"
+          class="cache-19pioxy e1o1qsrh4"
         />
       </div>
     </div>
   </form>
 </DocumentFragment>
 `;
 
-exports[`RichSelectField should render correctly multiple 1`] = `
+exports[`SelectInputField should render correctly multiple 1`] = `
 <DocumentFragment>
   .cache-1gb28ew-container-StyledContainer {
   width: 100%;
@@ -1336,8 +1336,8 @@ exports[`RichSelectField should render correctly multiple 1`] = `
     novalidate=""
   >
     <div
-      class=" cache-1gb28ew-container-StyledContainer e1lzna4r5"
-      data-testid="rich-select-test"
+      class=" cache-1gb28ew-container-StyledContainer e1o1qsrh5"
+      data-testid="select-input-test"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -1358,7 +1358,7 @@ exports[`RichSelectField should render correctly multiple 1`] = `
           <label
             aria-live="assertive"
             as="label"
-            class="cache-xrmeok e1lzna4r2"
+            class="cache-xrmeok e1o1qsrh2"
             for=":r2:"
           >
             Select...
@@ -1425,18 +1425,18 @@ exports[`RichSelectField should render correctly multiple 1`] = `
         />
       </div>
       <div
-        class="cache-9vn1ol e1lzna4r3"
+        class="cache-9vn1ol e1o1qsrh3"
       >
         <div
-          class="cache-19pioxy e1lzna4r4"
+          class="cache-19pioxy e1o1qsrh4"
         />
       </div>
     </div>
   </form>
 </DocumentFragment>
 `;
 
-exports[`RichSelectField should render correctly with a disabled option 1`] = `
+exports[`SelectInputField should render correctly with a disabled option 1`] = `
 <DocumentFragment>
   .cache-1gb28ew-container-StyledContainer {
   width: 100%;
@@ -1698,8 +1698,8 @@ exports[`RichSelectField should render correctly with a disabled option 1`] = `
     novalidate=""
   >
     <div
-      class=" cache-1gb28ew-container-StyledContainer e1lzna4r5"
-      data-testid="rich-select-test"
+      class=" cache-1gb28ew-container-StyledContainer e1o1qsrh5"
+      data-testid="select-input-test"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -1720,7 +1720,7 @@ exports[`RichSelectField should render correctly with a disabled option 1`] = `
           <label
             aria-live="assertive"
             as="label"
-            class="cache-xrmeok e1lzna4r2"
+            class="cache-xrmeok e1o1qsrh2"
             for=":r3:"
           >
             Select...
@@ -1785,18 +1785,18 @@ exports[`RichSelectField should render correctly with a disabled option 1`] = `
         value=""
       />
       <div
-        class="cache-9vn1ol e1lzna4r3"
+        class="cache-9vn1ol e1o1qsrh3"
       >
         <div
-          class="cache-19pioxy e1lzna4r4"
+          class="cache-19pioxy e1o1qsrh4"
         />
       </div>
     </div>
   </form>
 </DocumentFragment>
 `;
 
-exports[`RichSelectField should trigger events 1`] = `
+exports[`SelectInputField should trigger events 1`] = `
 <DocumentFragment>
   .cache-1gb28ew-container-StyledContainer {
   width: 100%;
@@ -2073,8 +2073,8 @@ exports[`RichSelectField should trigger events 1`] = `
     novalidate=""
   >
     <div
-      class=" cache-1gb28ew-container-StyledContainer e1lzna4r5"
-      data-testid="rich-select-test"
+      class=" cache-1gb28ew-container-StyledContainer e1o1qsrh5"
+      data-testid="select-input-test"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -2095,7 +2095,7 @@ exports[`RichSelectField should trigger events 1`] = `
           <label
             aria-live="assertive"
             as="label"
-            class="cache-isgbik e1lzna4r2"
+            class="cache-isgbik e1o1qsrh2"
             for=":r5:"
           >
             Select...
@@ -2158,10 +2158,10 @@ exports[`RichSelectField should trigger events 1`] = `
         value="value"
       />
       <div
-        class="cache-9vn1ol e1lzna4r3"
+        class="cache-9vn1ol e1o1qsrh3"
       >
         <div
-          class="cache-19pioxy e1lzna4r4"
+          class="cache-19pioxy e1o1qsrh4"
         />
       </div>
     </div>