Skip to content

Commit ec947ca

Browse files
annschmfranzke
annsch
and
mfranzke
authored
refactor: guidelines 3.0 input style (#198)
* refactor: remove headline element – is replaced by base/typography styles * feat: added textfield sizes and label animation * feat: textfield variants * refactor: updated db-ui/base * style: guidlenes 3.0 * docs: added id * revert: headline component * revert: headline component * refactor: remove headline element – is replaced by base/typography styles * feat: added textfield sizes and label animation * feat: textfield variants * refactor: updated db-ui/base * style: guidlenes 3.0 * docs: added id * revert: headline component * revert: headline component * style: update latest * refactor: added wrapper element for icon styles * refactor: input type=search * style: ability for icons * docs: added backstop urls and migration guide * refactor: remove form-element * Update migrationGuide.adoc * refactor: ensure unique IDs programatically * Update migrationGuide.adoc * Update migrationGuide.adoc * Update input-sizes.json * Update input.hbs * Update input.hbs * docs: added some comment * fix: review feedback included * fix: review feedback included * test: remove variations to reduce test cases * refactor: form-element placeholder has been deleted * Update input.scss * chore: we shouldn't use optional here but let the build break in case the necessary dependencies aren't used. * Update textarea.scss * Update textarea.scss * chore: those would get adapted later * chore: those would need to get adapted later * chore: reverted removing those testcases * chore: removed this leftover from by previous checkin * refactor: use native behaviour with animated opacity * refactor: inserted review feedback * chore: update dependencies * style: corrected description's position Co-authored-by: Maximilian Franzke <[email protected]> Co-authored-by: Maximilian Franzke <[email protected]>
1 parent eabbd13 commit ec947ca

22 files changed

+454
-333
lines changed

‎docs/migrationGuide.adoc

+7
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,13 @@ We've remove the deprecated previous HTML implementation of the label by an `out
3636
- The `id`-attributes value on that `label` element needs to match the following attributes values that needs to get added onto the `progress` HTML tag itself:
3737
`aria-describedby="{{ id }}-label"`
3838

39+
=== `input`
40+
41+
- The input background style variations `semitransparent`, `solid`, `white` and `outline` have been removed. Input fields have only one background style left.
42+
- Introducing 3 different sizes of input fields according to our `tonality` introduction: `functional`, `regular`, `expressive
43+
- Integration of `data-icon-before` and `data-icon-after` property for enabling use of custom icons in input fields
44+
- Introducing new variations: `error`, `warning`, `success` and `information` following the new guidelines 3.0 color system
45+
3946
== DB UI Core 2.2.0 Migration Guide
4047

4148
=== progress element

‎helpers/unique-id.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/* eslint unicorn/prefer-module: 0, eqeqeq: 0 */
2+
module.exports = function (Handlebars) {
3+
Handlebars.registerHelper('unique-id', function () {
4+
// Adapted from https://www.codingdeft.com/posts/generate-uuid-javascript/
5+
const crypto = require('node:crypto');
6+
7+
const buf = crypto.randomBytes(16);
8+
9+
// Convert the buffer to a hexadecimal string
10+
const hex = buf.toString('hex');
11+
12+
// Return the hexadecimal string as a UUID
13+
return `id-${hex.slice(
14+
0,
15+
7
16+
)}-${hex.slice(8, 15)}-${hex.slice(16, 23)}-${hex.slice(24, 31)}`;
17+
});
18+
};

‎source/_patterns/01-elements/_form-element.scss

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// TODO common styles for formfields adopted from input

‎source/_patterns/01-elements/_form-elements.scss

-85
This file was deleted.

‎source/_patterns/01-elements/_form-elements.variables.scss

-40
This file was deleted.

‎source/_patterns/01-elements/input/_input.variables.scss

-5
This file was deleted.

‎source/_patterns/01-elements/input/input-sizes.hbs

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<dl>
2+
{{#each sizes}}
3+
<dt>{{size}}:</dt>
4+
<dd class="db-ui-{{size}}">{{> elements-input type=../type label=../label placeholder=../placeholder id=(unique-id) }}</dd>
5+
{{/each }}
6+
</dl>

‎source/_patterns/01-elements/input/input-sizes.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"sizes": [
3+
{
4+
"size": "functional",
5+
"label": "Functional"
6+
},
7+
{
8+
"size": "regular",
9+
"label": "Regular (default, data-size attribute is optional)"
10+
},
11+
{
12+
"size": "expressive",
13+
"label": "Expressive"
14+
}
15+
],
16+
"type": "text",
17+
"placeholder": "e.g. DB User",
18+
"label": "Textlabel"
19+
}

‎source/_patterns/01-elements/input/input-sizes.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
title: Input sizes
3+
order: 1
4+
---

‎source/_patterns/01-elements/input/input-variations.hbs

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1-
<dl>
1+
<dl class="db-ui-normal">
22
{{#each variations}}
33
<dt>{{variant}}:</dt>
4-
<dd>{{> elements-input type=../type label=../label placeholder=../placeholder }}</dd>
4+
<dd class="db-ui-functional">{{> elements-input type=../type label=../label placeholder=../placeholder id=(unique-id) }}</dd>
5+
<dt>&nbsp;</dt>
6+
<dd class="db-ui-normal">{{> elements-input type=../type label=../label placeholder=../placeholder id=(unique-id) }}</dd>
7+
<dt>&nbsp;</dt>
8+
<dd class="db-ui-expressive">{{> elements-input type=../type label=../label placeholder=../placeholder id=(unique-id) }}</dd>
59
{{/each }}
610
</dl>

‎source/_patterns/01-elements/input/input-variations.json

+12-8
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,24 @@
11
{
22
"variations": [
33
{
4-
"variant": "semitransparent",
5-
"id": "input16"
4+
"variant": "error",
5+
"message": "Error Message",
6+
"description": "Error Message Description"
67
},
78
{
8-
"variant": "white",
9-
"id": "input17"
9+
"variant": "warning",
10+
"message": "Warning Message",
11+
"description": "Warning Message Description"
1012
},
1113
{
12-
"variant": "solid",
13-
"id": "input18"
14+
"variant": "success",
15+
"message": "Success Message",
16+
"description": "Success Message Description"
1417
},
1518
{
16-
"variant": "outline",
17-
"id": "input19"
19+
"variant": "information",
20+
"message": "Information",
21+
"description": "Information Message Description"
1822
}
1923
],
2024
"type": "text",

‎source/_patterns/01-elements/input/input.demonstration.scss

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
[id|="elements-input"] {
2+
dl {
3+
display: grid;
4+
grid-template-columns: 1fr 5fr;
5+
align-items: center;
6+
}
7+
28
dd {
3-
margin-bottom: 2rem;
9+
margin: 1rem 0;
410
}
511
}
612

‎source/_patterns/01-elements/input/input.hbs

+34-25
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,34 @@
1-
<!-- The aria-labelledby attribute on the input and related id on the label as well as aria-hidden="true" are being set for correct support within assistive tools like screenreaders //-->
2-
<!-- [html-validate-disable-next input-missing-label] -->
3-
<input type="{{ type }}"
4-
class="elm-input {{ styleModifier }}"
5-
placeholder="{{ placeholder }}"
6-
name="{{ id }}"
7-
id="{{ id }}"
8-
{{#if disabled}} disabled{{/if }}
9-
value="{{ value }}"
10-
{{#if describedbyid }} aria-describedby="{{ describedbyid }}"{{/if }}
11-
{{#if aria-invalid }} aria-invalid="{{ aria-invalid }}"{{/if }}
12-
{{{ validation }}}
13-
{{#if datalist }} list="datalist{{ id }}"{{/if }}
14-
aria-labelledby="{{ id }}-label"
15-
{{#if variant}} data-variant="{{variant}}"{{/if }}>
16-
<label class="elm-label"
17-
for="{{ id }}"
18-
aria-hidden="true"
19-
id="{{ id }}-label">{{ label }}</label>
20-
{{#if description }}<p{{#if describedbyid }} id="{{ describedbyid }}"{{/if }} class="description">{{{ description }}}</p>{{/if }}
21-
{{#if datalist }}<datalist id="datalist{{ id }}">
22-
{{#each datalistItems }}
23-
<option{{#if value }} value="{{ value }}"{{/if }}>{{ text }}</option>
24-
{{/each }}
25-
</datalist>{{/if }}
1+
<div class="elm-input"
2+
{{#if variant}} data-variant="{{variant}}"{{/if }}
3+
{{#if icon-before}} data-icon-before="{{icon-before}}"{{/if}}
4+
{{#if icon-before}} data-icon-after="{{icon-after}}"{{/if}}>
5+
<!-- The aria-labelledby attribute on the input and related id on the label as well as aria-hidden="true" are being set for correct support within assistive tools like screenreaders //-->
6+
<!-- [html-validate-disable-next input-missing-label] -->
7+
<input type="{{ type }}"
8+
{{#if styleModifier }}class="{{ styleModifier }}"{{/if }}
9+
placeholder="{{ placeholder }}"
10+
name="{{ id }}"
11+
id="{{ id }}"
12+
{{#if disabled}} disabled{{/if }}
13+
value="{{ value }}"
14+
{{#if describedbyid }} aria-describedby="{{ describedbyid }}"{{/if }}
15+
{{#if aria-invalid }} aria-invalid="{{ aria-invalid }}"{{/if }}
16+
{{{ validation }}}
17+
{{#if datalist }} list="datalist{{ id }}"{{/if }}
18+
aria-labelledby="{{ id }}-label">
19+
<label for="{{ id }}"
20+
aria-hidden="true"
21+
id="{{ id }}-label">{{ label }}</label>
22+
23+
{{#if description }}<p{{#if describedbyid }} id="{{ describedbyid }}"{{/if }} class="description">{{{ description }}}</p>{{/if }}
24+
25+
{{#if datalist }}<datalist id="datalist-{{ id }}">
26+
{{#each datalistItems }}
27+
<option{{#if value }} value="{{ value }}"{{/if }}>{{ text }}</option>
28+
{{/each }}
29+
</datalist>
30+
{{/if }}
31+
32+
{{!-- icon for data-variants like error or success --}}
33+
<span class="elm-state-icon"></span>
34+
</div>

0 commit comments

Comments
 (0)