Skip to content

feat(form-field-label-indicator): add none variant #867

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 4, 2025
Merged

feat(form-field-label-indicator): add none variant #867

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions changelog.config.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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>
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@katie-bobbe-genesys I don't think there was anything wrong with the component just that the documentation/example was a little confusing.
I have made a change to the text-area form field component example and if others agree it is clearer I will duplicate it in the other form field components

<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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
File renamed without changes.
0 ...x-form-field-optional-indicator/readme.md → .../gux-form-field-label-indicator/readme.md
View file
Open in desktop
File renamed without changes.
0 ...x-form-field-label-indicator.spec.ts.snap → ...x-form-field-label-indicator.spec.ts.snap
View file
Open in desktop
File renamed without changes.
0 ...ts/gux-form-field-label-indicator.spec.ts → ...ts/gux-form-field-label-indicator.spec.ts
View file
Open in desktop
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
Open in desktop

This file was deleted.

6 changes: 3 additions & 3 deletions packages/genesys-spark-components/src/i18n/translations/en.json
View file
Open in desktop
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