chore(components): remove some tokens limitations (#1675)

remove token limitations from DrawerHeader, Heading, Label, OrderedList, UnorderedList, ModalBody, Paragraph, Td

.changeset/four-olives-sort.md

@@ -0,0 +1,5 @@
+---
+"@localyze-pluto/components": minor
+---
+
+Remove token limitations from: DrawerHeader, Heading, Label, OrderedList, UnorderedList, ModalBody, Paragraph, Td

packages/components/src/components/Drawer/DrawerHeader.tsx

@@ -1,25 +1,23 @@
 import React from "react";
 import { DialogDismiss } from "@ariakit/react/dialog";
-import { Box } from "../../primitives/Box";
+import { Box, BoxProps } from "../../primitives/Box";
 import { Button } from "../Button";
 
-export interface DrawerHeaderProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
+export interface DrawerHeaderProps extends BoxProps {
   /** The contents of the drawer header */
   children: NonNullable<React.ReactNode>;
-  padding?: "p0" | "p5" | "space0" | "space60";
 }
 
 /** The header content area of the drawer. */
 const DrawerHeader = React.forwardRef<HTMLDivElement, DrawerHeaderProps>(
-  ({ children, padding = "space60", ...props }, ref) => {
+  ({ children, ...props }, ref) => {
     return (
       <Box.div
         alignItems="center"
         display="flex"
         gap="space30"
         justifyContent="space-between"
-        padding={padding}
+        padding="space60"
         ref={ref}
         {...props}
       >

packages/components/src/components/Heading/Heading.tsx

@@ -3,10 +3,9 @@ import type { SystemProp, Theme } from "@xstyled/styled-components";
 import toPairs from "lodash/toPairs";
 import isObject from "lodash/isObject";
 import forEach from "lodash/forEach";
-import { Text } from "../../primitives/Text";
+import { Box, BoxProps } from "../../primitives/Box";
 
 type HeadingLevelOptions = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-type HeadingMarginOptions = "m0" | "m6" | "space0" | "space70";
 type HeadingSizeOptions =
   | "heading10"
   | "heading20"
@@ -29,25 +28,15 @@ type HeadingSizeBreakpoints = {
 
 type HeadingSizeOptionsProp = HeadingSizeBreakpoints | HeadingSizeOptions;
 
-type HeadingFontColors =
-  | "colorTextHeading"
-  | "colorTextHeadingStrong"
-  | "colorTextHeadingStronger"
-  | "colorTextInverse"
-  | "colorTextStrongest";
-
-export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+export interface HeadingProps
+  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
+    BoxProps {
   /** Sets the HTML element on render. */
   as?: HeadingLevelOptions;
   /** The contents of the heading. Can be text or valid text related HTML, i.e. anchor and strong elements. */
   children: NonNullable<React.ReactNode>;
-  /** Changes the bottom margin of the heading.  */
-  marginBottom?: HeadingMarginOptions;
   /** Changes the size of the heading. */
   size?: HeadingSizeOptionsProp;
-
-  /** Changes the font color of the heading */
-  color?: HeadingFontColors;
 }
 
 const isBreakpointObject = (
@@ -155,9 +144,9 @@ const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
     ref,
   ) => {
     return (
-      <Text.h2
+      <Box.h2
         as={as}
-        color={color}
+        color={color as BoxProps["color"] as string}
         fontFamily="fontFamilyNotoSans"
         fontWeight="fontWeightBold"
         letterSpacing="normal"
@@ -169,7 +158,7 @@ const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
         {...props}
       >
         {children}
-      </Text.h2>
+      </Box.h2>
     );
   },
 );

packages/components/src/components/Label/Label.tsx

@@ -1,26 +1,20 @@
 import React from "react";
-import { Box } from "../../primitives/Box";
+import { Box, BoxProps } from "../../primitives/Box";
 
-type LabelMarginBottom = "m0" | "m1" | "space0" | "space20";
-
-export interface LabelProps
-  extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "color"> {
+export interface LabelProps extends BoxProps {
   /** Adjusts the cursor to be not-allowed. */
   disabled?: boolean;
   /** Use and `id` to tie a label directly to a specific form element. */
   htmlFor: string;
-  /** Sets the bottom margin of the label. */
-  marginBottom?: LabelMarginBottom;
   /** Adds the red dot to the right of the label. */
   required?: boolean;
+  /** Label content */
+  children?: React.ReactNode;
 }
 
 /** A label is text that provides a visible and accessible name to a form element */
 const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
-  (
-    { children, disabled, marginBottom = "space20", required, ...props },
-    ref,
-  ) => {
+  ({ children, disabled, required, ...props }, ref) => {
     return (
       <Box.label
         alignItems="center"
@@ -31,7 +25,7 @@ const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
         fontSize="fontSize10"
         fontWeight="fontWeightMedium"
         lineHeight="lineHeight10"
-        marginBottom={marginBottom}
+        marginBottom="space20"
         ref={ref}
         {...props}
       >

packages/components/src/components/List/OrderedList.tsx

@@ -1,18 +1,10 @@
 import styled from "@xstyled/styled-components";
 import React from "react";
-import { Box } from "../../primitives/Box";
+import { Box, BoxProps } from "../../primitives/Box";
 
-type UnOrderedListColorOptions = "colorTextStrongest" | "currentcolor";
-type OrderedListMarginOptions = "m0" | "m6" | "space0" | "space70";
-
-export interface OrderedListProps
-  extends Omit<React.HTMLAttributes<HTMLOListElement>, "color"> {
+export interface OrderedListProps extends BoxProps {
   /** The list items */
   children: NonNullable<React.ReactNode>;
-  /** The color of the list items */
-  color?: UnOrderedListColorOptions;
-  /** Sets the bottom margin of the ordered list. */
-  marginBottom?: OrderedListMarginOptions;
 }
 
 /** A list of items with bullet points */
@@ -35,22 +27,14 @@ const InnerOrderedList = styled(Box.ol)`
 
 /** A list of numbered items */
 export const OrderedList = React.forwardRef<HTMLOListElement, OrderedListProps>(
-  (
-    {
-      children,
-      color = "colorTextStrongest",
-      marginBottom = "space70",
-      ...props
-    },
-    ref,
-  ) => {
+  ({ children, ...props }, ref) => {
     return (
       <InnerOrderedList
-        color={color}
+        color="colorTextStrongest"
         listStyleType="none"
-        marginBottom={marginBottom}
+        marginBottom="space70"
         marginTop="m0"
-        paddingLeft="space0"
+        paddingLeft="p0"
         ref={ref}
         {...props}
       >

packages/components/src/components/List/UnorderedList.tsx

@@ -1,18 +1,10 @@
 import styled from "@xstyled/styled-components";
 import React from "react";
-import { Box } from "../../primitives/Box";
+import { Box, BoxProps } from "../../primitives/Box";
 
-type UnorderedListColorOptions = "colorTextStrongest" | "currentcolor";
-type UnorderedListMarginOptions = "m0" | "m6" | "space0" | "space70";
-
-export interface UnorderedListProps
-  extends Omit<React.HTMLAttributes<HTMLUListElement>, "color"> {
+export interface UnorderedListProps extends BoxProps {
   /** The list items */
   children: NonNullable<React.ReactNode>;
-  /** The color of the list items */
-  color?: UnorderedListColorOptions;
-  /** Sets the bottom margin of the unordered list. */
-  marginBottom?: UnorderedListMarginOptions;
 }
 
 /** A list of items with bullet points */

packages/components/src/components/Modal/ModalBody.tsx

@@ -1,23 +1,20 @@
 import React from "react";
-import { Box } from "../../primitives/Box";
+import { Box, BoxProps } from "../../primitives/Box";
 
-export interface ModalBodyProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
+export interface ModalBodyProps extends BoxProps {
   /** The contents of the modal body. */
   children: NonNullable<React.ReactNode>;
-  /** Sets the padding of the modal body. */
-  padding?: "p0" | "p5" | "space0" | "space60";
   /** Disables the overflowY for situations where the modal includes a dropdown. */
   disableOverflow?: boolean;
 }
 
 /** The body content area of the modal. */
 const ModalBody = React.forwardRef<HTMLDivElement, ModalBodyProps>(
-  ({ children, disableOverflow, padding = "space60", ...props }, ref) => {
+  ({ children, disableOverflow, ...props }, ref) => {
     return (
       <Box.div
         overflowY={disableOverflow ? undefined : "auto"}
-        padding={padding}
+        padding="space60"
         ref={ref}
         {...props}
       >

packages/components/src/components/Paragraph/Paragraph.tsx

@@ -1,16 +1,12 @@
 import React from "react";
 import type { SystemProp, Theme } from "@xstyled/styled-components";
-import { Text } from "../../primitives/Text";
+import { Box, BoxProps } from "../../primitives/Box";
 
-type ParagraphMarginOptions = "m0" | "m6" | "space0" | "space70";
 type ParagraphSizeOptions = "large" | "medium" | "small";
 
-export interface ParagraphProps
-  extends Omit<React.HTMLAttributes<HTMLParagraphElement>, "color"> {
+export interface ParagraphProps extends BoxProps {
   /** The contents of the paragraph. Can be text or valid text related HTML, i.e. anchor and strong elements. */
   children: NonNullable<React.ReactNode>;
-  /** Sets the bottom margin of the Paragraph. */
-  marginBottom?: ParagraphMarginOptions;
   /** Changes the font-size and line-height of the Paragraph. */
   size?: ParagraphSizeOptions;
 }
@@ -45,20 +41,20 @@ const getParagraphStyles = (
 
 /** A Paragraph is a block of text. */
 const Paragraph = React.forwardRef<HTMLParagraphElement, ParagraphProps>(
-  ({ children, marginBottom = "space70", size = "medium", ...props }, ref) => {
+  ({ children, size = "medium", ...props }, ref) => {
     return (
-      <Text.p
+      <Box.p
         color="colorTextStrongest"
         fontFamily="fontFamilyNotoSans"
         fontWeight="fontWeightRegular"
-        marginBottom={marginBottom}
+        marginBottom="space70"
         marginTop="m0"
         ref={ref}
         {...getParagraphStyles(size)}
         {...props}
       >
         {children}
-      </Text.p>
+      </Box.p>
     );
   },
 );

packages/components/src/components/Table/Td.tsx

@@ -1,44 +1,20 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Box } from "../../primitives/Box";
+import { Box, BoxProps } from "../../primitives/Box";
 import { TableContext } from "./TableContext";
 
-export interface TdProps
-  extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, "color"> {
+export interface TdProps extends BoxProps {
   /** The valid HTML contents of the table cell. */
   children?: React.ReactNode;
   /** Used to make a cell span over multiple columns. */
   colSpan?: number;
   /** Used to make a cell span over multiple rows. */
   rowSpan?: number;
-  /** Used to control the alignment of text. */
-  textAlign?: "center" | "left" | "right";
-  /** Used to set the padding bottom */
-  paddingBottom?: "p0" | "p4" | "space0" | "space50";
-  /** Used to set the padding left */
-  paddingLeft?: "p0" | "p4" | "space0" | "space50";
-  /** Used to set the padding right */
-  paddingRight?: "p0" | "p4" | "space0" | "space50";
-  /** Used to set the padding top */
-  paddingTop?: "p0" | "p4" | "space0" | "space50";
 }
 
 /** A standard cell in the table, use within a <Tr>. */
 const Td = React.forwardRef<HTMLTableCellElement, TdProps>(
-  (
-    {
-      children,
-      colSpan,
-      rowSpan,
-      textAlign = "left",
-      paddingBottom = "space50",
-      paddingLeft = "space50",
-      paddingRight = "space50",
-      paddingTop = "space50",
-      ...props
-    },
-    ref,
-  ) => {
+  ({ children, colSpan, rowSpan, ...props }, ref) => {
     const { bordered } = React.useContext(TableContext);
     return (
       <Box.td
@@ -52,13 +28,13 @@ const Td = React.forwardRef<HTMLTableCellElement, TdProps>(
         borderLeftStyle="borderStyleSolid"
         borderLeftWidth="borderWidth10"
         colSpan={colSpan}
-        paddingBottom={paddingBottom}
-        paddingLeft={paddingLeft}
-        paddingRight={paddingRight}
-        paddingTop={paddingTop}
+        paddingBottom="space50"
+        paddingLeft="space50"
+        paddingRight="space50"
+        paddingTop="space50"
         ref={ref}
         rowSpan={rowSpan}
-        textAlign={textAlign}
+        textAlign="left"
         {...props}
       >
         {children}