Skip to content

Commit

Permalink
feat: added possibility to visually hide the label (#1973)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@mfranzke
mfranzke authored Jan 24, 2024
1 parent dcaee41 commit 821f4aa
Show file tree
Hide file tree
Showing 22 changed files with 172 additions and 40 deletions.
2 changes: 1 addition & 1 deletion packages/db-ui-elements-stencil/src/components/db-card/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
| `alt` | `alt` | The alt attribute for the image. | `string` | `undefined` |
| `content` | `content` | The content represents the content of the card. It's optional and you can use slot for custom tags. | `string` | `undefined` |
| `header` | `header` | The header represents the title of the card. It's optional and you can use slot for custom tags. | `string` | `undefined` |
| `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` |
| `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` |
| `image` | `image` | The prop image can be used instead of illustration to show a custom img. | `string` | `undefined` |
| `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'` |
| `variant` | `variant` | The variant which is banner or title. | `"banner" \| "title"` | `'banner'` |
Expand Down
13 changes: 11 additions & 2 deletions packages/db-ui-elements-stencil/src/components/db-checkbox/db-checkbox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,15 @@ export class DbCheckbox {
@Prop({ reflect: true }) value: string;

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

/**
* 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).
*/
@Prop({ reflect: true }) labelHidden: string;

/**
* Method that acceps a boolean and sets the indeterminate state of the checkbox accordingly.
*/
Expand Down Expand Up @@ -91,7 +96,11 @@ export class DbCheckbox {
onChange={(event) => this.handleChange(event)}
/>

<label class="elm-label" htmlFor={this.input_id}>
<label
class="elm-label"
htmlFor={this.input_id}
data-label-hidden={this.labelHidden}
>
{this.label}
</label>
</Host>
Expand Down
3 changes: 2 additions & 1 deletion packages/db-ui-elements-stencil/src/components/db-checkbox/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,10 @@
| `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` |
| `checked` | `checked` | The checked content attribute is a boolean attribute that gives the default checkedness of the input element. | `boolean` | `undefined` |
| `disabled` | `disabled` | The disabled attribute can be set to keep a user from clicking on the input. | `boolean` | `undefined` |
| `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` |
| `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` |
| `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()` |
| `label` _(required)_ | `label` | The label attribute specifies the caption of the input. | `string` | `undefined` |
| `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` |
| `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` |
| `required` | `required` | The required attribute is a boolean attribute. When specified, the element is required. | `boolean` | `undefined` |
| `value` | `value` | The value content attribute gives the default value of the input element. | `string` | `undefined` |
Expand Down
9 changes: 7 additions & 2 deletions ...ges/db-ui-elements-stencil/src/components/db-checkbox/stories/db-checkbox.demo.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@ export default {
},
value: {
control: 'text'
},
labelHidden: {
control: 'boolean'
}
}
};
Expand All @@ -38,7 +41,8 @@ export const LiveDemo = ({
label,
name,
required,
value
value,
labelHidden
}) => {
return `<db-checkbox
${autofocus ? 'autofocus=' + autofocus : ''}
Expand All @@ -47,5 +51,6 @@ export const LiveDemo = ({
${label ? 'label=' + label : ''}
${name ? 'name=' + name : ''}
${required ? 'required=' + required : ''}
${value ? 'value=' + value : ''}></db-checkbox>`;
${value ? 'value=' + value : ''}
${labelHidden ? 'label-hidden=' + labelHidden : ''}></db-checkbox>`;
};
12 changes: 12 additions & 0 deletions ...ements-stencil/src/components/db-checkbox/stories/db-checkbox.intro.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,4 +31,16 @@ Make checkbox look like in an indeterminate state by adding the 'indeterminate'

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

<db-headline variant="2">visually hide the label</db-headline>

> 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.
source: <https://www.w3.org/WAI/tutorials/forms/labels/#hiding-label-text>

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.

<Canvas>
<db-checkbox label="Checkbox" name="checkbox-name" label-hidden="true"></db-checkbox>
</Canvas>

<Readme />
Loading

0 comments on commit 821f4aa

Please sign in to comment.