Merge pull request #866 from gympass/chore/remove-default-props-web

fix: remove default props from yoga/web

.eslintrc.js

@@ -18,6 +18,7 @@ module.exports = {
     'import/extensions': 0,
     'react/jsx-props-no-spreading': 'off',
     'react/prop-types': [2, { ignore: ['theme'] }],
+    'react/require-default-props': 'off',
     'import/no-extraneous-dependencies': 0,
     'no-plusplus': 0,
     'no-restricted-globals': 0,

packages/doc/src/components/Clipboard/index.jsx

@@ -40,8 +40,4 @@ Clipboard.propTypes = {
   copyText: string,
 };
 
-Clipboard.defaultProps = {
-  copyText: undefined,
-};
-
 export default Clipboard;

packages/yoga/src/Accordion/web/Accordion.jsx

@@ -202,10 +202,10 @@ const Accordion = ({
   title,
   subtitle,
   children,
-  disabled,
-  expanded,
-  small,
-  hasHorizontalPadding,
+  disabled = false,
+  expanded = false,
+  small = false,
+  hasHorizontalPadding = true,
   ...props
 }) => {
   const [open, setOpen] = useState(expanded);
@@ -272,13 +272,4 @@ Accordion.propTypes = {
   hasHorizontalPadding: bool,
 };
 
-Accordion.defaultProps = {
-  title: undefined,
-  subtitle: undefined,
-  disabled: false,
-  expanded: false,
-  small: false,
-  hasHorizontalPadding: true,
-};
-
 export default Accordion;

packages/yoga/src/Accordion/web/Small.jsx

@@ -8,6 +8,4 @@ function AccordionSmall(props) {
 
 AccordionSmall.propTypes = Accordion.propTypes;
 
-AccordionSmall.defaultProps = Accordion.defaultProps;
-
 export default AccordionSmall;

packages/yoga/src/ActionRequirement/web/ActionRequirement.jsx

@@ -57,7 +57,7 @@ function ActionRequirement(props) {
     checkable,
     illustration,
     list,
-    titleAsTextDisplay,
+    titleAsTextDisplay = false,
   } = props;
 
   let primaryButton;
@@ -106,12 +106,4 @@ ActionRequirement.propTypes = {
   titleAsTextDisplay: bool,
 };
 
-ActionRequirement.defaultProps = {
-  children: undefined,
-  checkable: undefined,
-  illustration: undefined,
-  list: undefined,
-  titleAsTextDisplay: false,
-};
-
 export default ActionRequirement;

packages/yoga/src/AutoComplete/web/AutoComplete.jsx

@@ -147,22 +147,25 @@ const Match = styled.mark`
   `}
 `;
 
+const noop = () => {};
+const emptyArr = [];
+
 /** The autocomplete is a normal input field enhanced by a panel of suggested options. */
 const AutoComplete = React.forwardRef(
   (
     {
       className,
       style,
-      full,
-      options,
-      onChange,
-      onClean,
-      onSelect,
+      full = false,
+      options = emptyArr,
+      onChange = noop,
+      onClean = noop,
+      onSelect = noop,
       value,
       error,
-      openSuggestionsAriaLabel,
-      closeSuggestionsAriaLabel,
-      shouldFilterOptions,
+      openSuggestionsAriaLabel = 'Open suggestions',
+      closeSuggestionsAriaLabel = 'Close suggestions',
+      shouldFilterOptions = true,
       ...props
     },
     ref,
@@ -333,19 +336,4 @@ AutoComplete.propTypes = {
   shouldFilterOptions: bool,
 };
 
-AutoComplete.defaultProps = {
-  className: undefined,
-  full: false,
-  options: [],
-  style: undefined,
-  onSelect: () => {},
-  onChange: () => {},
-  onClean: () => {},
-  value: undefined,
-  error: undefined,
-  openSuggestionsAriaLabel: 'Open suggestions',
-  closeSuggestionsAriaLabel: 'Close suggestions',
-  shouldFilterOptions: true,
-};
-
 export default AutoComplete;

packages/yoga/src/Avatar/web/Avatar.jsx

@@ -30,7 +30,15 @@ const Content = ({ icon, alt, src, fill, content, stroke }) => {
  */
 const Avatar = forwardRef(
   (
-    { src, alt, fill, stroke, icon = BuildingFilled, children, ...otherProps },
+    {
+      src,
+      alt,
+      fill = 'white',
+      stroke,
+      icon = BuildingFilled,
+      children,
+      ...otherProps
+    },
     ref,
   ) => {
     return (
@@ -68,13 +76,6 @@ Content.propTypes = {
   ...Box.propTypes,
 };
 
-Content.defaultProps = {
-  src: undefined,
-  fill: 'white',
-  alt: undefined,
-  icon: undefined,
-};
-
 Avatar.propTypes = {
   src: string,
   /**  Required if src is true */
@@ -111,14 +112,6 @@ Avatar.propTypes = {
   ...Box.propTypes,
 };
 
-Avatar.defaultProps = {
-  src: undefined,
-  alt: undefined,
-  icon: undefined,
-  fill: 'white',
-  stroke: undefined,
-  ...Box.defaultProps,
-};
 Avatar.displayName = 'Avatar';
 
 export default Avatar;

packages/yoga/src/Avatar/web/AvatarCircle.jsx

@@ -16,8 +16,6 @@ const AvatarCircle = forwardRef(({ src, alt = '', ...props }, ref) => (
 
 AvatarCircle.propTypes = Avatar.propTypes;
 
-AvatarCircle.defaultProps = Avatar.defaultProps;
-
 AvatarCircle.displayName = 'Avatar.Circle';
 
 export default AvatarCircle;

packages/yoga/src/Banner/web/Banner.jsx

@@ -68,8 +68,14 @@ BannerActionButton.propTypes = {
 
 /** A banner is a component that displays a prominent message. It can have related action buttons on it or not. */
 const Banner = forwardRef((props, ref) => {
-  const { icon, variant, message, primaryButton, secondaryButton, ...rest } =
-    props;
+  const {
+    icon,
+    variant = 'informative',
+    message,
+    primaryButton,
+    secondaryButton,
+    ...rest
+  } = props;
 
   return (
     <StyledBanner ref={ref} variant={variant} {...rest}>
@@ -137,11 +143,4 @@ Banner.propTypes = {
   },
 };
 
-Banner.defaultProps = {
-  icon: undefined,
-  variant: 'informative',
-  primaryButton: undefined,
-  secondaryButton: undefined,
-};
-
 export default Banner;

packages/yoga/src/BottomSheet/web/__snapshots__/BottomSheet.test.jsx.snap

@@ -100,7 +100,7 @@ exports[`<BottomSheet /> should match snapshot 1`] = `
 }
 
 .c1 {
-  padding: 16px  16px 16px  16px;
+  padding: 16px 16px 16px 16px;
   box-shadow: 0 2px 4px -1px rgba(152,152,166,0.2),0 4px 5px 0px rgba(152,152,166,0.14),0 1px 10px 0px rgba(152,152,166,0.12);
   border-radius: 8px;
   background-color: #FFFFFF;

packages/yoga/src/Button/web/Button.jsx

@@ -11,19 +11,21 @@ const SpinnerContainer = styled.div`
   transform: translate(-50%, -50%);
 `;
 
+const noop = () => {};
+
 /** Buttons make common actions more obvious and help users more easily perform them. Buttons use labels and sometimes icons to communicate the action that will occur when the user touches them. */
 const Button = forwardRef(
   (
     {
-      children,
-      onClick,
-      full,
-      disabled,
-      inverted,
-      small,
-      secondary,
+      children = 'Button',
+      onClick = noop,
+      full = false,
+      disabled = undefined,
+      inverted = false,
+      small = false,
+      secondary = false,
       icon: Icon,
-      isLoading,
+      isLoading = false,
       ...props
     },
     ref,
@@ -77,20 +79,6 @@ Button.propTypes = {
   href: string,
 };
 
-Button.defaultProps = {
-  ariaLabel: undefined,
-  children: 'Button',
-  disabled: undefined,
-  full: false,
-  inverted: false,
-  isLoading: false,
-  onClick: () => {},
-  small: false,
-  secondary: false,
-  icon: undefined,
-  href: undefined,
-};
-
 Button.displayName = 'Button';
 
 export default Button;

packages/yoga/src/Button/web/Icon.jsx

@@ -38,16 +38,20 @@ const ButtonIcon = forwardRef(
           components: { button },
         },
       },
-      small,
+      small = false,
       disabled,
-      isLoading,
+      isLoading = false,
+      secondary = false,
+      inverted = false,
       ...props
     },
     ref,
   ) => {
     return (
       <IconStyled
         {...props}
+        secondary={secondary}
+        inverted={inverted}
         ref={ref}
         small={small}
         disabled={disabled || isLoading}
@@ -76,15 +80,6 @@ ButtonIcon.propTypes = {
   isLoading: bool,
 };
 
-ButtonIcon.defaultProps = {
-  small: false,
-  disabled: undefined,
-  secondary: false,
-  inverted: false,
-  icon: undefined,
-  isLoading: false,
-};
-
 ButtonIcon.displayName = 'Button.Icon';
 
 export default withTheme(ButtonIcon);

packages/yoga/src/Button/web/Link.jsx

@@ -87,15 +87,21 @@ const Link = styled(Button)`
   }}
 `;
 
-const ButtonLink = forwardRef(({ ...rest }, ref) => {
+const ButtonLink = forwardRef(({ secondary = false, ...rest }, ref) => {
   const props = Object.fromEntries(
     Object.entries(rest).filter(([key]) => key !== 'isLoading'),
   );
 
   const { disabled } = props;
 
   return (
-    <Link {...props} disabled={disabled} aria-disabled={disabled} ref={ref} />
+    <Link
+      {...props}
+      secondary={secondary}
+      disabled={disabled}
+      aria-disabled={disabled}
+      ref={ref}
+    />
   );
 });
 
@@ -107,13 +113,6 @@ ButtonLink.propTypes = {
   icon: oneOfType([node, func]),
 };
 
-ButtonLink.defaultProps = {
-  disabled: undefined,
-  secondary: false,
-  href: undefined,
-  icon: undefined,
-};
-
 ButtonLink.displayName = 'Button.Link';
 
 export default ButtonLink;

packages/yoga/src/Button/web/Text.jsx

@@ -113,7 +113,7 @@ const ButtonText = forwardRef(({ ...rest }, ref) => {
     Object.entries(rest).filter(([key]) => key !== 'isLoading'),
   );
 
-  const { secondary, inverted } = props;
+  const { secondary = false, inverted = false } = props;
 
   return (
     <StyledButton
@@ -130,11 +130,6 @@ ButtonText.propTypes = {
   secondary: bool,
 };
 
-ButtonText.defaultProps = {
-  inverted: false,
-  secondary: false,
-};
-
 ButtonText.displayName = 'Button.Text';
 
 export default ButtonText;