From d0ba167b94f7b64468c617400f89bf6b98181c0f Mon Sep 17 00:00:00 2001 From: Andrew Berg <87656589+andrewberg-okta@users.noreply.github.com> Date: Tue, 14 Dec 2021 17:01:05 -0500 Subject: [PATCH] feat(odyssey-react): unset default text properties in Box using false value for props --- .../odyssey-react/src/components/Box/Box.tsx | 49 ++++++++++--------- .../src/components/Box/_box-margin.scss | 4 ++ .../src/components/Box/_box-padding.scss | 4 ++ .../src/components/Text/Text.tsx | 10 ++-- .../src/components/Box/Box.stories.tsx | 8 +++ 5 files changed, 47 insertions(+), 28 deletions(-) diff --git a/packages/odyssey-react/src/components/Box/Box.tsx b/packages/odyssey-react/src/components/Box/Box.tsx index 5a574dbd9b..fe904eb381 100644 --- a/packages/odyssey-react/src/components/Box/Box.tsx +++ b/packages/odyssey-react/src/components/Box/Box.tsx @@ -17,11 +17,12 @@ import { withStyles, PolymorphicForwardRef, toPascalCase, + toCamelCase, } from "../../utils"; import styles from "./Box.module.scss"; import textStyles from "../Text/Text.module.scss"; -type spacing = "xs" | "s" | "m" | "l" | "xl"; +type spacing = "xs" | "s" | "m" | "l" | "xl" | "0" | false; type overflow = "visible" | "hidden" | "clip" | "scroll" | "auto"; type borderRadius = "base" | "outer" | "none"; @@ -143,6 +144,7 @@ export interface BoxProps { maxHeight?: "screen" | "screen-minus-padding"; /** * Margin applied outside the box border + * @default "0" */ margin?: spacing | spacing[]; /** @@ -163,6 +165,7 @@ export interface BoxProps { marginLeft?: spacing; /** * Padding applied inside the box between the border and the content + * @default "0" */ padding?: spacing | spacing[]; /** @@ -299,29 +302,29 @@ export interface BoxProps { userSelect?: "none" | "text" | "contain" | "all" | "auto"; /** * Whether to apply the body text color class - * @default true + * @default body */ - applyColor?: boolean; + color?: "body" | false; /** * Whether to apply the normal font weight class - * @default true + * @default regular */ - applyFontWeight?: boolean; + fontWeight?: "regular" | false; /** * Whether to apply the normal font style class - * @default true + * @default normal */ - applyFontStyle?: boolean; + fontStyle?: "normal" | false; /** * Whether to apply the base font size class - * @default true + * @default base */ - applyFontSize?: boolean; + fontSize?: "base" | false; /** * Whether to apply the base line height class - * @default true + * @default normal */ - applyLineHeight?: boolean; + lineHeight?: "normal" | false; } /** @@ -331,11 +334,11 @@ let Box = forwardRef( ( { as = "div", - applyColor = true, - applyFontWeight = true, - applyFontStyle = true, - applyFontSize = true, - applyLineHeight = true, + color = "body", + fontWeight = "regular", + fontStyle = "normal", + fontSize = "base", + lineHeight = "normal", display, position, flexDirection, @@ -352,12 +355,12 @@ let Box = forwardRef( maxWidth, height, maxHeight, - margin, + margin = "0", marginTop, marginRight, marginBottom, marginLeft, - padding, + padding = "0", paddingTop, paddingRight, paddingBottom, @@ -540,11 +543,11 @@ let Box = forwardRef( cursor && styles[`cursor${toPascalCase(cursor)}`], pointerEvents && styles[`pointerEvents${toPascalCase(pointerEvents)}`], userSelect && styles[`userSelect${toPascalCase(userSelect)}`], - applyColor && textStyles.bodyColor, - applyFontWeight && textStyles.regularWeight, - applyFontStyle && textStyles.normalStyle, - applyFontSize && textStyles.baseSize, - applyLineHeight && textStyles.normalLineHeight, + color && textStyles[`${toCamelCase(color)}Color`], + fontWeight && textStyles[`${toCamelCase(fontWeight)}Weight`], + fontStyle && textStyles[`${toCamelCase(fontStyle)}Style`], + fontSize && textStyles[`${toCamelCase(fontSize)}Size`], + lineHeight && textStyles[`${toCamelCase(lineHeight)}LineHeight`], className ); diff --git a/packages/odyssey-react/src/components/Box/_box-margin.scss b/packages/odyssey-react/src/components/Box/_box-margin.scss index 0c594e192e..b26450f777 100644 --- a/packages/odyssey-react/src/components/Box/_box-margin.scss +++ b/packages/odyssey-react/src/components/Box/_box-margin.scss @@ -11,6 +11,10 @@ */ /* stylelint-disable property-disallowed-list */ +.margin0 { + margin: 0; +} + .marginXs { margin: $spacing-xs; } diff --git a/packages/odyssey-react/src/components/Box/_box-padding.scss b/packages/odyssey-react/src/components/Box/_box-padding.scss index 1024926170..49a7093858 100644 --- a/packages/odyssey-react/src/components/Box/_box-padding.scss +++ b/packages/odyssey-react/src/components/Box/_box-padding.scss @@ -11,6 +11,10 @@ */ /* stylelint-disable property-disallowed-list */ +.padding0 { + padding: 0; +} + .paddingXs { padding: $spacing-xs; } diff --git a/packages/odyssey-react/src/components/Text/Text.tsx b/packages/odyssey-react/src/components/Text/Text.tsx index a4bb77c909..e4ff5a522c 100644 --- a/packages/odyssey-react/src/components/Text/Text.tsx +++ b/packages/odyssey-react/src/components/Text/Text.tsx @@ -159,11 +159,11 @@ let Text = forwardRef((props, ref) => { {...omitProps} ref={ref} className={componentClass} - applyColor={false} - applyFontWeight={false} - applyFontStyle={false} - applyFontSize={false} - applyLineHeight={false} + color={false} + fontWeight={false} + fontStyle={false} + fontSize={false} + lineHeight={false} children={children} /> ); diff --git a/packages/odyssey-storybook/src/components/Box/Box.stories.tsx b/packages/odyssey-storybook/src/components/Box/Box.stories.tsx index 9c6711fd1a..86a591e9a2 100644 --- a/packages/odyssey-storybook/src/components/Box/Box.stories.tsx +++ b/packages/odyssey-storybook/src/components/Box/Box.stories.tsx @@ -191,6 +191,11 @@ export const MarginPadding = (): ReactElement => ( <> Margin + + +  default / 0  + +  xs  @@ -219,6 +224,9 @@ export const MarginPadding = (): ReactElement => ( Padding + +  default / 0  +