Skip to content

Commit

Permalink
refactor: prop harmonisation replace status prop (#665)
Browse files Browse the repository at this point in the history 
* refactor(checkbox): replace prop 'status' by 'invalid'

* refactor(checkbox-group): replace prop 'status' by 'invalid'

* refactor(date-picker): replace prop 'status' by 'invalid'

* refactor(dropdown): replace prop 'status' by 'invalid'

* refactor(input): replace prop 'status' by 'invalid'

* refactor(radio-button): replace prop 'status' by 'invalid'

* refactor(radio-button-group): replace prop 'status' by 'invalid'

* refactor(text-field): replace prop 'status' by 'invalid'

* refactor(text-area): replace prop 'status' by 'invalid'

* refactor: use JSDoc @deprecated syntax; remove duplicate import (date-picker)

Co-authored-by: Arturo Castillo Delgado <ac@iconstorm.com>
  • Loading branch information
@ChrisPaj
ChrisPaj and Arturo Castillo Delgado authored Nov 2, 2021
1 parent 119a782 commit 4248ffe
Show file tree
Hide file tree
Showing 45 changed files with 381 additions and 223 deletions.
18 changes: 17 additions & 1 deletion packages/components/src/components/checkbox-group/checkbox-group.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
State,
} from '@stencil/core';
import { CheckboxInterface } from '../checkbox/checkbox';
import statusNote from '../../utils/status-note';

@Component({
tag: 'scale-checkbox-group',
Expand All @@ -36,8 +37,10 @@ export class CheckboxGroup {
@Prop() ariaLabel?: string;
/** (optional) Input helper text */
@Prop() helperText?: string;
/** (optional) Input status */
/** @deprecated - invalid should replace status */
@Prop() status?: string = '';
/** (optional) Input status */
@Prop() invalid?: boolean = false;
/** (optional) Input value */
@Prop() value?: string = '';
/** (optional) Input checkbox id */
Expand Down Expand Up @@ -71,6 +74,18 @@ export class CheckboxGroup {
}
}

componentDidRender() {
if (this.status !== '') {
statusNote({
tag: 'deprecated',
message:
'Property "status" is deprecated. Please use the "invalid" property!',
type: 'warn',
source: this.host,
});
}
}

getChildNodes() {
return Array.from(
this.host.querySelector('fieldset').querySelectorAll('scale-checkbox')
Expand Down Expand Up @@ -120,6 +135,7 @@ export class CheckboxGroup {
ariaLabel={`${this.ariaLabel || this.label} - ${this.actionText}`}
helperText={this.helperText}
status={this.status}
invalid={this.invalid}
value={this.value}
inputId={this.inputId}
checked={this.checked}
Expand Down
25 changes: 13 additions & 12 deletions packages/components/src/components/checkbox-group/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,19 @@

## Properties

| Property | Attribute | Description | Type | Default |
| -------------- | --------------- | ------------------------------ | -------- | ---------------- |
| `ariaLabel` | `aria-label` | (optional) Input label output | `string` | `undefined` |
| `helperText` | `helper-text` | (optional) Input helper text | `string` | `undefined` |
| `inputId` | `input-id` | (optional) Input checkbox id | `string` | `undefined` |
| `label` | `label` | (optional) Input label | `string` | `''` |
| `name` | `name` | (optional) Input name | `string` | `undefined` |
| `selectText` | `select-text` | | `string` | `'Select all'` |
| `status` | `status` | (optional) Input status | `string` | `''` |
| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` |
| `unselectText` | `unselect-text` | | `string` | `'Unselect all'` |
| `value` | `value` | (optional) Input value | `string` | `''` |
| Property | Attribute | Description | Type | Default |
| -------------- | --------------- | ----------------------------------------------------------------------------------------- | --------- | ---------------- |
| `ariaLabel` | `aria-label` | (optional) Input label output | `string` | `undefined` |
| `helperText` | `helper-text` | (optional) Input helper text | `string` | `undefined` |
| `inputId` | `input-id` | (optional) Input checkbox id | `string` | `undefined` |
| `invalid` | `invalid` | (optional) Input status | `boolean` | `false` |
| `label` | `label` | (optional) Input label | `string` | `''` |
| `name` | `name` | (optional) Input name | `string` | `undefined` |
| `selectText` | `select-text` | | `string` | `'Select all'` |
| `status` | `status` | <span style="color:red">**[DEPRECATED]**</span> - invalid should replace status<br/><br/> | `string` | `''` |
| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` |
| `unselectText` | `unselect-text` | | `string` | `'Unselect all'` |
| `value` | `value` | (optional) Input value | `string` | `''` |


## Shadow Parts
Expand Down
10 changes: 2 additions & 8 deletions packages/components/src/components/checkbox/checkbox.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ describe('Checkbox', () => {
label="testlabel"
checked
disabled
status="error"
invalid="true"
value="testvalue">
</scale-checkbox>`,
});
Expand All @@ -52,16 +52,10 @@ describe('Checkbox', () => {
expect(page.rootInstance.label).toBe('testlabel');
expect(page.rootInstance.disabled).toBe(true);
expect(page.rootInstance.checked).toBe(true);
expect(page.rootInstance.status).toBe('error');
expect(page.rootInstance.invalid).toBe(true);
expect(page.rootInstance.value).toBe('testvalue');
});

it('should handle css classes', () => {
const element = new Checkbox();
element.status = 'error';
// expect(element.classList).toContain('checkbox--status-error');
});

it('should emit on change', async () => {
const changeSpy = jest.fn();
const changeSpyLegacy = jest.fn();
Expand Down
21 changes: 18 additions & 3 deletions packages/components/src/components/checkbox/checkbox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
Watch,
} from '@stencil/core';
import { emitEvent } from '../../utils/utils';
import statusNote from '../../utils/status-note';

export interface CheckboxInterface extends HTMLElement {
checked: boolean;
Expand Down Expand Up @@ -48,8 +49,10 @@ export class Checkbox {
@Prop() hideLabel?: boolean = false;
/** (optional) Input helper text */
@Prop() helperText?: string;
/** (optional) Input status */
/** @deprecated - invalid should replace status */
@Prop() status?: string = '';
/** (optional) Input status */
@Prop() invalid?: boolean = false;
/** (optional) Input disabled */
@Prop({ reflect: true }) disabled?: boolean = false;
/** (optional) Active switch */
Expand All @@ -70,6 +73,18 @@ export class Checkbox {

private id = i++;

componentDidRender() {
if (this.status !== '') {
statusNote({
tag: 'deprecated',
message:
'Property "status" is deprecated. Please use the "invalid" property!',
type: 'warn',
source: this.host,
});
}
}

getAriaCheckedState() {
if (this.indeterminate) {
return 'mixed';
Expand Down Expand Up @@ -153,7 +168,7 @@ export class Checkbox {
checked: this.checked,
indeterminate: this.indeterminate,
disabled: this.disabled,
error: this.status === 'error',
error: this.status === 'error' || this.invalid,
hideLabel: this.hideLabel,
}}
>
Expand All @@ -167,7 +182,7 @@ export class Checkbox {
indeterminate={this.indeterminate}
aria-label={this.ariaLabel}
aria-checked={this.getAriaCheckedState()}
aria-invalid={this.status === 'error'}
aria-invalid={this.status === 'error' || this.invalid}
aria-describedBy={helperText.id}
disabled={this.disabled}
onChange={this.handleChange}
Expand Down
29 changes: 15 additions & 14 deletions packages/components/src/components/checkbox/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,21 @@

## Properties

| Property | Attribute | Description | Type | Default |
| --------------- | --------------- | --------------------------------------------- | --------- | ----------- |
| `ariaLabel` | `aria-label` | (optional) Input label output | `string` | `undefined` |
| `checked` | `checked` | (optional) Active switch | `boolean` | `false` |
| `disabled` | `disabled` | (optional) Input disabled | `boolean` | `false` |
| `helperText` | `helper-text` | (optional) Input helper text | `string` | `undefined` |
| `hideLabel` | `hide-label` | (optional) Hides the specified label visually | `boolean` | `false` |
| `indeterminate` | `indeterminate` | (optional) indeterminate | `boolean` | `false` |
| `inputId` | `input-id` | (optional) Input checkbox id | `string` | `undefined` |
| `label` | `label` | (optional) Input label | `string` | `''` |
| `name` | `name` | (optional) Input name | `string` | `undefined` |
| `status` | `status` | (optional) Input status | `string` | `''` |
| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` |
| `value` | `value` | (optional) Input value | `string` | `''` |
| Property | Attribute | Description | Type | Default |
| --------------- | --------------- | ----------------------------------------------------------------------------------------- | --------- | ----------- |
| `ariaLabel` | `aria-label` | (optional) Input label output | `string` | `undefined` |
| `checked` | `checked` | (optional) Active switch | `boolean` | `false` |
| `disabled` | `disabled` | (optional) Input disabled | `boolean` | `false` |
| `helperText` | `helper-text` | (optional) Input helper text | `string` | `undefined` |
| `hideLabel` | `hide-label` | (optional) Hides the specified label visually | `boolean` | `false` |
| `indeterminate` | `indeterminate` | (optional) indeterminate | `boolean` | `false` |
| `inputId` | `input-id` | (optional) Input checkbox id | `string` | `undefined` |
| `invalid` | `invalid` | (optional) Input status | `boolean` | `false` |
| `label` | `label` | (optional) Input label | `string` | `''` |
| `name` | `name` | (optional) Input name | `string` | `undefined` |
| `status` | `status` | <span style="color:red">**[DEPRECATED]**</span> - invalid should replace status<br/><br/> | `string` | `''` |
| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` |
| `value` | `value` | (optional) Input value | `string` | `''` |


## Events
Expand Down
22 changes: 19 additions & 3 deletions packages/components/src/components/date-picker/date-picker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
Host,
} from '@stencil/core';
import { DuetDatePicker as DuetDatePickerCustomElement } from '@duetds/date-picker/custom-element';
import statusNote from '../../utils/status-note';

import {
DuetDatePickerChangeEvent,
Expand All @@ -32,7 +33,6 @@ import {
import classNames from 'classnames';
import { DuetLocalizedText } from '@duetds/date-picker/dist/types/components/duet-date-picker/date-localization';
import { emitEvent } from '../../utils/utils';
import statusNote from '../../utils/status-note';

let i = 0;

Expand Down Expand Up @@ -131,9 +131,12 @@ export class DatePicker {
/** (optional) Helper text */
@Prop() helperText?: string = '';

/** (optional) Status */
/** @deprecated - invalid should replace status */
@Prop() status?: string = '';

/** (optional) invalid status */
@Prop() invalid?: boolean;

/** (optional) Label */
@Prop() label: string = '';

Expand Down Expand Up @@ -289,7 +292,7 @@ export class DatePicker {
input.setAttribute('aria-describedby', this.helperTextId);
}

if (input && this.status === 'error') {
if (input && (this.status === 'error' || this.invalid)) {
input.setAttribute('aria-invalid', 'true');
}

Expand Down Expand Up @@ -342,6 +345,18 @@ export class DatePicker {
this.adjustButtonsLabelsForA11y();
}

componentDidRender() {
if (this.status !== '') {
statusNote({
tag: 'deprecated',
message:
'Property "status" is deprecated. Please use the "invalid" property!',
type: 'warn',
source: this.hostElement,
});
}
}

/**
* Fix JAWS reading the day twice, e.g. "19 19. August"
* It'd probably make sense to open a PR in duetds/date-picker
Expand Down Expand Up @@ -392,6 +407,7 @@ export class DatePicker {
class={classNames(
'scale-date-picker',
this.status && `scale-date-picker--status-${this.status}`,
this.invalid && `scale-date-picker--status-error`,
this.hasFocus && 'scale-date-picker--focus',
this.disabled && 'scale-date-picker--disabled',
this.size && `scale-date-picker--size-${this.size}`,
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/components/date-picker/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
| `firstDayOfWeek` | `first-day-of-week` | Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc. Default is Monday. | `any` | `undefined` |
| `helperText` | `helper-text` | (optional) Helper text | `string` | `''` |
| `identifier` | `identifier` | Adds a unique identifier for the date picker input. Use this instead of html `id` attribute. | `string` | `undefined` |
| `invalid` | `invalid` | (optional) invalid status | `boolean` | `undefined` |
| `label` | `label` | (optional) Label | `string` | `''` |
| `localization` | -- | Button labels, day names, month names, etc, used for localization. Default is English. | `DuetLocalizedText & { today: string; }` | `undefined` |
| `max` | `max` | Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the min property. | `string` | `''` |
Expand All @@ -24,7 +25,7 @@
| `required` | `required` | Should the input be marked as required? | `boolean` | `false` |
| `role` | `role` | Defines a specific role attribute for the date picker input. | `string` | `undefined` |
| `size` | `size` | (optional) Size | `string` | `''` |
| `status` | `status` | (optional) Status | `string` | `''` |
| `status` | `status` | <span style="color:red">**[DEPRECATED]**</span> - invalid should replace status<br/><br/> | `string` | `''` |
| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` |
| `value` | `value` | Date value. Must be in IS0-8601 format: YYYY-MM-DD. | `string` | `''` |

Expand Down
Loading

0 comments on commit 4248ffe

Please sign in to comment.