Skip to content

Commit 821f4aa

Browse files
mfranzkemfranzke
authored
feat: added possibility to visually hide the label (#1973)
* feat: added possibility to visually hide the label #1932 * Update db-checkbox.tsx * Update db-checkbox.intro.stories.mdx * refactor: regenerated package lock files * feat: added attribute * docs: added further documentation * Update db-textarea.intro.stories.mdx * refactor: corrected these attributes aspects * chore: "typo" * refactor: corrected these attributes aspects * docs: updated readme
1 parent dcaee41 commit 821f4aa

22 files changed

+172
-40
lines changed

‎packages/db-ui-elements-stencil/src/components/db-card/readme.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
| `alt` | `alt` | The alt attribute for the image. | `string` | `undefined` |
1313
| `content` | `content` | The content represents the content of the card. It's optional and you can use slot for custom tags. | `string` | `undefined` |
1414
| `header` | `header` | The header represents the title of the card. It's optional and you can use slot for custom tags. | `string` | `undefined` |
15-
| `illustration` | `illustration` | The illustration which will show a predefined svg. -Development: enum can be generated with /scripts/illustration-generator- | `"alarm-clock" \| "bicycle" \| "blizzard" \| "broken" \| "buggy" \| "bus" \| "calendar" \| "car" \| "chat" \| "christmas" \| "clock-moving" \| "coffee-cup" \| "compass" \| "construction-sign" \| "construction-worker" \| "customer-feedback" \| "db-clock" \| "db-comfort-checkin" \| "db-ticket-shop" \| "db-ticket-vending-machine" \| "db-trainstation-with-train" \| "db-trainstation" \| "db-travel-center" \| "db-video-travel-center" \| "delayed" \| "der-kleine-ice" \| "diamond" \| "disruptions" \| "distance" \| "error" \| "ffp2-mask-with-sign" \| "ffp2-mask" \| "fokus" \| "gaming-no-wire" \| "gaming" \| "green-energy" \| "green" \| "handshake" \| "handwashing" \| "hashtag" \| "heart" \| "home" \| "information" \| "itinerary" \| "kiosk" \| "laptop" \| "local-train" \| "location" \| "lost-and-found" \| "luggage" \| "mask" \| "mini-store" \| "mobileticket-brand" \| "mobileticket-feature" \| "movie" \| "news" \| "newsletter" \| "newspaper" \| "no-handshaking" \| "onlineshop-brand" \| "onlineshop-feature" \| "onlineticket-brand" \| "onlineticket-feature" \| "passenger-rights" \| "podcast" \| "poi-berlin-copy" \| "poi-berlin" \| "restaurant" \| "savings" \| "scan-ticket-printout" \| "search" \| "self-driving" \| "show-ticket" \| "single-entry" \| "smartphone" \| "sport" \| "suitcase" \| "tablet" \| "thunderstorm" \| "tickets" \| "timetable" \| "tips" \| "transportation-advertising" \| "whats-schmutzig" \| "wifi"` | `undefined` |
15+
| `illustration` | `illustration` | The illustration which will show a predefined svg. -Development: enum can be generated with /scripts/illustration-generator- | `"mask" \| "location" \| "error" \| "information" \| "search" \| "green" \| "wifi" \| "broken" \| "calendar" \| "compass" \| "heart" \| "chat" \| "buggy" \| "coffee-cup" \| "restaurant" \| "home" \| "timetable" \| "bicycle" \| "car" \| "local-train" \| "alarm-clock" \| "blizzard" \| "bus" \| "christmas" \| "clock-moving" \| "construction-sign" \| "construction-worker" \| "customer-feedback" \| "db-clock" \| "db-comfort-checkin" \| "db-ticket-shop" \| "db-ticket-vending-machine" \| "db-trainstation-with-train" \| "db-trainstation" \| "db-travel-center" \| "db-video-travel-center" \| "delayed" \| "der-kleine-ice" \| "diamond" \| "disruptions" \| "distance" \| "ffp2-mask-with-sign" \| "ffp2-mask" \| "fokus" \| "gaming-no-wire" \| "gaming" \| "green-energy" \| "handshake" \| "handwashing" \| "hashtag" \| "itinerary" \| "kiosk" \| "laptop" \| "lost-and-found" \| "luggage" \| "mini-store" \| "mobileticket-brand" \| "mobileticket-feature" \| "movie" \| "news" \| "newsletter" \| "newspaper" \| "no-handshaking" \| "onlineshop-brand" \| "onlineshop-feature" \| "onlineticket-brand" \| "onlineticket-feature" \| "passenger-rights" \| "podcast" \| "poi-berlin-copy" \| "poi-berlin" \| "savings" \| "scan-ticket-printout" \| "self-driving" \| "show-ticket" \| "single-entry" \| "smartphone" \| "sport" \| "suitcase" \| "tablet" \| "thunderstorm" \| "tickets" \| "tips" \| "transportation-advertising" \| "whats-schmutzig"` | `undefined` |
1616
| `image` | `image` | The prop image can be used instead of illustration to show a custom img. | `string` | `undefined` |
1717
| `uiCoreIllustrationPath` | `illustration-path` | The illustration-path defines the path to DB UI Core illustrations. If you want to use other/custom images use the image prop instead. | `string` | `'./icons/illustrative'` |
1818
| `variant` | `variant` | The variant which is banner or title. | `"banner" \| "title"` | `'banner'` |

‎packages/db-ui-elements-stencil/src/components/db-checkbox/db-checkbox.tsx

+11-2
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,15 @@ export class DbCheckbox {
5252
@Prop({ reflect: true }) value: string;
5353

5454
/**
55-
* The indeterminate attribute is a boolean attribute. When specified, the element is is displayed in an indeterminate state (neither checked, nor unchecked).
55+
* The indeterminate attribute is a boolean attribute. When specified, the element is displayed in an indeterminate state (neither checked, nor unchecked).
5656
*/
5757
@Prop({ reflect: false }) indeterminate: boolean;
5858

59+
/**
60+
* The label-hidden attribute is a boolean attribute. When specified, the elements label gets visually hidden (it's important to still keep it displayed for accessibility reasons).
61+
*/
62+
@Prop({ reflect: true }) labelHidden: string;
63+
5964
/**
6065
* Method that acceps a boolean and sets the indeterminate state of the checkbox accordingly.
6166
*/
@@ -91,7 +96,11 @@ export class DbCheckbox {
9196
onChange={(event) => this.handleChange(event)}
9297
/>
9398

94-
<label class="elm-label" htmlFor={this.input_id}>
99+
<label
100+
class="elm-label"
101+
htmlFor={this.input_id}
102+
data-label-hidden={this.labelHidden}
103+
>
95104
{this.label}
96105
</label>
97106
</Host>

‎packages/db-ui-elements-stencil/src/components/db-checkbox/readme.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,10 @@
1212
| `autofocus` | `autofocus` | The autofocus content attribute allows the author to indicate that a control is to be focused as soon as the page is loaded, allowing the user to just start typing without having to manually focus the main control. | `boolean` | `undefined` |
1313
| `checked` | `checked` | The checked content attribute is a boolean attribute that gives the default checkedness of the input element. | `boolean` | `undefined` |
1414
| `disabled` | `disabled` | The disabled attribute can be set to keep a user from clicking on the input. | `boolean` | `undefined` |
15-
| `indeterminate` | `indeterminate` | The indeterminate attribute is a boolean attribute. When specified, the element is is displayed in an indeterminate state (neither checked, nor unchecked). | `boolean` | `undefined` |
15+
| `indeterminate` | `indeterminate` | The indeterminate attribute is a boolean attribute. When specified, the element is displayed in an indeterminate state (neither checked, nor unchecked). | `boolean` | `undefined` |
1616
| `input_id` | `input_id` | The input_id of a labelable form-related element in the same document as the label element. The first element in the document with an id matching the value of the for attribute is the labeled control for this label element, if it is a labelable element. | `string` | `'checkbox-' + uuid()` |
1717
| `label` _(required)_ | `label` | The label attribute specifies the caption of the input. | `string` | `undefined` |
18+
| `labelHidden` | `label-hidden` | The label-hidden attribute is a boolean attribute. When specified, the elements label gets visually hidden (it's important to still keep it displayed for accessibility reasons). | `string` | `undefined` |
1819
| `name` _(required)_ | `name` | The name content attribute gives the name of the form control, as used in form submission and in the form element's elements object. If the attribute is specified, its value must not be the empty string. | `string` | `undefined` |
1920
| `required` | `required` | The required attribute is a boolean attribute. When specified, the element is required. | `boolean` | `undefined` |
2021
| `value` | `value` | The value content attribute gives the default value of the input element. | `string` | `undefined` |

‎packages/db-ui-elements-stencil/src/components/db-checkbox/stories/db-checkbox.demo.stories.ts

+7-2
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@ export default {
2727
},
2828
value: {
2929
control: 'text'
30+
},
31+
labelHidden: {
32+
control: 'boolean'
3033
}
3134
}
3235
};
@@ -38,7 +41,8 @@ export const LiveDemo = ({
3841
label,
3942
name,
4043
required,
41-
value
44+
value,
45+
labelHidden
4246
}) => {
4347
return `<db-checkbox
4448
${autofocus ? 'autofocus=' + autofocus : ''}
@@ -47,5 +51,6 @@ export const LiveDemo = ({
4751
${label ? 'label=' + label : ''}
4852
${name ? 'name=' + name : ''}
4953
${required ? 'required=' + required : ''}
50-
${value ? 'value=' + value : ''}></db-checkbox>`;
54+
${value ? 'value=' + value : ''}
55+
${labelHidden ? 'label-hidden=' + labelHidden : ''}></db-checkbox>`;
5156
};

‎packages/db-ui-elements-stencil/src/components/db-checkbox/stories/db-checkbox.intro.stories.mdx

+12
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,16 @@ Make checkbox look like in an indeterminate state by adding the 'indeterminate'
3131

3232
Alternatively, one can directly call `<db-checkbox>.setIndeterminate(boolean)` on the web component to set the state indeterminate state of the checkbox via JavaScript.
3333

34+
<db-headline variant="2">visually hide the label</db-headline>
35+
36+
> A label for a form control helps everyone better understand its purpose. In some cases, the purpose may be clear enough from the context when the content is rendered visually. The label can be hidden visually, though it still needs to be provided within the code to support other forms of presentation and interaction, such as for screen reader and speech input users.
37+
38+
source: <https://www.w3.org/WAI/tutorials/forms/labels/#hiding-label-text>
39+
40+
You could set the attribute `label-hidden="true"` for the rare case that you would want to visually hide the textual label for a checkbox element.
41+
42+
<Canvas>
43+
<db-checkbox label="Checkbox" name="checkbox-name" label-hidden="true"></db-checkbox>
44+
</Canvas>
45+
3446
<Readme />

0 commit comments

Comments
 (0)