fix(SelectInputInset): rename SelectInputNativeInset to SelectInputIn…

…set (#883)
palmetto · Mar 15, 2024 · bfaacd7 · bfaacd7
1 parent 03b4b45
commit bfaacd7
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 56 deletions.
diff --git a/...lectInputNativeInset.Overview.stories.mdx → ...set/SelectInputInset.Overview.stories.mdx b/...lectInputNativeInset.Overview.stories.mdx → ...set/SelectInputInset.Overview.stories.mdx
@@ -1,22 +1,22 @@
 import { useState } from 'react';
 import { action } from '@storybook/addon-actions';
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import { SelectInputNativeInset } from './SelectInputNativeInset';
+import { SelectInputInset } from './SelectInputInset';
 import { RESPONSIVE_STORY } from '../../docs/constants';
 import { Box } from '../Box/Box';
 import { Icon } from '../Icon/Icon';
 
 <Meta
-  title="Components/SelectInputNativeInset/Overview"
-  component={SelectInputNativeInset}
+  title="Components/SelectInputInset/Overview"
+  component={SelectInputInset}
   parameters={{
     controls: { hideNoControlsWarning: true },
   }}
 />
 
-# SelectInputNativeInset
+# SelectInputInset
 
-Use `SelectInputNativeInset` to create a floating label input field, but unlike `TextInputInset` they always show the `label` in the floated state. It is a controlled component, which means that you need to provide a value and an `onChange` handler to update the value.
+Use `SelectInputInset` to create a floating label input field, but unlike `TextInputInset` they always show the `label` in the floated state. It is a controlled component, which means that you need to provide a value and an `onChange` handler to update the value.
 
 <Canvas withSource="open">
   <Story
@@ -36,7 +36,7 @@ Use `SelectInputNativeInset` to create a floating label input field, but unlike
         { value: 'vanilla', label: 'Vanilla' },
       ];
       return (
-        <SelectInputNativeInset
+        <SelectInputInset
           id="default Select"
           label="Label"
           onChange={event => {
@@ -52,7 +52,7 @@ Use `SelectInputNativeInset` to create a floating label input field, but unlike
 
 ## Props
 
-<ArgsTable of={SelectInputNativeInset} />
+<ArgsTable of={SelectInputInset} />
 
 ### Required
 
@@ -69,7 +69,7 @@ Use the `isRequired` prop to display an `*` after the label and set the `require
       ];
       return (
         <Box gap="md">
-          <SelectInputNativeInset
+          <SelectInputInset
             id="requiredSelect"
             label="Required Field"
             onChange={event => {
@@ -79,7 +79,7 @@ Use the `isRequired` prop to display an `*` after the label and set the `require
             value={value}
             isRequired
           />
-          <SelectInputNativeInset
+          <SelectInputInset
             id="customRequiredSelect"
             label="Custom Required Indicator Field"
             onChange={event => {
@@ -110,7 +110,7 @@ Use `helpText` to provide additional information about the input field.
         { value: 'Tesla', label: 'Tesla' },
       ];
       return (
-        <SelectInputNativeInset
+        <SelectInputInset
           id="helpTextSelect"
           label="Inverter Manufacturer"
           helpText="Must be from the approved vendor list"
@@ -139,7 +139,7 @@ Use the `error` prop to mark the input as invalid. `error` accepts a `boolean`,
         { value: 'Tesla', label: 'Tesla' },
       ];
       return (
-        <SelectInputNativeInset
+        <SelectInputInset
           id="errorSelect"
           label="Inverter Manufacturer"
           helpText="Must be from the approved vendor list"
@@ -169,7 +169,7 @@ Add `isDisabled`to give it a grayed out appearance, remove pointer events, and p
         { value: 'Tesla', label: 'Tesla' },
       ];
       return (
-        <SelectInputNativeInset
+        <SelectInputInset
           id="disabledSelect"
           label="Disabled Input"
           onChange={event => {
@@ -199,7 +199,7 @@ a callback function when the clear icon is clicked, which can then be handled to
         { value: 'option3', label: 'Option 3' },
       ];
       return (
-        <SelectInputNativeInset
+        <SelectInputInset
           id="clearableSelect"
           label="Clearable Input"
           onChange={event => {
@@ -229,22 +229,22 @@ Two sizes, `md` and `lg` are available, with `md` being the default.
       ];
       return (
         <Box gap="md">
-          <SelectInputNativeInset
+          <SelectInputInset
             id="mdFlavorInput"
             value={value}
             label="md size"
             onChange={event => setValue(event.target.value)}
             options={options}
           />
-          <SelectInputNativeInset
+          <SelectInputInset
             id="lgFlavorInput"
             value={value}
             size="lg"
             label="lg size"
             onChange={event => setValue(event.target.value)}
             options={options}
           />
-          <SelectInputNativeInset
+          <SelectInputInset
             id="responsiveFlavorInput"
             value={value}
             size={{ base: 'md', tablet: 'lg', desktop: 'md', hd: 'lg' }}

diff --git a/...ctInputNativeInset.Playground.stories.tsx → ...t/SelectInputInset.Playground.stories.tsx b/...ctInputNativeInset.Playground.stories.tsx → ...t/SelectInputInset.Playground.stories.tsx
@@ -1,14 +1,11 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { boxPropsKeys } from '../Box/Box';
-import {
-  SelectInputNativeInset,
-  SelectInputNativeInsetProps,
-} from './SelectInputNativeInset';
+import { SelectInputInset, SelectInputInsetProps } from './SelectInputInset';
 
 export default {
-  title: 'Components/SelectInputNativeInset/Playground',
-  component: SelectInputNativeInset,
+  title: 'Components/SelectInputInset/Playground',
+  component: SelectInputInset,
   argTypes: {
     id: {
       control: 'text',
@@ -62,15 +59,15 @@ export default {
   },
 } as Meta;
 
-const Template: Story<SelectInputNativeInsetProps> = ({ ...args }) => (
-  <SelectInputNativeInset {...args} />
+const Template: Story<SelectInputInsetProps> = ({ ...args }) => (
+  <SelectInputInset {...args} />
 );
 
 export const Playground = Template.bind({});
 Playground.args = {
-  id: 'playgroundSelectInputNativeInset',
-  label: 'Playground SelectInputNativeInset',
-  name: 'playgroundSelectInputNativeInset',
+  id: 'playgroundSelectInputInset',
+  label: 'Playground SelectInputInset',
+  name: 'playgroundSelectInputInset',
   options: [
     { value: 'chocolate', label: 'Chocolate' },
     { value: 'strawberry', label: 'Strawberry' },

diff --git a/...eInset/SelectInputNativeInset.module.scss → ...ctInputInset/SelectInputInset.module.scss b/...eInset/SelectInputNativeInset.module.scss → ...ctInputInset/SelectInputInset.module.scss
diff --git a/...tiveInset/SelectInputNativeInset.test.tsx → ...electInputInset/SelectInputInset.test.tsx b/...tiveInset/SelectInputNativeInset.test.tsx → ...electInputInset/SelectInputInset.test.tsx
@@ -1,21 +1,21 @@
 import React from 'react';
 import { render, fireEvent, screen } from '@testing-library/react';
 import { BreakpointSize } from '../../types';
-import { SelectInputNativeInset } from './SelectInputNativeInset';
+import { SelectInputInset } from './SelectInputInset';
 
 const selectOptions = [
   { value: 'chocolate', label: 'Chocolate' },
   { value: 'strawberry', label: 'Strawberry' },
   { value: 'vanilla', label: 'Vanilla' },
 ];
 
-describe('SelectInputNativeInset', () => {
+describe('SelectInputInset', () => {
   describe('Callback Handling', () => {
     test('it fires onChange callback on change', async () => {
       const mockedHandleChange = jest.fn();
 
       const { getByLabelText } = render(
-        <SelectInputNativeInset
+        <SelectInputInset
           id="testId"
           onChange={mockedHandleChange}
           placeholder="Test Placeholder"
@@ -35,7 +35,7 @@ describe('SelectInputNativeInset', () => {
       const mockedHandleFocus = jest.fn();
 
       render(
-        <SelectInputNativeInset
+        <SelectInputInset
           id="testId"
           onChange={mockedHandleChange}
           onFocus={mockedHandleFocus}
@@ -56,7 +56,7 @@ describe('SelectInputNativeInset', () => {
       const mockedHandleBlur = jest.fn();
 
       render(
-        <SelectInputNativeInset
+        <SelectInputInset
           id="testId"
           onChange={mockedHandleChange}
           onBlur={mockedHandleBlur}
@@ -78,7 +78,7 @@ describe('SelectInputNativeInset', () => {
     test('onClear prop renders clear icon when input has value', () => {
       const mockedHandleChange = jest.fn();
       render(
-        <SelectInputNativeInset
+        <SelectInputInset
           id="testId"
           onChange={mockedHandleChange}
           options={selectOptions}
@@ -96,7 +96,7 @@ describe('SelectInputNativeInset', () => {
       const mockedHandleClear = jest.fn(() => null);
 
       render(
-        <SelectInputNativeInset
+        <SelectInputInset
           id="testId"
           onChange={mockedHandleChange}
           options={selectOptions}
@@ -123,7 +123,7 @@ describe('SelectInputNativeInset', () => {
         const mockedHandleChange = jest.fn();
 
         render(
-          <SelectInputNativeInset
+          <SelectInputInset
             id="testId"
             onChange={mockedHandleChange}
             label="Select Label"
@@ -138,7 +138,7 @@ describe('SelectInputNativeInset', () => {
 
       test('assigns the "aria-labelledby" attribute and renders label correct id, when a label is provided', () => {
         render(
-          <SelectInputNativeInset
+          <SelectInputInset
             id="testInput"
             label="test label"
             options={selectOptions}
@@ -160,7 +160,7 @@ describe('SelectInputNativeInset', () => {
         const mockedHandleChange = jest.fn();
 
         render(
-          <SelectInputNativeInset
+          <SelectInputInset
             id="testId"
             onChange={mockedHandleChange}
             label="Required Select"
@@ -179,7 +179,7 @@ describe('SelectInputNativeInset', () => {
         const mockedHandleChange = jest.fn();
 
         render(
-          <SelectInputNativeInset
+          <SelectInputInset
             id="testId"
             onChange={mockedHandleChange}
             label="Select Label"
@@ -198,7 +198,7 @@ describe('SelectInputNativeInset', () => {
         const mockedHandleChange = jest.fn();
 
         render(
-          <SelectInputNativeInset
+          <SelectInputInset
             id="testId"
             onChange={mockedHandleChange}
             label="disabled test"
@@ -217,7 +217,7 @@ describe('SelectInputNativeInset', () => {
         const mockedHandleChange = jest.fn();
 
         render(
-          <SelectInputNativeInset
+          <SelectInputInset
             id="testId"
             onChange={mockedHandleChange}
             label="Select Label"
@@ -241,7 +241,7 @@ describe('SelectInputNativeInset', () => {
     sizes.forEach(size => {
       test(`it has a ${size} class applied to it`, () => {
         render(
-          <SelectInputNativeInset
+          <SelectInputInset
             id="testId"
             onChange={mockedHandleChange}
             options={selectOptions}
@@ -258,7 +258,7 @@ describe('SelectInputNativeInset', () => {
       breakpoints.forEach(breakpoint => {
         test(`it applies responsive classes for breakpoint: ${breakpoint} and size: ${size}`, () => {
           render(
-            <SelectInputNativeInset
+            <SelectInputInset
               id="testId"
               onChange={mockedHandleChange}
               options={selectOptions}
@@ -279,7 +279,7 @@ describe('SelectInputNativeInset', () => {
 
     test('It applies responsive classes when multiple are applied', () => {
       render(
-        <SelectInputNativeInset
+        <SelectInputInset
           id="testId"
           onChange={mockedHandleChange}
           options={selectOptions}

diff --git a/...putNativeInset/SelectInputNativeInset.tsx → ...nts/SelectInputInset/SelectInputInset.tsx b/...putNativeInset/SelectInputNativeInset.tsx → ...nts/SelectInputInset/SelectInputInset.tsx
@@ -17,11 +17,11 @@ import { Box, BoxProps } from '../Box/Box';
 import { HelpText } from '../HelpText/HelpText';
 import { Icon } from '../Icon/Icon';
 import { getAutoCompleteValue } from '../../lib/getAutoCompleteValue';
-import styles from './SelectInputNativeInset.module.scss';
+import styles from './SelectInputInset.module.scss';
 import { InputValidationMessage } from '../InputValidationMessage/InputValidationMessage';
 
-export type SelectInputNativeInsetSize = 'md' | 'lg';
-export interface SelectInputNativeInsetProps {
+export type SelectInputInsetSize = 'md' | 'lg';
+export interface SelectInputInsetProps {
   /**
    * The input's id attribute. Used to programmatically tie the input with its label.
    */
@@ -103,16 +103,14 @@ export interface SelectInputNativeInsetProps {
   /**
    * The size of the text input.
    */
-  size?:
-    | SelectInputNativeInsetSize
-    | ResponsiveProp<SelectInputNativeInsetSize>;
+  size?: SelectInputInsetSize | ResponsiveProp<SelectInputInsetSize>;
   /**
    * Additional props to be spread to rendered element
    */
   [x: string]: any; // eslint-disable-line
 }
 
-export const SelectInputNativeInset: ForwardRefExoticComponent<SelectInputNativeInsetProps> = forwardRef<HTMLDivElement, SelectInputNativeInsetProps>(
+export const SelectInputInset: ForwardRefExoticComponent<SelectInputInsetProps> = forwardRef<HTMLDivElement, SelectInputInsetProps>(
   (
     {
       id,
@@ -176,7 +174,7 @@ export const SelectInputNativeInset: ForwardRefExoticComponent<SelectInputNative
       );
     };
 
-    const computedInputProps: SelectInputNativeInsetProps['inputProps'] = {
+    const computedInputProps: SelectInputInsetProps['inputProps'] = {
       ...inputProps, // These are spread first so that we don't have top level props overwritten by the user.
       'aria-required': isRequired,
       'aria-invalid': !!error,

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -41,7 +41,7 @@ export * from './RadioGroup/RadioGroup';
 export * from './ResponsiveProvider/ResponsiveProvider';
 export * from './SelectInput/SelectInput';
 export * from './SelectInputNative/SelectInputNative';
-export * from './SelectInputNativeInset/SelectInputNativeInset';
+export * from './SelectInputInset/SelectInputInset';
 export * from './Spinner/Spinner';
 export * from './TabPanels/TabPanels';
 export * from './Tabs/Tabs';

diff --git a/src/docs/FormTheming.stories.mdx b/src/docs/FormTheming.stories.mdx
@@ -5,7 +5,7 @@ import { TextInputInset } from '../components/TextInputInset/TextInputInset';
 import { CheckboxInput } from '../components/CheckboxInput/CheckboxInput';
 import { SelectInput } from '../components/SelectInput/SelectInput';
 import { SelectInputNative } from '../components/SelectInputNative/SelectInputNative';
-import { SelectInputNativeInset } from '../components/SelectInputNativeInset/SelectInputNativeInset';
+import { SelectInputInset } from '../components/SelectInputInset/SelectInputInset';
 import { OptionTileGroup } from '../components/OptionTileGroup/OptionTileGroup';
 import { RadioGroup } from '../components/RadioGroup/RadioGroup';
 import { TextareaInput } from '../components/TextareaInput/TextareaInput';
@@ -123,7 +123,7 @@ Form controls share tokens since they are designed to have a consistent appearan
             options={options}
             value={themeExampleValues.selectValue}
           />
-          <SelectInputNativeInset
+          <SelectInputInset
             id="floationg Select"
             label="Inset Select Input"
             onChange={event => handleChange('selectValue', event.target.value)}

diff --git a/src/stories/FormControls.stories.mdx b/src/stories/FormControls.stories.mdx
@@ -8,7 +8,7 @@ import { TextInputInset } from '../components/TextInputInset/TextInputInset';
 import { TextareaInput } from '../components/TextareaInput/TextareaInput';
 import { TextareaInputInset } from '../components/TextareaInputInset/TextareaInputInset';
 import { SelectInputNative } from '../components/SelectInputNative/SelectInputNative';
-import { SelectInputNativeInset } from '../components/SelectInputNativeInset/SelectInputNativeInset';
+import { SelectInputInset } from '../components/SelectInputInset/SelectInputInset';
 import { Toggle } from '../components/Toggle/Toggle';
 
 <Meta title="Patterns/Form Controls" />
@@ -69,7 +69,7 @@ Try not to mix Inset style inputs with regular inputs in the same form.
             value={formValues.textInputMd}
             onChange={event => handleChange('notesInput', event.target.value)}
           />
-          <SelectInputNativeInset
+          <SelectInputInset
             id="floatingSelectNative"
             label="Flavor"
             onChange={event => handleChange('selectInput', event.target.value)}