diff --git a/docs/migration/alpha-beta.md b/docs/migration/alpha-beta.md index de61d4b89b2..20eb1448474 100644 --- a/docs/migration/alpha-beta.md +++ b/docs/migration/alpha-beta.md @@ -2,13 +2,6 @@ ## Foundations -### Internal - -| Name | Description | Action | -| --------------------------------- | ------------------------------------------------------------------------------------------ | ------ | -| ❌ removed `style-dictonary` | all variables will be generated in [theme-builder](https://github.com/db-ui/theme-builder) | --- | -| ❌ removed `zeplin-styleguide.js` | we use `Figma` in the future | --- | - ### Breaking Changes | Name | Description | Action | @@ -19,17 +12,24 @@ | 🔄 moved `_font-sizes.scss` | We moved the file to another folder to align the same structure as icons or colors. We add `css` classes, you can use them by importing `@db-ui/foundations/scss/fonts/classes/all.css` | If you use some placeholder like `%db-overwrite-font-size-sm` you might need to import the `_font-sizes.scss` like this: `@use "@db-ui/foundations/build/scss/fonts";` | | 🔄 ❗ refactored `colors` | All colors changed. We use color-palettes to generate speaking-names (check `@db-ui/foundations/scss/colors/_variables.scss` to see a list of available tokens). We removed `base` color, it was the same like `neutral`. Add different background level. | 1. Replace all `base` colors with `neutral`
2. If you use the color class replace `db-bg-x` with `db-x-bg-lvl-1`
3. Replace `border-strong`/ `border-weak` tokens with `contrast-high`/`contrast-low` | +### Internal + +| Name | Description | Action | +| --------------------------------- | ------------------------------------------------------------------------------------------ | ------ | +| ❌ removed `style-dictonary` | all variables will be generated in [theme-builder](https://github.com/db-ui/theme-builder) | --- | +| ❌ removed `zeplin-styleguide.js` | we use `Figma` in the future | --- | + ## Components > **Note**: All components have different colors and opacities based on the changes in foundations. -> -> Some components may have different dimensions based on changes of spacing tokens. -> -> We removed the default elevation (box-shadow) for card and some card-like components. -> -> The prop variant (`variant="informational"`,`variant="successful"`,`variant="warning"`,`variant="critical"`) has been renamed to `semantic`. -> -> The prop labelVariant for form-components (input, checkbox, ...) has been renamed to `variant`. + +Some components may have different dimensions based on changes of spacing tokens. + +We removed the default elevation (box-shadow) for card and some card-like components. + +The prop variant (`variant="informational"`,`variant="successful"`,`variant="warning"`,`variant="critical"`) has been renamed to `semantic`. + +The prop labelVariant for form-components (input, checkbox, ...) has been renamed to `variant`. | Name | Description | Action | | -------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | diff --git a/packages/components/docs/Validation.md b/packages/components/docs/Validation.md index e914221f6e0..a3751eea2d0 100644 --- a/packages/components/docs/Validation.md +++ b/packages/components/docs/Validation.md @@ -1,18 +1,18 @@ # Validation - The form components `checkbox`, `radio`, `input`, `textarea` & `select` have some sort of "auto-validation" -- `radio` do have a color change if you use the `required` attribute. If you use [required](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation) they will be highlighted directly +- `radio` do have a color change if you use the `required` attribute. If you use [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation) they will be highlighted directly - If you use `required` on `input`, `textarea` or `select` you will see invalid/valid states only on submitting or `onchange` - There are some other attributes for `input` (`type`,`minlength`,`maxlength`,`pattern`) and `textarea`(`minlength`,`maxlength`) which can be used for [validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation). -> **Note:** When you use some validation like `required` for `input`, `textarea` or `select` you need to provide a `invalidMessage` and a `validMessage`. Otherwise, you will see a TODO message to inform you that an additional property should be provided. +> **Note:** When you use some validation like `required` for `input`, `textarea` or `select` you need to provide a `invalidMessage` (if needed, elsewhere we use the localized browser defaults, which might be fine on most cases) and a `validMessage`. Otherwise, you will see a `TODO` message to inform you that an additional property should be provided. ## Valid/Invalid Messages If you use some framework you can pass the props `invalidMessage` and `validMessage` to the component. If you use plain html you need to add 2 `.db-infotext` with `[data-semantic="successful"]` &`[data-semantic="critical"]` inside your form-element. -## Handle validation by your self +## Programmatically set / handle validation by yourself You can use `data-custom-validity|customValidity="'invalid' | 'valid' | 'no-validation'"` to disable [`:user-valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid). -> **Note:** This may lead to problems and inconsistency, only use it if you know what you do! +> **Note:** This may lead to problems and inconsistency, only use it if you know what you do, and have specific validation conditions that aren't possible to get defined by the huge range of already existing [validation conditions and patterns through attributs](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation).