refactor(react): remove default placeholder from Combobox, TextArea, …

…TextInput, MultiSelect, FilterableMultiselect (#9510) * feat(Combobox): remove default placeholder * feat(TextArea, TextInput): remove default placeholder * test: update snaps * fix(Multiselect, FilterableMultiselect): remove default placeholder * fix(Textarea/Textinput): remove default placeholder usage Co-authored-by: Taylor Jones <taylor.jones826@gmail.com> Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
carbon-design-system · Jan 27, 2022 · df28984 · df28984
1 parent d0c0791
commit df28984
Show file tree

Hide file tree

Showing 9 changed files with 3 additions and 27 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -920,7 +920,6 @@ Map {
         "type": "func",
       },
       "placeholder": Object {
-        "isRequired": true,
         "type": "string",
       },
       "selectedItem": Object {

diff --git a/packages/react/src/components/ComboBox/ComboBox-story.js b/packages/react/src/components/ComboBox/ComboBox-story.js
@@ -68,7 +68,6 @@ export const ComboboxStory = () => (
       id="carbon-combobox"
       items={items}
       itemToString={(item) => (item ? item.text : '')}
-      placeholder="Filter..."
       titleText="ComboBox title"
       helperText="Combobox helper text"
     />
@@ -79,7 +78,6 @@ ComboboxStory.storyName = 'Combobox';
 
 const props = () => ({
   id: text('Combobox ID (id)', 'carbon-combobox-example'),
-  placeholder: text('Placeholder text (placeholder)', 'Filter...'),
   titleText: text('Title (titleText)', 'Combobox title'),
   helperText: text('Helper text (helperText)', 'Optional helper text here'),
   light: boolean('Light (light)', false),
@@ -127,7 +125,6 @@ export const Disabled = () => (
       disabled
       items={items}
       itemToString={(item) => (item ? item.text : '')}
-      placeholder="Filter..."
       titleText="ComboBox title"
       helperText="Combobox helper text"
     />
@@ -142,7 +139,6 @@ export const Light = () => (
       light
       items={items}
       itemToString={(item) => (item ? item.text : '')}
-      placeholder="Filter..."
       titleText="ComboBox title"
       helperText="Combobox helper text"
     />

diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
@@ -509,7 +509,7 @@ ComboBox.propTypes = {
    * Used to provide a placeholder text node before a user enters any input.
    * This is only present if the control has no items selected
    */
-  placeholder: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
 
   /**
    * For full control of the selection

diff --git a/packages/react/src/components/MultiSelect/next/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/next/FilterableMultiSelect.js
@@ -531,7 +531,7 @@ FilterableMultiSelect.propTypes = {
    * Generic `placeholder` that will be used as the textual representation of
    * what this field is for
    */
-  placeholder: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
 
   /**
    * Specify feedback (mode) of the selection.

diff --git a/packages/react/src/components/MultiSelect/next/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/next/MultiSelect.stories.js
@@ -88,7 +88,6 @@ export const _Filterable = () => {
         helperText="This is helper text"
         items={items}
         itemToString={(item) => (item ? item.text : '')}
-        placeholder="Filter"
         selectionFeedback="top-after-reopen"
       />
     </div>
@@ -142,7 +141,6 @@ export const _FilterableWithLayer = () => {
         helperText="This is helper text"
         items={items}
         itemToString={(item) => (item ? item.text : '')}
-        placeholder="Filter"
         selectionFeedback="top-after-reopen"
       />
       <Layer>
@@ -152,7 +150,6 @@ export const _FilterableWithLayer = () => {
           helperText="This is helper text"
           items={items}
           itemToString={(item) => (item ? item.text : '')}
-          placeholder="Filter"
           selectionFeedback="top-after-reopen"
         />
         <Layer>
@@ -162,7 +159,6 @@ export const _FilterableWithLayer = () => {
             helperText="This is helper text"
             items={items}
             itemToString={(item) => (item ? item.text : '')}
-            placeholder="Filter"
             selectionFeedback="top-after-reopen"
           />
         </Layer>

diff --git a/packages/react/src/components/TextArea/TextArea-story.js b/packages/react/src/components/TextArea/TextArea-story.js
@@ -26,7 +26,6 @@ const TextAreaProps = () => ({
     'A valid value is required'
   ),
   helperText: text('Helper text (helperText)', 'Optional helper text.'),
-  placeholder: text('Placeholder text (placeholder)', 'Placeholder text.'),
   id: 'test2',
   cols: number('Columns (columns)', 50),
   rows: number('Rows (rows)', 4),

diff --git a/packages/react/src/components/TextArea/next/TextArea.stories.js b/packages/react/src/components/TextArea/next/TextArea.stories.js
@@ -21,7 +21,6 @@ export const Default = () => (
   <TextArea
     labelText="Text Area label"
     helperText="Optional helper text"
-    placeholder="Placeholder text"
     cols={50}
     rows={4}
     id="text-area-1"
@@ -34,7 +33,6 @@ export const WithLayer = () => {
       <TextArea
         labelText="First layer"
         helperText="Optional helper text"
-        placeholder="Placeholder text"
         cols={50}
         rows={4}
         id="text-area-1"
@@ -43,7 +41,6 @@ export const WithLayer = () => {
         <TextArea
           labelText="Second layer"
           helperText="Optional helper text"
-          placeholder="Placeholder text"
           cols={50}
           rows={4}
           id="text-area-1"
@@ -52,7 +49,6 @@ export const WithLayer = () => {
           <TextArea
             labelText="Third layer"
             helperText="Optional helper text"
-            placeholder="Placeholder text"
             cols={50}
             rows={4}
             id="text-area-1"

diff --git a/packages/react/src/components/TextInput/TextInput-story.js b/packages/react/src/components/TextInput/TextInput-story.js
@@ -62,7 +62,6 @@ const props = {
     ),
     size: select('Field size (size)', sizes, undefined) || undefined,
     labelText: text('Label text (labelText)', 'Text input label'),
-    placeholder: text('Placeholder text (placeholder)', 'Placeholder text'),
     light: boolean('Light variant (light)', false),
     disabled: boolean('Disabled (disabled)', false),
     hideLabel: boolean('No label (hideLabel)', false),

diff --git a/packages/react/src/components/TextInput/next/TextInput.stories.js b/packages/react/src/components/TextInput/next/TextInput.stories.js
@@ -29,26 +29,20 @@ export const Default = () => (
   <TextInput
     type="text"
     labelText="Text input label"
-    defaultValue="This is not a default value"
     helperText="Optional help text"
   />
 );
 
 export const Fluid = () => (
   <FluidForm>
-    <TextInput
-      type="text"
-      labelText="Text input label"
-      defaultValue="This is not a default value"
-    />
+    <TextInput type="text" labelText="Text input label" />
   </FluidForm>
 );
 
 export const TogglePasswordVisibility = () => {
   return (
     <TextInput.PasswordInput
       labelText="Text input label"
-      defaultValue="This is not a default value"
       helperText="Optional help text"
     />
   );
@@ -60,21 +54,18 @@ export const WithLayer = () => {
       <TextInput
         type="text"
         labelText="First layer"
-        defaultValue="This is not a default value"
         helperText="Optional help text"
       />
       <Layer>
         <TextInput
           type="text"
           labelText="Second layer"
-          defaultValue="This is not a default value"
           helperText="Optional help text"
         />
         <Layer>
           <TextInput
             type="text"
             labelText="Third layer"
-            defaultValue="This is not a default value"
             helperText="Optional help text"
           />
         </Layer>