From b836b7a48cce5983b9c7908a7f9e3f7d126857d3 Mon Sep 17 00:00:00 2001 From: Antoine Neff <9216777+antoineneff@users.noreply.github.com> Date: Fri, 13 Mar 2026 21:51:10 +0100 Subject: [PATCH 1/5] chore: update BaseButton size prop values --- app/components/Button/Base.stories.ts | 2 +- app/components/Button/Base.vue | 10 +++++----- app/components/Compare/FacetSelector.vue | 6 +++--- app/components/Compare/PackageSelector.vue | 2 +- app/components/Compare/ReplacementSuggestion.vue | 2 +- app/components/Filter/Panel.vue | 2 +- app/components/Package/Card.vue | 2 +- app/components/Package/Header.vue | 1 - app/components/Package/TableRow.vue | 2 +- app/components/SearchProviderToggle.client.vue | 2 +- app/components/Terminal/Install.vue | 2 +- app/pages/compare.vue | 4 ++-- test/nuxt/a11y.spec.ts | 2 +- 13 files changed, 19 insertions(+), 20 deletions(-) diff --git a/app/components/Button/Base.stories.ts b/app/components/Button/Base.stories.ts index 9de0744377..af3a0c2c87 100644 --- a/app/components/Button/Base.stories.ts +++ b/app/components/Button/Base.stories.ts @@ -24,7 +24,7 @@ export const Secondary: Story = { export const Small: Story = { args: { default: 'Small Button', - size: 'small', + size: 'sm', variant: 'secondary', }, } diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue index f37d57be06..e72224bb6c 100644 --- a/app/components/Button/Base.vue +++ b/app/components/Button/Base.vue @@ -8,8 +8,8 @@ const props = withDefaults( type?: 'button' | 'submit' /** @default "secondary" */ variant?: 'primary' | 'secondary' - /** @default "medium" */ - size?: 'small' | 'medium' + /** @default "md" */ + size?: 'sm' | 'md' /** Keyboard shortcut hint */ ariaKeyshortcuts?: string /** Forces the button to occupy the entire width of its container. */ @@ -20,7 +20,7 @@ const props = withDefaults( { type: 'button', variant: 'secondary', - size: 'medium', + size: 'md', }, ) @@ -41,8 +41,8 @@ defineExpose({ :class="{ 'inline-flex': !block, 'flex': block, - 'text-sm px-4 py-2': size === 'medium', - 'text-xs px-2 py-0.5': size === 'small', + 'text-sm px-4 py-2': size === 'md', + 'text-xs px-2 py-0.5': size === 'sm', 'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))': variant === 'secondary', 'text-bg bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))': diff --git a/app/components/Compare/FacetSelector.vue b/app/components/Compare/FacetSelector.vue index f8f39aee7e..2474d873b5 100644 --- a/app/components/Compare/FacetSelector.vue +++ b/app/components/Compare/FacetSelector.vue @@ -40,7 +40,7 @@ function isCategoryNoneSelected(category: string): boolean { :aria-pressed="isCategoryAllSelected(category)" :disabled="isCategoryAllSelected(category)" @click="selectCategory(category)" - size="small" + size="sm" > {{ $t('compare.facets.all') }} @@ -52,7 +52,7 @@ function isCategoryNoneSelected(category: string): boolean { :aria-pressed="isCategoryNoneSelected(category)" :disabled="isCategoryNoneSelected(category)" @click="deselectCategory(category)" - size="small" + size="sm" > {{ $t('compare.facets.none') }} @@ -64,7 +64,7 @@ function isCategoryNoneSelected(category: string): boolean { { {{ pkg }} diff --git a/app/components/Filter/Panel.vue b/app/components/Filter/Panel.vue index 748f921e70..ff1ab386bb 100644 --- a/app/components/Filter/Panel.vue +++ b/app/components/Filter/Panel.vue @@ -328,7 +328,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value) diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue index 6c601cde1f..f7caaa236f 100644 --- a/app/components/Package/Card.vue +++ b/app/components/Package/Card.vue @@ -169,7 +169,7 @@ const numberFormatter = useNumberFormatter()
  • { > { { :aria-label="$t('settings.data_source.label')" :aria-expanded="isOpen" aria-haspopup="true" - size="small" + size="sm" class="border-none w-8 h-8 !px-0 justify-center" classicon="i-lucide:settings" @click="isOpen = !isOpen" diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue index 162dc84ec5..f1fbe7fd2f 100644 --- a/app/components/Terminal/Install.vue +++ b/app/components/Terminal/Install.vue @@ -185,7 +185,7 @@ const copyDevInstallCommand = () => > { it('should have no accessibility violations with size small', async () => { const component = await mountSuspended(ButtonBase, { - props: { size: 'small' }, + props: { size: 'sm' }, slots: { default: 'Button content' }, }) const results = await runAxe(component) From 4560253a22c4d832ce777c59ead2dddcf84a0c68 Mon Sep 17 00:00:00 2001 From: Antoine Neff <9216777+antoineneff@users.noreply.github.com> Date: Fri, 13 Mar 2026 21:55:35 +0100 Subject: [PATCH 2/5] chore: update BaseLink size prop values --- app/components/Compare/ReplacementSuggestion.vue | 2 +- app/components/Link/Base.vue | 8 ++++---- app/components/Link/Link.stories.ts | 6 +++--- app/components/Package/Keywords.vue | 2 +- app/components/Package/MetricsBadges.vue | 2 +- app/pages/package/[[org]]/[name].vue | 4 ++-- test/nuxt/a11y.spec.ts | 2 +- 7 files changed, 13 insertions(+), 13 deletions(-) diff --git a/app/components/Compare/ReplacementSuggestion.vue b/app/components/Compare/ReplacementSuggestion.vue index c3e311ec01..87f3eb6319 100644 --- a/app/components/Compare/ReplacementSuggestion.vue +++ b/app/components/Compare/ReplacementSuggestion.vue @@ -73,7 +73,7 @@ const docUrl = computed(() => { - + {{ $t('package.replacement.learn_more') }} diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue index ba62e47ca8..d24e86ccb8 100644 --- a/app/components/Link/Base.vue +++ b/app/components/Link/Base.vue @@ -13,7 +13,7 @@ const props = withDefaults( /** Visual style of the link */ variant?: 'button-primary' | 'button-secondary' | 'link' /** Size (only applicable for button variants) */ - size?: 'small' | 'medium' + size?: 'sm' | 'md' /** Makes the link take full width */ block?: boolean @@ -48,7 +48,7 @@ const props = withDefaults( */ noNewTabIcon?: boolean }>(), - { variant: 'link', size: 'medium' }, + { variant: 'link', size: 'md' }, ) const isLinkExternal = computed( @@ -64,8 +64,8 @@ const isLinkAnchor = computed( /** size is only applicable for button like links */ const isLink = computed(() => props.variant === 'link') const isButton = computed(() => !isLink.value) -const isButtonSmall = computed(() => props.size === 'small' && !isLink.value) -const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value) +const isButtonSmall = computed(() => props.size === 'sm' && !isLink.value) +const isButtonMedium = computed(() => props.size === 'md' && !isLink.value) const keyboardShortcutsEnabled = useKeyboardShortcuts() diff --git a/app/components/Link/Link.stories.ts b/app/components/Link/Link.stories.ts index 9ceeaeb7eb..aed32421a7 100644 --- a/app/components/Link/Link.stories.ts +++ b/app/components/Link/Link.stories.ts @@ -66,7 +66,7 @@ export const ButtonSecondary: Story = { export const SmallButton: Story = { args: { variant: 'button-primary', - size: 'small', + size: 'sm', default: 'Small Button', }, } @@ -113,14 +113,14 @@ export const Snapshot: Story = { Link with icon Link without underline Disabled Link - +
    Primary Secondary Disabled With Icon
    - +
    Small Button
    diff --git a/app/components/Package/Keywords.vue b/app/components/Package/Keywords.vue index 2e9997ff4d..91c6ed4297 100644 --- a/app/components/Package/Keywords.vue +++ b/app/components/Package/Keywords.vue @@ -11,7 +11,7 @@ const { model } = useGlobalSearch()
  • diff --git a/app/components/Package/MetricsBadges.vue b/app/components/Package/MetricsBadges.vue index b749df5288..0389d183f0 100644 --- a/app/components/Package/MetricsBadges.vue +++ b/app/components/Package/MetricsBadges.vue @@ -61,7 +61,7 @@ const typesHref = computed(() => { diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue index 3af5415e5f..77df59bedf 100644 --- a/app/pages/package/[[org]]/[name].vue +++ b/app/pages/package/[[org]]/[name].vue @@ -713,7 +713,7 @@ const showSkeleton = shallowRef(false) { to: 'http://example.com', disabled: true, variant: 'button-secondary', - size: 'small', + size: 'sm', }, slots: { default: 'Button link content' }, }) From 7db6ac8853ed20713c4d9be7f3b97dc661b49cce Mon Sep 17 00:00:00 2001 From: Antoine Neff <9216777+antoineneff@users.noreply.github.com> Date: Fri, 13 Mar 2026 22:04:09 +0100 Subject: [PATCH 3/5] chore: update BaseInput size prop values --- app/components/Compare/PackageSelector.vue | 1 - app/components/Filter/Panel.vue | 1 - app/components/Header/AuthModal.client.vue | 1 - app/components/Header/ConnectorModal.vue | 2 -- app/components/Header/SearchBox.vue | 2 +- app/components/Input/Base.stories.ts | 10 +++++----- app/components/Input/Base.vue | 12 ++++++------ app/components/Org/MembersPanel.vue | 4 ++-- app/components/Org/OperationsQueue.vue | 2 +- app/components/Org/TeamsPanel.vue | 3 --- app/components/Package/ListControls.vue | 1 - app/components/Package/Maintainers.vue | 2 +- app/components/Package/TrendsChart.vue | 2 -- app/components/Package/Versions.vue | 2 +- app/pages/index.vue | 2 +- test/nuxt/a11y.spec.ts | 4 ++-- 16 files changed, 20 insertions(+), 31 deletions(-) diff --git a/app/components/Compare/PackageSelector.vue b/app/components/Compare/PackageSelector.vue index d5e0ebc06d..1d2acf69ca 100644 --- a/app/components/Compare/PackageSelector.vue +++ b/app/components/Compare/PackageSelector.vue @@ -246,7 +246,6 @@ onClickOutside(containerRef, () => { : $t('compare.selector.search_add') " no-correct - size="medium" class="w-full min-w-25 ps-7" aria-autocomplete="list" ref="inputRef" diff --git a/app/components/Filter/Panel.vue b/app/components/Filter/Panel.vue index ff1ab386bb..d68ddf5806 100644 --- a/app/components/Filter/Panel.vue +++ b/app/components/Filter/Panel.vue @@ -246,7 +246,6 @@ const hasActiveFilters = computed(() => !!filterSummary.value) :placeholder="searchPlaceholder" autocomplete="off" class="w-full min-w-25" - size="medium" no-correct /> diff --git a/app/components/Header/AuthModal.client.vue b/app/components/Header/AuthModal.client.vue index 1a3c42d4e7..1b96d04947 100644 --- a/app/components/Header/AuthModal.client.vue +++ b/app/components/Header/AuthModal.client.vue @@ -112,7 +112,6 @@ watch(user, async newUser => { :placeholder="$t('auth.modal.handle_placeholder')" no-correct class="w-full" - size="medium" />
    diff --git a/app/components/Header/SearchBox.vue b/app/components/Header/SearchBox.vue index 9a01ebf9fe..50ddd4f826 100644 --- a/app/components/Header/SearchBox.vue +++ b/app/components/Header/SearchBox.vue @@ -62,7 +62,7 @@ defineExpose({ focus }) class="w-full min-w-25 ps-7 pe-8" @focus="isSearchFocused = true" @blur="isSearchFocused = false" - size="small" + size="sm" ariaKeyshortcuts="/" />
    { :placeholder="$t('org.members.username_placeholder')" no-correct class="w-full min-w-25" - size="small" + size="sm" />
    { autocomplete="one-time-code" spellcheck="false" :class="['flex-1 min-w-25', otpError ? 'border-red-500 focus:outline-red-500' : '']" - size="small" + size="sm" @input="otpError = ''" />
    { :placeholder="$t('org.teams.username_placeholder')" no-correct class="flex-1 min-w-25" - size="medium" />
    diff --git a/app/components/Package/Maintainers.vue b/app/components/Package/Maintainers.vue index ed93688526..5ee287dbbc 100644 --- a/app/components/Package/Maintainers.vue +++ b/app/components/Package/Maintainers.vue @@ -259,7 +259,7 @@ watch( :placeholder="$t('package.maintainers.username_placeholder')" no-correct class="flex-1 min-w-25 m-1" - size="small" + size="sm" /> {{ isAdding ? '…' : $t('package.maintainers.add_button') }} diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue index 98aa85d024..bc51c4d9ce 100644 --- a/app/components/Package/TrendsChart.vue +++ b/app/components/Package/TrendsChart.vue @@ -1624,7 +1624,6 @@ watch(selectedMetric, value => { type="date" :max="DATE_INPUT_MAX" class="w-full min-w-0 bg-transparent" - size="medium" /> @@ -1640,7 +1639,6 @@ watch(selectedMetric, value => { type="date" :max="DATE_INPUT_MAX" class="w-full min-w-0 bg-transparent" - size="medium" /> diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue index c6df34a7e4..52fce13835 100644 --- a/app/components/Package/Versions.vue +++ b/app/components/Package/Versions.vue @@ -545,7 +545,7 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b autocomplete="off" class="flex-1 min-w-0" :class="isInvalidRange ? '!border-red-500' : ''" - size="small" + size="sm" /> { it('should have no accessibility violations with size small', async () => { const component = await mountSuspended(InputBase, { - props: { size: 'small' }, + props: { size: 'sm' }, attrs: { 'aria-label': 'Small input' }, }) const results = await runAxe(component) @@ -2591,7 +2591,7 @@ describe('component accessibility audits', () => { it('should have no accessibility violations with size large', async () => { const component = await mountSuspended(InputBase, { - props: { size: 'large' }, + props: { size: 'lg' }, attrs: { 'aria-label': 'Large input' }, }) const results = await runAxe(component) From d4ec21a3cddd48112c66a488cfe2f0cb28ca131a Mon Sep 17 00:00:00 2001 From: Antoine Neff <9216777+antoineneff@users.noreply.github.com> Date: Fri, 13 Mar 2026 22:38:49 +0100 Subject: [PATCH 4/5] fix: update remaining size --- app/components/Link/Link.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/Link/Link.stories.ts b/app/components/Link/Link.stories.ts index aed32421a7..b82807e9f7 100644 --- a/app/components/Link/Link.stories.ts +++ b/app/components/Link/Link.stories.ts @@ -122,7 +122,7 @@ export const Snapshot: Story = {
    - Small Button + Small Button
    Full Width Button From aa8bd1ee8fc94a8ca6a30862d4ea2c1534309a97 Mon Sep 17 00:00:00 2001 From: "Willow (GHOST)" Date: Sat, 21 Mar 2026 20:33:14 -0700 Subject: [PATCH 5/5] fix: update new things --- app/components/Button/ButtonBase.stories.ts | 2 +- app/components/Package/Likes.vue | 2 +- app/pages/package/[[org]]/[name]/versions.vue | 2 +- app/pages/translation-status.vue | 8 ++------ 4 files changed, 5 insertions(+), 9 deletions(-) diff --git a/app/components/Button/ButtonBase.stories.ts b/app/components/Button/ButtonBase.stories.ts index db18a72d63..a8aba1f8f7 100644 --- a/app/components/Button/ButtonBase.stories.ts +++ b/app/components/Button/ButtonBase.stories.ts @@ -52,7 +52,7 @@ export const Secondary: Story = { export const Small: Story = { args: { - size: 'small', + size: 'sm', }, render: args => ({ components: { ButtonBase }, diff --git a/app/components/Package/Likes.vue b/app/components/Package/Likes.vue index 4ea2798e0b..5c7b68089b 100644 --- a/app/components/Package/Likes.vue +++ b/app/components/Package/Likes.vue @@ -130,7 +130,7 @@ const likeAction = async () => { > (() => { type="text" :placeholder="$t('package.versions.version_filter_placeholder')" :aria-label="$t('package.versions.version_filter_label')" - size="small" + size="sm" class="w-36 sm:w-44" /> diff --git a/app/pages/translation-status.vue b/app/pages/translation-status.vue index dfe1b076ef..2eb03598d6 100644 --- a/app/pages/translation-status.vue +++ b/app/pages/translation-status.vue @@ -186,7 +186,7 @@ ${template}`

    {{ $t('translation_status.missing_keys', {}, { locale: localeEntry.lang }) }}

    - + {{ copied ? $t('common.copied', {}, { locale: localeEntry.lang }) @@ -209,11 +209,7 @@ ${template}`
    - + {{ $t('i18n.edit_on_github', {}, { locale: localeEntry.lang }) }}