Audit VIconButton sizes

src/components/VAudioTrack/layouts/VFullLayout.vue

@@ -18,7 +18,7 @@
     <div
       class="items-top mx-auto mt-6 flex flex-row flex-wrap gap-6 px-6 lg:max-w-5xl lg:flex-nowrap"
     >
-      <slot name="play-pause" :size="isSmall ? 'small' : 'medium'" />
+      <slot name="play-pause" :size="isSmall ? 'small' : 'larger'" />
 
       <div
         class="audio-info order-2 flex w-full flex-col justify-center lg:order-1 lg:w-auto"

src/components/VAudioTrack/layouts/VGlobalLayout.vue

@@ -2,7 +2,7 @@
   <div class="global-track flex w-full flex-row">
     <div class="flex-shrink-0">
       <VAudioThumbnail :audio="audio" />
-      <slot name="play-pause" size="medium" layout="global" />
+      <slot name="play-pause" size="larger" layout="global" />
     </div>
 
     <div class="relative flex-grow">

src/components/VAudioTrack/layouts/VRowLayout.vue

@@ -80,7 +80,7 @@
       >
         <slot
           name="play-pause"
-          :size="isLarge ? 'medium' : 'large'"
+          :size="isLarge ? 'larger' : 'large'"
           :layout="'row'"
           :is-tabbable="false"
         />

src/components/VAudioTrack/meta/VAudioTrack.stories.mdx

@@ -40,7 +40,7 @@ import wavWaveform from './wav-waveform.json'
 />
 
 export const commonAttrs = () => ({
-  id: Math.floor(Math.random() * 1e9),
+  id: Math.floor(Math.random() * 1e9).toString(),
   creator: 'Wolfgang Amadeus Mozart',
   creator_url: 'https://en.wikipedia.org/wiki/Wolfgang_Amadeus_Mozart',
   category: 'music',
@@ -134,7 +134,7 @@ specifying a `layout`. The layout can further be customised by the `size` prop.
       size: 's',
     }}
     parameters={{
-      viewport: { defaultViewport: 'mob' },
+      viewport: { defaultViewport: 'sm' },
     }}
   >
     {Template.bind({})}
@@ -181,7 +181,7 @@ specifying a `layout`. The layout can further be customised by the `size` prop.
       size: 's',
     }}
     parameters={{
-      viewport: { defaultViewport: 'mob' },
+      viewport: { defaultViewport: 'sm' },
     }}
   >
     {Template.bind({})}
@@ -226,7 +226,7 @@ dimension.
       size: 's',
     }}
     parameters={{
-      viewport: { defaultViewport: 'mob' },
+      viewport: { defaultViewport: 'sm' },
     }}
   >
     {Template.bind({})}
@@ -245,7 +245,7 @@ across pages when navigating.
       layout: 'global',
     }}
     parameters={{
-      viewport: { defaultViewport: 'mob' },
+      viewport: { defaultViewport: 'sm' },
     }}
   >
     {Template.bind({})}

src/components/VContentReport/VContentReportPopover.vue

@@ -12,12 +12,8 @@
       <div class="relative" data-testid="content-report-popover">
         <VIconButton
           class="absolute top-0 border-none text-dark-charcoal-70 end-0"
-          size="search-medium"
           :icon-props="{ iconPath: icons.closeSmall }"
-          :button-props="{
-            'aria-label': $t('modal.close').toString(),
-            variant: 'plain',
-          }"
+          :aria-label="$t('modal.close').toString()"
           @click="close"
         />
         <VContentReportForm

src/components/VExternalSearch/VExternalSourceList.vue

@@ -27,12 +27,8 @@
       >
         <VIconButton
           class="absolute top-0 border-none text-dark-charcoal-70 end-0"
-          size="search-medium"
           :icon-props="{ iconPath: icons.closeSmall }"
-          :button-props="{
-            'aria-label': $t('modal.close').toString(),
-            variant: 'plain',
-          }"
+          :aria-label="$t('modal.close').toString()"
           @click="close"
         />
         <h2 class="description-bold mb-2 px-4 pt-5 text-start">

src/components/VGlobalAudioSection/VGlobalAudioSection.vue

@@ -4,6 +4,7 @@
     <VIconButton
       v-if="audio"
       class="absolute top-0 z-20 border-none ltr:right-0 rtl:left-0"
+      size="larger"
       :icon-props="{ iconPath: icons.closeIcon }"
       @click="handleClose"
     />

src/components/VHeader/VHeaderInternal.vue

@@ -19,11 +19,9 @@
           <VIconButton
             ref="menuButtonRef"
             :icon-props="{ iconPath: menuIcon }"
-            :button-props="{ variant: 'plain' }"
             :aria-label="$t('header.aria.menu')"
             v-bind="a11yProps"
             class="border-tx hover:bg-dark-charcoal hover:text-white"
-            size="search-medium"
           />
         </template>
 
@@ -34,9 +32,7 @@
             <VHomeLink variant="light" />
             <VIconButton
               ref="closeButton"
-              :button-props="{ variant: 'plain' }"
               :icon-props="{ iconPath: closeIcon }"
-              size="search-medium"
               class="border-tx text-white focus-visible:ring-offset-tx"
               :aria-label="$t('modal.close')"
               @click="closeModal"

src/components/VHeader/VHeaderMobile/VContentSettingsModal.vue

@@ -30,7 +30,6 @@
         }}</VTab>
         <VIconButton
           class="self-center ms-auto hover:bg-dark-charcoal hover:text-white"
-          size="search-medium"
           :icon-props="{ iconPath: closeIcon }"
           :aria-label="$t('modal.aria-close')"
           @click="closeModal"

src/components/VHeader/VHeaderMobile/VSearchBarButton.vue

@@ -1,6 +1,5 @@
 <template>
   <VIconButton
-    size="search-medium"
     class="border-tx bg-tx"
     :button-props="{ variant: 'plain--avoid' }"
     v-on="$listeners"

src/components/VHeader/meta/VSearchBarButtons.stories.mdx → src/components/VHeader/meta/VSearchBarButton.stories.mdx

@@ -92,7 +92,7 @@ If any filters are selected, it shows a pink dot in the top right corner.
 ## Clear button and Back button
 
 export const activeButtonsTemplate = (args) => ({
-  template: `<div class="rounded-sm bg-white flex justify-between ring ring-pink">
+  template: `<div class="wrapper rounded-sm bg-white flex justify-between ring ring-pink">
   <VSearchBarButton
     :icon-path="chevronLeftIcon"
     :inner-size="8"

src/components/VIconButton/VIconButton.vue

@@ -28,14 +28,8 @@ import VButton, { type ButtonProps } from '~/components/VButton.vue'
 const SIZE_MAP = Object.freeze({
   tiny: { icon: 6, button: 'w-6 h-6' },
   small: { icon: 6, button: 'w-10 h-10' },
-  smaller: { icon: 6, button: 'w-8 h-8' },
-  // TODO: audit the sizes after new header is done.
-  'new-small': { icon: 4, button: 'w-8 h-8' },
-  'search-small': { icon: 6, button: '!w-10 md:w-12 !h-10 md:h-12' },
-  'search-medium': { icon: 6, button: 'w-12 h-12' },
-  'search-large': { icon: 6, button: 'w-14 h-14' },
-  'search-standalone': { icon: 6, button: 'w-14 md:w-[69px] h-14 md:h-[69px]' },
-  medium: { icon: 8, button: 'w-14 h-14' },
+  medium: { icon: 6, button: 'w-12 h-12' },
+  larger: { icon: 8, button: 'w-14 h-14' },
   large: { icon: 12, button: 'w-20 h-20' },
 } as const)
 type Size = keyof typeof SIZE_MAP

src/components/VIconButton/meta/VIconButton.stories.mdx

@@ -16,7 +16,7 @@ import replayIcon from '~/assets/icons/replay.svg'
   argTypes={{
     size: {
       defaultValue: 'medium',
-      options: ['tiny', 'small', 'search', 'medium', 'large'],
+      options: ['tiny', 'small', 'medium', 'larger', 'large'],
       control: 'select',
     },
   }}
@@ -32,6 +32,23 @@ export const Template = (args) => ({
   },
 })
 
+export const sizesTemplate = (args) => ({
+  template: `
+    <div class="flex gap-x-2">
+      <div v-for="size in ['tiny', 'small', 'medium', 'larger', 'large']" :key="size" class="flex flex-col items-center p-2">
+        <p>{{ size }}</p>
+        <VIconButton
+           class="text-white bg-dark-charcoal border-dark-charcoal"
+           :size="size" v-bind="args" />
+      </div>
+    </div>
+  `,
+  components: { VIconButton },
+  setup() {
+    return { args }
+  },
+})
+
 # Icon Button
 
 <Description of={VIconButton} />
@@ -50,3 +67,18 @@ export const Template = (args) => ({
     {Template.bind({})}
   </Story>
 </Canvas>
+
+## Sizes
+
+<Canvas>
+  <Story
+    name="Sizes"
+    args={{
+      iconProps: {
+        iconPath: replayIcon,
+      },
+    }}
+  >
+    {sizesTemplate.bind({})}
+  </Story>
+</Canvas>

src/components/VNotificationBanner.vue

@@ -12,8 +12,6 @@
       <slot name="buttons">
         <VIconButton
           :class="variant === 'announcement' && 'text-white'"
-          class="border-none"
-          :button-props="{ variant: 'plain' }"
           size="small"
           :aria-label="closeLabel"
           :icon-props="{

test/storybook/visual-regression/v-icon-button.spec.ts

@@ -0,0 +1,12 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('VIconButton', () => {
+  const url = '/iframe.html?id=components-viconbutton--sizes'
+
+  test('icon button sizes', async ({ page }) => {
+    await page.goto(url)
+    expect(await page.screenshot()).toMatchSnapshot({
+      name: 'v-icon-button-sizes.png',
+    })
+  })
+})

test/storybook/visual-regression/v-search-bar-button.spec.ts

@@ -0,0 +1,41 @@
+import { expect, test } from '@playwright/test'
+
+test.describe.configure({ mode: 'parallel' })
+const wrapperLocator = '.wrapper'
+test.describe('VSearchBarButton', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(
+      '/iframe.html?id=components-vheader-vheadermobile-vsearchbarbutton--clear-and-back-buttons'
+    )
+  })
+  test('Clear and back buttons resting', async ({ page }) => {
+    expect(await page.locator(wrapperLocator).screenshot()).toMatchSnapshot({
+      name: `clear-back-buttons-resting.png`,
+    })
+  })
+
+  test(`Back button hovered`, async ({ page }) => {
+    await page.hover('.wrapper>button:nth-child(1)')
+    expect(await page.locator(wrapperLocator).screenshot()).toMatchSnapshot({
+      name: `back-button-hovered.png`,
+    })
+  })
+  test(`Back button focused`, async ({ page }) => {
+    await page.focus('.wrapper>button:nth-child(1)')
+    expect(await page.locator(wrapperLocator).screenshot()).toMatchSnapshot({
+      name: `back-button-focused.png`,
+    })
+  })
+  test(`Clear button hovered`, async ({ page }) => {
+    await page.hover('.wrapper>button:nth-child(2)')
+    expect(await page.locator(wrapperLocator).screenshot()).toMatchSnapshot({
+      name: `clear-button-hovered.png`,
+    })
+  })
+  test(`Clear button focused`, async ({ page }) => {
+    await page.hover('.wrapper>button:nth-child(2)')
+    expect(await page.locator(wrapperLocator).screenshot()).toMatchSnapshot({
+      name: `clear-button-focused.png`,
+    })
+  })
+})