feat(clickable-style): remove large, bump remaining sizes up one level

packages/components/src/Banner/__snapshots__/Banner.spec.tsx.snap

@@ -297,7 +297,7 @@ exports[`<Banner /> DismissableWithAction story renders snapshot 1`] = `
       class="action horizontal"
     >
       <button
-        class="button sizeMedium variantOutline colorBrand"
+        class="button sizeLarge variantOutline colorBrand"
         style="white-space: nowrap;"
         type="button"
       >
@@ -831,7 +831,7 @@ exports[`<Banner /> VerticalDismissableWithAction story renders snapshot 1`] = `
       class="action"
     >
       <button
-        class="button sizeMedium variantOutline colorBrand"
+        class="button sizeLarge variantOutline colorBrand"
         style="white-space: nowrap;"
         type="button"
       >
@@ -931,7 +931,7 @@ exports[`<Banner /> VerticalWithAction story renders snapshot 1`] = `
       class="action"
     >
       <button
-        class="button sizeMedium variantOutline colorBrand"
+        class="button sizeLarge variantOutline colorBrand"
         style="white-space: nowrap;"
         type="button"
       >
@@ -1098,7 +1098,7 @@ exports[`<Banner /> WithAction story renders snapshot 1`] = `
       class="action horizontal"
     >
       <button
-        class="button sizeMedium variantOutline colorBrand"
+        class="button sizeLarge variantOutline colorBrand"
         style="white-space: nowrap;"
         type="button"
       >

packages/components/src/Button/__snapshots__/button.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<Button /> Destructive story renders snapshot 1`] = `
 <button
-  class="button sizeMedium variantFlat colorAlert"
+  class="button sizeLarge variantFlat colorAlert"
   type="button"
 >
   ​
@@ -22,17 +22,17 @@ exports[`<Button /> Link story renders snapshot 1`] = `
 
 exports[`<Button /> Primary story renders snapshot 1`] = `
 <button
-  class="button sizeMedium variantFlat colorBrand"
+  class="button sizeLarge variantFlat colorBrand"
   type="button"
 >
   ​
   Button
 </button>
 `;
 
-exports[`<Button /> PrimarySmall story renders snapshot 1`] = `
+exports[`<Button /> PrimaryMedium story renders snapshot 1`] = `
 <button
-  class="button sizeSmall variantFlat colorBrand"
+  class="button sizeMedium variantFlat colorBrand"
   type="button"
 >
   ​
@@ -42,17 +42,17 @@ exports[`<Button /> PrimarySmall story renders snapshot 1`] = `
 
 exports[`<Button /> Secondary story renders snapshot 1`] = `
 <button
-  class="button sizeMedium variantOutline colorBrand"
+  class="button sizeLarge variantOutline colorBrand"
   type="button"
 >
   ​
   Button
 </button>
 `;
 
-exports[`<Button /> SecondarySmall story renders snapshot 1`] = `
+exports[`<Button /> SecondaryMedium story renders snapshot 1`] = `
 <button
-  class="button sizeSmall variantOutline colorBrand"
+  class="button sizeMedium variantOutline colorBrand"
   type="button"
 >
   ​
@@ -62,17 +62,17 @@ exports[`<Button /> SecondarySmall story renders snapshot 1`] = `
 
 exports[`<Button /> Tertiary story renders snapshot 1`] = `
 <button
-  class="button sizeMedium variantOutline colorNeutral"
+  class="button sizeLarge variantOutline colorNeutral"
   type="button"
 >
   ​
   Button
 </button>
 `;
 
-exports[`<Button /> TertiarySmall story renders snapshot 1`] = `
+exports[`<Button /> TertiaryMedium story renders snapshot 1`] = `
 <button
-  class="button sizeSmall variantOutline colorNeutral"
+  class="button sizeMedium variantOutline colorNeutral"
   type="button"
 >
   ​
@@ -136,7 +136,7 @@ exports[`<Button /> linkWithIcon story renders snapshot 1`] = `
 
 exports[`<Button /> outlineWithIcon story renders snapshot 1`] = `
 <button
-  class="button sizeMedium variantOutline colorWarning"
+  class="button sizeLarge variantOutline colorWarning"
   type="button"
 >
   ​
@@ -156,9 +156,9 @@ exports[`<Button /> outlineWithIcon story renders snapshot 1`] = `
 </button>
 `;
 
-exports[`<Button /> plainSmall story renders snapshot 1`] = `
+exports[`<Button /> plainMedium story renders snapshot 1`] = `
 <button
-  class="button sizeSmall variantPlain colorBrand"
+  class="button sizeMedium variantPlain colorBrand"
   type="button"
 >
   ​
@@ -180,7 +180,7 @@ exports[`<Button /> plainSmall story renders snapshot 1`] = `
 
 exports[`<Button /> plainWithOnlyIcon story renders snapshot 1`] = `
 <button
-  class="button sizeMedium variantPlain colorBrand"
+  class="button sizeLarge variantPlain colorBrand"
   type="button"
 >
   ​
@@ -203,7 +203,7 @@ exports[`<Button /> plainWithOnlyIcon story renders snapshot 1`] = `
 
 exports[`<Button /> withDataTestId story renders snapshot 1`] = `
 <button
-  class="button sizeMedium variantFlat colorAlert"
+  class="button sizeLarge variantFlat colorAlert"
   data-testid="fake-test-id"
   type="button"
 >
@@ -214,7 +214,7 @@ exports[`<Button /> withDataTestId story renders snapshot 1`] = `
 
 exports[`<Button /> withFakeClassName story renders snapshot 1`] = `
 <button
-  class="fake-className button sizeMedium variantOutline colorWarning"
+  class="fake-className button sizeLarge variantOutline colorWarning"
   type="button"
 >
   ​

packages/components/src/Button/button.stories.tsx

@@ -7,7 +7,7 @@ import Text from "../Text";
 import Button, { ButtonProps } from "./button";
 import styles from "./button.stories.module.css";
 
-const sizes = ["extraSmall", "small", "medium", "large"] as const;
+const sizes = ["small", "medium", "large"] as const;
 const allColors = ["alert", "brand", "neutral", "success", "warning"] as const;
 const variants = ["flat", "outline", "link", "plain"] as const;
 const states = ["inactive", "hover", "focus", "active", "disabled"] as const;
@@ -63,25 +63,25 @@ Destructive.args = {
   variant: "flat",
 };
 
-export const PrimarySmall = Template.bind(null);
-PrimarySmall.args = {
+export const PrimaryMedium = Template.bind(null);
+PrimaryMedium.args = {
   children: "Button",
-  size: "small",
+  size: "medium",
   variant: "flat",
 };
 
-export const SecondarySmall = Template.bind(null);
-SecondarySmall.args = {
+export const SecondaryMedium = Template.bind(null);
+SecondaryMedium.args = {
   children: "Button",
-  size: "small",
+  size: "medium",
   variant: "outline",
 };
 
-export const TertiarySmall = Template.bind(null);
-TertiarySmall.args = {
+export const TertiaryMedium = Template.bind(null);
+TertiaryMedium.args = {
   children: "Button",
   color: "neutral",
-  size: "small",
+  size: "medium",
   variant: "outline",
 };
 
@@ -115,16 +115,16 @@ linkInHeading.args = {
   color: "brand",
 };
 
-export const plainSmall = Template.bind(null);
-plainSmall.args = {
+export const plainMedium = Template.bind(null);
+plainMedium.args = {
   children: (
     <>
       Button{" "}
       <AddRoundedIcon className={styles.iconButton} purpose="decorative" />
     </>
   ),
   color: "brand",
-  size: "small",
+  size: "medium",
   variant: "plain",
 };
 
@@ -246,10 +246,10 @@ export const allVariants = () => (
 
 allVariants.parameters = gridParameters;
 
-export const mediumVariantsOnDarkBackground = () =>
-  renderSize("medium", "white", "Button");
+export const largeVariantsOnDarkBackground = () =>
+  renderSize("large", "white", "Button");
 
-mediumVariantsOnDarkBackground.parameters = {
+largeVariantsOnDarkBackground.parameters = {
   ...gridParameters,
   backgrounds: {
     default: "dark",

packages/components/src/Button/button.tsx

@@ -28,7 +28,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       color = "brand",
       disabled = false,
       type = "button",
-      size = "medium",
+      size = "large",
       ...rest
     },
     ref,

packages/components/src/ClickableStyle/ClickableStyle.module.css

@@ -18,20 +18,16 @@
 }
 
 /* Component Sizes */
-.sizeExtraSmall {
-  @apply px-1 h-6 text-xs leading-3;
-}
-
 .sizeSmall {
-  @apply px-4 h-8 text-xs leading-3;
+  @apply px-1 h-6 text-xs leading-3;
 }
 
 .sizeMedium {
-  @apply px-4 h-10 text-sm;
+  @apply px-4 h-8 text-xs leading-3;
 }
 
 .sizeLarge {
-  @apply px-6 h-14 text-sm;
+  @apply px-4 h-10 text-sm;
 }
 
 /* Button Colors */

packages/components/src/ClickableStyle/ClickableStyle.stories.tsx

@@ -16,6 +16,6 @@ ClickableStyleAsAnATag.args = {
   as: "a",
   color: "brand",
   variant: "flat",
-  size: "medium",
+  size: "large",
   children: "ClickableStyle As An A Tag",
 };

packages/components/src/ClickableStyle/ClickableStyle.tsx

@@ -14,7 +14,7 @@ export type ClickableStyleProps<IComponent extends React.ElementType> = {
   /**
    * The size of the element.
    */
-  size: "extraSmall" | "small" | "medium" | "large";
+  size: "small" | "medium" | "large";
   /**
    * A hidden prop for visual testing
    */
@@ -51,7 +51,6 @@ const ClickableStyle = React.forwardRef(
           styles.button,
           // Sizes
           variant !== "link" && [
-            size === "extraSmall" && styles.sizeExtraSmall,
             size === "small" && styles.sizeSmall,
             size === "medium" && styles.sizeMedium,
             size === "large" && styles.sizeLarge,

packages/components/src/ClickableStyle/__snapshots__/ClickableStyle.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<ClickableStyle /> ClickableStyleAsAnATag story renders snapshot 1`] = `
 <a
-  class="button sizeMedium variantFlat colorBrand"
+  class="button sizeLarge variantFlat colorBrand"
 >
   ​
   ClickableStyle As An A Tag

packages/components/src/Link/Link.stories.tsx

@@ -7,7 +7,7 @@ import Text from "../Text";
 import Link, { LinkProps } from "./Link";
 import styles from "./Link.stories.module.css";
 
-const sizes = ["extraSmall", "small", "medium", "large"] as const;
+const sizes = ["small", "medium", "large"] as const;
 const allColors = ["alert", "brand", "neutral", "success", "warning"] as const;
 const variants = ["flat", "outline", "link", "plain"] as const;
 const states = ["inactive", "hover", "focus", "active", "disabled"] as const;
@@ -69,15 +69,15 @@ linkInHeading.args = {
   ...defaultArgs,
 };
 
-export const plainSmall = Template.bind(null);
-plainSmall.args = {
+export const plainMedium = Template.bind(null);
+plainMedium.args = {
   children: (
     <>
       Link <AddRoundedIcon className={styles.iconButton} purpose="decorative" />
     </>
   ),
   color: "brand",
-  size: "small",
+  size: "medium",
   variant: "plain",
 };
 
@@ -153,10 +153,10 @@ export const allVariants = () => (
 
 allVariants.parameters = gridParameters;
 
-export const mediumVariantsOnDarkBackground = () =>
-  renderSize("medium", "white", "Link");
+export const largeVariantsOnDarkBackground = () =>
+  renderSize("large", "white", "Link");
 
-mediumVariantsOnDarkBackground.parameters = {
+largeVariantsOnDarkBackground.parameters = {
   ...gridParameters,
   backgrounds: {
     default: "dark",

packages/components/src/Link/Link.tsx

@@ -28,7 +28,7 @@ export type LinkProps = LinkHTMLElementProps & {
  * use ClickableStyle and pass in the routing component via the `as` prop.
  */
 const Link = forwardRef<HTMLAnchorElement, LinkProps>(
-  ({ variant = "link", color = "brand", size = "medium", ...rest }, ref) => {
+  ({ variant = "link", color = "brand", size = "large", ...rest }, ref) => {
     return (
       <ClickableStyle
         {...rest}

packages/components/src/Link/__snapshots__/Link.spec.tsx.snap

@@ -12,7 +12,7 @@ exports[`<Link /> StandardLink story renders snapshot 1`] = `
 
 exports[`<Link /> buttonVariantWithIcon story renders snapshot 1`] = `
 <a
-  class="button sizeMedium variantFlat colorBrand"
+  class="button sizeLarge variantFlat colorBrand"
   href=""
 >
   ​
@@ -84,9 +84,9 @@ exports[`<Link /> linkWithIcon story renders snapshot 1`] = `
 </a>
 `;
 
-exports[`<Link /> plainSmall story renders snapshot 1`] = `
+exports[`<Link /> plainMedium story renders snapshot 1`] = `
 <a
-  class="button sizeSmall variantPlain colorBrand"
+  class="button sizeMedium variantPlain colorBrand"
 >
   ​
   Link 
@@ -106,7 +106,7 @@ exports[`<Link /> plainSmall story renders snapshot 1`] = `
 
 exports[`<Link /> plainWithOnlyIcon story renders snapshot 1`] = `
 <a
-  class="button sizeMedium variantPlain colorBrand"
+  class="button sizeLarge variantPlain colorBrand"
 >
   ​
   <svg