Merge branch 'kl-gm-592' into kl-gm-592-border-radius-atoms

Codecademy · Aug 6, 2024 · 32e5be4 · 32e5be4
2 parents c346016 + a3c3537
commit 32e5be4
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 12 deletions.
diff --git a/packages/styleguide/.storybook/addons/system/components/Elements.tsx b/packages/styleguide/.storybook/addons/system/components/Elements.tsx
@@ -24,7 +24,7 @@ export const PropItem = styled.pre(
     bg: 'background-disabled',
     color: 'navy-700',
     lineHeight: 'base',
-    borderRadius: '4px',
+    borderRadius: 'm',
   })
 );
 
@@ -38,7 +38,7 @@ export const PropGroupTag = styled.div(
       py: 4,
       px: 8,
       fontSize: 14,
-      borderRadius: '4px',
+      borderRadius: 'm',
       cursor: 'help',
       border: 1,
       '&:hover > div': {

diff --git a/packages/styleguide/.storybook/components/Scales/ColorScale.tsx b/packages/styleguide/.storybook/components/Scales/ColorScale.tsx
@@ -22,7 +22,7 @@ export const ColorScale: React.FC<{ colors: Record<string, string> }> = ({
       <Card
         p={0}
         width="100%"
-        borderRadius="4px"
+        borderRadius="m"
         display="grid"
         minHeight="3rem"
         gridAutoFlow="column"

diff --git a/packages/styleguide/stories/Atoms/Tag.examples.tsx b/packages/styleguide/stories/Atoms/Tag.examples.tsx
@@ -47,7 +47,7 @@ export const TagExample: React.FC = () => {
 
       <Background
         bg="background-primary"
-        borderRadius="3px"
+        borderRadius="m"
         mx={8}
         my={24}
         p={24}

diff --git a/packages/styleguide/stories/Foundations/System/Props.stories.mdx b/packages/styleguide/stories/Foundations/System/Props.stories.mdx
@@ -120,12 +120,7 @@ import { system } from '@codecademy/gamut-styles';
 
 const Box = styled.div(system.border);
 
-<Box
-  border={1}
-  borderLeft="none"
-  borderRightStyle="dotted"
-  borderRadius="4px"
-/>;
+<Box border={1} borderLeft="none" borderRightStyle="dotted" borderRadius="m" />;
 ```
 
 <Story name="border">

diff --git a/packages/styleguide/stories/Foundations/Theme/index.stories.mdx b/packages/styleguide/stories/Foundations/Theme/index.stories.mdx
@@ -172,3 +172,11 @@ export const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, s
 <Story name="breakpoints">
   <DataTable {...TABLES.breakpoint} />
 </Story>
+
+## Border Radius
+
+**Key**: `theme.borderRadii`
+
+<Story name="borderRadii">
+  <DataTable {...TABLES.borderRadii} />
+</Story>
diff --git a/packages/styleguide/stories/Foundations/Theme/tables.tsx b/packages/styleguide/stories/Foundations/Theme/tables.tsx
@@ -333,3 +333,41 @@ export const breakpoint = {
     { ...VALUE_COLUMN, size: 'fill' },
   ],
 };
+
+export const borderRadii = {
+  rows: Object.entries(theme.borderRadii).map(([id, value]) => ({
+    id,
+    value,
+  })),
+  columns: [
+    PROP_COLUMN,
+    {
+      ...PATH_COLUMN,
+      size: 'xl',
+      render: ({ id }: any) => <Code>theme.borderRadii.{id}</Code>,
+    },
+    {
+      ...VALUE_COLUMN,
+      render: ({ value }: any) => (
+        <Box maxWidth="24rem">
+          <Code>{value.split(',')[0]}</Code>
+        </Box>
+      ),
+      size: 'lg',
+    },
+    {
+      key: 'example',
+      name: 'Example',
+      size: 'fill',
+      render: ({ value }: any) => (
+        <Box
+          display="inline-block"
+          width="4rem"
+          height="4em"
+          bg="navy"
+          borderRadius={value}
+        />
+      ),
+    },
+  ],
+};
diff --git a/packages/styleguide/stories/Molecules/Menu/Menu.examples.tsx b/packages/styleguide/stories/Molecules/Menu/Menu.examples.tsx
@@ -60,7 +60,7 @@ export const PopoverMenuExample: React.FC<PopoverContainerProps> = () => {
   return (
     <FlexBox minHeight="30px" width={1} position="relative" m={48}>
       <FlexBox flex={1}>
-        <Background bg="black" height="100%" pl={48} borderRadius="10px">
+        <Background bg="black" height="100%" pl={48} borderRadius="l">
           <FlexBox
             bg="navy"
             justifyContent="right"
@@ -103,7 +103,7 @@ export const PopoverMenuExample: React.FC<PopoverContainerProps> = () => {
             y={currentTarget}
             targetRef={target}
           >
-            <Background bg="white" borderRadius="10px">
+            <Background bg="white" borderRadius="l">
               <Menu variant="select" role="menu">
                 {activeIndex % 2 === 0 ? (
                   <>