Merge pull request #3760 from Sage/FE-3776_remove-style-override

refactor(styleoverride): remove styleOverride props from carbon (FE-3776)
Sage · May 14, 2021 · c5b2e03 · c5b2e03
2 parents 94f4a76 + 3ed2a45
commit c5b2e03
Show file tree

Hide file tree

Showing 45 changed files with 26 additions and 782 deletions.
diff --git a/cypress/features/regression/accessibility/accessibilityDesignSystem.feature b/cypress/features/regression/accessibility/accessibilityDesignSystem.feature
@@ -8,7 +8,6 @@ Feature: Accessibility tests - Design System folder
     Examples:
       | story                |
       | default story        |
-      | styles overriden     |
       | with dynamic content |
 
   @accessibility

diff --git a/cypress/features/regression/test/actionPopoverStyleOverrideNoIFrame.feature b/cypress/features/regression/test/actionPopoverStyleOverrideNoIFrame.feature
diff --git a/src/__experimental__/components/fieldset/fieldset-examples.stories.mdx b/src/__experimental__/components/fieldset/fieldset-examples.stories.mdx
@@ -55,7 +55,7 @@ Address Fieldset for Canada.
         label='ZIP Code'
         labelInline
         labelAlign='right'
-        styleOverride={ { input: { width: '120px', flex: 'none' } } }
+        inputWidth={10}
       />
     </Fieldset>
   </Story>
@@ -80,7 +80,7 @@ Address Fieldset for EU.
         label='Postal Code'
         labelInline
         labelAlign='right'
-        styleOverride={ { input: { width: '120px', flex: 'none' } } }
+        inputWidth={10}
       />
       <Textbox
         label='Town/City'
@@ -163,7 +163,7 @@ Address Fieldset for UK and Ireland.
         label='Postcode'
         labelInline
         labelAlign='right'
-        styleOverride={ { input: { width: '120px', flex: 'none' } } }
+        inputWidth={10}
       />
     </Fieldset>
   </Story>
@@ -214,7 +214,7 @@ Address Fieldset for United States.
         label='ZIP Code'
         labelInline
         labelAlign='right'
-        styleOverride={ { input: { width: '120px', flex: 'none' } } }
+        inputWidth={10}
       />
     </Fieldset>
   </Story>
@@ -249,7 +249,7 @@ Address Fieldset for other countries.
         label='Postal Code'
         labelInline
         labelAlign='right'
-        styleOverride={ { input: { width: '120px', flex: 'none' } } }
+        inputWidth={10}
       />
       <Select
         label='Country'

diff --git a/src/__experimental__/components/fieldset/fieldset.component.js b/src/__experimental__/components/fieldset/fieldset.component.js
@@ -9,32 +9,17 @@ import {
   LegendContainerStyle,
   FieldsetContentStyle,
 } from "./fieldset.style";
-import Logger from "../../../utils/logger/logger";
 
 const marginPropTypes = filterStyledSystemMarginProps(
   styledSystemPropTypes.space
 );
 
-let deprecatedWarnTriggered = false;
-
 const Fieldset = (props) => {
-  if (!deprecatedWarnTriggered) {
-    deprecatedWarnTriggered = true;
-    // eslint-disable-next-line max-len
-    Logger.deprecate(
-      "`styleOverride` that is used in the `Fieldset` component is deprecated and will soon be removed."
-    );
-  }
-
   const legend = () => {
     if (!props.legend) return null;
 
     return (
-      <LegendContainerStyle
-        inline={props.inline}
-        data-component="legend-style"
-        styleOverride={props.styleOverride.legend}
-      >
+      <LegendContainerStyle inline={props.inline} data-component="legend-style">
         <legend data-element="legend">{props.legend}</legend>
       </LegendContainerStyle>
     );
@@ -51,7 +36,6 @@ const Fieldset = (props) => {
       {...safeProps}
       m={0}
       {...filterStyledSystemMarginProps(props)}
-      styleOverride={props.styleOverride.root}
     >
       <FieldsetContentStyle
         data-component="fieldset-style"
@@ -73,16 +57,10 @@ Fieldset.propTypes = {
   legend: PropTypes.string,
   /** When true, legend is placed in line with the children */
   inline: PropTypes.bool,
-  /** Allows to override existing component styles */
-  styleOverride: PropTypes.shape({
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    legend: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  }),
 };
 
 Fieldset.defaultProps = {
   inline: false,
-  styleOverride: {},
 };
 
 export default Fieldset;
diff --git a/src/__experimental__/components/fieldset/fieldset.spec.js b/src/__experimental__/components/fieldset/fieldset.spec.js
@@ -2,11 +2,7 @@ import React from "react";
 import { shallow, mount } from "enzyme";
 import Fieldset from "./fieldset.component";
 import Textbox from "../textbox";
-import {
-  LegendContainerStyle,
-  FieldsetStyle,
-  FieldsetContentStyle,
-} from "./fieldset.style";
+import { LegendContainerStyle, FieldsetContentStyle } from "./fieldset.style";
 import {
   assertStyleMatch,
   testStyledSystemMargin,
@@ -78,29 +74,4 @@ describe("Fieldset", () => {
       );
     });
   });
-
-  describe("style overrides", () => {
-    let wrapper;
-    const customStyleObject = {
-      backgroundColor: "red",
-      display: "flex",
-      fontSize: "200px",
-    };
-    const styleOverride = {
-      root: customStyleObject,
-      legend: customStyleObject,
-    };
-
-    beforeEach(() => {
-      wrapper = render({ styleOverride, legend: "Legend" }, mount);
-    });
-
-    it("renders root element with properly assigned styles", () => {
-      assertStyleMatch(customStyleObject, wrapper.find(FieldsetStyle));
-    });
-
-    it("renders legend element with properly assigned styles", () => {
-      assertStyleMatch(customStyleObject, wrapper.find(LegendContainerStyle));
-    });
-  });
 });
diff --git a/src/__experimental__/components/fieldset/fieldset.stories.mdx b/src/__experimental__/components/fieldset/fieldset.stories.mdx
@@ -137,7 +137,7 @@ You can manipulate the spacings beetwen `Fieldset` components by passing `fieldS
             label="ZIP Code"
             labelInline
             labelAlign="right"
-            styleOverride={{ input: { width: "120px", flex: "none" } }}
+            inputWidth={10}
           />
         </Fieldset>
       ))}
@@ -178,7 +178,7 @@ You can manipulate the spacings beetwen `Fieldset` components by passing `fieldS
             label="ZIP Code"
             labelInline
             labelAlign="right"
-            styleOverride={{ input: { width: "120px", flex: "none" } }}
+            inputWidth={10}
           />
         </Fieldset>
       ))}
@@ -217,7 +217,7 @@ You can manipulate the spacings beetwen `Fieldset` components by passing `fieldS
             label="ZIP Code"
             labelInline
             labelAlign="right"
-            styleOverride={{ input: { width: "120px", flex: "none" } }}
+            inputWidth={10}
           />
         </Fieldset>
       ))}

diff --git a/src/__experimental__/components/fieldset/fieldset.style.js b/src/__experimental__/components/fieldset/fieldset.style.js
@@ -20,8 +20,6 @@ const FieldsetStyle = styled.fieldset`
     padding-top: 8px;
     padding-bottom: 8px;
   }
-
-  ${({ styleOverride }) => styleOverride};
 `;
 
 FieldsetStyle.defaultProps = {
@@ -49,8 +47,6 @@ const LegendContainerStyle = styled.div`
   ${ValidationIconStyle} ${StyledIcon}:focus {
     outline: 2px solid #ffb500;
   }
-
-  ${({ styleOverride }) => styleOverride};
 `;
 
 const FieldsetContentStyle = styled.div`

diff --git a/src/__experimental__/components/form-field/form-field.component.js b/src/__experimental__/components/form-field/form-field.component.js
@@ -6,12 +6,9 @@ import Label from "../label";
 import FieldHelp from "../field-help";
 import OptionsHelper from "../../../utils/helpers/options-helper";
 import tagComponent from "../../../utils/helpers/tags";
-import Logger from "../../../utils/logger/logger";
 import { TabContext } from "../../../components/tabs/tab";
 import useIsAboveBreakpoint from "../../../hooks/__internal__/useIsAboveBreakpoint";
 
-let deprecatedWarnTriggered = false;
-
 const FormField = ({
   children,
   disabled,
@@ -40,18 +37,9 @@ const FormField = ({
   readOnly,
   useValidationIcon,
   adaptiveLabelBreakpoint,
-  styleOverride = {},
   isRequired,
   ...props
 }) => {
-  if (!deprecatedWarnTriggered) {
-    deprecatedWarnTriggered = true;
-    // eslint-disable-next-line max-len
-    Logger.deprecate(
-      "`styleOverride` that is used in the `FormField` component is deprecated and will soon be removed."
-    );
-  }
-
   const context = useContext(TabContext);
   const largeScreen = useIsAboveBreakpoint(adaptiveLabelBreakpoint);
   let inlineLabel = labelInline;
@@ -121,7 +109,6 @@ const FormField = ({
   return (
     <FormFieldStyle
       {...tagComponent(props["data-component"], props)}
-      styleOverride={styleOverride.root}
       {...spacingProps}
     >
       <FieldLineStyle inline={inlineLabel}>
@@ -150,7 +137,6 @@ const FormField = ({
             useValidationIcon={useValidationIcon}
             pr={!reverse ? labelSpacing : undefined}
             pl={reverse ? labelSpacing : undefined}
-            styleOverride={styleOverride.label}
             isRequired={isRequired}
           >
             {label}
@@ -226,11 +212,6 @@ FormField.propTypes = {
   adaptiveLabelBreakpoint: PropTypes.number,
   /** Flag to configure component as mandatory */
   isRequired: PropTypes.bool,
-  /** Allows to override existing component styles */
-  styleOverride: PropTypes.shape({
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    label: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  }),
 };
 
 export default FormField;
diff --git a/src/__experimental__/components/form-field/form-field.style.js b/src/__experimental__/components/form-field/form-field.style.js
@@ -10,8 +10,6 @@ const FormFieldStyle = styled.div`
   &&& {
     ${space}
   }
-
-  ${({ styleOverride }) => styleOverride};
 `;
 
 FormFieldStyle.defaultProps = {

diff --git a/src/__experimental__/components/input/input-presentation.component.js b/src/__experimental__/components/input/input-presentation.component.js
@@ -6,15 +6,12 @@ import InputPresentationStyle, {
   StyledInputPresentationContainer,
 } from "./input-presentation.style";
 import extractProps from "../../../utils/helpers/extract-props";
-import Logger from "../../../utils/logger/logger";
 
 import {
   InputContext,
   InputGroupContext,
 } from "../../../__internal__/input-behaviour";
 
-let deprecatedWarnTriggered = false;
-
 const InputPresentation = (props) => {
   const { hasFocus, onMouseDown, onMouseEnter, onMouseLeave } = useContext(
     InputContext
@@ -25,20 +22,7 @@ const InputPresentation = (props) => {
     onMouseLeave: onGroupMouseLeave,
   } = useContext(InputGroupContext);
 
-  if (!deprecatedWarnTriggered) {
-    deprecatedWarnTriggered = true;
-    // eslint-disable-next-line max-len
-    Logger.deprecate(
-      "`styleOverride` that is used in the `InputPresentation` component is deprecated and will soon be removed."
-    );
-  }
-  const {
-    children,
-    styleOverride,
-    positionedChildren,
-    inputWidth,
-    ...rest
-  } = props;
+  const { children, positionedChildren, inputWidth, ...rest } = props;
   const styleProps = extractProps(rest, InputPresentationStyle);
 
   const handleMouseEnter = (e) => {
@@ -60,7 +44,6 @@ const InputPresentation = (props) => {
         onMouseDown={onMouseDown}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
-        styleOverride={styleOverride}
         {...styleProps}
       >
         {children}
@@ -71,7 +54,6 @@ const InputPresentation = (props) => {
 
 InputPresentation.propTypes = {
   children: PropTypes.node,
-  /** Allows to override existing component styles */
   align: PropTypes.string,
   disabled: PropTypes.bool,
   hasFocus: PropTypes.bool,
@@ -82,7 +64,6 @@ InputPresentation.propTypes = {
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  styleOverride: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 };
 
 export default InputPresentation;
diff --git a/src/__experimental__/components/input/input-presentation.style.js b/src/__experimental__/components/input/input-presentation.style.js
@@ -70,8 +70,6 @@ const InputPresentationStyle = styled.div`
   input::-webkit-contacts-auto-fill-button {
     display: none !important;
   }
-
-  ${({ styleOverride }) => styleOverride};
 `;
 
 function stylingForValidations({ theme, error, warning, info, disabled }) {
@@ -127,7 +125,6 @@ InputPresentationStyle.propTypes = {
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  styleOverride: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 };
 
 export default InputPresentationStyle;
diff --git a/src/__experimental__/components/input/input.style.js b/src/__experimental__/components/input/input.style.js
@@ -44,8 +44,6 @@ const StyledInput = styled.input`
     css`
       color: ${theme.readOnly.textboxText};
     `}
-
-  ${({ styleOverride }) => styleOverride};
 `;
 
 StyledInput.defaultProps = {
@@ -54,7 +52,6 @@ StyledInput.defaultProps = {
 
 StyledInput.propTypes = {
   disabled: PropTypes.bool,
-  styleOverride: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 };
 
 export default StyledInput;