Remove the default medium-old size from buttons (#2104)

* Remove old button sizes

* Add sizes to the button stories

* Update storybook snapshots

* Update snapshots

frontend/src/components/VButton.vue

@@ -120,7 +120,7 @@ const VButton = defineComponent({
      */
     size: {
       type: String as PropType<ButtonSize>,
-      default: "medium-old",
+      required: true,
     },
     /**
      * Whether the button is disabled. Used alone this will only
@@ -291,10 +291,6 @@ export default VButton
   @apply cursor-not-allowed;
 }
 
-.size-medium-old {
-  @apply px-4 py-2;
-}
-
 .size-small {
   @apply h-8 px-2 py-0;
 }

frontend/src/components/VFilters/VSearchGridFilter.vue

@@ -11,7 +11,8 @@
         v-show="isAnyFilterApplied"
         id="clear-filter-button"
         variant="plain"
-        class="label-bold absolute end-0 px-4 py-1 text-pink hover:ring hover:ring-pink"
+        size="medium"
+        class="label-bold absolute end-0 text-pink hover:ring hover:ring-pink"
         @click="clearFilters"
       >
         {{ $t("filter-list.clear") }}

frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue

@@ -65,6 +65,7 @@
         variant="text"
         class="!font-normal"
         :disabled="isClearButtonDisabled"
+        size="large"
         @click="clearFilters"
         >{{ $t("filter-list.clear") }}
       </VButton>

frontend/src/components/VIconButton/VIconButton.vue

@@ -63,7 +63,7 @@ export default defineComponent({
      * See documentation on `VButton`.
      */
     buttonProps: {
-      type: Object as PropType<ButtonProps>,
+      type: Object as PropType<Omit<ButtonProps, "size">>,
       default: () => ({ variant: "plain" }),
     },
     /**

frontend/src/components/VRecentSearches/VRecentSearches.vue

@@ -16,6 +16,7 @@
         v-show="entries.length"
         variant="text"
         class="caption-bold"
+        size="small"
         :aria-label="$t('recent-searches.clear.label').toString()"
         @click="handleClear"
       >

frontend/src/components/VSkipToContentContainer.vue

@@ -6,6 +6,7 @@
         variant="filled-pink"
         class="z-50 ms-2 mt-2 focus:fixed focus:absolute"
         :class="$style.skipButton"
+        size="medium"
         @click="skipToContent"
         >{{ $t("skip-to-content") }}</VButton
       >

frontend/src/components/meta/VButtonOld.stories.mdx

@@ -71,6 +71,7 @@ export const Template = (args) => ({
       focusableWhenDisabled: { control: "boolean" },
       type: { control: "text" },
     }}
+    args={{ size: "medium", variant: "text" }}
   >
     {Template.bind({})}
   </Story>

frontend/src/types/button.ts

@@ -20,13 +20,7 @@ export const buttonVariants = [
 ] as const
 export type ButtonVariant = typeof buttonVariants[number]
 
-export const buttonSizes = [
-  "large",
-  "medium",
-  "small",
-  "disabled",
-  "medium-old",
-] as const
+export const buttonSizes = ["large", "medium", "small", "disabled"] as const
 export type ButtonSize = typeof buttonSizes[number]
 
 export const buttonTypes = ["button", "submit", "reset"] as const

frontend/test/unit/specs/components/v-button.spec.js

@@ -22,7 +22,7 @@ describe("VButton", () => {
   })
   it('should render a `button` by default with type="button" and no tabindex', async () => {
     render(VButton, {
-      props: { variant: "filled-white" },
+      props: { variant: "filled-white", size: "medium" },
       slots: { default: "Code is Poetry" },
     })
 
@@ -35,7 +35,7 @@ describe("VButton", () => {
 
   it("should allow passing an explicit type", async () => {
     render(VButton, {
-      props: { type: "submit", variant: "filled-white" },
+      props: { type: "submit", variant: "filled-white", size: "medium" },
       slots: { default: "Code is Poetry" },
     })
 
@@ -47,7 +47,7 @@ describe("VButton", () => {
   it("should render an anchor with no type attribute", async () => {
     render(VButton, {
       attrs: { href: "http://localhost" },
-      props: { as: "VLink", variant: "filled-white" },
+      props: { as: "VLink", variant: "filled-white", size: "medium" },
       slots: { default: "Code is Poetry" },
     })
     await nextTick()
@@ -64,6 +64,7 @@ describe("VButton", () => {
         disabled: true,
         focusableWhenDisabled: false,
         variant: "filled-white",
+        size: "medium",
       },
       slots: { default: "Code is Poetry" },
     })
@@ -80,6 +81,7 @@ describe("VButton", () => {
         disabled: true,
         focusableWhenDisabled: true,
         variant: "filled-white",
+        size: "medium",
       },
       slots: { default: "Code is Poetry" },
     })
@@ -98,6 +100,7 @@ describe("VButton", () => {
         focusableWhenDisabled: true,
         href: "https://wordpress.org",
         variant: "filled-white",
+        size: "medium",
       },
       slots: { default: "Code is Poetry" },
     })

frontend/test/unit/specs/components/v-modal.spec.js

@@ -24,7 +24,7 @@ const TestWrapper = Vue.component("TestWrapper", {
     <div>
       <VModal label="modal label" :initial-focus-element="resolvedInitialFocusElement">
         <template #trigger="{ a11yProps, visible }">
-          <VButton variant="filled-white" v-bind="a11yProps">{{ visible }}</VButton>
+          <VButton variant="filled-white" size="medium" v-bind="a11yProps">{{ visible }}</VButton>
         </template>
 
         <div>Code is Poetry</div>

frontend/test/unit/specs/components/v-popover.spec.js

@@ -33,7 +33,7 @@ const TestWrapper = Vue.component("TestWrapper", {
       <div>External area</div>
       <VPopover label="Test label" v-bind="popoverProps">
         <template #trigger="{ visible, a11yProps }">
-          <VButton variant="bordered-white" :pressed="visible" v-bind="a11yProps">{{ visible ? 'Close' : 'Open' }}</VButton>
+          <VButton variant="bordered-white" size="medium" :pressed="visible" v-bind="a11yProps">{{ visible ? 'Close' : 'Open' }}</VButton>
         </template>
         <div :tabindex="popoverContentTabIndex">Code is Poetry</div>
       </VPopover>