From ccebf915560925242c1788f666eca36bef3d6726 Mon Sep 17 00:00:00 2001 From: Neesh Date: Wed, 18 Feb 2026 22:51:35 +0700 Subject: [PATCH 1/4] fix: improve design of buttons/links with icons (#1255) --- app/components/Button/Base.vue | 8 ++++++-- app/components/Link/Base.vue | 16 ++++++++++++---- 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue index 11f220148..4639b6dde 100644 --- a/app/components/Button/Base.vue +++ b/app/components/Button/Base.vue @@ -32,8 +32,12 @@ 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 py-2': size === 'medium', + 'px-4': size === 'medium' && !classicon, + 'ps-3 pe-4': size === 'medium' && !!classicon, + 'text-xs py-0.5': size === 'small', + 'px-2': size === 'small' && !classicon, + 'ps-1.5 pe-2': size === 'small' && !!classicon, '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/Link/Base.vue b/app/components/Link/Base.vue index 1dffa3db3..bbef7f76d 100644 --- a/app/components/Link/Base.vue +++ b/app/components/Link/Base.vue @@ -65,8 +65,12 @@ const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value) 'inline-flex': !block, 'opacity-50 gap-x-1 items-center justify-center font-mono border border-transparent rounded-md': isButton, - 'text-sm px-4 py-2': isButtonMedium, - 'text-xs px-2 py-0.5': isButtonSmall, + 'text-sm py-2': isButtonMedium, + 'px-4': isButtonMedium && !classicon, + 'ps-3 pe-4': isButtonMedium && !!classicon, + 'text-xs py-0.5': isButtonSmall, + 'px-2': isButtonSmall && !classicon, + 'ps-1.5 pe-2': isButtonSmall && !!classicon, 'text-bg bg-fg': variant === 'button-primary', 'bg-transparent text-fg': variant === 'button-secondary', }" @@ -85,8 +89,12 @@ const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value) isLink, 'justify-center font-mono border border-border rounded-md transition-all duration-200': isButton, - 'text-sm px-4 py-2': isButtonMedium, - 'text-xs px-2 py-0.5': isButtonSmall, + 'text-sm py-2': isButtonMedium, + 'px-4': isButtonMedium && !classicon, + 'ps-3 pe-4': isButtonMedium && !!classicon, + 'text-xs py-0.5': isButtonSmall, + 'px-2': isButtonSmall && !classicon, + 'ps-1.5 pe-2': isButtonSmall && !!classicon, 'bg-transparent text-fg hover:(bg-fg/10 text-accent) focus-visible:(bg-fg/10 text-accent) aria-[current=true]:(bg-fg/10 text-accent border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))': variant === 'button-secondary', 'text-bg bg-fg hover:(bg-fg/50 text-accent) focus-visible:(bg-fg/50) aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))': From bb0cc7e0410dd7d503f2c0c41065a5929f78a671 Mon Sep 17 00:00:00 2001 From: Neesh Date: Wed, 18 Feb 2026 23:46:34 +0700 Subject: [PATCH 2/4] feat(ui): auto-detect icon-only buttons for consistent spacing Detect icon-only buttons with useSlot --- app/components/Button/Base.vue | 16 ++++++++++------ app/components/Link/Base.vue | 30 ++++++++++++++++++------------ 2 files changed, 28 insertions(+), 18 deletions(-) diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue index 4639b6dde..4c5b8951c 100644 --- a/app/components/Button/Base.vue +++ b/app/components/Button/Base.vue @@ -18,6 +18,8 @@ const props = withDefaults( ) const el = useTemplateRef('el') +const slots = useSlots() +const iconOnly = computed(() => !!props.classicon && !slots.default) defineExpose({ focus: () => el.value?.focus(), @@ -32,12 +34,14 @@ defineExpose({ :class="{ 'inline-flex': !block, 'flex': block, - 'text-sm py-2': size === 'medium', - 'px-4': size === 'medium' && !classicon, - 'ps-3 pe-4': size === 'medium' && !!classicon, - 'text-xs py-0.5': size === 'small', - 'px-2': size === 'small' && !classicon, - 'ps-1.5 pe-2': size === 'small' && !!classicon, + 'text-sm py-2': size === 'medium' && !iconOnly, + 'text-sm p-2': size === 'medium' && !!iconOnly, + 'px-4': size === 'medium' && !classicon && !iconOnly, + 'ps-3 pe-4': size === 'medium' && !!classicon && !iconOnly, + 'text-xs py-0.5': size === 'small' && !iconOnly, + 'text-xs p-0.5': size === 'small' && !!iconOnly, + 'px-2': size === 'small' && !classicon && !iconOnly, + 'ps-1.5 pe-2': size === 'small' && !!classicon && !iconOnly, '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/Link/Base.vue b/app/components/Link/Base.vue index bbef7f76d..2de9fd25f 100644 --- a/app/components/Link/Base.vue +++ b/app/components/Link/Base.vue @@ -55,6 +55,8 @@ 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 slots = useSlots() +const iconOnly = computed(() => !!props.classicon && !slots.default)
diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue index e41097252..5076ad26e 100644 --- a/app/components/Package/WeeklyDownloadStats.vue +++ b/app/components/Package/WeeklyDownloadStats.vue @@ -264,11 +264,10 @@ const config = computed(() => { type="button" @click="openChartModal" class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 focus-visible:outline-accent/70 rounded" + :aria-label="$t('package.trends.title')" :title="$t('package.trends.title')" classicon="i-lucide:chart-line" - > - {{ $t('package.trends.title') }} - + /> diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue index 1ded55a34..fbd0a409f 100644 --- a/app/pages/package/[[org]]/[name].vue +++ b/app/pages/package/[[org]]/[name].vue @@ -1003,21 +1003,19 @@ const showSkeleton = shallowRef(false) variant="button-secondary" size="small" :to="`https://npmgraph.js.org/?q=${pkg.name}`" + :aria-label="$t('package.stats.view_dependency_graph')" :title="$t('package.stats.view_dependency_graph')" classicon="i-lucide:network -rotate-90" - > - {{ $t('package.stats.view_dependency_graph') }} - + /> - {{ $t('package.stats.inspect_dependency_tree') }} - + />
From ff4be8b954b933b3b0f7ce87eb934a4522e0c47c Mon Sep 17 00:00:00 2001 From: Neesh Date: Wed, 18 Feb 2026 23:50:19 +0700 Subject: [PATCH 4/4] fix(ui): make homepage search button square on mobile icon-only for mobile only breaks auto-detection. Manually override padding on mobile. --- app/pages/index.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/pages/index.vue b/app/pages/index.vue index 4421dc7d5..2f9f44b91 100644 --- a/app/pages/index.vue +++ b/app/pages/index.vue @@ -92,7 +92,7 @@ defineOgImageComponent('Default', {