Skip to content

Commit 71f7ed6

Browse files
daragh-king-genesysdaragh-king-genesys
committed
feat(form-field-label-indicator): addd none variant
addd none variant ✅ Closes: COMUI-3409
1 parent f178533 commit 71f7ed6

File tree

21 files changed

+114
-169
lines changed

21 files changed

+114
-169
lines changed

‎changelog.config.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,13 @@ const CHART_COMPONENT_SPECS = require('genesys-spark-chart-components/build/comp
44
const componentSpecs = Object.assign(COMPONENT_SPECS, CHART_COMPONENT_SPECS);
55

66
const getComponentSpec = function () {
7-
const scopeList = ['other'];
8-
for (const [key] of Object.entries(componentSpecs)) {
9-
scopeList.push(key.replace('gux-', ''));
10-
}
11-
return scopeList;
7+
const componentList = Object.keys(componentSpecs).map(key =>
8+
key.replace('gux-', '')
9+
);
10+
const additionalList = ['form-field'];
11+
const scopeList = componentList.concat(additionalList).sort();
12+
13+
return ['other'].concat(scopeList);
1214
};
1315

1416
module.exports = {

‎packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-color/example.html

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -80,17 +80,10 @@ <h2>Examples</h2>
8080
</fieldset>
8181

8282
<fieldset>
83-
<legend>Optional Indicator Mark</legend>
84-
85-
<gux-form-field-color indicator-mark="optional">
86-
<input slot="input" type="color" name="e-1" value="#cc3ebe" />
87-
<label slot="label">Default</label>
88-
</gux-form-field-color>
89-
90-
<gux-form-field-color indicator-mark="optional">
91-
<input slot="input" type="color" name="e-1" value="#cc3ebe" required />
92-
<label slot="label">Default</label>
93-
</gux-form-field-color>
83+
<legend>Indicator Mark</legend>
84+
<a href="gux-form-field-label-indicator.html"
85+
>Click here of usage examples</a
86+
>
9487
</fieldset>
9588
</form>
9689

‎packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-dropdown/example.html

Lines changed: 8 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -186,27 +186,10 @@ <h2>Dropdown (single select)</h2>
186186
</fieldset>
187187

188188
<fieldset>
189-
<legend>Optional Indicator Mark</legend>
190-
<gux-form-field-dropdown indicator-mark="optional">
191-
<gux-dropdown>
192-
<gux-listbox>
193-
<gux-option value="a" disabled>Ant</gux-option>
194-
<gux-option value="b">Bat</gux-option>
195-
<gux-option value="c">Cat</gux-option>
196-
</gux-listbox>
197-
</gux-dropdown>
198-
<label slot="label">Indicator Mark</label>
199-
</gux-form-field-dropdown>
200-
<gux-form-field-dropdown indicator-mark="optional">
201-
<gux-dropdown required>
202-
<gux-listbox>
203-
<gux-option value="a" disabled>Ant</gux-option>
204-
<gux-option value="b">Bat</gux-option>
205-
<gux-option value="c">Cat</gux-option>
206-
</gux-listbox>
207-
</gux-dropdown>
208-
<label slot="label">Required</label>
209-
</gux-form-field-dropdown>
189+
<legend>Indicator Mark</legend>
190+
<a href="gux-form-field-label-indicator.html"
191+
>Click here of usage examples</a
192+
>
210193
</fieldset>
211194

212195
<h2>Dropdown (multi select)</h2>
@@ -388,27 +371,10 @@ <h2>Dropdown (multi select)</h2>
388371
</fieldset>
389372

390373
<fieldset>
391-
<legend>Optional Indicator Mark</legend>
392-
<gux-form-field-dropdown indicator-mark="optional">
393-
<gux-dropdown-multi>
394-
<gux-listbox>
395-
<gux-option-multi value="a" disabled>Ant</gux-option-multi>
396-
<gux-option-multi value="b">Bat</gux-option-multi>
397-
<gux-option-multi value="c">Cat</gux-option-multi>
398-
</gux-listbox>
399-
</gux-dropdown-multi>
400-
<label slot="label">Indicator Mark</label>
401-
</gux-form-field-dropdown>
402-
<gux-form-field-dropdown indicator-mark="optional">
403-
<gux-dropdown-multi required>
404-
<gux-listbox>
405-
<gux-option-multi value="a" disabled>Ant</gux-option-multi>
406-
<gux-option-multi value="b">Bat</gux-option-multi>
407-
<gux-option-multi value="c">Cat</gux-option-multi>
408-
</gux-listbox>
409-
</gux-dropdown-multi>
410-
<label slot="label">Required</label>
411-
</gux-form-field-dropdown>
374+
<legend>Indicator Mark</legend>
375+
<a href="gux-form-field-label-indicator.html"
376+
>Click here of usage examples</a
377+
>
412378
</fieldset>
413379
</form>
414380

‎packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-number/example.html

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -122,16 +122,10 @@ <h2>Examples</h2>
122122
</fieldset>
123123

124124
<fieldset>
125-
<legend>Optional Indicator Mark</legend>
126-
<gux-form-field-number indicator-mark="optional">
127-
<input slot="input" type="number" name="lp-1" value="10" />
128-
<label slot="label">Indicator Mark</label>
129-
</gux-form-field-number>
130-
131-
<gux-form-field-number indicator-mark="optional">
132-
<input slot="input" type="number" name="lp-1" value="10" required />
133-
<label slot="label">Indicator Mark</label>
134-
</gux-form-field-number>
125+
<legend>Indicator Mark</legend>
126+
<a href="gux-form-field-label-indicator.html"
127+
>Click here of usage examples</a
128+
>
135129
</fieldset>
136130

137131
<fieldset>

‎packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-range/example.html

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -131,15 +131,9 @@ <h2>Examples</h2>
131131
</fieldset>
132132

133133
<fieldset>
134-
<legend>Optional Indicator Mark</legend>
135-
<gux-form-field-range indicator-mark="optional">
136-
<input slot="input" type="range" name="du-1" />
137-
<label slot="label">Indicator Mark</label>
138-
</gux-form-field-range>
139-
140-
<gux-form-field-range indicator-mark="optional">
141-
<input slot="input" type="range" name="du-1" required />
142-
<label slot="label">Indicator Mark</label>
143-
</gux-form-field-range>
134+
<legend>Indicator Mark</legend>
135+
<a href="gux-form-field-label-indicator.html"
136+
>Click here of usage examples</a
137+
>
144138
</fieldset>
145139
</form>

‎packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-search/example.html

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -85,17 +85,10 @@ <h2>Examples</h2>
8585
</fieldset>
8686

8787
<fieldset>
88-
<legend>Optional Indicator Mark</legend>
89-
90-
<gux-form-field-search indicator-mark="optional">
91-
<input slot="input" type="search" name="a-1" />
92-
<label slot="label">Indicator Mark</label>
93-
</gux-form-field-search>
94-
95-
<gux-form-field-search indicator-mark="optional">
96-
<input slot="input" type="search" name="a-2" required />
97-
<label slot="label">Indicator Mark</label>
98-
</gux-form-field-search>
88+
<legend>Indicator Mark</legend>
89+
<a href="gux-form-field-label-indicator.html"
90+
>Click here of usage examples</a
91+
>
9992
</fieldset>
10093

10194
<fieldset>

‎packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-select/example.html

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -128,25 +128,10 @@ <h2>Examples</h2>
128128
</fieldset>
129129

130130
<fieldset>
131-
<legend>Optional Indicator Mark</legend>
132-
133-
<gux-form-field-select indicator-mark="optional">
134-
<select slot="input" name="e-1">
135-
<option value="option1">Option 1</option>
136-
<option value="option2">Option 2</option>
137-
<option value="option3">Option 3</option>
138-
</select>
139-
<label slot="label">Indicator Mark</label>
140-
</gux-form-field-select>
141-
142-
<gux-form-field-select indicator-mark="optional">
143-
<select slot="input" name="e-1" required>
144-
<option value="option1">Option 1</option>
145-
<option value="option2">Option 2</option>
146-
<option value="option3">Option 3</option>
147-
</select>
148-
<label slot="label">Indicator Mark</label>
149-
</gux-form-field-select>
131+
<legend>Indicator Mark</legend>
132+
<a href="gux-form-field-label-indicator.html"
133+
>Click here of usage examples</a
134+
>
150135
</fieldset>
151136
</form>
152137

‎packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/example.html

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -225,17 +225,10 @@ <h2>Examples</h2>
225225
</fieldset>
226226

227227
<fieldset>
228-
<legend>Optional Indicator Mark</legend>
229-
230-
<gux-form-field-text-like indicator-mark="optional">
231-
<input slot="input" type="text" name="a-1" />
232-
<label slot="label">Indicator Mark</label>
233-
</gux-form-field-text-like>
234-
235-
<gux-form-field-text-like indicator-mark="optional">
236-
<input slot="input" type="text" name="a-2" required />
237-
<label slot="label">Indicator Mark</label>
238-
</gux-form-field-text-like>
228+
<legend>Indicator Mark</legend>
229+
<a href="gux-form-field-label-indicator.html"
230+
>Click here of usage examples</a
231+
>
239232
</fieldset>
240233
</form>
241234

‎packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-textarea/example.html

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -112,17 +112,10 @@ <h2>Examples</h2>
112112
</fieldset>
113113

114114
<fieldset>
115-
<legend>Optional Indicator Mark</legend>
116-
117-
<gux-form-field-textarea indicator-mark="optional">
118-
<textarea slot="input" name="textarea"></textarea>
119-
<label slot="label">Indicator Mark</label>
120-
</gux-form-field-textarea>
121-
122-
<gux-form-field-textarea indicator-mark="optional">
123-
<textarea slot="input" name="textarea" required></textarea>
124-
<label slot="label">Indicator Mark</label>
125-
</gux-form-field-textarea>
115+
<legend>Indicator Mark</legend>
116+
<a href="gux-form-field-label-indicator.html"
117+
>Click here of usage examples</a
118+
>
126119
</fieldset>
127120
</form>
128121

‎packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-time-picker/example.html

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -96,11 +96,10 @@ <h2>Examples</h2>
9696
</gux-form-field-time-picker>
9797
</fieldset>
9898
<fieldset>
99-
<legend>Optional Indicator Mark</legend>
100-
<gux-form-field-time-picker indicator-mark="optional">
101-
<gux-time-picker value="09:00"></gux-time-picker>
102-
<label slot="label">Select Time</label>
103-
</gux-form-field-time-picker>
99+
<legend>Indicator Mark</legend>
100+
<a href="gux-form-field-label-indicator.html"
101+
>Click here of usage examples</a
102+
>
104103
</fieldset>
105104
</form>
106105

‎packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-time-zone-picker/example.html

Lines changed: 3 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -105,34 +105,10 @@ <h2>Examples</h2>
105105
</fieldset>
106106

107107
<fieldset>
108-
<legend>Optional Indicator Mark</legend>
109-
<gux-form-field-time-zone-picker
110-
label-position="above"
111-
indicator-mark="optional"
108+
<legend>Indicator Mark</legend>
109+
<a href="gux-form-field-label-indicator.html"
110+
>Click here of usage examples</a
112111
>
113-
<gux-time-zone-picker-beta
114-
value="Etc/GMT+1"
115-
workspace-default="Etc/GMT"
116-
local-default="America/Detroit"
117-
>
118-
</gux-time-zone-picker-beta>
119-
<label slot="label">Select Time Zone</label>
120-
</gux-form-field-time-zone-picker>
121-
<div class="gap-above">
122-
<gux-form-field-time-zone-picker
123-
label-position="above"
124-
indicator-mark="optional"
125-
>
126-
<gux-time-zone-picker-beta
127-
value="Etc/GMT+1"
128-
workspace-default="Etc/GMT"
129-
local-default="America/Detroit"
130-
required
131-
>
132-
</gux-time-zone-picker-beta>
133-
<label slot="label">Select Time Zone</label>
134-
</gux-form-field-time-zone-picker>
135-
</div>
136112
</fieldset>
137113
</form>
138114

‎packages/genesys-spark-components/src/components/stable/gux-form-field/gux-form-field.types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
export type GuxFormFieldLabelPosition = 'above' | 'beside' | 'screenreader';
22

3-
export type GuxFormFieldIndicatorMark = 'required' | 'optional';
3+
export type GuxFormFieldIndicatorMark = 'required' | 'optional' | 'none';

‎packages/genesys-spark-components/src/components/stable/gux-form-field/helper-components/gux-form-field-label-indicator/example.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<h1>gux-form-field Indicator Mark</h1>
2+
3+
<h2>Examples</h2>
4+
<form onchange="notify(event)" oninput="notify(event)">
5+
<fieldset>
6+
<legend>Indicator Mark</legend>
7+
8+
<h3>Default</h3>
9+
<gux-form-field-textarea>
10+
<textarea slot="input" name="textarea" required></textarea>
11+
<label slot="label">Required filed</label>
12+
</gux-form-field-textarea>
13+
14+
<gux-form-field-textarea>
15+
<textarea slot="input" name="textarea"></textarea>
16+
<label slot="label">Optional filed</label>
17+
</gux-form-field-textarea>
18+
19+
<h3>Required</h3>
20+
<gux-form-field-textarea indicator-mark="required">
21+
<textarea slot="input" name="textarea" required></textarea>
22+
<label slot="label">Required filed</label>
23+
</gux-form-field-textarea>
24+
25+
<gux-form-field-textarea indicator-mark="required">
26+
<textarea slot="input" name="textarea"></textarea>
27+
<label slot="label">Optional filed</label>
28+
</gux-form-field-textarea>
29+
30+
<h3>Optional</h3>
31+
<gux-form-field-textarea indicator-mark="optional">
32+
<textarea slot="input" name="textarea" required></textarea>
33+
<label slot="label">Required filed</label>
34+
</gux-form-field-textarea>
35+
36+
<gux-form-field-textarea indicator-mark="optional">
37+
<textarea slot="input" name="textarea"></textarea>
38+
<label slot="label">Optional filed</label>
39+
</gux-form-field-textarea>
40+
41+
<h3>None</h3>
42+
<gux-form-field-textarea indicator-mark="none">
43+
<textarea slot="input" name="textarea" required></textarea>
44+
<label slot="label">Required filed</label>
45+
</gux-form-field-textarea>
46+
47+
<gux-form-field-textarea indicator-mark="none">
48+
<textarea slot="input" name="textarea"></textarea>
49+
<label slot="label">Optional filed</label>
50+
</gux-form-field-textarea>
51+
</fieldset>
52+
</form>
53+
54+
<style>
55+
gux-form-field-textarea {
56+
margin: 10px;
57+
}
58+
</style>

‎packages/genesys-spark-components/src/components/stable/gux-form-field/helper-components/gux-form-field-optional-indicator/gux-form-field-label-indicator.scss renamed to ‎packages/genesys-spark-components/src/components/stable/gux-form-field/helper-components/gux-form-field-label-indicator/gux-form-field-label-indicator.scss

File renamed without changes.

‎packages/genesys-spark-components/src/components/stable/gux-form-field/helper-components/gux-form-field-optional-indicator/gux-form-field-label-indicator.tsx renamed to ‎packages/genesys-spark-components/src/components/stable/gux-form-field/helper-components/gux-form-field-label-indicator/gux-form-field-label-indicator.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { trackComponent } from '@utils/tracking/usage';
44

55
import { buildI18nForComponent, GetI18nValue } from '../../../../../i18n';
66

7-
import { GuxFormFieldLabelIndicatorVariant } from './gux-form-field-label-indicator.types';
7+
import { GuxFormFieldIndicatorMark } from '../../gux-form-field.types';
88

99
import translationResources from './i18n/en.json';
1010

@@ -19,7 +19,7 @@ export class GuxFormFieldLabelIndicator {
1919
private root: HTMLElement;
2020

2121
@Prop()
22-
variant: GuxFormFieldLabelIndicatorVariant = 'required';
22+
variant: GuxFormFieldIndicatorMark = 'required';
2323

2424
@Prop()
2525
required: boolean = false;

‎packages/genesys-spark-components/src/components/stable/gux-form-field/helper-components/gux-form-field-optional-indicator/i18n/en.json renamed to ‎packages/genesys-spark-components/src/components/stable/gux-form-field/helper-components/gux-form-field-label-indicator/i18n/en.json

File renamed without changes.

‎packages/genesys-spark-components/src/components/stable/gux-form-field/helper-components/gux-form-field-optional-indicator/readme.md renamed to ‎packages/genesys-spark-components/src/components/stable/gux-form-field/helper-components/gux-form-field-label-indicator/readme.md

File renamed without changes.

‎packages/genesys-spark-components/src/components/stable/gux-form-field/helper-components/gux-form-field-optional-indicator/tests/__snapshots__/gux-form-field-label-indicator.spec.ts.snap renamed to ‎packages/genesys-spark-components/src/components/stable/gux-form-field/helper-components/gux-form-field-label-indicator/tests/__snapshots__/gux-form-field-label-indicator.spec.ts.snap

File renamed without changes.

‎packages/genesys-spark-components/src/components/stable/gux-form-field/helper-components/gux-form-field-optional-indicator/tests/gux-form-field-label-indicator.spec.ts renamed to ‎packages/genesys-spark-components/src/components/stable/gux-form-field/helper-components/gux-form-field-label-indicator/tests/gux-form-field-label-indicator.spec.ts

File renamed without changes.

‎packages/genesys-spark-components/src/components/stable/gux-form-field/helper-components/gux-form-field-optional-indicator/gux-form-field-label-indicator.types.ts

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎packages/genesys-spark-components/src/i18n/translations/en.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -97,13 +97,13 @@
9797
"gux-form-field-input-clear-button": {
9898
"clear": "Clear"
9999
},
100+
"gux-form-field-label-indicator": {
101+
"optional": "optional"
102+
},
100103
"gux-form-field-number": {
101104
"increment": "Increment",
102105
"decrement": "Decrement"
103106
},
104-
"gux-form-field-optional-indicator": {
105-
"optional": "optional"
106-
},
107107
"gux-form-field-phone": {
108108
"required": "Required"
109109
},

0 commit comments

Comments
 (0)