db-ui/core

Technical Frontend implementation of the DB UX Design System (successor of DB UX & EDS Guidelines)

core's Issues

PR merged even though that linting failed

As already mentioned with db-ui/mono#152 some PRs have been merged (automatically) even though that the linting step failed.

Type: should we provide fallbacks for h5 and h6

Currently h5 and h6 are not defined by styleguide v2.x. Shouldn't we provide fallbacks in case of users add h5 or h6 tags on their page? (E.g. font size Body 1 with font-weight bold).

Provide review deployments

The other repositories even already provide review folders, so we should adapt this to DB UI Core as well.

Chips & Tags: Evaluate especially on screenreader verbalization

Evaluate on a11y, as this pattern might not correctly get read out by screenreaders:
https://db-ui.github.io/core/patterns/elements-chips/index.html

We most likely need to adapt the aria-labelledby attribute for the input element as included within the input pattern.

table: horizontally scrollable table with an included overflow-menu

We should set up an example with an horizontally scrollable table component with an included overflow-menu component, which is currently being reported to get cut off.

docs: move base parts to DB UI Base

Move the Base parts of the DB UI Core documentation to DB UI Base to remove the redundant documentation parts and link to those pages afterwards out of DB UI Core.

Checkboxes (DB UX Design System v3)

The following changes will be part of the Guidelines 3.0 to the checkbox element:

General

• clarify on dark background usage / examples still to keep in the generated examples

Sizes

• Added this whole possibility to define sizes

States

• Added this whole possibility to style the required state

Additionally

• CHANGELOG.md entries, both for prereleases (underneath Unreleased at the beginning) as well as in a hidden (by comment) summary at the beginning
• docs/migrationGuide.adoc
• Test-URLs: .pa11yci and tests/backstop.json

Remove IE 11 workarounds and left-overs

https://blogs.windows.com/windowsexperience/2022/06/15/internet-explorer-11-has-retired-and-is-officially-out-of-support-what-you-need-to-know/

Using new CSS 4 selector: user-invalid

Evaluate to use :user-invalid instead of :invalid within our code base, as this is actually the expected behaviour by our creative colleagues, as soon as it lands and is stable in the evergreen browsers:

• https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid
• https://caniuse.com/mdn-css_selectors_user-invalid

Progress (Loading Indicator) - Follow Up

Follow up for previous redesign work:

• Spinner
• Rounded edges at both ends for the linear spinner
• Rounded edges at both ends for the circular lines

Link (Guidelines 3.0)

The following changes will be part of the Guidelines 3.0 to the link element:

tbd

Additionally

• CHANGELOG.md entries, both for prereleases (underneath Unreleased at the beginning) as well as in a hidden (by comment) summary at the beginning
• docs/migrationGuide.adoc
• Test-URLs: .pa11yci and tests/backstop.json

Automatic rebase for dependabot PRs on changes to the target branch

In case of any changes to the target branch we might need to tell dependabot to rebase it's pull request. With a huger amount of PRs, this might get a time consuming task, so we should look into this whether we could automate this task.

Candidates:

• https://github.com/marketplace/actions/gha-auto-dependabot-rebase
• kodiak: https://kodiakhq.com/docs/config-reference#mergeautomerge_dependenciesversions (might be the better option as it would update all PRs, not just dependabot)
  • example: https://github.com/Maxim-Mazurok/google-api-typings-generator/blob/40d393bdb1e41d72599250c5366c1e83b8eac5ce/.kodiak.toml

Input: Guidelines 3.0 follow up

As a follow up to #198 we need to provide the following pattern variants:

• type number

• type date

• type datetime-local

• type week

• type month

• discuss pointer-events: none for label

• Even also evaluate whether to include span.elm-state-icon within the description.

add dependabot

Resolved by #21

Buttons (Guidelines 3.0)

The following changes will be part of the Guidelines 3.0 to the button element:

General

• background-color should change on hover hover with a transition
• Retrieve colors from the new DB UI Base values
• Decide for an animation

Variants

• Brand primary becomes the regular Primary button
• Primary becomes Secondary Inverted
• Secondary Outline becomes Secondary
• Secondary Solid becomes Tertiary
• Tertiary Plain becomes Ghost

States

• Disabled state gets styled by opacity-only again instead of additionally defining all disabled buttons by the grey color
• reworked: black-color-values for Hover and Pressed states (Secondary, Tertiary and Ghost types) have been refactored to 12% for Hover and 24% for Pressed
• Added loading state

Size

• Adding XSmall size
• reworked: Adding XLarge and XXSmall sizes
• Renaming regular size to medium
• reworked: Button sizes S and XS use 16px icons

Content

• Removing icon after label from the examples

Behaviour

• Adding FullWidth

Additionally

• CHANGELOG.md entries, both for prereleases (underneath Unreleased at the beginning) as well as in a hidden (by comment) summary at the beginning
• docs/migrationGuide.adoc
• Test-URLs: .pa11yci and tests/backstop.json

Some fonts not available in CSS

There are some fonts in https://github.com/db-ui/base/tree/main/assets/fonts (dbscreenhead-regular, dbscreensans-medium, dbscreensans-semibold, ...) which are not converted to CSS definitions of those fonts (see https://github.com/db-ui/core/blob/main/source/_patterns/00-base/type/_fonts.variables.scss).

Is there a reason for this mismatch?

Textfield (Guidelines 3.0)

The following changes will be part of the Guidelines 3.0 to the textfield element:

• add variants
• add colors
• add different states
• remove unused styles

Additionally

• CHANGELOG.md entries, both for prereleases (underneath Unreleased at the beginning) as well as in a hidden (by comment) summary at the beginning
• docs/migrationGuide.adoc
• Test-URLs: .pa11yci and tests/backstop.json

Select: Include better default values

Within the select pattern we're include a quite generic label as well as option values directly within the code. Additionally we should align the different <option> tags value-attributs, currently only one of them includes a value-attribute.

Options:

https://github.com/db-ui/core/blob/main/source/_patterns/01-elements/select/_select.hbs#L9L12

Label

https://github.com/db-ui/core/blob/main/source/_patterns/01-elements/select/_select.json#L3

Legal documents: Decide for a language

    why do we mix language values here? Shouldn't we leave it in german as default?

We should decide whether we provide both language versions and/or only one of them (translate the "Datenschutzerklärung", or link to the german imprint).

Originally posted by @annsch in #270 (comment)

markdownlint doesn't provide correct results

As mentioned by @shartte within db-ui/base#252, while committing some markdownlint errors come up. These weren't shown on MacOS environments, but could get fixed by quoting the globs:
https://github.com/igorshubovych/markdownlint-cli#globbing

Invalid styling only applied when placeholder is not shown

We're not sure if this is the intended behavior: an input with label and placeholder that is marked as required and empty will never be styled as invalid because the invalid rule is restricted to :not(:placeholder-shown). We would argue that placeholders are intended to indicate what should be entered into a field and not that the field is optional.

overflow-menu: being cut off in scrollable table

Optimize contribution guidelines

Currently we're having two sections for contributions within our README file – we should most likely merge this to one, and even also extract relevant information to the separate CONTRIBUTING.md file.

That file would additionally need some more rework, as we're currently mentioning the husky dependency, but especially for somebody new to the project don't mention how they should do this, as in general this dependency would get installed by the general npm install:
https://github.com/db-ui/core/blob/main/CONTRIBUTING.md?plain=1#L9

Besides that we should mention some prerequisites like e.g. nvm that would ensure the expected node version to be installed.

BUG: db-accordion Summary is not sizing well when text is too long

I have came across to a problem on accordion and it can be simply reproduced on the play ground

Expected result should be

refactor: rename v3 branch to dbux-3 to map with style guidelines

adapted from db-ui/base#82 and db-ui/base#83

Moving some general declarations to DB UI Base

    what about moving those to DB UI Base ?

Originally posted by @mfranzke in #89 (comment)

Evaluate to refactor all classes

Either replace or prepend all existing namespaces of elm-/cmp-/rea- (and possible future tpl- for templates, all of which inform the users of their types) by another namespace (e.g. db-).

refactor: evaluate generalizing (background-)color transition property

    I'm wondering whether we should probably include the transition property (`color`) in here as well (and/or in DB Base code already). Currently the transition property is not included in this declaration and that might mean that all CSS properties would get animated (which is not what the variable name implies).

Originally posted by @mfranzke in #89 (comment)

Automate sync of v3 and main branches

pattern lab / migrate to new ways of hiding and ordering the patterns

As a follow up to #218 let's migrate all of the previous implementations

Docs: Incremental CSS file consumption

Better document both that we render incremental component css files, as well as how to use them as well as the necessary global css (node_modules/@db-ui/core/dist/css/db-ui-core.general.css and node_modules/@db-ui/core/dist/css/db-ui-core.vars.css) within ones project, as well as which SCSS to customize if necessary:

• $icons-path(default: "../../icons/")
• $images-path (default: "../../images/")
• $fonts-path (default: "../../fonts/")

Update colors for interactive layers

Reference: Zeplin, Slide Interactive Color Layers

New color Values

DB Red
default: #EC0016
hover: #CF0013
pressed: #B00010

Grey
default: #282D37
hover: #3F4757
pressed: #556075

White
default: #FFFFFF
hover: #E0E0E0
pressed: #C2C2C2

Light Grey
default: #D7DCE1
hover: #B9BDC2
pressed: #9CA0A3

Darker Grey
default: #646973
hover: #494D54
pressed: #2F3136

Transparent (on Light)
default: rgba(40,45,55,0.00)
hover: rgba(40,45,55,0.12)
pressed: rgba(40,45,55,0.24)
selected: rgba(40,45,55,0.36)

Transparent (on Dark)
default: rgba(255,255,255,0.00)
hover: rgba(255,255,255,0.12)
hover: rgba(255,255,255,0.24)
pressed: rgba(255,255,255,0.36)

Medium Grey
default: #878C96
hover: #6C7078
pressed: #505359

Current version

DB Red
default: #EC0016
hover: #D90016
pressed: #C40012

Grey
default: #282D37
hover: #383F4D
pressed: #464F61

White
default: #FFFFFF
hover: #EBEBEB
pressed: #D6D6D6

Light Grey
default: #D7DCE1
hover: #C3C7CC
pressed: #AFB4B8

Darker Grey
default: #646973
hover: #52565E
pressed: #40444A

Transparent (on Light)
default: rgba(40,45,55,0.00)
hover: rgba(40,45,55,0.08)
pressed: rgba(40,45,55,0.16)
selected: rgba(40,45,55,0.12)

Transparent (on Dark)
default: rgba(255,255,255,0.00)
hover: rgba(255,255,255,0.08)
pressd: rgba(255,255,255,0.16)
selected: rgba(255,255,255,0.12)

Medium Grey
default: #878C96
hover: #757982
pressed: #63666E

Provide DB Screen Sans Digital Regular font references

As a follow up to #17 we'll provide the DB Screen Sans Digital Regular definitions from now within the @font-face declarations, but don't reference them at the moment.

see also db-ui/mono#396

Suggestion: provide an option to disable icon's automatic margin-inline-end

At the moment, all icons receive a small amount of right margin, which is very helpful when they're placed in front of text.

However, in some situations, there is no text afterwards and the margin causes a weird look. In Core, for icononly buttons and similar (but not all) use cases, there's styling to reset the margin to 0. This isn't applied in Elements though, because icons use the shadow DOM there.

I would love an additional attribute like data-icon-margin with values default | none or similar to enable users to remove margin whenever needed.

Opening issue in Core because the general option to remove margin might be relevant to many, regardless of framework. Let me know if I should open in Elements instead.

button: adapt disabled styling by Guidelines version 3

Buttons sollen im Disabled State nicht mehr pauschal den grauen Farbton erhalten, sondern in Anlehnung an die 3.0 Library gestaltet sein.
Das bedeutet, dass der initiale Button erhalten bleibt und der disabled Zustand mittels Transparenzen visualisiert wird. Diese Logik überträgt sich auf alle vorhandenen Buttons.

Akzeptanzkriterien

• Flächen
  Die Hintergrundfläche werden mit 25% Opacity als disabled dargestellt
• Rahmen
  Rahmen werden analog zu Flächen behandelt und werden mit 25% Opacity als disabled dargestellt
• Text & Icon
  Text und Icon werden mit 50% Opacity als disabled dargestellt

Beispiel und Hinweis

Es kann nicht pauschal mit einer Opacity auf dem Button gearbeitet werden, da die Elemente im Vordergrund (Label & Icon) anders gehandhabt werden als der Hintergrund.

see also internal ticket no. DBSWC-881

Optimize GitHub CI/CD

Modularize the different steps and cache the artifacts

Integrate Issue and PR templates

We'd like to mention aspects like e.g. our CONTRIBUTION guidelines and aspects someone should check before UI contributions like e.g. emulating forced-colors, prefers-colors-scheme (probably we mention those in an extra document, that we even also link from the CONTRIBUTION file.

https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/creating-a-pull-request-template-for-your-repository

Hide browser standard styles cancel icon

Per request we should evaluate whether we even already hide the standard-browser-styles cancel icon, that is specifically defined for search input types, like e.g. by the following declarations:
https://stackoverflow.com/a/18856343

We should compare to the Design System documentation and align with the UX colleagues first.

Suggestion: Disable all interactions on disabled form controls

Currently, when a disabled form control or button contains HTML elements (for example, icons or spans for internationalization), clicking on that part of the content is not actually disabled. That means, disabled submit buttons actually submit forms.

We used an override with pointer-events: none to circumvent this behavior. To my knowledge, this rule is common in other UI frameworks. Could it be added to Core?

Our override:

db-button, button, db-select, select, db-input, input {
	&[disabled] {
		pointer-events: none;
	}
}

Buttons: Add tonality

refactor: replace sample images

Replace the sample images with solely produced images by ourselves:
https://unsplash.com/de/fotos/-UZa949e8LE

Hero Module

Functionality

• Positioning: begin (default) & center
• Besides headline element the following two are optional to get added:
  • body text
  • button

Migration guide: guidelines 3.0

• Removed Headline Element (set by default)
• Renamed Color, Type, Spacing Variables

Radio (DB UX Design System v3)

The following changes will be part of the Guidelines 3.0 to the radio element:

Sizes

• Added this whole possibility to define sizes

States

• Added this whole possibility to style the required state

Additionally

• CHANGELOG.md entries, both for prereleases (underneath Unreleased at the beginning) as well as in a hidden (by comment) summary at the beginning
• docs/migrationGuide.adoc
• Test-URLs: .pa11yci and tests/backstop.json

Cards: a11y / color contrast problem

the background and on colors contrasts for warnings and information are slightly too low.

Stylelint: evaluate a better order pattern

Previously we had an alphabetical order, which doesn't feel right for all of us. We'd instead like to have some logical ordering and should evaluate for a new stylelint plugin on this.

Evaluate changes out of husky 8 upgrade

Especially changes/simplifications out of feat: skip install if $HUSKY=0:
https://github.com/typicode/husky/releases#:~:text=feat%3A%20skip%20install%20if%20%24HUSKY%3D0

Not setting node version for pipelines

We're actually setting the node version for local development by .nvmrc, but not within the pipelines, which might result in unexpected problems.

This is most likely relevant for each dependent ci/cd helper we're using e.g. for installing dependencies, compare to https://github.com/bahmutov/npm-install#node-version

Hide Guidelines 2.0 patterns on Guidelines 3.0 branch

Related to db-ui/elements#307 & db-ui/base#69

Integrate logo sizes and related pulse as an option for headlines

• Integrate logo sizes
• Add pulse as an option for headlines
• Align size of pulse by the logo size