Skip to content

Commit

Permalink
feat(form-field-label-indicator): addd none variant
Browse files Browse the repository at this point in the history 
addd none variant

✅ Closes: COMUI-3409
  • Loading branch information
@daragh-king-genesys
daragh-king-genesys committed Feb 4, 2025
1 parent aa7a8c6 commit 0f1a95f
Show file tree
Hide file tree
Showing 21 changed files with 114 additions and 169 deletions.
12 changes: 7 additions & 5 deletions changelog.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,13 @@ const CHART_COMPONENT_SPECS = require('genesys-spark-chart-components/build/comp
const componentSpecs = Object.assign(COMPONENT_SPECS, CHART_COMPONENT_SPECS);

const getComponentSpec = function () {
const scopeList = ['other'];
for (const [key] of Object.entries(componentSpecs)) {
scopeList.push(key.replace('gux-', ''));
}
return scopeList;
const componentList = Object.keys(componentSpecs).map(key =>
key.replace('gux-', '')
);
const additionalList = ['form-field'];
const scopeList = componentList.concat(additionalList).sort();

return ['other'].concat(scopeList);
};

module.exports = {
Expand Down
15 changes: 4 additions & 11 deletions ...ponents/src/components/stable/gux-form-field/components/gux-form-field-color/example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,17 +80,10 @@ <h2>Examples</h2>
</fieldset>

<fieldset>
<legend>Optional Indicator Mark</legend>

<gux-form-field-color indicator-mark="optional">
<input slot="input" type="color" name="e-1" value="#cc3ebe" />
<label slot="label">Default</label>
</gux-form-field-color>

<gux-form-field-color indicator-mark="optional">
<input slot="input" type="color" name="e-1" value="#cc3ebe" required />
<label slot="label">Default</label>
</gux-form-field-color>
<legend>Indicator Mark</legend>
<a href="gux-form-field-label-indicator.html"
>Click here for usage examples</a
>
</fieldset>
</form>

Expand Down
50 changes: 8 additions & 42 deletions ...ents/src/components/stable/gux-form-field/components/gux-form-field-dropdown/example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,27 +186,10 @@ <h2>Dropdown (single select)</h2>
</fieldset>

<fieldset>
<legend>Optional Indicator Mark</legend>
<gux-form-field-dropdown indicator-mark="optional">
<gux-dropdown>
<gux-listbox>
<gux-option value="a" disabled>Ant</gux-option>
<gux-option value="b">Bat</gux-option>
<gux-option value="c">Cat</gux-option>
</gux-listbox>
</gux-dropdown>
<label slot="label">Indicator Mark</label>
</gux-form-field-dropdown>
<gux-form-field-dropdown indicator-mark="optional">
<gux-dropdown required>
<gux-listbox>
<gux-option value="a" disabled>Ant</gux-option>
<gux-option value="b">Bat</gux-option>
<gux-option value="c">Cat</gux-option>
</gux-listbox>
</gux-dropdown>
<label slot="label">Required</label>
</gux-form-field-dropdown>
<legend>Indicator Mark</legend>
<a href="gux-form-field-label-indicator.html"
>Click here for usage examples</a
>
</fieldset>

<h2>Dropdown (multi select)</h2>
Expand Down Expand Up @@ -388,27 +371,10 @@ <h2>Dropdown (multi select)</h2>
</fieldset>

<fieldset>
<legend>Optional Indicator Mark</legend>
<gux-form-field-dropdown indicator-mark="optional">
<gux-dropdown-multi>
<gux-listbox>
<gux-option-multi value="a" disabled>Ant</gux-option-multi>
<gux-option-multi value="b">Bat</gux-option-multi>
<gux-option-multi value="c">Cat</gux-option-multi>
</gux-listbox>
</gux-dropdown-multi>
<label slot="label">Indicator Mark</label>
</gux-form-field-dropdown>
<gux-form-field-dropdown indicator-mark="optional">
<gux-dropdown-multi required>
<gux-listbox>
<gux-option-multi value="a" disabled>Ant</gux-option-multi>
<gux-option-multi value="b">Bat</gux-option-multi>
<gux-option-multi value="c">Cat</gux-option-multi>
</gux-listbox>
</gux-dropdown-multi>
<label slot="label">Required</label>
</gux-form-field-dropdown>
<legend>Indicator Mark</legend>
<a href="gux-form-field-label-indicator.html"
>Click here for usage examples</a
>
</fieldset>
</form>

Expand Down
14 changes: 4 additions & 10 deletions ...onents/src/components/stable/gux-form-field/components/gux-form-field-number/example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,16 +122,10 @@ <h2>Examples</h2>
</fieldset>

<fieldset>
<legend>Optional Indicator Mark</legend>
<gux-form-field-number indicator-mark="optional">
<input slot="input" type="number" name="lp-1" value="10" />
<label slot="label">Indicator Mark</label>
</gux-form-field-number>

<gux-form-field-number indicator-mark="optional">
<input slot="input" type="number" name="lp-1" value="10" required />
<label slot="label">Indicator Mark</label>
</gux-form-field-number>
<legend>Indicator Mark</legend>
<a href="gux-form-field-label-indicator.html"
>Click here for usage examples</a
>
</fieldset>

<fieldset>
Expand Down
14 changes: 4 additions & 10 deletions ...ponents/src/components/stable/gux-form-field/components/gux-form-field-range/example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,15 +131,9 @@ <h2>Examples</h2>
</fieldset>

<fieldset>
<legend>Optional Indicator Mark</legend>
<gux-form-field-range indicator-mark="optional">
<input slot="input" type="range" name="du-1" />
<label slot="label">Indicator Mark</label>
</gux-form-field-range>

<gux-form-field-range indicator-mark="optional">
<input slot="input" type="range" name="du-1" required />
<label slot="label">Indicator Mark</label>
</gux-form-field-range>
<legend>Indicator Mark</legend>
<a href="gux-form-field-label-indicator.html"
>Click here for usage examples</a
>
</fieldset>
</form>
15 changes: 4 additions & 11 deletions ...onents/src/components/stable/gux-form-field/components/gux-form-field-search/example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,17 +85,10 @@ <h2>Examples</h2>
</fieldset>

<fieldset>
<legend>Optional Indicator Mark</legend>

<gux-form-field-search indicator-mark="optional">
<input slot="input" type="search" name="a-1" />
<label slot="label">Indicator Mark</label>
</gux-form-field-search>

<gux-form-field-search indicator-mark="optional">
<input slot="input" type="search" name="a-2" required />
<label slot="label">Indicator Mark</label>
</gux-form-field-search>
<legend>Indicator Mark</legend>
<a href="gux-form-field-label-indicator.html"
>Click here for usage examples</a
>
</fieldset>

<fieldset>
Expand Down
23 changes: 4 additions & 19 deletions ...onents/src/components/stable/gux-form-field/components/gux-form-field-select/example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,25 +128,10 @@ <h2>Examples</h2>
</fieldset>

<fieldset>
<legend>Optional Indicator Mark</legend>

<gux-form-field-select indicator-mark="optional">
<select slot="input" name="e-1">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<label slot="label">Indicator Mark</label>
</gux-form-field-select>

<gux-form-field-select indicator-mark="optional">
<select slot="input" name="e-1" required>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<label slot="label">Indicator Mark</label>
</gux-form-field-select>
<legend>Indicator Mark</legend>
<a href="gux-form-field-label-indicator.html"
>Click here for usage examples</a
>
</fieldset>
</form>

Expand Down
15 changes: 4 additions & 11 deletions ...nts/src/components/stable/gux-form-field/components/gux-form-field-text-like/example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,17 +225,10 @@ <h2>Examples</h2>
</fieldset>

<fieldset>
<legend>Optional Indicator Mark</legend>

<gux-form-field-text-like indicator-mark="optional">
<input slot="input" type="text" name="a-1" />
<label slot="label">Indicator Mark</label>
</gux-form-field-text-like>

<gux-form-field-text-like indicator-mark="optional">
<input slot="input" type="text" name="a-2" required />
<label slot="label">Indicator Mark</label>
</gux-form-field-text-like>
<legend>Indicator Mark</legend>
<a href="gux-form-field-label-indicator.html"
>Click here for usage examples</a
>
</fieldset>
</form>

Expand Down
15 changes: 4 additions & 11 deletions ...ents/src/components/stable/gux-form-field/components/gux-form-field-textarea/example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,17 +112,10 @@ <h2>Examples</h2>
</fieldset>

<fieldset>
<legend>Optional Indicator Mark</legend>

<gux-form-field-textarea indicator-mark="optional">
<textarea slot="input" name="textarea"></textarea>
<label slot="label">Indicator Mark</label>
</gux-form-field-textarea>

<gux-form-field-textarea indicator-mark="optional">
<textarea slot="input" name="textarea" required></textarea>
<label slot="label">Indicator Mark</label>
</gux-form-field-textarea>
<legend>Indicator Mark</legend>
<a href="gux-form-field-label-indicator.html"
>Click here for usage examples</a
>
</fieldset>
</form>

Expand Down
9 changes: 4 additions & 5 deletions ...s/src/components/stable/gux-form-field/components/gux-form-field-time-picker/example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,11 +96,10 @@ <h2>Examples</h2>
</gux-form-field-time-picker>
</fieldset>
<fieldset>
<legend>Optional Indicator Mark</legend>
<gux-form-field-time-picker indicator-mark="optional">
<gux-time-picker value="09:00"></gux-time-picker>
<label slot="label">Select Time</label>
</gux-form-field-time-picker>
<legend>Indicator Mark</legend>
<a href="gux-form-field-label-indicator.html"
>Click here for usage examples</a
>
</fieldset>
</form>

Expand Down
30 changes: 3 additions & 27 deletions .../components/stable/gux-form-field/components/gux-form-field-time-zone-picker/example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,34 +105,10 @@ <h2>Examples</h2>
</fieldset>

<fieldset>
<legend>Optional Indicator Mark</legend>
<gux-form-field-time-zone-picker
label-position="above"
indicator-mark="optional"
<legend>Indicator Mark</legend>
<a href="gux-form-field-label-indicator.html"
>Click here for usage examples</a
>
<gux-time-zone-picker-beta
value="Etc/GMT+1"
workspace-default="Etc/GMT"
local-default="America/Detroit"
>
</gux-time-zone-picker-beta>
<label slot="label">Select Time Zone</label>
</gux-form-field-time-zone-picker>
<div class="gap-above">
<gux-form-field-time-zone-picker
label-position="above"
indicator-mark="optional"
>
<gux-time-zone-picker-beta
value="Etc/GMT+1"
workspace-default="Etc/GMT"
local-default="America/Detroit"
required
>
</gux-time-zone-picker-beta>
<label slot="label">Select Time Zone</label>
</gux-form-field-time-zone-picker>
</div>
</fieldset>
</form>

Expand Down
2 changes: 1 addition & 1 deletion ...ges/genesys-spark-components/src/components/stable/gux-form-field/gux-form-field.types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
export type GuxFormFieldLabelPosition = 'above' | 'beside' | 'screenreader';

export type GuxFormFieldIndicatorMark = 'required' | 'optional';
export type GuxFormFieldIndicatorMark = 'required' | 'optional' | 'none';
58 changes: 58 additions & 0 deletions ...nents/stable/gux-form-field/helper-components/gux-form-field-label-indicator/example.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<h1>gux-form-field Indicator Mark</h1>

<h2>Examples</h2>
<form onchange="notify(event)" oninput="notify(event)">
<fieldset>
<legend>Indicator Mark</legend>

<h3>Default</h3>
<gux-form-field-textarea>
<textarea slot="input" name="textarea" required></textarea>
<label slot="label">Required field</label>
</gux-form-field-textarea>

<gux-form-field-textarea>
<textarea slot="input" name="textarea"></textarea>
<label slot="label">Optional field</label>
</gux-form-field-textarea>

<h3>Required</h3>
<gux-form-field-textarea indicator-mark="required">
<textarea slot="input" name="textarea" required></textarea>
<label slot="label">Required field</label>
</gux-form-field-textarea>

<gux-form-field-textarea indicator-mark="required">
<textarea slot="input" name="textarea"></textarea>
<label slot="label">Optional field</label>
</gux-form-field-textarea>

<h3>Optional</h3>
<gux-form-field-textarea indicator-mark="optional">
<textarea slot="input" name="textarea" required></textarea>
<label slot="label">Required field</label>
</gux-form-field-textarea>

<gux-form-field-textarea indicator-mark="optional">
<textarea slot="input" name="textarea"></textarea>
<label slot="label">Optional field</label>
</gux-form-field-textarea>

<h3>None</h3>
<gux-form-field-textarea indicator-mark="none">
<textarea slot="input" name="textarea" required></textarea>
<label slot="label">Required field</label>
</gux-form-field-textarea>

<gux-form-field-textarea indicator-mark="none">
<textarea slot="input" name="textarea"></textarea>
<label slot="label">Optional field</label>
</gux-form-field-textarea>
</fieldset>
</form>

<style>
gux-form-field-textarea {
margin: 10px;
}
</style>
0 ...cator/gux-form-field-label-indicator.scss → ...cator/gux-form-field-label-indicator.scss
View file
File renamed without changes.
4 changes: 2 additions & 2 deletions ...icator/gux-form-field-label-indicator.tsx → ...icator/gux-form-field-label-indicator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { trackComponent } from '@utils/tracking/usage';

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

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

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

Expand All @@ -19,7 +19,7 @@ export class GuxFormFieldLabelIndicator {
private root: HTMLElement;

@Prop()
variant: GuxFormFieldLabelIndicatorVariant = 'required';
variant: GuxFormFieldIndicatorMark = 'required';

@Prop()
required: boolean = false;
Expand Down
0 ...orm-field-optional-indicator/i18n/en.json → ...x-form-field-label-indicator/i18n/en.json
View file
File renamed without changes.
0 ...x-form-field-optional-indicator/readme.md → .../gux-form-field-label-indicator/readme.md
View file
File renamed without changes.
0 ...x-form-field-label-indicator.spec.ts.snap → ...x-form-field-label-indicator.spec.ts.snap
View file
File renamed without changes.
0 ...ts/gux-form-field-label-indicator.spec.ts → ...ts/gux-form-field-label-indicator.spec.ts
View file
File renamed without changes.
1 change: 0 additions & 1 deletion ...lper-components/gux-form-field-optional-indicator/gux-form-field-label-indicator.types.ts
View file

This file was deleted.

6 changes: 3 additions & 3 deletions packages/genesys-spark-components/src/i18n/translations/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,13 +97,13 @@
"gux-form-field-input-clear-button": {
"clear": "Clear"
},
"gux-form-field-label-indicator": {
"optional": "optional"
},
"gux-form-field-number": {
"increment": "Increment",
"decrement": "Decrement"
},
"gux-form-field-optional-indicator": {
"optional": "optional"
},
"gux-form-field-phone": {
"required": "Required"
},
Expand Down

0 comments on commit 0f1a95f

Please sign in to comment.