Skip to content
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

Jump to bottom

feat: added possibility to visually hide the label #1973

Merged
merged 29 commits into from
Jan 24, 2024
Merged

feat: added possibility to visually hide the label #1973

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
3daaf2c
feat: added possibility to visually hide the label #1932
mfranzke Nov 3, 2023
72e13c6
Merge branch 'main' into 1932-form-elements-provide-possibility-to-vi…
mfranzke Nov 6, 2023
2d1e79f
Update db-checkbox.tsx
mfranzke Nov 30, 2023
f61f596
Update db-checkbox.intro.stories.mdx
mfranzke Nov 30, 2023
2114bce
Merge branch 'main' into 1932-form-elements-provide-possibility-to-vi…
mfranzke Nov 30, 2023
e8c5bda
Merge branch 'main' into 1932-form-elements-provide-possibility-to-vi…
mfranzke Dec 15, 2023
8076fa4
Merge branch 'main' into 1932-form-elements-provide-possibility-to-vi…
mfranzke Dec 15, 2023
7dc0372
Merge branch 'main' into 1932-form-elements-provide-possibility-to-vi…
mfranzke Jan 11, 2024
07249b0
Merge branch 'main' into 1932-form-elements-provide-possibility-to-vi…
mfranzke Jan 11, 2024
af6bd57
Merge branch 'main' into 1932-form-elements-provide-possibility-to-vi…
mfranzke Jan 11, 2024
41c6fad
refactor: regenerated package lock files
mfranzke Jan 11, 2024
af2a669
feat: added attribute
mfranzke Jan 11, 2024
75b6e0f
Merge branch '1932-form-elements-provide-possibility-to-visually-hide…
mfranzke Jan 11, 2024
b79bc7d
docs: added further documentation
mfranzke Jan 11, 2024
7accaa1
Update db-textarea.intro.stories.mdx
mfranzke Jan 11, 2024
23c80f5
Merge branch 'main' into 1932-form-elements-provide-possibility-to-vi…
mfranzke Jan 12, 2024
2450c29
refactor: corrected these attributes aspects
mfranzke Jan 12, 2024
7767b9c
chore: "typo"
mfranzke Jan 12, 2024
6dfd3f3
refactor: corrected these attributes aspects
mfranzke Jan 12, 2024
94e2f1f
docs: updated readme
mfranzke Jan 12, 2024
85a5794
Merge branch 'main' into 1932-form-elements-provide-possibility-to-vi…
mfranzke Jan 16, 2024
077932a
Merge branch 'main' into 1932-form-elements-provide-possibility-to-vi…
mfranzke Jan 17, 2024
6298e99
refactor: added the new property to storybook story
mfranzke Jan 18, 2024
fc3fd02
Merge branch 'main' into 1932-form-elements-provide-possibility-to-vi…
mfranzke Jan 18, 2024
6cf57a8
refactor: added the new property to storybook story
mfranzke Jan 18, 2024
db02649
Merge branch 'main' into 1932-form-elements-provide-possibility-to-vi…
mfranzke Jan 19, 2024
b04a7ae
Merge branch 'main' into 1932-form-elements-provide-possibility-to-vi…
mfranzke Jan 23, 2024
769f8d2
refactor: updated readme files
mfranzke Jan 23, 2024
0e3f5de
Merge branch 'main' into 1932-form-elements-provide-possibility-to-vi…
mfranzke Jan 24, 2024
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
2 changes: 1 addition & 1 deletion packages/db-ui-elements-stencil/src/components/db-card/readme.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading