From f5f30f787976b4198bfb064e08fa7775382160f3 Mon Sep 17 00:00:00 2001
From: Matt Wood <matt@cratebind.com>
Date: Thu, 27 May 2021 11:14:48 -0500
Subject: [PATCH 1/2] fix: add button sizes to styled-system variants

---
 .eslintrc.js                    |  13 ++--
 docs/pages/components/Icon.mdx  |   4 +-
 docs/pages/components/Menu.mdx  |   4 +-
 docs/pages/examples/Buttons.mdx |   2 +-
 docs/pages/examples/Forms.mdx   | 106 ++++++++++++++++----------------
 docs/pages/index.mdx            |   4 +-
 docs/theme/index.js             |   2 +
 src/Button/Button.stories.tsx   |  11 +++-
 src/Button/index.tsx            |  70 +++++++++------------
 src/layout.tsx                  |  13 +++-
 src/theme.ts                    |   8 +--
 11 files changed, 126 insertions(+), 111 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 264876d2..69a6be64 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -8,12 +8,13 @@ module.exports = {
   ],
   rules: {
     'import/no-unresolved': [2, { ignore: ['minerva-ui', '@docusaurus', '@theme'] }],
-    "import/no-unused-modules": [
-      1,
-      {
-        "unusedExports": true,
-      }
-    ],
+    'import/no-unused-modules': 0,
+    // "import/no-unused-modules": [
+    //   1,
+    //   {
+    //     "unusedExports": true,
+    //   }
+    // ],
     'react/display-name': 1,
     'react/react-in-jsx-scope': 0,
   },
diff --git a/docs/pages/components/Icon.mdx b/docs/pages/components/Icon.mdx
index faff3559..d498ee87 100644
--- a/docs/pages/components/Icon.mdx
+++ b/docs/pages/components/Icon.mdx
@@ -31,8 +31,8 @@ const customTheme = {
   icons: {
     // declare the key and component in your theme, then you can use the key as name in the <Icon /> component
     warning: Warning,
-  }
-}
+  },
+};
 
 const App = () => (
   <ThemeProvider>
diff --git a/docs/pages/components/Menu.mdx b/docs/pages/components/Menu.mdx
index bd2d4bc4..f7b108fd 100644
--- a/docs/pages/components/Menu.mdx
+++ b/docs/pages/components/Menu.mdx
@@ -8,7 +8,9 @@ Built on top of the [Reach UI Menu Button](https://reacttraining.com/reach-ui/me
 
 When you need to trigger actions from a dropdown (such as when clicking in the menu of a desktop application).
 
-<Callout emoji="⚠️">Do _not_ use this if you need to store a value. Use a `<select />` component instead.
+<Callout emoji="⚠️">
+  Do _not_ use this if you need to store a value. Use a `<select />` component
+  instead.
 </Callout>
 
 ```js
diff --git a/docs/pages/examples/Buttons.mdx b/docs/pages/examples/Buttons.mdx
index 96dabaf0..b0f16dee 100644
--- a/docs/pages/examples/Buttons.mdx
+++ b/docs/pages/examples/Buttons.mdx
@@ -23,7 +23,7 @@ render(
 <Stack horizontal>
   <Button>
     <Icon name="mail" mr={2} size="16px" /> Inbox
-    </Button>
+  </Button>
   <Button>
     Save <Icon name="save" ml={2} size="16px" />
   </Button>
diff --git a/docs/pages/examples/Forms.mdx b/docs/pages/examples/Forms.mdx
index fa019274..dc6a51bd 100644
--- a/docs/pages/examples/Forms.mdx
+++ b/docs/pages/examples/Forms.mdx
@@ -181,64 +181,66 @@ Recreated from [Tailwind CSS example](https://tailwindcss.com/components/forms)
   return (
     <Stack>
       {items.map(plan => (
-      <Button
-        flexDirection="row"
-        width="100%"
-        borderWidth={0}
-        borderBottomWidth={1}
-        borderBottomStyle="solid"
-        borderBottomColor="gray.300"
-        pr={3}
-        pl={3}
-        overflow="hidden"
-        alignItems="center"
-        onClick={() => setSelected(plan)}
-      >
-        <Flex
-          width={4}
-          height={4}
-          backgroundColor={selected.id === plan.id ? '#5850ec' : 'transparent'}
-          mr={4}
-          borderRadius={100}
-          borderColor="#5850ec"
-          borderWidth={1}
-          borderStyle="solid"
-          justifyContent="center"
+        <Button
+          flexDirection="row"
+          width="100%"
+          borderWidth={0}
+          borderBottomWidth={1}
+          borderBottomStyle="solid"
+          borderBottomColor="gray.300"
+          pr={3}
+          pl={3}
+          overflow="hidden"
           alignItems="center"
+          onClick={() => setSelected(plan)}
         >
-          <Box
-            width={1}
-            height={1}
-            backgroundColor={selected.id === plan.id ? '#fff' : 'transparent'}
-            borderRadius={50}
-            borderColor="#fff"
+          <Flex
+            width={4}
+            height={4}
+            backgroundColor={
+              selected.id === plan.id ? '#5850ec' : 'transparent'
+            }
+            mr={4}
+            borderRadius={100}
+            borderColor="#5850ec"
             borderWidth={1}
             borderStyle="solid"
-          />
-        </Flex>
-        <Flex
-          width="100%"
-          flexDirection="row"
-          justifyContent="space-between"
-          px={1}
-          py={4}
-        >
-          <Flex flexDirection="column" alignItems="flex-start">
-            <Text fontWeight="bold" fontSize="xl" mb={1} color="gray.700">
-              {plan.title}
-            </Text>
-            <Text color="gray.400">{plan.description}</Text>
+            justifyContent="center"
+            alignItems="center"
+          >
+            <Box
+              width={1}
+              height={1}
+              backgroundColor={selected.id === plan.id ? '#fff' : 'transparent'}
+              borderRadius={50}
+              borderColor="#fff"
+              borderWidth={1}
+              borderStyle="solid"
+            />
           </Flex>
-          <Flex>
-            <Text fontSize="2xl" py={2}>
-              {plan.cost}/mo
-            </Text>
+          <Flex
+            width="100%"
+            flexDirection="row"
+            justifyContent="space-between"
+            px={1}
+            py={4}
+          >
+            <Flex flexDirection="column" alignItems="flex-start">
+              <Text fontWeight="bold" fontSize="xl" mb={1} color="gray.700">
+                {plan.title}
+              </Text>
+              <Text color="gray.400">{plan.description}</Text>
+            </Flex>
+            <Flex>
+              <Text fontSize="2xl" py={2}>
+                {plan.cost}/mo
+              </Text>
+            </Flex>
           </Flex>
-        </Flex>
-      </Button>
-    ))}
-  </Stack>
-  )
+        </Button>
+      ))}
+    </Stack>
+  );
 };
 ```
 
diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx
index e3483988..1d7f351e 100644
--- a/docs/pages/index.mdx
+++ b/docs/pages/index.mdx
@@ -69,8 +69,8 @@ const customTheme = {
   icons: {
     // declare the key and component in your theme, then you can use the key as name in the <Icon /> component
     warning: Warning,
-  }
-}
+  },
+};
 
 const App = () => (
   <ThemeProvider>
diff --git a/docs/theme/index.js b/docs/theme/index.js
index 105f3772..294bb584 100644
--- a/docs/theme/index.js
+++ b/docs/theme/index.js
@@ -232,6 +232,7 @@ const Layout = ({ filename, config: _config, pageMap, children }) => {
               className="text-current p-2 -mr-2"
               href={config.github}
               target="_blank"
+              rel="noreferrer"
             >
               <GitHubIcon height={28} />
             </a>
@@ -304,6 +305,7 @@ const Layout = ({ filename, config: _config, pageMap, children }) => {
                           filepathWithName
                         }
                         target="_blank"
+                        rel="noreferrer"
                       >
                         Edit this page on GitHub
                       </a>
diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx
index 93566d98..ab5e334f 100644
--- a/src/Button/Button.stories.tsx
+++ b/src/Button/Button.stories.tsx
@@ -20,7 +20,9 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<ButtonProps> = (args: Omit<ButtonProps, 'as'>) => <Button {...args} />;
+const Template: Story<ButtonProps> = (args: Omit<ButtonProps, 'as'>) => (
+  <Button {...args} />
+);
 
 export const Default = Template.bind({});
 Default.args = {
@@ -35,6 +37,13 @@ export const Variants = () => (
   </Stack>
 );
 
+export const Sizes = () => (
+  <Stack horizontal alignItems="flex-start">
+    <Button size="sm">Small Button</Button>
+    <Button>Button</Button>
+  </Stack>
+);
+
 export const LoadingButton = Template.bind({});
 LoadingButton.args = {
   children: 'Basic Button',
diff --git a/src/Button/index.tsx b/src/Button/index.tsx
index e8d3568d..c349da4f 100644
--- a/src/Button/index.tsx
+++ b/src/Button/index.tsx
@@ -45,35 +45,38 @@ export interface ButtonProps extends MinervaProps, PseudoBoxProps {
   name?: string;
   /** Button variant styles inherited from theme */
   variant?: string;
+  /** Size variants defined using Styled System variants (https://styled-system.com/variants) */
+  size?: string;
   /** HTML Button Type (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) */
   type?: 'button' | 'reset' | 'submit';
 }
 
-// export const Button = forwardRefWithAs<ButtonProps, 'button'>(function Button(
-//   {
-//     children,
-//     disabled = false,
-//     as: Comp = 'button',
-//     isLoading = false,
-//     name,
-//     variant,
-//     ...props
-//   },
-//   forwardedRef
-// ) {
+export function useVariant(componentName: string, variant?: string) {
+  const theme = useTheme();
+
+  const componentVariants = theme?.variants?.[componentName];
+
+  const variantExistsInTheme =
+    variant &&
+    componentVariants &&
+    Object.keys(componentVariants).includes(variant);
+
+  // if a variant is provided and it doesn't exist in the current theme, warn in development
+  warning(
+    !variant || variantExistsInTheme,
+    `Variant "${variant}" not found in theme variants for <Button />:\n\n${theme
+      ?.variants?.Button &&
+      `Expected one of:\n[${Object.keys(theme.variants.Button).join(', ')}]`}`
+  );
+
+  const variantStyles =
+    variant && theme?.variants?.[componentName]
+      ? theme.variants[componentName][variant]
+      : {};
+
+  return variantStyles;
+}
 
-// export const Button = forwardRef(function Button(
-//   {
-//     children,
-//     disabled = false,
-//     as: Comp = 'button',
-//     isLoading = false,
-//     name,
-//     variant,
-//     ...props
-//   }: ButtonProps,
-//   forwardedRef
-// ) {
 export const Button = forwardRefWithAs<ButtonProps, 'button'>(function Button(
   {
     children,
@@ -86,29 +89,14 @@ export const Button = forwardRefWithAs<ButtonProps, 'button'>(function Button(
   },
   forwardedRef
 ) {
-  const theme = useTheme();
-
-  // if a variant is provided and it doesn't exist in the current theme, warn in development
-  warning(
-    !variant ||
-      (variant &&
-        theme?.variants?.Button &&
-        Object.keys(theme?.variants?.Button).includes(variant)),
-    `Variant "${variant}" not found in theme variants for <Button />:\n\n${theme
-      ?.variants?.Button &&
-      `Expected one of:\n[${Object.keys(theme.variants.Button).join(', ')}]`}`
-  );
+  const componentStyles = useComponentStyles('Button');
+  const variantStyles = useVariant('Button', variant);
 
   warning(
     children || (!children && name),
     'Buttons without children require a `name` attribute to be accessible.'
   );
 
-  const variantStyles =
-    variant && theme?.variants?.Button ? theme.variants.Button[variant] : {};
-
-  const componentStyles = useComponentStyles('Button');
-
   return (
     <PseudoBox
       ref={forwardedRef}
diff --git a/src/layout.tsx b/src/layout.tsx
index 11b2670b..89b709fe 100644
--- a/src/layout.tsx
+++ b/src/layout.tsx
@@ -14,6 +14,7 @@ import StyledSystem, {
   typography,
   compose,
   system,
+  variant,
 } from 'styled-system';
 import {
   createShouldForwardProp,
@@ -326,7 +327,17 @@ export const Box = styled('div').withConfig({
     boxSizing: 'border-box',
     minWidth: 0,
   },
-  systemProps
+  systemProps,
+  variant({
+    prop: 'size',
+    variants: {
+      sm: {
+        padding: '12px 20px',
+        // paddingLeft: '20px',
+        // paddingRight: '20px',
+      },
+    },
+  })
 );
 
 // export const Box = styled('div')<MinervaProps>(
diff --git a/src/theme.ts b/src/theme.ts
index f803e613..1f70a553 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -61,10 +61,10 @@ const defaultTheme: MinervaTheme = {
     fontSize: '14px',
     _hover: { backgroundColor: 'red' },
     lineHeight: '20px',
-    paddingTop: '8px',
-    paddingBottom: '8px',
-    paddingLeft: '16px',
-    paddingRight: '16px',
+    paddingTop: '16px',
+    paddingBottom: '16px',
+    paddingLeft: '60px',
+    paddingRight: '60px',
     borderRadius: '5px',
     borderStyle: 'solid',
     borderColor: '#d2d6dc',

From 63bf9de3ac89b9d2062213383cd27584fea9ae4b Mon Sep 17 00:00:00 2001
From: Matt Wood <matt@cratebind.com>
Date: Thu, 27 May 2021 11:35:15 -0500
Subject: [PATCH 2/2] fix: fix Button size type

---
 src/Button/index.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/Button/index.tsx b/src/Button/index.tsx
index c349da4f..70f56e5d 100644
--- a/src/Button/index.tsx
+++ b/src/Button/index.tsx
@@ -35,7 +35,9 @@ export const buttonVariants = {
   },
 };
 
-export interface ButtonProps extends MinervaProps, PseudoBoxProps {
+export interface ButtonProps
+  extends Omit<MinervaProps, 'size'>,
+    Omit<PseudoBoxProps, 'size'> {
   children?: React.ReactNode;
   /** Toggles disabled pseudo class */
   disabled?: boolean;
@@ -46,7 +48,7 @@ export interface ButtonProps extends MinervaProps, PseudoBoxProps {
   /** Button variant styles inherited from theme */
   variant?: string;
   /** Size variants defined using Styled System variants (https://styled-system.com/variants) */
-  size?: string;
+  size?: any;
   /** HTML Button Type (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) */
   type?: 'button' | 'reset' | 'submit';
 }