Merge pull request #755 from vrk-kpa/feature/generic-spacing-props

[Breaking change] Add spacing props to components

src/core/ActionMenu/ActionMenu.tsx

@@ -16,6 +16,11 @@ import {
 import { Button, ButtonVariant } from '../Button/Button';
 import { HtmlDiv } from '../../reset';
 import { HTMLAttributesIncludingDataAttributes } from '../../utils/common/common';
+import {
+  spacingStyles,
+  separateMarginProps,
+  MarginProps,
+} from '../theme/utils/spacing';
 import { baseStyles } from './ActionMenu.baseStyles';
 import { ActionMenuItemProps } from './ActionMenuItem/ActionMenuItem';
 import { ActionMenuDividerProps } from './ActionMenuDivider/ActionMenuDivider';
@@ -36,7 +41,7 @@ export type MenuContent =
   | ReactElement<ActionMenuItemProps>
   | ReactElement<ActionMenuDividerProps>;
 
-export interface ActionMenuProps {
+export interface ActionMenuProps extends MarginProps {
   /** Text content for the menu button */
   buttonText?: string;
   /**
@@ -103,8 +108,10 @@ const BaseActionMenu = (props: ActionMenuProps) => {
     onClose,
     onBlur,
     menuClassName,
-    ...passProps
+    ...rest
   } = props;
+  const [marginProps, passProps] = separateMarginProps(rest);
+  const marginStyle = spacingStyles(marginProps);
 
   const openButtonRef = forwardedRef || useRef<HTMLButtonElement>(null);
   const [menuVisible, setMenuVisible] = useState<boolean>(false);
@@ -168,6 +175,7 @@ const BaseActionMenu = (props: ActionMenuProps) => {
       className={classnames(baseClassName, className, {
         [actionMenuClassNames.fullWidth]: fullWidth,
       })}
+      style={{ ...marginStyle, ...wrapperProps?.style }}
     >
       <Button
         id={buttonId}

src/core/Alert/Alert.tsx

@@ -11,6 +11,11 @@ import {
 import { AutoId } from '../utils/AutoId/AutoId';
 import { getConditionalAriaProp } from '../../utils/aria';
 import { SuomifiThemeProp, SuomifiThemeConsumer } from '../theme';
+import {
+  spacingStyles,
+  separateMarginProps,
+  MarginProps,
+} from '../theme/utils/spacing';
 import { baseStyles } from './Alert.baseStyles';
 import { IconClose, IconError, IconInfo, IconWarning } from 'suomifi-icons';
 
@@ -24,7 +29,7 @@ const alertClassNames = {
   smallScreen: `${baseClassName}--small-screen`,
 };
 
-export interface AlertProps extends HtmlDivWithRefProps {
+export interface AlertProps extends HtmlDivWithRefProps, MarginProps {
   /** Style variant. Affects color and icon.
    * @default 'neutral'
    */
@@ -56,8 +61,10 @@ class BaseAlert extends Component<AlertProps> {
       onCloseButtonClick,
       smallScreen,
       closeButtonProps = {},
-      ...passProps
+      ...rest
     } = this.props;
+    const [marginProps, passProps] = separateMarginProps(rest);
+    const marginStyle = spacingStyles(marginProps);
 
     const {
       className: customCloseButtonClassName,
@@ -73,6 +80,7 @@ class BaseAlert extends Component<AlertProps> {
           [`${baseClassName}--${status}`]: !!status,
           [alertClassNames.smallScreen]: !!smallScreen,
         })}
+        style={{ ...marginStyle, ...passProps?.style }}
       >
         <HtmlDiv className={alertClassNames.styleWrapper}>
           {status === 'warning' && (

src/core/Block/Block.baseStyles.ts

@@ -1,21 +1,10 @@
 import { css } from 'styled-components';
 import { SuomifiTheme } from '../theme';
 import { element, font } from '../theme/reset';
-import { spacingModifiers } from '../theme/utils';
 import { BlockVariant } from './Block';
 
 export const baseStyles = (theme: SuomifiTheme, variant?: BlockVariant) => css`
   ${element(theme)}
   ${font(theme)('bodyText')}
-  ${spacingModifiers(theme)('margin')('&.fi-block--margin')}
-  ${spacingModifiers(theme)('margin-top')('&.fi-block--margin-top')}
-  ${spacingModifiers(theme)('margin-right')('&.fi-block--margin-right')}
-  ${spacingModifiers(theme)('margin-bottom')('&.fi-block--margin-bottom')}
-  ${spacingModifiers(theme)('margin-left')('&.fi-block--margin-left')}
-  ${spacingModifiers(theme)('padding')('&.fi-block--padding')}
-  ${spacingModifiers(theme)('padding-top')('&.fi-block--padding-top')}
-  ${spacingModifiers(theme)('padding-right')('&.fi-block--padding-right')}
-  ${spacingModifiers(theme)('padding-bottom')('&.fi-block--padding-bottom')}
-  ${spacingModifiers(theme)('padding-left')('&.fi-block--padding-left')}
   ${!!variant && variant === 'span' ? 'display: inline-block' : ''}
 `;

src/core/Block/Block.tsx

@@ -1,7 +1,11 @@
 import React, { Component, forwardRef } from 'react';
 import { default as styled } from 'styled-components';
 import classnames from 'classnames';
-import { SpacingWithoutInsetProp } from '../theme/utils/spacing';
+import {
+  SpacingProps,
+  separateMarginAndPaddingProps,
+  spacingStyles,
+} from '../theme/utils/spacing';
 import { baseStyles } from './Block.baseStyles';
 import { HtmlDivWithNativeRef, HtmlDivProps } from '../../reset';
 import { SuomifiThemeProp, SuomifiThemeConsumer } from '../theme';
@@ -18,35 +22,7 @@ export type BlockVariant =
   | 'main'
   | 'footer';
 
-export interface BlockProps extends HtmlDivProps {
-  /** Padding from theme */
-  padding?: SpacingWithoutInsetProp;
-  /** Padding-top from theme */
-  pt?: SpacingWithoutInsetProp;
-  /** Padding-right from theme */
-  pr?: SpacingWithoutInsetProp;
-  /** Padding-bottom from theme */
-  pb?: SpacingWithoutInsetProp;
-  /** Padding-left from theme */
-  pl?: SpacingWithoutInsetProp;
-  /** Padding on the x-axis (left & right) from theme */
-  px?: SpacingWithoutInsetProp;
-  /** Padding on the y-axis (top & bottom) from theme */
-  py?: SpacingWithoutInsetProp;
-  /** Margin from theme */
-  margin?: SpacingWithoutInsetProp;
-  /** Margin-top from theme */
-  mt?: SpacingWithoutInsetProp;
-  /** Margin-right from theme */
-  mr?: SpacingWithoutInsetProp;
-  /** Margin-bottom from theme */
-  mb?: SpacingWithoutInsetProp;
-  /** Margin-left from theme */
-  ml?: SpacingWithoutInsetProp;
-  /** Margin on the x-axis (left & right) from theme */
-  mx?: SpacingWithoutInsetProp;
-  /** Margin on the y-axis (top & bottom) from theme */
-  my?: SpacingWithoutInsetProp;
+export interface BlockProps extends HtmlDivProps, SpacingProps {
   /**
    * `'default'` | `'div'` | `'span'` | `'section'` | `'header'` | `'nav'` | `'main'` | `'footer'`
    *
@@ -61,26 +37,9 @@ export interface BlockProps extends HtmlDivProps {
 
 class SemanticBlock extends Component<BlockProps> {
   render() {
-    const {
-      className,
-      variant,
-      padding,
-      margin,
-      mt,
-      mr,
-      mb,
-      ml,
-      mx,
-      my,
-      pt,
-      pr,
-      pb,
-      pl,
-      px,
-      py,
-      forwardedRef,
-      ...passProps
-    } = this.props;
+    const { className, variant, style, forwardedRef, ...rest } = this.props;
+    const [spacingProps, passProps] = separateMarginAndPaddingProps(rest);
+    const spacingStyle = spacingStyles(spacingProps);
 
     const ComponentVariant =
       !variant || variant === 'default' ? HtmlDivWithNativeRef : variant;
@@ -90,26 +49,9 @@ class SemanticBlock extends Component<BlockProps> {
         ref={forwardedRef}
         {...passProps}
         className={classnames(baseClassName, className, {
-          [`${baseClassName}--padding-${padding}`]: !!padding,
-          [`${baseClassName}--margin-${margin}`]: !!margin,
           [`${baseClassName}--${variant}`]: !!variant,
-          [`${baseClassName}--margin-top-${mt}`]: !!mt,
-          [`${baseClassName}--margin-right-${mr}`]: !!mr,
-          [`${baseClassName}--margin-bottom-${mb}`]: !!mb,
-          [`${baseClassName}--margin-left-${ml}`]: !!ml,
-          [`${baseClassName}--margin-left-${mx}`]: !!mx,
-          [`${baseClassName}--margin-right-${mx}`]: !!mx,
-          [`${baseClassName}--margin-top-${my}`]: !!my,
-          [`${baseClassName}--margin-bottom-${my}`]: !!my,
-          [`${baseClassName}--padding-top-${pt}`]: !!pt,
-          [`${baseClassName}--padding-right-${pr}`]: !!pr,
-          [`${baseClassName}--padding-bottom-${pb}`]: !!pb,
-          [`${baseClassName}--padding-left-${pl}`]: !!pl,
-          [`${baseClassName}--padding-left-${px}`]: !!px,
-          [`${baseClassName}--padding-right-${px}`]: !!px,
-          [`${baseClassName}--padding-top-${py}`]: !!py,
-          [`${baseClassName}--padding-bottom-${py}`]: !!py,
         })}
+        style={{ ...spacingStyle, ...style }}
       />
     );
   }