Fix stylings

Bojagi · Jan 16, 2025 · dd6188b · dd6188b
1 parent ecb97ed
commit dd6188b
Show file tree

Hide file tree

Showing 29 changed files with 769 additions and 440 deletions.
diff --git a/src/Box/Box.tsx b/src/Box/Box.tsx
@@ -9,6 +9,7 @@ import { svg, SvgProps } from './interpolations/svg';
 import { position, PositionProps } from './interpolations/position';
 import { flexItem, FlexItemProps } from './interpolations/flex';
 import { shape, ShapeProps } from './interpolations/shape';
+import { splitProps } from '../utils/splitProps';
 
 export interface BoxCssProps {
   css?: CssFunctionReturn;
@@ -26,6 +27,23 @@ export type BoxProps = SpacingProps &
 export const boxInterpolateFn = (props) =>
   [margin, padding, color, shape, layout, svg, position, flexItem].map((fn) => fn(props));
 
+export const boxPropNames = [
+  ...margin.propNames,
+  ...padding.propNames,
+  ...color.propNames,
+  ...shape.propNames,
+  ...layout.propNames,
+  ...svg.propNames,
+  ...position.propNames,
+  ...flexItem.propNames,
+];
+
+export const useBoxProps = (props: Record<string, any>) => {
+  console.log('boxPropNames', boxPropNames);
+
+  return splitProps(props, boxPropNames);
+};
+
 export const Box = styled.div<BoxProps>`
   ${baseStyle}
   ${interpolateCssProp}

diff --git a/src/Box/system.ts b/src/Box/system.ts
@@ -107,6 +107,7 @@ type SystemFn<
       ? StyledInterpolationFunctions<C>
       : never) & {
     get: A extends ThemeValueGetter ? A : never;
+    propNames: string[];
   };
 
 type InterpolateReturnTuple = readonly [string, InterpolationReturn, Breakpoint | null];
@@ -222,15 +223,14 @@ const createSystemProperties = <T extends SystemPropertyConfig[]>(configs: T): S
       props.theme
     );
 
+  (interpolationFn as any).propNames = (interpolationFn as any).propNames || [];
   configs.forEach((config) => {
     const fromProps = config.fromProps || config.properties;
-    if (config.as) {
-      (interpolationFn as any)[config.as] = systemInterpolation(config);
-    } else {
-      fromProps.forEach((property) => {
-        (interpolationFn as any)[property] = systemInterpolation(config);
-      });
-    }
+    const exposedUpdateMethods = config.as ? [config.as] : fromProps;
+    exposedUpdateMethods.forEach((property) => {
+      (interpolationFn as any)[property] = systemInterpolation(config);
+    });
+    (interpolationFn as any).propNames.push(...fromProps);
   });
 
   return interpolationFn as SystemFn<T>;

diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
@@ -3,7 +3,7 @@ import { buttonBaseStyles, ButtonBaseProps, ButtonSize } from '../ButtonBase';
 import styled from '@emotion/styled';
 import { getComponentStyle } from '../styleHelpers/getComponentStyle';
 import { BaseProps, CssFunctionReturn } from '../types';
-import { ButtonTypography } from '../Typography';
+import { Typography } from '../Typography';
 import { useCustomStyles } from '../utils/useCustomStyles';
 import { ButtonStyleProperties } from './styles';
 import { interpolateCssProp } from '../utils/interpolateCssProp';
@@ -135,7 +135,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps<any>>(
             {startIcon}
           </IconBox>
         )}
-        <ButtonTypography>{children}</ButtonTypography>
+        <Typography variant="button" small={size === 'small'}>
+          {children}
+        </Typography>
         {endIcon && (
           <IconBox
             css={(props) => [getCustomStyles('icon', props), getCustomStyles('endIcon', props)]}

diff --git a/src/ButtonBar/ButtonBar.stories.tsx b/src/ButtonBar/ButtonBar.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { css } from '@emotion/react';
 import { Button } from '../Button';
 import { Card } from '../Card';
-import { Paragraph, Title } from '../Typography';
+import { H4, Body } from '../Typography';
 import { ButtonBar } from './ButtonBar';
 
 export default {
@@ -11,8 +11,8 @@ export default {
 
 export const WithTwoButtons = () => (
   <Card width={500}>
-    <Title>Do you want to proceed?</Title>
-    <Paragraph>Please select one of the buttons below!</Paragraph>
+    <H4>Do you want to proceed?</H4>
+    <Body>Please select one of the buttons below!</Body>
     <ButtonBar>
       <Button size="medium" variant="text" color="plain">
         Cancel
@@ -24,8 +24,8 @@ export const WithTwoButtons = () => (
 
 export const WithOneButtons = () => (
   <Card width={500}>
-    <Title>Move along</Title>
-    <Paragraph>You don't have an option!</Paragraph>
+    <H4>Move along</H4>
+    <Body>You don't have an option!</Body>
     <ButtonBar>
       <Button size="medium">Ok</Button>
     </ButtonBar>
@@ -34,8 +34,8 @@ export const WithOneButtons = () => (
 
 export const WithCustomStyles = () => (
   <Card width={500}>
-    <Title>Do you want to proceed?</Title>
-    <Paragraph>Please select one of the buttons below!</Paragraph>
+    <H4>Do you want to proceed?</H4>
+    <Body>Please select one of the buttons below!</Body>
     <ButtonBar
       customStyles={{
         root: css`

diff --git a/src/Checkbox/styles.ts b/src/Checkbox/styles.ts
@@ -11,6 +11,6 @@ export interface CheckboxStyles extends CheckableBaseStyles {
 export const checkboxStyles: CheckboxStyles = {
   ...checkableBaseStyles,
   handleColor: themeVars.colors.brand.main,
-  innerBorderRadius: '3px',
-  outerBorderRadius: '4px',
+  innerBorderRadius: '4px',
+  outerBorderRadius: '6px',
 };
diff --git a/src/Input/Input.stories.tsx b/src/Input/Input.stories.tsx
@@ -107,7 +107,7 @@ WithStartComponent.args = {
   fullWidth: false,
   width: 600,
   start: (
-    <Typography mb={0} variant="paragraphBold">
+    <Typography inline variant="body" bold>
       search:
     </Typography>
   ),

diff --git a/src/Menu/MenuItem.tsx b/src/Menu/MenuItem.tsx
@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import { buttonBaseStyles } from '../ButtonBase';
 import { themeVars } from '../theme/themeVars';
 import { BaseProps } from '../types';
-import { ButtonTypography } from '../Typography';
+import { Typography } from '../Typography';
 import { getCustomStyles, useCustomStyles } from '../utils/useCustomStyles';
 import { MenuItemStyleProperties } from './styles';
 import { margin, padding } from '../Box/interpolations/spacing';
@@ -50,12 +50,13 @@ export const MenuItem = ({ children, onClick, as, customStyles, ...props }: Menu
     customStyles={customStyles}
     {...props}
   >
-    <ButtonTypography
+    <Typography
+      variant="button"
       customStyles={{
         button: useCustomStyles('menu.styles', customStyles)('itemText'),
       }}
     >
       {children}
-    </ButtonTypography>
+    </Typography>
   </MenuItemBox>
 );
diff --git a/src/NativeSelect/NativeSelect.stories.tsx b/src/NativeSelect/NativeSelect.stories.tsx
@@ -112,7 +112,7 @@ WithStartComponent.args = {
   fullWidth: false,
   width: 600,
   start: (
-    <Typography mb={0} variant="paragraphBold">
+    <Typography inline variant="body" bold>
       search:
     </Typography>
   ),

diff --git a/src/Popover/useNanopop.ts b/src/Popover/useNanopop.ts
@@ -29,12 +29,15 @@ const useNanopop = ({
 
     const container = targetWindow.document.documentElement?.getBoundingClientRect();
 
+    console.log('referenceElement', referenceElement, margin);
+
     const newPlacement = reposition(referenceElement, popperElement, {
       margin,
       position,
       container,
       arrow: arrowElement || undefined,
     });
+
     onChange(newPlacement);
   }, [onChange, referenceElement, popperElement, targetWindow, margin, position, arrowElement]);
 

diff --git a/src/ToastProvider/ToastProvider.stories.tsx b/src/ToastProvider/ToastProvider.stories.tsx
@@ -30,14 +30,14 @@ const Trigger = () => {
     <Flex width="100%" height="90vh" justifyContent="center" alignItems="center">
       <Box>
         <Checkbox
-          mb={4}
+          mb={2}
           label="closable"
           checked={closable}
           onChange={() => setClosable((val) => !val)}
         />
         <Input
+          mb={2}
           label="Duration"
-          mb={4}
           onChange={(v) => setDuration(parseInt(v, 10) || 0)}
           value={duration}
         />

diff --git a/src/Tooltip/Tooltip.tsx b/src/Tooltip/Tooltip.tsx
@@ -11,7 +11,7 @@ import {
   leftArrowStyles,
 } from './tooltipSideStyles';
 import { Popover } from '../Popover/Popover';
-import { useComponentStyle } from '../theme/useComponentStyle';
+import { useNumericComponentStyle } from '../theme/useComponentStyle';
 import { BaseProps } from '../types';
 import { TooltipStyleProperties } from './styles';
 import { getCustomStyles } from '../utils/useCustomStyles';
@@ -87,7 +87,7 @@ const Tooltip = ({
 }: TooltipProps) => {
   const usedAnimationProps = { side, duration: 150, reverse: false, ...animationProps };
   const [isOpen, setOpen] = useState(false);
-  const gap = parseInt((useComponentStyle('tooltip.gap') as string) || '0', 10);
+  const gap = useNumericComponentStyle('tooltip.gap');
 
   useEffect(() => {
     if (disabled || children?.props?.disabled) {
@@ -118,7 +118,9 @@ const Tooltip = ({
           side={side}
           customStyles={customStyles}
         >
-          <Typography variant="info">{content}</Typography>
+          <Typography variant="body" small inline>
+            {content}
+          </Typography>
         </TooltipPopover>
       }
     >

diff --git a/src/Tooltip/styles.ts b/src/Tooltip/styles.ts
@@ -23,5 +23,5 @@ export const tooltipStyles: TooltipStyles = {
   zIndex: 100,
   backgroundColor: themeVars.colors.common.black,
   color: themeVars.colors.common.white,
-  borderRadius: 4,
+  borderRadius: 6,
 };
diff --git a/src/Tooltip/tooltipSideStyles.tsx b/src/Tooltip/tooltipSideStyles.tsx
@@ -7,19 +7,19 @@ export const topArrowStyles = css`
 `;
 
 export const bottomArrowStyles = (props) => css`
-  top: -${getSpacing(1.5)(props)};
+  top: -${getSpacing(1.5, false, false)(props)};
   left: 50%;
   transform: scaleY(0.5) translateY(-50%) translateX(-50%) rotateZ(0deg);
 `;
 
 export const rightArrowStyles = (props) => css`
-  left: -${getSpacing(1.5)(props)};
+  left: -${getSpacing(1.5, false, false)(props)};
   top: 50%;
   transform: scale(0.5) translateX(-50%) translateY(-100%) rotateZ(270deg);
 `;
 
 export const leftArrowStyles = (props) => css`
-  right: -${getSpacing(1.5)(props)};
+  right: -${getSpacing(1.5, false, false)(props)};
   top: 50%;
   transform: scale(0.5) translateX(50%) translateY(-100%) rotateZ(90deg);
 `;
diff --git a/src/Typography/Typography.spec.tsx b/src/Typography/Typography.spec.tsx
@@ -1,55 +1,47 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 import { PabloThemeProvider } from '../theme';
-import {
-  ButtonTypography,
-  Headline,
-  InfoText,
-  InfoTextBold,
-  Paragraph,
-  ParagraphBold,
-  Subtitle,
-  Title,
-  Typography,
-} from './Typography';
+import { Headline, InfoText, Paragraph, Subtitle, Title, Typography } from './Typography';
 
 describe.each([
-  [undefined],
-  ['headline'],
-  ['title'],
-  ['subtitle'],
-  ['paragraph'],
-  ['paragraphBold'],
-  ['button'],
-  ['info'],
-  ['infoBold'],
-])('Typography component with variant %s', (variant) => {
+  [undefined, {}],
+  [undefined, { bold: true }],
+  [undefined, { bold: true, small: true }],
+  ['h1', {}],
+  ['h2', {}],
+  ['h3', {}],
+  ['h4', {}],
+  ['body', {}],
+  ['body', { bold: true }],
+  ['body', { small: true }],
+  ['body', { bold: true, small: true }],
+  ['button', {}],
+  ['button', { small: true }],
+])('Typography component with variant %s', (variant, props) => {
   test('Render component', () => {
-    const { container } = renderComponent({ variant });
+    const { container } = renderComponent({ variant, ...props });
     expect(container).toMatchSnapshot();
   });
 
   test('Render inline component', () => {
-    const { container } = renderComponent({ variant, inline: true });
+    const { container } = renderComponent({ variant, inline: true, ...props });
     expect(container).toMatchSnapshot();
     expect(container.firstChild).toHaveStyleRule('margin-bottom', '0');
   });
 });
 
 describe.each([
-  ['Headline', Headline],
-  ['Title', Title],
-  ['Subtitle', Subtitle],
-  ['Paragraph', Paragraph],
-  ['ParagraphBold', ParagraphBold],
-  ['ButtonTypography', ButtonTypography],
-  ['InfoText', InfoText],
-  ['InfoBold', InfoTextBold],
-])('%s component ', (_stringName, Component) => {
+  ['Headline', Headline, {}],
+  ['Title', Title, {}],
+  ['Subtitle', Subtitle, {}],
+  ['Paragraph', Paragraph, {}],
+  ['ParagraphBold', Paragraph, { bold: true }],
+  ['InfoText', InfoText, { bold: true }],
+])('%s component ', (_stringName, Component, props) => {
   test('Render component', () => {
     const { container } = render(
       <PabloThemeProvider>
-        <Component>Hello</Component>
+        <Component {...props}>Hello</Component>
       </PabloThemeProvider>
     );
     expect(container).toMatchSnapshot();