Skip to content

Commit a2cf9eb

Browse files
JustineoJustineo
committed
refactor: update IconButton component to use variant prop and streamline styles
1 parent 6c78d38 commit a2cf9eb

File tree

6 files changed

+60
-84
lines changed

6 files changed

+60
-84
lines changed

‎packages/extension/components/IconButton.vue‎

Lines changed: 41 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,13 @@
11
<script setup lang="ts">
22
const props = defineProps<{
33
type?: 'button' | 'submit' | 'reset'
4-
toggle?: boolean | 'normal' | 'subtle'
54
variant?: 'normal' | 'secondary'
5+
toggle?: boolean
66
title?: string
7-
dull?: boolean
87
}>()
98
109
const selected = defineModel<boolean>('selected')
1110
12-
const classes = computed(() => {
13-
const variant = props.variant || 'normal'
14-
const toggleVariant = typeof props.toggle === 'string' ? props.toggle : 'normal'
15-
16-
return {
17-
[`tp-button-${variant}`]: true,
18-
[`tp-button-dull`]: props.dull,
19-
[`tp-button-selected-${toggleVariant}`]: selected.value
20-
}
21-
})
22-
2311
function handleClick() {
2412
if (props.toggle) {
2513
selected.value = !selected.value
@@ -30,7 +18,10 @@ function handleClick() {
3018
<template>
3119
<button
3220
class="tp-button"
33-
:class="classes"
21+
:class="{
22+
'tp-button-secondary': variant === 'secondary' && !toggle,
23+
'tp-button-selected': selected
24+
}"
3425
:type="type || 'button'"
3526
:data-tooltip="title || null"
3627
:data-tooltip-type="title ? 'text' : null"
@@ -42,93 +33,64 @@ function handleClick() {
4233

4334
<style scoped>
4435
.tp-button {
45-
display: flex;
46-
align-items: center;
47-
justify-content: center;
48-
--icon-button-height: 32px;
49-
height: var(--icon-button-height);
50-
width: var(--icon-button-height);
51-
flex: none;
52-
line-height: var(--icon-button-height);
53-
border: 1px solid transparent;
54-
position: relative;
55-
border-radius: var(--icon-button-radius);
56-
background-clip: padding-box;
57-
--icon-button-color-bg: trasparent;
58-
background-color: var(--icon-button-color-bg);
59-
color: var(--color-icon);
60-
grid-column-end: span 4;
61-
--icon-button-radius: 0.125rem;
62-
--icon-button-outline-offset: -0.125rem;
63-
--icon-button-outline-width: 0.125rem;
64-
}
65-
66-
[data-fpl-version='ui3'] .tp-button {
6736
--icon-button-outline-offset: -0.0625rem;
6837
--icon-button-outline-width: 0.0625rem;
38+
--icon-button-outline-color: transparent;
39+
--icon-button-size: 1.5rem;
40+
--icon-button-icon-size: 1.5rem;
41+
--icon-button-radius: var(--radius-medium);
42+
--icon-button-color-bg: transparent;
43+
--icon-button-icon: var(--color-icon);
44+
width: var(--icon-button-width, var(--icon-button-size));
45+
height: var(--icon-button-height, var(--icon-button-size));
46+
min-width: var(--icon-button-width, var(--icon-button-size));
47+
padding: 0;
48+
border-radius: var(--icon-button-radius);
49+
background: var(--icon-button-color-bg);
50+
outline: var(--icon-button-outline-color) solid var(--icon-button-outline-width);
51+
outline-offset: var(--icon-button-outline-offset);
52+
display: grid;
53+
color: var(--icon-button-icon);
54+
transition:
55+
0.1s fill ease-out,
56+
0.1s color ease-out;
6957
}
7058
71-
.tp-button:hover {
72-
border-radius: 3px;
59+
.tp-button-secondary {
60+
--icon-button-icon: var(--color-icon-secondary);
7361
}
7462
7563
.tp-button:focus-visible {
7664
--icon-button-outline-color: var(--color-border-selected);
77-
outline: var(--icon-button-outline-color) solid var(--icon-button-outline-width);
78-
outline-offset: var(--icon-button-outline-offset);
79-
border-radius: var(--icon-button-radius);
8065
}
8166
82-
.tp-button-selected-normal {
83-
--icon-button-color-bg: var(--color-bg-brand) !important;
84-
--color-icon: var(--color-icon-onbrand) !important;
85-
border-radius: 3px;
67+
.tp-button:hover {
68+
--icon-button-color-bg: var(--color-bg-transparent-hover);
69+
--icon-button-icon: var(--color-icon-hover);
8670
}
8771
88-
.tp-button-selected-subtle {
89-
--icon-button-color-bg: var(--color-bg-tertiary) !important;
90-
border-radius: 3px;
72+
.tp-button-selected {
73+
--icon-button-color-bg: var(--color-bg-selected);
74+
--icon-button-icon: var(--color-icon-brand);
9175
}
9276
93-
.tp-button-normal:not(:disabled):not(.tp-button-dull):hover {
94-
--icon-button-color-bg: var(--color-bg-hover);
77+
.tp-button-selected:hover {
78+
--icon-button-color-bg: var(--color-bg-selected-secondary);
79+
--icon-button-icon: var(--color-icon-brand);
9580
}
9681
97-
.tp-button-secondary {
98-
--color-icon: var(--color-icon-secondary);
99-
}
100-
101-
.tp-button-secondary:not(:disabled):not(.tp-button-dull):hover {
102-
--icon-button-color-bg: var(--color-bg-tertiary);
103-
--color-icon: var(--color-text);
82+
.tp-button-selected:active {
83+
--icon-button-color-bg: var(--color-bg-selected);
84+
--icon-button-icon: var(--color-icon-brand);
10485
}
10586
10687
.tp-button:disabled {
107-
--color-icon: var(--color-icon-disabled);
88+
--icon-button-icon: var(--color-icon-disabled);
89+
--icon-button-color-bg: transparent;
10890
}
10991
110-
[data-fpl-version='ui3'] .tp-button {
111-
--icon-button-size: 1.5rem;
112-
--icon-button-icon-size: 1.5rem;
113-
--icon-button-radius: var(--radius-medium);
114-
92+
:slotted(.tp-button svg) {
11593
width: var(--icon-button-size);
11694
height: var(--icon-button-size);
117-
border: none;
118-
border-radius: var(--icon-button-radius);
119-
}
120-
121-
:slotted([data-fpl-version='ui3'] .tp-button svg) {
122-
width: var(--icon-button-size);
123-
height: var(--icon-button-size);
124-
}
125-
126-
[data-fpl-version='ui3'] .tp-button-selected-normal {
127-
--icon-button-color-bg: var(--color-bg-selected) !important;
128-
--color-icon: var(--color-icon-brand) !important;
129-
}
130-
131-
[data-fpl-version='ui3'] .tp-button-selected-normal:hover {
132-
background: var(--color-bg-selected-secondary);
13395
}
13496
</style>

‎packages/extension/components/PluginInstaller.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ function cancelImport() {
8585
@blur="startImport"
8686
@keydown.enter="startImport"
8787
/>
88-
<IconButton title="Remove" @click="cancelImport">
88+
<IconButton title="Remove" @click="cancelImport" variant="secondary">
8989
<Minus />
9090
</IconButton>
9191
</div>

‎packages/extension/components/PluginItem.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,14 +72,15 @@ function handleRemove() {
7272
</label>
7373
<div class="tp-row tp-gap">
7474
<IconButton
75+
variant="secondary"
7576
class="tp-plugin-item-update"
7677
:class="{ 'tp-plugin-item-updating': installing }"
7778
title="Update"
7879
@click="handleUpdate"
7980
>
8081
<Refresh :spin="installing" />
8182
</IconButton>
82-
<IconButton title="Remove" @click="handleRemove">
83+
<IconButton variant="secondary" title="Remove" @click="handleRemove">
8384
<Minus />
8485
</IconButton>
8586
</div>

‎packages/extension/components/sections/McpSection.vue‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,6 @@ async function handleClientClick(client: McpClientDisplay) {
144144
v-for="client in mcpClients"
145145
:key="client.name"
146146
:title="client.tooltip"
147-
variant="secondary"
148147
class="tp-mcp-client-button"
149148
:style="{
150149
'--tp-mcp-client-hover-color': `var(--brand-color-${client.id})`
@@ -156,7 +155,6 @@ async function handleClientClick(client: McpClientDisplay) {
156155
<IconButton
157156
title="Copy configuration"
158157
class="tp-mcp-client-button"
159-
variant="secondary"
160158
@click="copy(defaultConfig, copyMessages.config)"
161159
>
162160
<Copy />

‎packages/extension/components/sections/PluginsSection.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ function handleRemove(source: string) {
6161
<Section flat class="tp-plugins">
6262
<template #header>
6363
<div class="tp-row">Plugins</div>
64-
<IconButton title="Install plugin">
64+
<IconButton variant="secondary" title="Install plugin">
6565
<Plus @click="showImporter" />
6666
</IconButton>
6767
</template>

‎packages/extension/entrypoints/ui/style.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,21 @@ tempad .tp-ellipsis {
5353
min-width: 0;
5454
}
5555

56+
tempad button {
57+
display: inline-flex;
58+
place-items: center;
59+
margin: 0;
60+
padding: 0;
61+
box-sizing: border-box;
62+
font: inherit;
63+
letter-spacing: inherit;
64+
text-align: inherit;
65+
border: none;
66+
background: none;
67+
-webkit-user-select: none;
68+
user-select: none;
69+
}
70+
5671
tempad input,
5772
tempad select {
5873
cursor: default;

0 commit comments

Comments
 (0)