Revert changes to Button and Paragraph

digdir · Sep 19, 2024 · 2e0c899 · 2e0c899
1 parent 78713ea
commit 2e0c899
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 20 deletions.
diff --git a/packages/css/baseline/typography.css b/packages/css/baseline/typography.css
@@ -170,6 +170,45 @@
   }
 }
 
+/** REMOVE after migrate to @composes  */
+.ds-paragraph--xs {
+  --dsc-bottom-spacing: var(--ds-spacing-3);
+
+  font-weight: var(--ds-paragraph-xs-font-weight);
+  line-height: var(--ds-paragraph-xs-line-height);
+  font-size: var(--ds-paragraph-xs-font-size);
+  letter-spacing: var(--ds-paragraph-xs-letter-spacing);
+}
+
+.ds-paragraph--sm {
+  --dsc-bottom-spacing: var(--ds-spacing-4);
+
+  font-weight: var(--ds-paragraph-sm-font-weight);
+  line-height: var(--ds-paragraph-sm-line-height);
+  font-size: var(--ds-paragraph-sm-font-size);
+  letter-spacing: var(--ds-paragraph-sm-letter-spacing);
+}
+
+.ds-paragraph--md {
+  --dsc-bottom-spacing: var(--ds-spacing-5);
+
+  font-weight: var(--ds-paragraph-md-font-weight);
+  line-height: var(--ds-paragraph-md-line-height);
+  font-size: var(--ds-paragraph-md-font-size);
+  letter-spacing: var(--ds-paragraph-md-letter-spacing);
+}
+
+.ds-paragraph--lg {
+  --dsc-bottom-spacing: var(--ds-spacing-6);
+
+  font-weight: var(--ds-paragraph-lg-font-weight);
+  line-height: var(--ds-paragraph-lg-line-height);
+  font-size: var(--ds-paragraph-lg-font-size);
+  letter-spacing: var(--ds-paragraph-lg-letter-spacing);
+}
+
+/** END */
+
 .ds-paragraph-long {
   --dsc-bottom-spacing: var(--ds-spacing-5);
 

diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
@@ -60,24 +60,31 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     // Fallbacks to undefined to prevent rendering attribute="false"
     return (
-      <Component
-        aria-busy={Boolean(loading) || undefined}
-        className={cl('ds-button', className)}
-        data-color={color}
-        data-icon={icon || undefined}
-        data-size={size}
-        data-variant={variant}
-        ref={ref}
-        type={type}
-        {...rest}
-      >
-        {loading === true ? (
-          <Spinner aria-hidden='true' color={spinnerColor} size='sm' title='' />
-        ) : (
-          loading // Allow custom loading spinner
-        )}
-        <Slottable>{children}</Slottable>
-      </Component>
+      <Paragraph variant='short' size={size} asChild>
+        <Component
+          aria-busy={Boolean(loading) || undefined}
+          className={cl('ds-button', className)}
+          data-color={color}
+          data-icon={icon || undefined}
+          data-size={size}
+          data-variant={variant}
+          ref={ref}
+          type={type}
+          {...rest}
+        >
+          {loading === true ? (
+            <Spinner
+              aria-hidden='true'
+              color={spinnerColor}
+              size='sm'
+              title=''
+            />
+          ) : (
+            loading // Allow custom loading spinner
+          )}
+          <Slottable>{children}</Slottable>
+        </Component>
+      </Paragraph>
     );
   },
 );
diff --git a/packages/react/src/components/Typography/Paragraph/Paragraph.tsx b/packages/react/src/components/Typography/Paragraph/Paragraph.tsx
@@ -25,6 +25,12 @@ export type ParagraphProps = {
   asChild?: boolean;
 } & HTMLAttributes<HTMLParagraphElement>;
 
+const lineHeightMap = {
+  short: 'ds-line-height--sm',
+  default: 'ds-line-height--md',
+  long: 'ds-line-height--lg',
+};
+
 /**
  * Use `Paragraph` to display text with paragraph text styles.
  *
@@ -39,11 +45,12 @@ export const Paragraph = forwardRef<HTMLParagraphElement, ParagraphProps>(
       <Component
         ref={ref}
         className={cl(
-          variant === 'default' ? 'ds-paragraph' : `ds-paragraph-${variant}`,
+          'ds-paragraph',
           spacing && 'ds-paragraph--spacing',
+          `ds-paragraph--${size}`,
+          lineHeightMap[variant ?? 'default'],
           className,
         )}
-        data-size={size}
         {...rest}
       />
     );