Skip to content

Commit d052f5e

Browse files
juzserjuzser
committed
Update: optimize & add props as fallback for slot
1 parent 6ea6d90 commit d052f5e

File tree

14 files changed

+281
-135
lines changed

14 files changed

+281
-135
lines changed

‎src/components/Card/README.stories.mdx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,7 @@ export const TemplateSimple = (args) => ({
3333
components: { Card },
3434
setup() { return { args }; },
3535
template: `
36-
<Card sectioned :actions="[{content: 'Add variant'}]">
37-
<template #title>Variants</template>
36+
<Card sectioned title="Variants" :actions="[{content: 'Add variant'}]">
3837
<p>Add variants if this product comes in multiple versions, like different sizes or colors.</p>
3938
</Card>
4039
`,
@@ -162,8 +161,7 @@ Cards are used to group similar concepts and tasks together to make Shopify easi
162161
source: {
163162
state: 'close',
164163
code: dedent`
165-
<Card sectioned :actions="[{content: 'Add variant'}]">
166-
<template #title>Variants</template>
164+
<Card sectioned title="Variants" :actions="[{content: 'Add variant'}]">
167165
<p>Add variants if this product comes in multiple versions, like different sizes or colors.</p>
168166
</Card>`,
169167
},

‎src/components/Choice/Choice.vue‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,16 @@ div(v-if="error && typeof error !== 'boolean' || $slots['help-text']")
99
span(:class="styles.Control")
1010
slot
1111
span(:class="styles.Label")
12-
slot(name="label")
12+
slot(v-if="$slots.label", name="label")
13+
template(v-else-if="label") {{ label }}
1314
div(:class="styles.Descriptions")
1415
div(
15-
v-if="$slots['help-text']",
16+
v-if="$slots['help-text'] || helpText",
1617
:id="helpTextID(id)",
1718
:class="styles.HelpText",
1819
)
19-
slot(name="help-text")
20+
slot(v-if="$slots['help-text']", name="help-text")
21+
template(v-else) {{ helpText }}
2022
InlineError(
2123
v-if="(error && typeof error !== 'boolean')",
2224
:fieldID="id",
@@ -32,7 +34,8 @@ label(
3234
span(:class="styles.Control")
3335
slot
3436
span(:class="styles.Label")
35-
slot(name="label")
37+
slot(v-if="$slots.label", name="label")
38+
template(v-else-if="label") {{ label }}
3639
</template>
3740

3841
<script setup lang="ts">
@@ -46,12 +49,16 @@ import { InlineError } from '../InlineError';
4649
interface Props {
4750
/** A unique identifier for the choice */
4851
id: string;
52+
/** Label for the choice */
53+
label?: string;
4954
/** Whether the associated form control is disabled */
5055
disabled?: boolean;
5156
/** Display an error message */
5257
error?: Error;
5358
/** Visually hide the label */
5459
labelHidden?: boolean;
60+
/** Additional text to aide in use */
61+
helpText?: string;
5562
}
5663
5764
const props = defineProps<Props>();

‎src/components/Combobox/components/TextField/TextField.vue‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ PolarisTextField(
99
:ariaActiveDescendant="activeOptionId",
1010
:ariaControls="listboxId",
1111
:ariaExpanded="expanded",
12+
:label="label",
13+
:helpText="helpText",
14+
:suffix="suffix",
15+
:prefix="prefix",
1216
@focus="handleFocus",
1317
@blur="handleBlur",
1418
@change="handleChange",
@@ -70,6 +74,14 @@ interface TextFieldProps {
7074
placeholder?: string;
7175
/** Initial value for the input */
7276
modelValue?: string;
77+
/** Text to display before value */
78+
prefix?: string;
79+
/** Text to display after value */
80+
suffix?: string;
81+
/** Additional hint text to display */
82+
helpText?: string;
83+
/** Label for the input */
84+
label?: string;
7385
/** Adds an action to the label */
7486
labelAction?: LabelledProps['action'];
7587
/** Visually hide the label */

‎src/components/Filters/Filters.vue‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -194,12 +194,13 @@ div(:class="styles.Filters")
194194
@remove="() => { filter.onRemove(filter.key) }",
195195
) {{ filter.label }}
196196
div(
197-
v-if="hasSlot(slots['help-text'])",
197+
v-if="hasSlot(slots['help-text']) || helpText",
198198
id="FiltersHelpText",
199199
:class="styles.HelpText",
200200
)
201201
TextStyle(variation="subdued")
202-
slot(name="help-text")
202+
slot(v-if="hasSlot(slots['help-text'])", name="help-text")
203+
template(v-else) {{ helpText }}
203204
template(v-if="open")
204205
ScrollLock
205206
div(:class="styles.Backdrop", @click="closeFilters")
@@ -257,6 +258,8 @@ interface FiltersProps {
257258
appliedFilters?: AppliedFilterInterface[];
258259
/** Disable all filters */
259260
disabled?: boolean;
261+
/** Additional hint text to display below the filters. This prop will be overriden by `help-text` slot. */
262+
helpText?: string;
260263
/** Hide tags for applied filters */
261264
hideTags?: boolean;
262265
/** Hide the query field */

‎src/components/FormLayout/components/Group/Group.vue‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@ div(
66
:aria-describedby="helpTextId",
77
)
88
div(
9-
v-if="slots.title",
9+
v-if="slots.title || title",
1010
:id="titleId",
1111
:class="styles.Title",
1212
)
13-
slot(name="title")
13+
slot(v-if="slots.title", name="title")
14+
template(v-else) {{ title }}
1415
div(:class="styles.Items")
1516
template(v-if="slots.default")
1617
Item(
@@ -20,11 +21,12 @@ div(
2021
component(:is="item")
2122
slot(v-else)
2223
div(
23-
v-if="slots['help-text']",
24+
v-if="slots['help-text'] || helpText",
2425
:id="helpTextId",
2526
:class="styles.HelpText",
2627
)
27-
slot(name="help-text")
28+
slot(v-if="slots['help-text']", name="help-text")
29+
template(v-else) {{ helpText }}
2830
</template>
2931

3032
<script setup lang="ts">
@@ -39,6 +41,8 @@ import { UseUniqueId } from '@/use';
3941
*/
4042
interface Props {
4143
condensed?: boolean;
44+
helpText?: string;
45+
title?: string;
4246
}
4347
4448
const props = defineProps<Props>();

‎src/components/Labelled/Labelled.vue‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
<template lang="pug">
22
div(:class="className")
3-
div(v-if="$slots.label", :class="styles.LabelWrapper")
3+
div(v-if="$slots.label || label", :class="styles.LabelWrapper")
44
Label(
55
:id="id",
66
:requiredIndicator="requiredIndicator",
77
:hidden="false",
88
v-bind="$attrs",
99
)
10-
slot(name="label")
10+
slot(v-if="$slots.label", name="label")
11+
template(v-else) {{ label }}
1112
div(
1213
v-if="action",
1314
:class="styles.Action"
@@ -31,11 +32,12 @@ div(:class="className")
3132
:is="error",
3233
)
3334
div(
34-
v-if="$slots['help-text']",
35+
v-if="$slots['help-text'] || helpText",
3536
:class="styles.HelpText",
3637
:id="helpTextID(id)",
3738
)
38-
slot(name="help-text")
39+
slot(v-if="$slots['help-text']", name="help-text")
40+
template(v-else) {{ helpText }}
3941
</template>
4042

4143
<script setup lang="ts">
@@ -60,6 +62,10 @@ interface LabelledProps {
6062
labelHidden?: boolean;
6163
/** Visual required indicator for the label */
6264
requiredIndicator?: boolean;
65+
/** Text for the label */
66+
label?: string;
67+
/** Additional hint text to display */
68+
helpText?: string;
6369
}
6470
6571
const props = defineProps<LabelledProps>();

‎src/components/RadioButton/README.stories.mdx‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,17 @@ import { RadioButton } from '@/polaris-vue';
4848
},
4949
},
5050
},
51+
propLabel: {
52+
name: 'label',
53+
description: 'Label for the radio button. This prop will be overriden by `label` slot.',
54+
control: { type: 'text' },
55+
table: {
56+
category: 'props',
57+
type: {
58+
summary: 'string',
59+
},
60+
},
61+
},
5162
label: {
5263
description: 'Label for the radio button',
5364
control: { disable: true },
@@ -79,10 +90,9 @@ export const Template = (args) => ({
7990
name="demoRadioButton"
8091
value="disabled"
8192
v-model="demoValue"
82-
>
83-
<template #label>Accounts are disabled</template>
84-
<template #help-text>Customers will only be able to check out as guests.</template>
85-
</RadioButton>
93+
label="Accounts are disabled"
94+
helpText="Customers will only be able to check out as guests"
95+
/>
8696
<RadioButton
8797
v-bind="args"
8898
name="demoRadioButton"
@@ -109,11 +119,11 @@ Template.parameters = {
109119
name="demoRadioButton"
110120
value="disabled"
111121
v-model="demoValue"
112-
>
113-
<template #label>Accounts are disabled</template>
114-
<template #help-text>Customers will only be able to check out as guests.</template>
115-
</RadioButton>
122+
label="Accounts are disabled"
123+
helpText="Customers will only be able to check out as guests"
124+
/>
116125
<RadioButton
126+
v-bind="args"
117127
name="demoRadioButton"
118128
value="optional"
119129
v-model="demoValue"

‎src/components/RadioButton/RadioButton.vue‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,12 @@ Choice(
66
@mouseover="mouseOver = true",
77
@mouseout="mouseOver = false",
88
)
9-
template(#label, v-if="slots.label")
10-
slot(name="label")
11-
template(#help-text, v-if="slots['help-text']")
12-
slot(name="help-text")
9+
template(#label, v-if="hasSlot(slots.label) || label")
10+
slot(v-if="hasSlot(slots.label)", name="label")
11+
template(v-else) {{ label }}
12+
template(#help-text, v-if="hasSlot(slots['help-text']) || helpText")
13+
slot(v-if="hasSlot(slots['help-text'])", name="help-text")
14+
template(v-else) {{ helpText }}
1315
span(:class="styles.RadioButton")
1416
input(
1517
:id="uniqueId",
@@ -32,17 +34,22 @@ Choice(
3234
import { ref, computed, useSlots } from 'vue';
3335
import { classNames } from 'polaris/polaris-react/src/utilities/css';
3436
import styles from '@/classes/RadioButton.json';
37+
import { hasSlot } from '@/utilities/has-slot';
3538
import { UseUniqueId } from '@/use';
3639
import { Choice } from '../Choice';
3740
import { helpTextID } from '../Choice/utils';
3841
3942
interface Props {
4043
/** Indicates the ID of the element that describes the the radio button */
4144
ariaDescribedBy?: string;
45+
/** Label for the radio button */
46+
label?: string;
4247
/** Visually hide the label */
4348
labelHidden?: boolean;
4449
/** Radio button is selected */
4550
checked?: boolean;
51+
/** Additional text to aid in use. This prop will be overriden by `help-text` slot. */
52+
helpText?: string;
4653
/** Disable input */
4754
disabled?: boolean;
4855
/** ID for form input */

‎src/components/RangeSlider/README.stories.mdx‎

Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,24 @@ import dedent from "ts-dedent";
3232
control: { disable: true },
3333
table: { type: { summary: null } },
3434
},
35+
propLabel: {
36+
name: 'label',
37+
description: 'Label for the range input. This prop will be overriden by `label` slot.',
38+
control: { type: 'text' },
39+
table: { category: 'props', type: { summary: 'string' } },
40+
},
41+
propPrefix: {
42+
name: 'prefix',
43+
description: 'Element to display before the input. This prop will be overriden by `prefix` slot.',
44+
control: { disable: true },
45+
table: { category: 'props', type: { summary: 'string' } },
46+
},
47+
propSuffix: {
48+
name: 'suffix',
49+
description: 'Element to display after the input. This prop will be overriden by `suffix` slot.',
50+
control: { disable: true },
51+
table: { category: 'props', type: { summary: 'string' } },
52+
},
3553
modelValue: {
3654
table: { type: {
3755
summary: 'number | [number, number]',
@@ -80,10 +98,15 @@ export const SlotTemplate = (args) => ({
8098
template: `
8199
<Card sectioned>
82100
<template #title>Text color</template>
83-
<RangeSlider v-model="rangeValue" v-bind="args">
84-
<template #prefix>Hue</template>
85-
<template #suffix>{{ rangeValue }}</template>
86-
</RangeSlider>
101+
<RangeSlider
102+
v-model="rangeValue"
103+
:min="0"
104+
:max="360"
105+
label="Hue color mix"
106+
output
107+
prefix="Hue"
108+
:suffix="rangeValue"
109+
/>
87110
</Card>
88111
`,
89112
});
@@ -105,10 +128,15 @@ export const SlotTemplate = (args) => ({
105128
code: dedent`
106129
<Card sectioned>
107130
<template #title>Text color</template>
108-
<RangeSlider v-model="rangeValue" :min="0" :max="360" label="Hue color mix" output>
109-
<template #prefix>Hue</template>
110-
<template #suffix>{{ rangeValue }}</template>
111-
</RangeSlider>
131+
<RangeSlider
132+
v-model="rangeValue"
133+
:min="0"
134+
:max="360"
135+
label="Hue color mix"
136+
output
137+
prefix="Hue"
138+
:suffix="rangeValue"
139+
/>
112140
</Card>\n
113141
<script setup>
114142
const rangeValue = ref(30);

0 commit comments

Comments
 (0)