Skip to content

Commit b0c0a50

Browse files
juzserjuzser
authored
Merge pull request #155 from ownego/feat/extra-string-props
Feat/extra string props
2 parents 6d9bafb + d052f5e commit b0c0a50

File tree

16 files changed

+311
-143
lines changed

16 files changed

+311
-143
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/Checkbox/Checkbox.vue‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@ Choice(
77
@mouseover="mouseOver = true",
88
@mouseout="mouseOver = false",
99
)
10-
template(#label, v-if="slots.label")
11-
slot(name="label")
12-
template(#help-text, v-if="slots['help-text']")
13-
slot(name="help-text")
10+
template(#label, v-if="slots.label || label")
11+
slot(v-if="slots.label", name="label")
12+
template(v-else) {{ label }}
13+
template(#help-text, v-if="slots['help-text'] || helpText")
14+
slot(v-if="slots['help-text']", name="help-text")
15+
template(v-else) {{ helpText }}
1416
span(:class="wrapperClassName")
1517
input(
1618
:id="uniqueId",
@@ -58,10 +60,14 @@ interface Props {
5860
ariaControls?: string;
5961
/** Indicates the ID of the element that describes the checkbox */
6062
ariaDescribedBy?: string;
63+
/** Label for the checkbox. This will be overriden by `label` slot. */
64+
label?: string;
6165
/** Visually hide the label */
6266
labelHidden?: boolean;
6367
/** Checkbox is selected. `indeterminate` shows a horizontal line in the checkbox */
6468
checked?: boolean | 'indeterminate';
69+
/** Additional text to aide in use.This will be overriden by `help-text` slot. */
70+
helpText?: string;
6571
/** Disable input */
6672
disabled?: boolean;
6773
/** ID for form input */

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

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,19 @@ import { Checkbox } from '@/polaris-vue';
4949
},
5050
},
5151
},
52+
propLabel: {
53+
name: 'label',
54+
description: 'Label for the checkbox. This will be overriden by `label` slot.',
55+
control: {
56+
type: 'text',
57+
},
58+
table: {
59+
category: 'props',
60+
type: {
61+
summary: 'string',
62+
},
63+
},
64+
},
5265
modelValue: {
5366
description: 'v-model is available for this component, string type should be used with multiple checkbox',
5467
control: {
@@ -116,15 +129,17 @@ export const Template = (args) => ({
116129
setup() { return { args }; },
117130
template: `
118131
<div>
132+
<Checkbox label="Basic Label" helpText="Basic help text" v-model="checkboxValue"/>
119133
<Checkbox v-bind="args" v-model="isChecked">
120-
<template #label>Checkbox label</template>
121-
<template #help-text>Basic help text</template>
134+
<template #label>Dynamic checkbox label</template>
135+
<template #help-text>Dynamic help text</template>
122136
</Checkbox>
123137
<p style="margin-top: 30px">Checked: {{ isChecked }} </p>
124138
</div>`,
125139
data() {
126140
return {
127141
isChecked: false,
142+
checkboxValue: false,
128143
};
129144
},
130145
});
@@ -133,9 +148,10 @@ Template.parameters = {
133148
source: {
134149
code: dedent`
135150
<div>
151+
<Checkbox label="Basic Label" helpText="Basic help text" v-model="checkboxValue"/>
136152
<Checkbox v-model="isChecked">
137-
<template #label>Checkbox label</template>
138-
<template #help-text>Basic help text</template>
153+
<template #label>Dynamic checkbox label</template>
154+
<template #help-text>Dynamic help text</template>
139155
</Checkbox>
140156
<p>Checked: {{ isChecked }} </p>
141157
</div>

‎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 */

0 commit comments

Comments
 (0)