Simplify prop exclusion for styled components

greenbone · Nov 14, 2023 · 177128e · 177128e
1 parent df31fc7
commit 177128e
Show file tree

Hide file tree

Showing 28 changed files with 87 additions and 129 deletions.
diff --git a/src/web/components/badge/badge.js b/src/web/components/badge/badge.js
@@ -24,19 +24,20 @@ import {isDefined, hasValue} from 'gmp/utils/identity';
 
 import PropTypes from 'web/utils/proptypes';
 import Theme from 'web/utils/theme';
-import {excludePropsConfig} from 'web/utils/styledConfig';
+import {styledExcludeProps} from 'web/utils/styledConfig';
 
-const BadgeContainer = styled.div.withConfig(excludePropsConfig('margin'))`
+const BadgeContainer = styledExcludeProps(styled.div, ['margin'])`
   position: relative;
   display: inline-flex;
   margin-right: ${props => props.margin}px;
 `;
 
 BadgeContainer.displayName = 'BadgeContainer';
 
-const BadgeIcon = styled.span.withConfig(
-  excludePropsConfig(['backgroundColor', 'margin']),
-)`
+const BadgeIcon = styledExcludeProps(styled.span, [
+  'backgroundColor',
+  'margin',
+])`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;

diff --git a/src/web/components/bar/progressbar.js b/src/web/components/bar/progressbar.js
@@ -21,12 +21,10 @@ import React from 'react';
 import styled from 'styled-components';
 
 import PropTypes from 'web/utils/proptypes.js';
-import {excludePropsConfig} from 'web/utils/styledConfig';
+import {styledExcludeProps} from 'web/utils/styledConfig';
 import Theme from 'web/utils/theme.js';
 
-const ProgressBarBox = styled.div.withConfig(
-  excludePropsConfig(['boxBackground']),
-)`
+const ProgressBarBox = styledExcludeProps(styled.div, ['boxBackground'])`
   height: 13px;
   box-sizing: content-box; /* height includes border */
   display: inline-block;
@@ -66,7 +64,7 @@ export const adjustProgress = progress => {
   return progress;
 };
 
-const Progress = styled.div.withConfig(excludePropsConfig(['progress']))`
+const Progress = styledExcludeProps(styled.div, ['progress'])`
   height: 13px;
 
   @media print {

diff --git a/src/web/components/dialog/scrollablecontent.js b/src/web/components/dialog/scrollablecontent.js
@@ -21,13 +21,11 @@ import React from 'react';
 import styled from 'styled-components';
 
 import PropTypes from 'web/utils/proptypes';
-import {excludePropsConfig} from 'web/utils/styledConfig';
+import {styledExcludeProps} from 'web/utils/styledConfig';
 
 import Layout from 'web/components/layout/layout';
 
-const ScrollableContent = styled.div.withConfig(
-  excludePropsConfig(['maxHeight']),
-)`
+const ScrollableContent = styledExcludeProps(styled.div, ['maxHeight'])`
   overflow: auto;
   padding: 0 15px;
   width: 100%;

diff --git a/src/web/components/folding/folding.js b/src/web/components/folding/folding.js
@@ -20,7 +20,7 @@ import React from 'react';
 import styled, {keyframes, css} from 'styled-components';
 
 import PropTypes from 'web/utils/proptypes';
-import {excludePropsConfig} from 'web/utils/styledConfig';
+import {styledExcludeProps} from 'web/utils/styledConfig';
 
 /**
  * State used in foldable components
@@ -43,7 +43,7 @@ const foldDelay = keyframes`
   }
 `;
 
-const Div = styled.div.withConfig(excludePropsConfig(['foldState']))`
+const Div = styledExcludeProps(styled.div, ['foldState'])`
   overflow: hidden;
   transition: 0.4s;
 

diff --git a/src/web/components/form/field.js b/src/web/components/form/field.js
@@ -22,16 +22,14 @@ import PropTypes from 'web/utils/proptypes';
 
 import styled from 'styled-components';
 
-import {excludePropsConfig} from 'web/utils/styledConfig';
+import {styledExcludeProps} from 'web/utils/styledConfig';
 import Theme from 'web/utils/theme';
 
 import withLayout from 'web/components/layout/withLayout';
 
 export const DISABLED_OPACITY = 0.65;
 
-const StyledInput = styled.input.withConfig(
-  excludePropsConfig(['convert', 'hasError']),
-)`
+const StyledInput = styledExcludeProps(styled.input, ['convert', 'hasError'])`
   /* use font and line settings from parents not from browser default */
   font-family: inherit;
   font-size: inherit;

diff --git a/src/web/components/form/formgroup.js b/src/web/components/form/formgroup.js
@@ -25,7 +25,7 @@ import {parseInt} from 'gmp/parser';
 
 import Layout from 'web/components/layout/layout';
 import PropTypes from 'web/utils/proptypes';
-import {excludePropsConfig} from 'web/utils/styledConfig';
+import {styledExcludeProps} from 'web/utils/styledConfig';
 
 const COLUMNS = [
   '0',
@@ -50,9 +50,7 @@ const FormGroupLayout = styled.div`
   padding-bottom: 10px;
 `;
 
-const Title = styled.label.withConfig(
-  excludePropsConfig(['titleSize', 'titleOffset']),
-)`
+const Title = styledExcludeProps(styled.label, ['titleSize', 'titleOffset'])`
   display: inline-block;
   max-width: 100%;
   font-weight: bold;
@@ -63,9 +61,7 @@ const Title = styled.label.withConfig(
   margin-left: ${props => COLUMNS[props.titleOffset]};
 `;
 
-const FormGroupContent = styled(Layout).withConfig(
-  excludePropsConfig(['size', 'offset']),
-)`
+const FormGroupContent = styledExcludeProps(styled(Layout), ['size', 'offset'])`
   ${props => {
     const ret = {};
     if (isDefined(props.size)) {

diff --git a/src/web/components/form/loadingbutton.js b/src/web/components/form/loadingbutton.js
@@ -20,11 +20,9 @@ import styled from 'styled-components';
 import Button from 'web/components/form/button';
 
 import Theme from 'web/utils/theme';
-import {excludePropsConfig} from 'web/utils/styledConfig';
+import {styledExcludeProps} from 'web/utils/styledConfig';
 
-const LoadingButton = styled(Button).withConfig(
-  excludePropsConfig('isLoading'),
-)`
+const LoadingButton = styledExcludeProps(styled(Button), ['isLoading'])`
   color: ${props => (props.isLoading ? 'rgba(0, 0, 0, 0.0)' : Theme.darkGray)};
   background: ${props =>
     props.isLoading

diff --git a/src/web/components/form/radio.js b/src/web/components/form/radio.js
@@ -23,7 +23,7 @@ import {isDefined} from 'gmp/utils/identity';
 
 import compose from 'web/utils/compose';
 import PropTypes from 'web/utils/proptypes';
-import {excludePropsConfig} from 'web/utils/styledConfig';
+import {styledExcludeProps} from 'web/utils/styledConfig';
 
 import Divider from 'web/components/layout/divider';
 import withLayout from 'web/components/layout/withLayout';
@@ -37,9 +37,7 @@ export const StyledElement = styled.label`
   ${props => (props.disabled ? {cursor: 'not-allowed'} : undefined)};
 `;
 
-export const StyledInput = styled.input.withConfig(
-  excludePropsConfig(['convert']),
-)`
+export const StyledInput = styledExcludeProps(styled.input, ['convert'])`
   /* use font and line settings from parents not from browser default */
   font-family: inherit;
   font-size: inherit;

diff --git a/src/web/components/form/select.js b/src/web/components/form/select.js
@@ -44,13 +44,13 @@ import {
 } from './selectelements';
 
 import {Marker} from './useFormValidation';
-import {excludePropsConfig} from 'web/utils/styledConfig';
+import {styledExcludeProps} from 'web/utils/styledConfig';
 
 const SingleSelectedValue = styled(SelectedValue)`
   cursor: default;
 `;
 
-const Div = styled.div.withConfig(excludePropsConfig(['hasError']))`
+const Div = styledExcludeProps(styled.div, ['hasError'])`
   display: flex;
 `;
 

diff --git a/src/web/components/form/selectelements.js b/src/web/components/form/selectelements.js
@@ -24,13 +24,11 @@ import {isDefined, hasValue} from 'gmp/utils/identity';
 
 import Theme from 'web/utils/theme';
 import PropTypes from 'web/utils/proptypes';
-import {excludePropsConfig} from 'web/utils/styledConfig';
+import {styledExcludeProps} from 'web/utils/styledConfig';
 
 import Portal from 'web/components/portal/portal';
 
-export const Box = styled.div.withConfig(
-  excludePropsConfig(['hasError', 'isOpen']),
-)`
+export const Box = styledExcludeProps(styled.div, ['hasError', 'isOpen'])`
   border: 1px solid ${Theme.inputBorderGray};
   border-radius: 2px;
   display: flex;
@@ -62,9 +60,7 @@ export const Input = styled.input`
   line-height: inherit;
 `;
 
-export const Item = styled.span.withConfig(
-  excludePropsConfig(['isActive', 'isSelected']),
-)`
+export const Item = styledExcludeProps(styled.span, ['isActive', 'isSelected'])`
   padding: 1px 5px;
   cursor: pointer;
   &:hover {
@@ -89,7 +85,7 @@ export const ItemContainer = styled.div`
   flex-direction: column;
 `;
 
-const MenuContainer = styled.div.withConfig(excludePropsConfig(['position']))`
+const MenuContainer = styledExcludeProps(styled.div, ['position'])`
   outline: 0;
   border-radius: 0 0 4px 4px;
   transition: opacity 0.1s ease;

diff --git a/src/web/components/form/textarea.js b/src/web/components/form/textarea.js
@@ -28,11 +28,12 @@ import withLayout from 'web/components/layout/withLayout';
 
 import {DISABLED_OPACITY} from './field';
 import {Marker} from './useFormValidation';
-import {excludePropsConfig} from 'web/utils/styledConfig';
+import {styledExcludeProps} from 'web/utils/styledConfig';
 
-const StyledTextArea = styled.textarea.withConfig(
-  excludePropsConfig(['convert', 'hasError']),
-)`
+const StyledTextArea = styledExcludeProps(styled.textarea, [
+  'convert',
+  'hasError',
+])`
   display: block;
   height: auto;
   color: ${Theme.darkGray};

diff --git a/src/web/components/form/useFormValidation.js b/src/web/components/form/useFormValidation.js
@@ -24,10 +24,10 @@ import {_, _l} from 'gmp/locale/lang';
 
 import {hasValue, isDefined, isFunction} from 'gmp/utils/identity';
 
-import {excludePropsConfig} from 'web/utils/styledConfig';
+import {styledExcludeProps} from 'web/utils/styledConfig';
 import Theme from 'web/utils/theme';
 
-const StyledMarker = styled.div.withConfig(excludePropsConfig(['isVisible']))`
+const StyledMarker = styledExcludeProps(styled.div, ['isVisible'])`
   color: ${Theme.darkRed};
   color: ${props => props.color};
   font-weight: bold;

diff --git a/src/web/components/icon/svgicon.js b/src/web/components/icon/svgicon.js
@@ -28,15 +28,13 @@ import PropTypes from 'web/utils/proptypes';
 import Theme from 'web/utils/theme';
 
 import withIconSize from 'web/components/icon/withIconSize';
-import {excludePropsConfig} from 'web/utils/styledConfig';
+import {styledExcludeProps} from 'web/utils/styledConfig';
 
 const Anchor = styled.a`
   display: flex;
 `;
 
-const Styled = styled.span.withConfig(
-  excludePropsConfig(['active', 'isLoading']),
-)`
+const Styled = styledExcludeProps(styled.span, ['active', 'isLoading'])`
   cursor: ${props => (isDefined(props.onClick) ? 'pointer' : undefined)};
 
   @media print {

diff --git a/src/web/components/icon/withIconSize.js b/src/web/components/icon/withIconSize.js
@@ -26,7 +26,7 @@ import {isArray} from 'gmp/utils/identity';
 import {IconSizeContext} from 'web/components/provider/iconsizeprovider';
 
 import PropTypes from 'web/utils/proptypes';
-import {excludePropsConfig} from 'web/utils/styledConfig';
+import {styledExcludeProps} from 'web/utils/styledConfig';
 
 export const ICON_SIZE_LARGE_PIXELS = '50px';
 export const ICON_SIZE_MEDIUM_PIXELS = '24px';
@@ -35,9 +35,7 @@ export const ICON_SIZE_SMALL_PIXELS = '16px';
 const withIconSize =
   (defaultSize = 'small') =>
   Component => {
-    const IconSize = styled(Component).withConfig(
-      excludePropsConfig(['iconSize']),
-    )`
+    const IconSize = styledExcludeProps(styled(Component), ['iconSize'])`
       ${props => {
         const {iconSize = defaultSize, size = iconSize} = props;
 

diff --git a/src/web/components/label/severityclass.js b/src/web/components/label/severityclass.js
@@ -20,11 +20,12 @@ import React from 'react';
 import styled from 'styled-components';
 
 import _ from 'gmp/locale';
-import {excludePropsConfig} from 'web/utils/styledConfig';
+import {styledExcludeProps} from 'web/utils/styledConfig';
 
-const Label = styled.div.withConfig(
-  excludePropsConfig(['backgroundColor', 'borderColor']),
-)`
+const Label = styledExcludeProps(styled.div, [
+  'backgroundColor',
+  'borderColor',
+])`
   text-align: center;
   font-weight: normal;
   font-style: normal;

diff --git a/src/web/components/layout/__tests__/__snapshots__/horizontalsep.js.snap b/src/web/components/layout/__tests__/__snapshots__/horizontalsep.js.snap
@@ -20,39 +20,17 @@ exports[`HorizontalSep tests should allow to wrap 1`] = `
 }
 
 .c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c3 {
   margin-left: -5px;
 }
 
-.c3>* {
+.c2>* {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
-.c3>* {
+.c2>* {
   margin-left: 5px;
 }
 
@@ -63,14 +41,14 @@ exports[`HorizontalSep tests should allow to wrap 1`] = `
   display: inline-flex;
 }
 
-.c4 {
+.c3 {
   -webkit-box-flex-wrap: true;
   -webkit-flex-wrap: true;
   -ms-flex-wrap: true;
   flex-wrap: true;
 }
 
-.c4>*:not(:last-child)::after {
+.c3>*:not(:last-child)::after {
   content: '•';
   margin-left: 5px;
 }
@@ -79,7 +57,7 @@ exports[`HorizontalSep tests should allow to wrap 1`] = `
   class="c0 c1"
 >
   <div
-    class="c2 c3 c4"
+    class="c0 c2 c3"
   />
 </div>
 `;
@@ -245,7 +223,6 @@ exports[`HorizontalSep tests should render with spacing 1`] = `
 >
   <div
     class="c0 c2 c3"
-    spacing="10px"
   />
 </div>
 `;
diff --git a/src/web/components/layout/divider.js b/src/web/components/layout/divider.js
@@ -21,15 +21,13 @@ import React from 'react';
 import styled from 'styled-components';
 
 import PropTypes from 'web/utils/proptypes';
-import {excludePropsConfig} from 'web/utils/styledConfig';
+import {styledExcludeProps} from 'web/utils/styledConfig';
 
 import Layout from './layout';
 
 const DEFAULT_MARGIN = '5px';
 
-const DividerComponent = styled(Layout).withConfig(
-  excludePropsConfig('margin'),
-)`
+const DividerComponent = styledExcludeProps(styled(Layout), ['margin'])`
   & > * {
     display: inline-flex;
   }