diff --git a/packages/components/src/components/date-picker/date-picker.css b/packages/components/src/components/date-picker/date-picker.css index c03c70d843..c63035d0a4 100644 --- a/packages/components/src/components/date-picker/date-picker.css +++ b/packages/components/src/components/date-picker/date-picker.css @@ -148,6 +148,13 @@ duet-date-picker .duet-date__toggle:active scale-icon-content-calendar { overflow: hidden; } +.scale-date-picker--hide-label .date-picker__label { + visibility: hidden; +} + +.scale-date-picker--hide-label duet-date-picker .duet-date__input { + padding-top: var(--telekom-spacing-composition-space-04); +} duet-date-picker .duet-date__input::placeholder { visibility: hidden; color: transparent; diff --git a/packages/components/src/components/date-picker/date-picker.tsx b/packages/components/src/components/date-picker/date-picker.tsx index f78d6e0ee9..914685622a 100644 --- a/packages/components/src/components/date-picker/date-picker.tsx +++ b/packages/components/src/components/date-picker/date-picker.tsx @@ -140,6 +140,9 @@ export class DatePicker { /** (optional) Label */ @Prop() label: string = ''; + /** (optional) Visually hide the label */ + @Prop() hideLabelVisually?: boolean; + /** (optional) Injected CSS styles */ @Prop() styles?: string; @@ -416,6 +419,7 @@ export class DatePicker {
**[DEPRECATED]** in v3 in favor of localization.calendarHeading

| `string` | `'Pick a date'` | -| `required` | `required` | Should the input be marked as required? | `boolean` | `false` | -| `size` | `size` | **[DEPRECATED]**

| `string` | `undefined` | -| `status` | `status` | **[DEPRECATED]** - invalid should replace status

| `string` | `''` | -| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` | -| `value` | `value` | Date value. Must be in IS0-8601 format: YYYY-MM-DD. | `string` | `''` | -| `variant` | `variant` | | `"danger" \| "informational" \| "success" \| "warning"` | `'informational'` | +| Property | Attribute | Description | Type | Default | +| ------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------------- | +| `ariaDetailsId` | `aria-details-id` | (optional) id or space separated list of ids of elements that provide or link to additional related information. | `string` | `undefined` | +| `dateAdapter` | `date-adapter` | Date adapter, for custom parsing/formatting. Must be object with a `parse` function which accepts a `string` and returns a `Date`, and a `format` function which accepts a `Date` and returns a `string`. Default is IS0-8601 parsing and formatting. | `any` | `undefined` | +| `direction` | `direction` | Forces the opening direction of the calendar modal to be always left or right. This setting can be useful when the input is smaller than the opening date picker would be as by default the picker always opens towards right. | `"left" \| "right"` | `'right'` | +| `disabled` | `disabled` | Makes the date picker input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies. | `boolean` | `false` | +| `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` | `''` | +| `hideLabelVisually` | `hide-label-visually` | (optional) Visually hide the label | `boolean` | `undefined` | +| `identifier` | `identifier` | Adds a unique identifier for the date picker input. Use this instead of html `id` attribute. | `string` | `undefined` | +| `innerRole` | `inner-role` | Defines a specific role attribute for the date picker input. | `string` | `undefined` | +| `invalid` | `invalid` | (optional) invalid status | `boolean` | `undefined` | +| `label` | `label` | (optional) Label | `string` | `''` | +| `localization` | `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` | `''` | +| `min` | `min` | Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the max property. | `string` | `''` | +| `name` | `name` | Name of the date picker input. | `string` | `'date'` | +| `placeholder` | `placeholder` | (optional) Input place holder | `string` | `''` | +| `popupTitle` | `popup-title` | **[DEPRECATED]** in v3 in favor of localization.calendarHeading

| `string` | `'Pick a date'` | +| `required` | `required` | Should the input be marked as required? | `boolean` | `false` | +| `size` | `size` | **[DEPRECATED]**

| `string` | `undefined` | +| `status` | `status` | **[DEPRECATED]** - invalid should replace status

| `string` | `''` | +| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` | +| `value` | `value` | Date value. Must be in IS0-8601 format: YYYY-MM-DD. | `string` | `''` | +| `variant` | `variant` | | `"danger" \| "informational" \| "success" \| "warning"` | `'informational'` | ## Events diff --git a/packages/components/src/components/textarea/readme.md b/packages/components/src/components/textarea/readme.md index 5f79762783..f1dedd5066 100644 --- a/packages/components/src/components/textarea/readme.md +++ b/packages/components/src/components/textarea/readme.md @@ -7,31 +7,32 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------------- | -| `ariaDetailsId` | `aria-details-id` | (optional) id or space separated list of ids of elements that provide or link to additional related information. | `string` | `undefined` | -| `cols` | `cols` | (optional) textarea column | `number` | `undefined` | -| `counter` | `counter` | (optional) Input counter | `boolean` | `undefined` | -| `dataQa` | `data-qa` | (optional) data-qa attribute for e2e testing | `string` | `undefined` | -| `disabled` | `disabled` | (optional) Input disabled | `boolean` | `undefined` | -| `helperText` | `helper-text` | (optional) Input helper text | `string` | `''` | -| `inputAutofocus` | `input-autofocus` | (optional) the input should automatically get focus when the page loads. | `boolean` | `undefined` | -| `inputId` | `input-id` | (optional) Input checkbox id | `string` | `undefined` | -| `invalid` | `invalid` | (optional) Input status | `boolean` | `false` | -| `label` | `label` | (optional) Input label | `string` | `''` | -| `maxLength` | `max-length` | (optional) Input max length | `number` | `undefined` | -| `minLength` | `min-length` | (optional) Input min length | `number` | `undefined` | -| `name` | `name` | (optional) Input name | `string` | `''` | -| `placeholder` | `placeholder` | (optional) Input placeHolder | `string` | `''` | -| `readonly` | `readonly` | (optional) Input readonly | `boolean` | `undefined` | -| `required` | `required` | (optional) Input required | `boolean` | `undefined` | -| `resize` | `resize` | (optional) textarea resize | `"horizontal" \| "none" \| "unset" \| "vertical"` | `undefined` | -| `rows` | `rows` | (optional) textarea row | `number` | `undefined` | -| `status` | `status` | **[DEPRECATED]** - invalid should replace status

| `string` | `''` | -| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` | -| `transparent` | `transparent` | (optional) input background transparent | `boolean` | `undefined` | -| `value` | `value` | (optional) Input value | `number \| string` | `''` | -| `variant` | `variant` | (optional) Variant | `"danger" \| "informational" \| "success" \| "warning"` | `'informational'` | +| Property | Attribute | Description | Type | Default | +| ------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------------- | +| `ariaDetailsId` | `aria-details-id` | (optional) id or space separated list of ids of elements that provide or link to additional related information. | `string` | `undefined` | +| `cols` | `cols` | (optional) textarea column | `number` | `undefined` | +| `counter` | `counter` | (optional) Input counter | `boolean` | `undefined` | +| `dataQa` | `data-qa` | (optional) data-qa attribute for e2e testing | `string` | `undefined` | +| `disabled` | `disabled` | (optional) Input disabled | `boolean` | `undefined` | +| `helperText` | `helper-text` | (optional) Input helper text | `string` | `''` | +| `hideLabelVisually` | `hide-label-visually` | (optional) Visually hide the label | `boolean` | `undefined` | +| `inputAutofocus` | `input-autofocus` | (optional) the input should automatically get focus when the page loads. | `boolean` | `undefined` | +| `inputId` | `input-id` | (optional) Input checkbox id | `string` | `undefined` | +| `invalid` | `invalid` | (optional) Input status | `boolean` | `false` | +| `label` | `label` | (optional) Input label | `string` | `''` | +| `maxLength` | `max-length` | (optional) Input max length | `number` | `undefined` | +| `minLength` | `min-length` | (optional) Input min length | `number` | `undefined` | +| `name` | `name` | (optional) Input name | `string` | `''` | +| `placeholder` | `placeholder` | (optional) Input placeHolder | `string` | `''` | +| `readonly` | `readonly` | (optional) Input readonly | `boolean` | `undefined` | +| `required` | `required` | (optional) Input required | `boolean` | `undefined` | +| `resize` | `resize` | (optional) textarea resize | `"horizontal" \| "none" \| "unset" \| "vertical"` | `undefined` | +| `rows` | `rows` | (optional) textarea row | `number` | `undefined` | +| `status` | `status` | **[DEPRECATED]** - invalid should replace status

| `string` | `''` | +| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` | +| `transparent` | `transparent` | (optional) input background transparent | `boolean` | `undefined` | +| `value` | `value` | (optional) Input value | `number \| string` | `''` | +| `variant` | `variant` | (optional) Variant | `"danger" \| "informational" \| "success" \| "warning"` | `'informational'` | ## Events diff --git a/packages/components/src/components/textarea/textarea.css b/packages/components/src/components/textarea/textarea.css index bdda55a2f0..d6aac0bdc9 100644 --- a/packages/components/src/components/textarea/textarea.css +++ b/packages/components/src/components/textarea/textarea.css @@ -159,6 +159,14 @@ scale-textarea { calc(0.25rem + var(--telekom-spacing-composition-space-01)) ); } + +.textarea--hide-label .textarea__label { + visibility: hidden; +} + +.textarea--hide-label .textarea__wrapper .textarea__control { + padding-top: var(--telekom-spacing-composition-space-02); +} .textarea--status-error .textarea__wrapper { border: var(--border-error); } diff --git a/packages/components/src/components/textarea/textarea.e2e.ts b/packages/components/src/components/textarea/textarea.e2e.ts index 4d1edaee4c..39edc017c4 100644 --- a/packages/components/src/components/textarea/textarea.e2e.ts +++ b/packages/components/src/components/textarea/textarea.e2e.ts @@ -18,4 +18,21 @@ describe('scale-textarea', () => { const element = await page.find('scale-textarea'); expect(element).toHaveClass('hydrated'); }); + + it('should have textarea--hide-label class when hide-label-visually is set', async () => { + const page = await newE2EPage(); + await page.setContent( + '' + ); + const wrapper = await page.find('scale-textarea .textarea'); + expect(wrapper).toHaveClass('textarea--hide-label'); + }); + + // optional + it('should NOT have textarea--hide-label class when hide-label-visually is not set', async () => { + const page = await newE2EPage(); + await page.setContent(''); + const wrapper = await page.find('scale-textarea .textarea'); + expect(wrapper).not.toHaveClass('textarea--hide-label'); + }); }); diff --git a/packages/components/src/components/textarea/textarea.spec.ts b/packages/components/src/components/textarea/textarea.spec.ts index ffab2a11ed..173698418f 100644 --- a/packages/components/src/components/textarea/textarea.spec.ts +++ b/packages/components/src/components/textarea/textarea.spec.ts @@ -44,6 +44,19 @@ describe('Textarea', () => { expect(page.root).toMatchSnapshot(); }); + it('should match snapshot -> hide-label-visually', async () => { + const page = await newSpecPage({ + components: [Textarea], + html: ` + + `, + }); + expect(page.root).toMatchSnapshot(); + }); + describe('classes', () => { it('should handle getCssClassMap()', () => { const element = new Textarea(); @@ -66,6 +79,9 @@ describe('Textarea', () => { element.value = 'value'; expect(element.getCssClassMap()).toContain('animated'); + + element.hideLabelVisually = true; + expect(element.getCssClassMap()).toContain('textarea--hide-label'); }); }); describe('props', () => { @@ -80,6 +96,7 @@ describe('Textarea', () => { expect(page.rootInstance.invalid).toBe(false); expect(page.rootInstance.placeholder).toBe(''); expect(page.rootInstance.value).toBe(''); + expect(page.rootInstance.hideLabelVisually).toBeUndefined(); }); it('check props being set', async () => { @@ -102,6 +119,7 @@ describe('Textarea', () => { page.root.value = 'value'; page.root.inputId = 'inputId'; page.root.styles = 'background : red'; + page.root.hideLabelVisually = true; await page.waitForChanges(); expect(page.rootInstance.name).toBe('name'); expect(page.rootInstance.label).toBe('label'); @@ -118,6 +136,7 @@ describe('Textarea', () => { expect(page.rootInstance.transparent).toBe(true); expect(page.rootInstance.inputId).toBe('inputId'); expect(page.rootInstance.styles).toBe('background : red'); + expect(page.rootInstance.hideLabelVisually).toBe(true); }); }); describe('functions', () => { diff --git a/packages/components/src/components/textarea/textarea.tsx b/packages/components/src/components/textarea/textarea.tsx index 4bf896e787..32ee9a0412 100644 --- a/packages/components/src/components/textarea/textarea.tsx +++ b/packages/components/src/components/textarea/textarea.tsx @@ -39,6 +39,8 @@ export class Textarea { @Prop() name?: string = ''; /** (optional) Input label */ @Prop() label: string = ''; + /** (optional) Visually hide the label */ + @Prop() hideLabelVisually?: boolean; /** (optional) textarea row */ @Prop() rows?: number; /** (optional) textarea column */ @@ -166,7 +168,7 @@ export class Textarea { this.status === 'error' || this.invalid ? { 'aria-invalid': 'true' } : {}; const helperTextId = `helper-message-${this.internalId}`; const describedBy = this.helperText ? helperTextId : this.ariaDetailsId; - const ariaDescribedByAttr = { 'aria-describedBy': describedBy }; + const ariaDescribedByAttr = { 'aria-describedby': describedBy }; const readonlyAttr = this.readonly ? { readonly: 'readonly' } : {}; return ( @@ -242,6 +244,7 @@ export class Textarea { getCssClassMap() { return classNames( 'textarea', + this.hideLabelVisually && 'textarea--hide-label', this.hasFocus && 'textarea--has-focus', this.resize && `textarea--resize-${this.resize}`, this.disabled && `textarea--disabled`, diff --git a/packages/components/src/html/date-picker.html b/packages/components/src/html/date-picker.html index 98adb1cc92..c81e22d594 100644 --- a/packages/components/src/html/date-picker.html +++ b/packages/components/src/html/date-picker.html @@ -26,6 +26,16 @@ hr { margin: 3rem 0; } + + .example { + margin-top: 2rem; + max-width: 30rem; + } + + .description { + margin-top: 0.5rem; + margin-bottom: 1.25rem; + } @@ -39,6 +49,23 @@ show hide focus + +
+

Hidden Label

+

+ The label is visually hidden but still available to screen readers. +

+ + +
+ diff --git a/packages/components/src/html/textarea.html b/packages/components/src/html/textarea.html new file mode 100644 index 0000000000..b24c2f5ccb --- /dev/null +++ b/packages/components/src/html/textarea.html @@ -0,0 +1,88 @@ + + + + + + Textarea Component Starter + + + + + + + + + +
+

Textarea – Hidden Label

+

+ The label is visually hidden but still available to screen readers. +

+ + + +
some extra desc
+
+ + + +