@citizenplane/pimp 16.3.2 → 16.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -53,6 +53,7 @@ const slots = useSlots()
|
|
|
53
53
|
const showLeadingIcon = computed(() => !!slots['leading-icon'])
|
|
54
54
|
const showText = computed(() => !!props.label)
|
|
55
55
|
const showTrailingIcon = computed(() => !!slots['trailing-icon'])
|
|
56
|
+
const isIconOnly = computed(() => !props.label)
|
|
56
57
|
|
|
57
58
|
const dynamicClasses = computed(() => {
|
|
58
59
|
return [
|
|
@@ -62,6 +63,7 @@ const dynamicClasses = computed(() => {
|
|
|
62
63
|
'cpSelectableButton--isSelected': props.isSelected,
|
|
63
64
|
'cpSelectableButton--isExpanded': props.isExpanded,
|
|
64
65
|
'cpSelectableButton--isDisabled': props.disabled,
|
|
66
|
+
'cpSelectableButton--isIconOnly': isIconOnly.value,
|
|
65
67
|
},
|
|
66
68
|
]
|
|
67
69
|
})
|
|
@@ -149,6 +151,10 @@ const dynamicClasses = computed(() => {
|
|
|
149
151
|
--cp-selectable-body-background-color-hover: var(--cp-background-accent-solid-hover);
|
|
150
152
|
--cp-selectable-box-shadow: var(--cp-shadows-3xs-inset);
|
|
151
153
|
|
|
154
|
+
&.cpSelectableButton--isIconOnly {
|
|
155
|
+
--cp-selectable-body-padding: var(--cp-spacing-sm-md);
|
|
156
|
+
}
|
|
157
|
+
|
|
152
158
|
&--sm {
|
|
153
159
|
--cp-selectable-border-padding: var(--cp-spacing-sm);
|
|
154
160
|
--cp-selectable-border-radius: var(--cp-radius-sm-md);
|
|
@@ -160,6 +166,10 @@ const dynamicClasses = computed(() => {
|
|
|
160
166
|
--cp-selectable-icon-size: var(--cp-dimensions-4);
|
|
161
167
|
}
|
|
162
168
|
|
|
169
|
+
&--sm.cpSelectableButton--isIconOnly {
|
|
170
|
+
--cp-selectable-body-padding: var(--cp-spacing-sm);
|
|
171
|
+
}
|
|
172
|
+
|
|
163
173
|
&--xs {
|
|
164
174
|
--cp-selectable-border-padding: var(--cp-spacing-xs);
|
|
165
175
|
--cp-selectable-border-radius: var(--cp-radius-sm-md);
|
|
@@ -171,6 +181,10 @@ const dynamicClasses = computed(() => {
|
|
|
171
181
|
--cp-selectable-icon-size: var(--cp-dimensions-4);
|
|
172
182
|
}
|
|
173
183
|
|
|
184
|
+
&--xs.cpSelectableButton--isIconOnly {
|
|
185
|
+
--cp-selectable-body-padding: var(--cp-spacing-sm);
|
|
186
|
+
}
|
|
187
|
+
|
|
174
188
|
&--2xs {
|
|
175
189
|
--cp-selectable-border-padding: var(--cp-spacing-xs);
|
|
176
190
|
--cp-selectable-border-radius: var(--cp-radius-sm-md);
|
|
@@ -182,6 +196,10 @@ const dynamicClasses = computed(() => {
|
|
|
182
196
|
--cp-selectable-icon-size: var(--cp-dimensions-3_5);
|
|
183
197
|
}
|
|
184
198
|
|
|
199
|
+
&--2xs.cpSelectableButton--isIconOnly {
|
|
200
|
+
--cp-selectable-body-padding: var(--cp-spacing-sm);
|
|
201
|
+
}
|
|
202
|
+
|
|
185
203
|
&--3xs {
|
|
186
204
|
--cp-selectable-border-padding: var(--cp-spacing-none);
|
|
187
205
|
--cp-selectable-border-radius: var(--cp-radius-sm);
|
|
@@ -193,6 +211,10 @@ const dynamicClasses = computed(() => {
|
|
|
193
211
|
--cp-selectable-icon-size: var(--cp-dimensions-3);
|
|
194
212
|
}
|
|
195
213
|
|
|
214
|
+
&--3xs.cpSelectableButton--isIconOnly {
|
|
215
|
+
--cp-selectable-body-padding: var(--cp-spacing-sm);
|
|
216
|
+
}
|
|
217
|
+
|
|
196
218
|
&--isSelected {
|
|
197
219
|
--cp-selectable-border-color: transparent;
|
|
198
220
|
--cp-selectable-border-color-hover: transparent;
|
|
@@ -224,6 +224,27 @@ export const FullWidth: Story = {
|
|
|
224
224
|
}),
|
|
225
225
|
}
|
|
226
226
|
|
|
227
|
+
/* -------------------------------------------------------------------------- */
|
|
228
|
+
/* Icon only */
|
|
229
|
+
/* -------------------------------------------------------------------------- */
|
|
230
|
+
export const IconOnly: Story = {
|
|
231
|
+
args: {
|
|
232
|
+
appearance: 'primary',
|
|
233
|
+
size: 'md',
|
|
234
|
+
},
|
|
235
|
+
render: (args: Args) => ({
|
|
236
|
+
components: { CpSelectableButton },
|
|
237
|
+
setup() {
|
|
238
|
+
return { args }
|
|
239
|
+
},
|
|
240
|
+
template: `
|
|
241
|
+
<CpSelectableButton v-bind="args">
|
|
242
|
+
<template #leading-icon><CpIcon type="circle" /></template>
|
|
243
|
+
</CpSelectableButton>
|
|
244
|
+
`,
|
|
245
|
+
}),
|
|
246
|
+
}
|
|
247
|
+
|
|
227
248
|
/* -------------------------------------------------------------------------- */
|
|
228
249
|
/* Matrix */
|
|
229
250
|
/* -------------------------------------------------------------------------- */
|