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

Lines changed: 7 additions & 0 deletions
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

Lines changed: 18 additions & 0 deletions
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

Lines changed: 1 addition & 0 deletions
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

Lines changed: 0 additions & 85 deletions
This file was deleted.

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

Lines changed: 0 additions & 40 deletions
This file was deleted.

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

Lines changed: 0 additions & 5 deletions
This file was deleted.

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

Lines changed: 6 additions & 0 deletions
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

Lines changed: 19 additions & 0 deletions
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

Lines changed: 4 additions & 0 deletions
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

Lines changed: 6 additions & 2 deletions
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>

0 commit comments

Comments
 (0)