Update Paragraph

- force mt to override the default spacing
- add paragraphMarginBetween to the theme
- remove unused "skipMarginTop" prop

Author: gilbarbara

src/components/Field/Debug.tsx

@@ -21,10 +21,10 @@ function FieldDebug(props: Props) {
   return (
     <Box as="code" bg="gray.50" {...getDataAttributes('FieldDebug')} display="block" padding="md">
       {objectEntries(props)
-        .filter(([key]) => key !== 'debug')
+        .filter(([key]) => !['debug', 'theme'].includes(key))
         .sort(sortByLocaleCompare('0'))
         .map(([key, value]) => (
-          <Paragraph key={key} skipMarginTop>
+          <Paragraph key={key} mt="xxs">
             <b>{key}</b>: {primitiveToString(value, key)}
           </Paragraph>
         ))}

src/components/Paragraph/Paragraph.tsx

@@ -2,6 +2,7 @@ import { forwardRef, isValidElement } from 'react';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { omit, px } from '@gilbarbara/helpers';
+import is from 'is-lite';
 
 import { alignStyles, getStyledOptions, getStyles } from '~/modules/system';
 
@@ -17,18 +18,23 @@ export const StyledParagraph = styled('p', getStyledOptions())<ParagraphProps &
     marginTop: 0,
   },
   props => {
-    const { skipMarginTop, theme } = props;
+    const { mt, theme } = props;
+    let marginTop: string | undefined;
+
+    if (mt && mt !== 'auto') {
+      marginTop = px(theme.spacing[mt]);
+    } else if (is.number(mt)) {
+      marginTop = px(mt);
+    }
 
     return css`
-      ${getStyles(omit(props, 'align'), { useFontSize: true })};
+      ${getStyles(omit(props, 'align', 'mt'), { useFontSize: true })};
       ${alignStyles(props)};
+      margin-top: ${marginTop} !important;
 
-      ${!skipMarginTop &&
-      css`
-        & + & {
-          margin-top: ${px(theme.spacing.sm)};
-        }
-      `};
+      & + p {
+        margin-top: ${px(theme.paragraphMarginBetween)};
+      }
     `;
   },
 );

src/components/Paragraph/useParagraph.ts

@@ -21,18 +21,11 @@ export interface ParagraphKnownProps
     WithChildren,
     Pick<WithColors, 'color'>,
     WithMargin,
-    WithTextOptions {
-  /**
-   * Skip the top margin for adjacent paragraphs.
-   * @default false
-   */
-  skipMarginTop?: boolean;
-}
+    WithTextOptions {}
 
 export const defaultProps = {
-  skipMarginTop: false,
   ...textDefaultOptions,
-};
+} satisfies Omit<ParagraphProps, 'children'>;
 
 export function useParagraph(props: ParagraphProps) {
   return useComponentProps(props, defaultProps);

src/hooks/__snapshots__/useTheme.test.tsx.snap

@@ -173,6 +173,7 @@ exports[`useTheme > should return properly 1`] = `
   "outlineOpacity": 0.6,
   "outlineWidth": 3,
   "outlineZIndex": 10,
+  "paragraphMarginBetween": "12px",
   "radius": {
     "full": "9999px",
     "lg": "24px",

src/modules/__snapshots__/helpers.test.ts.snap

@@ -200,6 +200,7 @@ exports[`mergeTheme > should return a modified theme 1`] = `
   "outlineOpacity": 0.6,
   "outlineWidth": 3,
   "outlineZIndex": 10,
+  "paragraphMarginBetween": "12px",
   "radius": {
     "full": "9999px",
     "lg": "24px",
@@ -683,6 +684,7 @@ exports[`mergeTheme > should return the default theme 1`] = `
   "outlineOpacity": 0.6,
   "outlineWidth": 3,
   "outlineZIndex": 10,
+  "paragraphMarginBetween": "12px",
   "radius": {
     "full": "9999px",
     "lg": "24px",

src/modules/theme.ts

@@ -405,6 +405,8 @@ export const inputPaddingY = {
   lg: spacing.md,
 };
 
+export const paragraphMarginBetween = spacing.sm;
+
 export const selectPaddingY = {
   sm: spacing.xxs,
   md: spacing.xs,

stories/Overview/components/Spacing.tsx

@@ -12,7 +12,7 @@ export default function Spacing() {
         The <strong>spacing</strong> key is used used for margin, padding and a few other
         attributes.
       </Paragraph>
-      <Paragraph skipMarginTop>
+      <Paragraph mt="xxs">
         Most components supports the margin and/or padding props where you can pass a spacing key.
       </Paragraph>
       <Paragraph mt="md">Additionally, you can use these shortcuts:</Paragraph>