fix: 🐛 Remove the SQFormIconButton component

BREAKING CHANGE: 🧨 SQFormIconButton has been removed ✅ Closes: #491
SelectQuoteLabs · Jan 7, 2022 · 4465eee · 4465eee
1 parent 76ea3e0
commit 4465eee
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 301 deletions.
diff --git a/README.md b/README.md
@@ -39,6 +39,10 @@ For **BREAKING CHANGES** Type a brief description of the breaking change when as
 
 ## Breaking Changes
 
+### Version 7
+
+In SQForm v7, we have removed the SQFormIconButton in favor of the SQFormButton where the text says either "Submit" or "Save". Please replace all occurrences of SQFormIconButton with SQFormButton in the consuming application.
+
 ### Version 6
 
 In SQForm v6, we no longer need to pass the `isRequired` prop to any form components. The components now derive whether or not they are a required field based on the Yup validation schema of the form.
@@ -120,11 +124,15 @@ $ npm run storybook
 ```
 
 ## Running the Docs Page Locally
+
 1. Install Doc page dependencies
+
 ```sh
 $ cd SQFormDocs && npm i
 ```
+
 2. Run the docs page
+
 ```sh
 $ npm run docs
 ```

diff --git a/src/components/SQForm/SQFormIconButton.js b/src/components/SQForm/SQFormIconButton.js
diff --git a/src/index.js b/src/index.js
@@ -26,7 +26,6 @@ export {
   SQFormDialogStep
 } from './components/SQFormDialogStepper';
 export {default as SQFormDropdown} from './components/SQForm/SQFormDropdown';
-export {default as SQFormIconButton} from './components/SQForm/SQFormIconButton';
 export {default as SQFormReadOnlyField} from './components/SQForm/SQFormReadOnlyField';
 export {default as SQFormResetButtonWithConfirmation} from './components/SQForm/SQFormResetButtonWithConfirmation';
 export {default as SQFormResetInitialValuesButton} from './components/SQForm/SQFormResetInitialValuesButton';

diff --git a/stories/SQForm.stories.js b/stories/SQForm.stories.js
@@ -4,7 +4,6 @@ import {withKnobs, boolean} from '@storybook/addon-knobs';
 import {action} from '@storybook/addon-actions';
 import Card from '@material-ui/core/Card';
 import Grid from '@material-ui/core/Grid';
-import CheckMarkIcon from '@material-ui/icons/CheckCircle';
 import {SectionHeader} from 'scplus-shared-components';
 
 import FriendsFieldArray from './components/FriendsFieldArray';
@@ -17,7 +16,6 @@ import {
   SQFormTextarea,
   SQFormTextField,
   SQFormButton,
-  SQFormIconButton,
   SQFormAutocomplete,
   SQFormCheckbox,
   SQFormDropdown,
@@ -486,7 +484,7 @@ export const basicFormWithMultiSelect = () => {
           {MOCK_FRIENDS_OPTIONS}
         </SQFormMultiSelect>
         <Grid item size={2} style={{alignSelf: 'flex-end'}}>
-          <SQFormIconButton IconComponent={CheckMarkIcon} />
+          <SQFormButton>Submit</SQFormButton>
         </Grid>
       </SQForm>
     </Card>
@@ -719,7 +717,7 @@ export const applyAnAction = () => {
           rowsMax={2}
         />
         <Grid item size={2} style={{alignSelf: 'flex-end'}}>
-          <SQFormIconButton IconComponent={CheckMarkIcon} />
+          <SQFormButton>Submit</SQFormButton>
         </Grid>
       </SQForm>
     </Card>
@@ -805,7 +803,7 @@ export const ccaChecklist = () => {
           {dropdownOptions}
         </SQFormDropdown>
         <Grid item size={2} style={{alignSelf: 'flex-end'}}>
-          <SQFormIconButton IconComponent={CheckMarkIcon} />
+          <SQFormButton>Submit</SQFormButton>
         </Grid>
       </SQForm>
     </Card>

diff --git a/stories/SQFormIconButton.stories.js b/stories/SQFormIconButton.stories.js
diff --git a/stories/__tests__/SQFormIconButton.stories.test.js b/stories/__tests__/SQFormIconButton.stories.test.js
diff --git a/stories/components/SQFormStoryWrapper.js b/stories/components/SQFormStoryWrapper.js
@@ -1,7 +1,6 @@
 import React from 'react';
-import CheckMarkIcon from '@material-ui/icons/CheckCircle';
 import Grid from '@material-ui/core/Grid';
-import {SQForm, SQFormIconButton} from '../../src';
+import {SQForm, SQFormButton} from '../../src';
 import {
   Snackbar,
   SnackbarProvider,
@@ -67,7 +66,7 @@ function Form({
         {children}
         {showSubmit && (
           <Grid item size={2} style={{alignSelf: 'center'}}>
-            <SQFormIconButton IconComponent={CheckMarkIcon} />
+            <SQFormButton>Submit</SQFormButton>
           </Grid>
         )}
       </SQForm>