Skip to content

feat: textarea/Datepicker updates #2471

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

Closed
Ricardo-Tele wants to merge 9 commits into from
Closed

feat: textarea/Datepicker updates #2471

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
b288e30
feat: textarea/Datepicker updates
Ricardo-Tele Mar 5, 2026
8d4042c
Update packages/components/src/components/date-picker/date-picker.tsx
Ricardo-Tele Mar 9, 2026
b0fb3ed
Update packages/components/src/components/textarea/textarea.css
Ricardo-Tele Mar 9, 2026
d2fcf8c
Update packages/components/src/components/date-picker/date-picker.css
Ricardo-Tele Mar 9, 2026
34f7f4f
Update packages/components/src/html/date-picker.html
Ricardo-Tele Mar 9, 2026
b7b7362
chore: update based on review comments
Ricardo-Tele Mar 11, 2026
2d9c0b5
chore: remove redundancy
Ricardo-Tele Mar 12, 2026
e00a489
Update packages/components/src/components/date-picker/date-picker.css
Ricardo-Tele Apr 8, 2026
f6976d3
fix(textarea): adds css for hiding label visibility when textarea is …
amir-ba Apr 8, 2026
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
7 changes: 7 additions & 0 deletions packages/components/src/components/date-picker/date-picker.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 4 additions & 0 deletions packages/components/src/components/date-picker/date-picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -416,6 +419,7 @@ export class DatePicker {
<div
class={classNames(
'scale-date-picker',
this.hideLabelVisually && 'scale-date-picker--hide-label',
this.status && `scale-date-picker--status-${this.status}`,
this.invalid && `scale-date-picker--status-error`,
this.hasFocus && 'scale-date-picker--focus',
Expand Down
49 changes: 25 additions & 24 deletions packages/components/src/components/date-picker/readme.md
View file
Open in desktop

Large diffs are not rendered by default.

51 changes: 26 additions & 25 deletions packages/components/src/components/textarea/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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` | <span style="color:red">**[DEPRECATED]**</span> - invalid should replace status<br/><br/> | `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` | <span style="color:red">**[DEPRECATED]**</span> - invalid should replace status<br/><br/> | `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
Expand Down
8 changes: 8 additions & 0 deletions packages/components/src/components/textarea/textarea.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
17 changes: 17 additions & 0 deletions packages/components/src/components/textarea/textarea.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
'<scale-textarea label="My Label" hide-label-visually></scale-textarea>'
);
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('<scale-textarea label="My Label"></scale-textarea>');
const wrapper = await page.find('scale-textarea .textarea');
expect(wrapper).not.toHaveClass('textarea--hide-label');
});
});
19 changes: 19 additions & 0 deletions packages/components/src/components/textarea/textarea.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: `
<scale-textarea
label="My Label"
hide-label-visually="true"
>
</scale-textarea>`,
});
expect(page.root).toMatchSnapshot();
});

describe('classes', () => {
it('should handle getCssClassMap()', () => {
const element = new Textarea();
Expand All @@ -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', () => {
Expand All @@ -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 () => {
Expand All @@ -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');
Expand All @@ -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', () => {
Expand Down
5 changes: 4 additions & 1 deletion packages/components/src/components/textarea/textarea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -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 (
Expand Down Expand Up @@ -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`,
Expand Down
32 changes: 31 additions & 1 deletion packages/components/src/html/date-picker.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,16 @@
hr {
margin: 3rem 0;
}

.example {
margin-top: 2rem;
max-width: 30rem;
}

.description {
margin-top: 0.5rem;
margin-bottom: 1.25rem;
}
</style>
</head>

Expand All @@ -39,6 +49,23 @@
<scale-button id="show">show</scale-button>
<scale-button id="hide">hide</scale-button>
<scale-button id="focus">focus</scale-button>

<div class="example">
<h2>Hidden Label</h2>
<p class="description">
The label is visually hidden but still available to screen readers.
</p>

<scale-date-picker
id="picker-hidden-label"
label="date"
name="date-hidden-label"
value="2021-03-24"
placeholder="DD-MM-YYYY"
hide-label-visually
></scale-date-picker>
</div>

<script>
const picker = document.querySelector('scale-date-picker');
const show = document.getElementById('show');
Expand Down Expand Up @@ -124,7 +151,6 @@
picker.setFocus();
});

// Listen for when date is selected
picker.addEventListener('scale-change', function (e) {
console.log('scale-change selected date', e.detail.valueAsDate);
});
Expand All @@ -135,6 +161,10 @@
picker.addEventListener('scale-blur', function (e) {
console.log('scale-blur', e);
});

const hiddenPicker = document.getElementById('picker-hidden-label');
hiddenPicker.dateAdapter = picker.dateAdapter;
hiddenPicker.localization = picker.localization;
</script>
</body>
</html>
Loading
Loading