@citizenplane/pimp 16.3.3 → 16.3.5
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
|
@@ -13,7 +13,9 @@
|
|
|
13
13
|
<slot name="leading-icon" />
|
|
14
14
|
</span>
|
|
15
15
|
<span v-if="showText" class="cpSelectableButton__label">
|
|
16
|
-
|
|
16
|
+
<slot>
|
|
17
|
+
{{ label }}
|
|
18
|
+
</slot>
|
|
17
19
|
</span>
|
|
18
20
|
<span v-if="showTrailingIcon" class="cpSelectableButton__icon cpSelectableButton__icon--isAfter">
|
|
19
21
|
<slot name="trailing-icon" />
|
|
@@ -51,7 +53,7 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
51
53
|
const slots = useSlots()
|
|
52
54
|
|
|
53
55
|
const showLeadingIcon = computed(() => !!slots['leading-icon'])
|
|
54
|
-
const showText = computed(() => !!props.label)
|
|
56
|
+
const showText = computed(() => !!props.label || !!slots.default)
|
|
55
57
|
const showTrailingIcon = computed(() => !!slots['trailing-icon'])
|
|
56
58
|
const isIconOnly = computed(() => !props.label)
|
|
57
59
|
|
|
@@ -133,7 +135,7 @@ const dynamicClasses = computed(() => {
|
|
|
133
135
|
}
|
|
134
136
|
|
|
135
137
|
--cp-selectable-border-padding: var(--cp-spacing-sm);
|
|
136
|
-
--cp-selectable-border-radius: var(--cp-radius-
|
|
138
|
+
--cp-selectable-border-radius: var(--cp-radius-md);
|
|
137
139
|
--cp-selectable-font-size: var(--cp-text-size-md);
|
|
138
140
|
--cp-selectable-line-height: var(--cp-line-height-md);
|
|
139
141
|
--cp-selectable-body-padding: var(--cp-spacing-sm) var(--cp-spacing-sm-md);
|
|
@@ -157,7 +159,7 @@ const dynamicClasses = computed(() => {
|
|
|
157
159
|
|
|
158
160
|
&--sm {
|
|
159
161
|
--cp-selectable-border-padding: var(--cp-spacing-sm);
|
|
160
|
-
--cp-selectable-border-radius: var(--cp-radius-
|
|
162
|
+
--cp-selectable-border-radius: var(--cp-radius-md);
|
|
161
163
|
--cp-selectable-font-size: var(--cp-text-size-sm);
|
|
162
164
|
--cp-selectable-line-height: var(--cp-line-height-sm);
|
|
163
165
|
--cp-selectable-body-padding: var(--cp-spacing-xs) var(--cp-spacing-sm);
|
|
@@ -172,7 +174,7 @@ const dynamicClasses = computed(() => {
|
|
|
172
174
|
|
|
173
175
|
&--xs {
|
|
174
176
|
--cp-selectable-border-padding: var(--cp-spacing-xs);
|
|
175
|
-
--cp-selectable-border-radius: var(--cp-radius-
|
|
177
|
+
--cp-selectable-border-radius: var(--cp-radius-md);
|
|
176
178
|
--cp-selectable-font-size: var(--cp-text-size-sm);
|
|
177
179
|
--cp-selectable-line-height: var(--cp-line-height-sm);
|
|
178
180
|
--cp-selectable-body-padding: var(--cp-spacing-xs) var(--cp-spacing-sm);
|
|
@@ -174,7 +174,6 @@ export const WithIcons: Story = {
|
|
|
174
174
|
args: {
|
|
175
175
|
appearance: 'primary',
|
|
176
176
|
size: 'md',
|
|
177
|
-
label: 'Label',
|
|
178
177
|
},
|
|
179
178
|
render: (args: Args) => ({
|
|
180
179
|
components: { CpSelectableButton },
|
|
@@ -186,6 +185,7 @@ export const WithIcons: Story = {
|
|
|
186
185
|
<template #leading-icon>
|
|
187
186
|
<CpIcon type="circle" />
|
|
188
187
|
</template>
|
|
188
|
+
Custom label
|
|
189
189
|
<template #trailing-icon>
|
|
190
190
|
<CpIcon type="circle" />
|
|
191
191
|
</template>
|