Created a Medium Button Style (#78)

* Created a Medium Button Style

* Create cuddly-peas-try.md

* Fixed css variable usage and prop implementation

* Reverted size to ternary

* updated snapshots

* Update .changeset/cuddly-peas-try.md

Co-authored-by: Rez <[email protected]>

* Update .changeset/cuddly-peas-try.md

Co-authored-by: Rez <[email protected]>

* Update cuddly-peas-try.md

Co-authored-by: Joshua Bowden <[email protected]>
Co-authored-by: Rez <[email protected]>

Author: 3 people

.changeset/cuddly-peas-try.md

@@ -0,0 +1,16 @@
+---
+"@primer/react-brand": minor
+---
+
+Added a new `size` prop to `Button` and a `medium` sized variant, making the previous `large` size optional.
+
+⚠️ This update should be considered a breaking change, despite being issued in a `minor` release. 
+
+Selectable values: `medium` (default) and `large`.
+
+**Upgrade steps:**
+
+```diff
+- <Button>before</Button>
++ <Button size="large">after</Button>
+```

src/Button/Button.module.css

@@ -5,7 +5,6 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 1rem 1.5rem;
   transition: box-shadow 0.2s;
   text-decoration: none;
   border-radius: 6px;
@@ -50,3 +49,11 @@
 .Button--secondary:hover {
   box-shadow: inset 0 0 0 2px var(--brand-color-neutral-emphasisPlus);
 }
+
+.Button--size-medium {
+  padding: var(--base-size-16) var(--base-size-24);
+}
+
+.Button--size-large {
+  padding: var(--base-size-16) var(--base-size-32);
+}

src/Button/Button.module.css.d.ts

@@ -5,6 +5,8 @@ declare const styles: {
   readonly "Button--primary": string;
   readonly "Button--label-primary": string;
   readonly "Button--secondary": string;
+  readonly "Button--size-medium": string;
+  readonly "Button--size-large": string;
 };
 export = styles;
 

src/Button/Button.stories.tsx

@@ -13,6 +13,7 @@ export const Primary = Template.bind({})
 Primary.args = {
   as: 'a',
   variant: 'primary',
+  size: 'medium',
   href: '#',
   children: 'Primary action'
 }
@@ -25,6 +26,15 @@ Secondary.args = {
   children: 'Secondary action'
 }
 
+export const Large = Template.bind({})
+Large.args = {
+  as: 'a',
+  size: 'large',
+  variant: 'primary',
+  href: '#',
+  children: 'Large Action'
+}
+
 export const Polymorphism = Template.bind({})
 Polymorphism.args = {
   as: 'button',

src/Button/Button.tsx

@@ -9,13 +9,15 @@ import styles from './Button.module.css'
 export type ButtonProps<C extends React.ElementType> = BaseProps<C> & {
   as?: C
   variant?: 'primary' | 'secondary'
+  size?: 'medium' | 'large'
 } & React.ComponentPropsWithoutRef<C>
 
 export const Button = forwardRef(
   <C extends React.ElementType>(
     {
       as,
       variant = 'secondary',
+      size = 'medium',
       className,
       children,
       onMouseEnter,
@@ -33,7 +35,7 @@ export const Button = forwardRef(
     return (
       <Component
         ref={ref}
-        className={clsx(styles.Button, styles[`Button--${variant}`], className)}
+        className={clsx(styles.Button, styles[`Button--${variant}`], styles[`Button--size-${size}`], className)}
         onMouseEnter={event => {
           setIsHovered(true)
           onMouseEnter?.(event)
@@ -54,7 +56,7 @@ export const Button = forwardRef(
       >
         <Text
           as="span"
-          size="400"
+          size={size === 'medium' ? '300' : '400'}
           className={clsx(styles['Button--label'], variant === 'primary' && styles['Button--label-primary'])}
         >
           {children}

src/Button/Button.visual.spec.ts

@@ -19,6 +19,12 @@ test.describe('Visual Comparison: Button', () => {
     expect(await page.screenshot()).toMatchSnapshot()
   })
 
+  test('Button / Large', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-button--large&viewMode=story')
+
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
+
   test('Button / Polymorphism', async ({page}) => {
     await page.goto('http://localhost:6006/iframe.html?args=&id=components-button--polymorphism&viewMode=story')