feat(odyssey-react): unset default text properties in Box using false…

… value for props
okta · Dec 14, 2021 · d0ba167 · d0ba167
1 parent da68956
commit d0ba167
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -191,6 +191,11 @@ export const MarginPadding = (): ReactElement => (
   <>
     Margin
     <Box display="flex" alignItems="flex-end">
+      <Box backgroundColor="danger-light" marginRight="s">
+        <Box borderColor="ui" backgroundColor="default">
+          &nbsp;default / 0&nbsp;
+        </Box>
+      </Box>
       <Box backgroundColor="danger-light" marginRight="s">
         <Box borderColor="ui" backgroundColor="default" margin="xs">
           &nbsp;xs&nbsp;
@@ -219,6 +224,9 @@ export const MarginPadding = (): ReactElement => (
     </Box>
     Padding
     <Box display="flex" alignItems="flex-end">
+      <Box backgroundColor="success-light" borderColor="ui" marginRight="s">
+        <Box backgroundColor="default">&nbsp;default / 0&nbsp;</Box>
+      </Box>
       <Box
         padding="xs"
         backgroundColor="success-light"