diff --git a/__snapshots__/checkbox/component/chromium/DBCheckbox-should-match-screenshot.png b/__snapshots__/checkbox/component/chromium/DBCheckbox-should-match-screenshot.png index 1b0b9115c87..46fe5165749 100644 Binary files a/__snapshots__/checkbox/component/chromium/DBCheckbox-should-match-screenshot.png and b/__snapshots__/checkbox/component/chromium/DBCheckbox-should-match-screenshot.png differ diff --git a/__snapshots__/checkbox/component/mobile-chrome/DBCheckbox-should-match-screenshot.png b/__snapshots__/checkbox/component/mobile-chrome/DBCheckbox-should-match-screenshot.png index 1b0b9115c87..46fe5165749 100644 Binary files a/__snapshots__/checkbox/component/mobile-chrome/DBCheckbox-should-match-screenshot.png and b/__snapshots__/checkbox/component/mobile-chrome/DBCheckbox-should-match-screenshot.png differ diff --git a/__snapshots__/checkbox/component/mobile-safari/DBCheckbox-should-match-screenshot.png b/__snapshots__/checkbox/component/mobile-safari/DBCheckbox-should-match-screenshot.png index 9c00d05745d..cb830c7c3de 100644 Binary files a/__snapshots__/checkbox/component/mobile-safari/DBCheckbox-should-match-screenshot.png and b/__snapshots__/checkbox/component/mobile-safari/DBCheckbox-should-match-screenshot.png differ diff --git a/__snapshots__/checkbox/component/webkit/DBCheckbox-should-match-screenshot.png b/__snapshots__/checkbox/component/webkit/DBCheckbox-should-match-screenshot.png index 9c00d05745d..cb830c7c3de 100644 Binary files a/__snapshots__/checkbox/component/webkit/DBCheckbox-should-match-screenshot.png and b/__snapshots__/checkbox/component/webkit/DBCheckbox-should-match-screenshot.png differ diff --git a/__snapshots__/input/showcase/chromium/regular/neutral/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/chromium/regular/neutral/DBInput-should-match-screenshot.png index 68576b0ebe5..b48718b0710 100644 Binary files a/__snapshots__/input/showcase/chromium/regular/neutral/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/chromium/regular/neutral/DBInput-should-match-screenshot.png differ diff --git a/__snapshots__/input/showcase/mobile-chrome/regular/neutral/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/mobile-chrome/regular/neutral/DBInput-should-match-screenshot.png index 2e86bf810ce..ae292fce9e4 100644 Binary files a/__snapshots__/input/showcase/mobile-chrome/regular/neutral/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/mobile-chrome/regular/neutral/DBInput-should-match-screenshot.png differ diff --git a/__snapshots__/input/showcase/mobile-safari/regular/neutral/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/mobile-safari/regular/neutral/DBInput-should-match-screenshot.png index 86bc1c43fb3..6f57a23bbdc 100644 Binary files a/__snapshots__/input/showcase/mobile-safari/regular/neutral/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/mobile-safari/regular/neutral/DBInput-should-match-screenshot.png differ diff --git a/__snapshots__/input/showcase/webkit/regular/neutral/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/webkit/regular/neutral/DBInput-should-match-screenshot.png index 63dde0f918a..76bee87b920 100644 Binary files a/__snapshots__/input/showcase/webkit/regular/neutral/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/webkit/regular/neutral/DBInput-should-match-screenshot.png differ diff --git a/__snapshots__/radio/component/chromium/DBRadio-should-match-screenshot.png b/__snapshots__/radio/component/chromium/DBRadio-should-match-screenshot.png index 5bc994c9043..91fe04db13c 100644 Binary files a/__snapshots__/radio/component/chromium/DBRadio-should-match-screenshot.png and b/__snapshots__/radio/component/chromium/DBRadio-should-match-screenshot.png differ diff --git a/__snapshots__/radio/component/mobile-chrome/DBRadio-should-match-screenshot.png b/__snapshots__/radio/component/mobile-chrome/DBRadio-should-match-screenshot.png index 5bc994c9043..91fe04db13c 100644 Binary files a/__snapshots__/radio/component/mobile-chrome/DBRadio-should-match-screenshot.png and b/__snapshots__/radio/component/mobile-chrome/DBRadio-should-match-screenshot.png differ diff --git a/__snapshots__/radio/component/mobile-safari/DBRadio-should-match-screenshot.png b/__snapshots__/radio/component/mobile-safari/DBRadio-should-match-screenshot.png index 240da2d544e..0f1f0269c9b 100644 Binary files a/__snapshots__/radio/component/mobile-safari/DBRadio-should-match-screenshot.png and b/__snapshots__/radio/component/mobile-safari/DBRadio-should-match-screenshot.png differ diff --git a/__snapshots__/radio/component/webkit/DBRadio-should-match-screenshot.png b/__snapshots__/radio/component/webkit/DBRadio-should-match-screenshot.png index 240da2d544e..0f1f0269c9b 100644 Binary files a/__snapshots__/radio/component/webkit/DBRadio-should-match-screenshot.png and b/__snapshots__/radio/component/webkit/DBRadio-should-match-screenshot.png differ diff --git a/__snapshots__/select/component/chromium/DBSelect-should-match-screenshot.png b/__snapshots__/select/component/chromium/DBSelect-should-match-screenshot.png index 2eda716b3d8..0d005c80c19 100644 Binary files a/__snapshots__/select/component/chromium/DBSelect-should-match-screenshot.png and b/__snapshots__/select/component/chromium/DBSelect-should-match-screenshot.png differ diff --git a/__snapshots__/select/component/mobile-chrome/DBSelect-should-match-screenshot.png b/__snapshots__/select/component/mobile-chrome/DBSelect-should-match-screenshot.png index 2eda716b3d8..0d005c80c19 100644 Binary files a/__snapshots__/select/component/mobile-chrome/DBSelect-should-match-screenshot.png and b/__snapshots__/select/component/mobile-chrome/DBSelect-should-match-screenshot.png differ diff --git a/__snapshots__/select/component/mobile-safari/DBSelect-should-match-screenshot.png b/__snapshots__/select/component/mobile-safari/DBSelect-should-match-screenshot.png index 12260c05e33..6ac896081d0 100644 Binary files a/__snapshots__/select/component/mobile-safari/DBSelect-should-match-screenshot.png and b/__snapshots__/select/component/mobile-safari/DBSelect-should-match-screenshot.png differ diff --git a/__snapshots__/select/component/webkit/DBSelect-should-match-screenshot.png b/__snapshots__/select/component/webkit/DBSelect-should-match-screenshot.png index 12260c05e33..6ac896081d0 100644 Binary files a/__snapshots__/select/component/webkit/DBSelect-should-match-screenshot.png and b/__snapshots__/select/component/webkit/DBSelect-should-match-screenshot.png differ diff --git a/__snapshots__/tag/showcase/chromium/regular/neutral/DBTag-should-match-screenshot.png b/__snapshots__/tag/showcase/chromium/regular/neutral/DBTag-should-match-screenshot.png index 49d05abe5de..13df6b20ea4 100644 Binary files a/__snapshots__/tag/showcase/chromium/regular/neutral/DBTag-should-match-screenshot.png and b/__snapshots__/tag/showcase/chromium/regular/neutral/DBTag-should-match-screenshot.png differ diff --git a/__snapshots__/tag/showcase/mobile-chrome/regular/neutral/DBTag-should-match-screenshot.png b/__snapshots__/tag/showcase/mobile-chrome/regular/neutral/DBTag-should-match-screenshot.png index 0af1fe799c0..daea60bd92f 100644 Binary files a/__snapshots__/tag/showcase/mobile-chrome/regular/neutral/DBTag-should-match-screenshot.png and b/__snapshots__/tag/showcase/mobile-chrome/regular/neutral/DBTag-should-match-screenshot.png differ diff --git a/__snapshots__/tag/showcase/mobile-safari/regular/neutral/DBTag-should-match-screenshot.png b/__snapshots__/tag/showcase/mobile-safari/regular/neutral/DBTag-should-match-screenshot.png index a5c0e1b5ecd..11ceadaa9a8 100644 Binary files a/__snapshots__/tag/showcase/mobile-safari/regular/neutral/DBTag-should-match-screenshot.png and b/__snapshots__/tag/showcase/mobile-safari/regular/neutral/DBTag-should-match-screenshot.png differ diff --git a/__snapshots__/tag/showcase/webkit/regular/neutral/DBTag-should-match-screenshot.png b/__snapshots__/tag/showcase/webkit/regular/neutral/DBTag-should-match-screenshot.png index bca59ff4bc4..df1e1053638 100644 Binary files a/__snapshots__/tag/showcase/webkit/regular/neutral/DBTag-should-match-screenshot.png and b/__snapshots__/tag/showcase/webkit/regular/neutral/DBTag-should-match-screenshot.png differ diff --git a/__snapshots__/textarea/component/chromium/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/component/chromium/DBTextarea-should-match-screenshot.png index a970fb65a79..7449786fa53 100644 Binary files a/__snapshots__/textarea/component/chromium/DBTextarea-should-match-screenshot.png and b/__snapshots__/textarea/component/chromium/DBTextarea-should-match-screenshot.png differ diff --git a/__snapshots__/textarea/component/mobile-chrome/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/component/mobile-chrome/DBTextarea-should-match-screenshot.png index 669f18607e2..a47e7a34c41 100644 Binary files a/__snapshots__/textarea/component/mobile-chrome/DBTextarea-should-match-screenshot.png and b/__snapshots__/textarea/component/mobile-chrome/DBTextarea-should-match-screenshot.png differ diff --git a/__snapshots__/textarea/component/mobile-safari/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/component/mobile-safari/DBTextarea-should-match-screenshot.png index b78021f4dab..d756b7f5a89 100644 Binary files a/__snapshots__/textarea/component/mobile-safari/DBTextarea-should-match-screenshot.png and b/__snapshots__/textarea/component/mobile-safari/DBTextarea-should-match-screenshot.png differ diff --git a/__snapshots__/textarea/component/webkit/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/component/webkit/DBTextarea-should-match-screenshot.png index b78021f4dab..d756b7f5a89 100644 Binary files a/__snapshots__/textarea/component/webkit/DBTextarea-should-match-screenshot.png and b/__snapshots__/textarea/component/webkit/DBTextarea-should-match-screenshot.png differ diff --git a/__snapshots__/textarea/showcase/chromium/regular/neutral/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/chromium/regular/neutral/DBTextarea-should-match-screenshot.png index dfd686a6d74..a51d1b7d75a 100644 Binary files a/__snapshots__/textarea/showcase/chromium/regular/neutral/DBTextarea-should-match-screenshot.png and b/__snapshots__/textarea/showcase/chromium/regular/neutral/DBTextarea-should-match-screenshot.png differ diff --git a/__snapshots__/textarea/showcase/mobile-chrome/regular/neutral/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/mobile-chrome/regular/neutral/DBTextarea-should-match-screenshot.png index f88bc2e0179..249462cb972 100644 Binary files a/__snapshots__/textarea/showcase/mobile-chrome/regular/neutral/DBTextarea-should-match-screenshot.png and b/__snapshots__/textarea/showcase/mobile-chrome/regular/neutral/DBTextarea-should-match-screenshot.png differ diff --git a/__snapshots__/textarea/showcase/mobile-safari/regular/neutral/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/mobile-safari/regular/neutral/DBTextarea-should-match-screenshot.png index 0dc7e3da4b8..20c47343418 100644 Binary files a/__snapshots__/textarea/showcase/mobile-safari/regular/neutral/DBTextarea-should-match-screenshot.png and b/__snapshots__/textarea/showcase/mobile-safari/regular/neutral/DBTextarea-should-match-screenshot.png differ diff --git a/__snapshots__/textarea/showcase/webkit/regular/neutral/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/webkit/regular/neutral/DBTextarea-should-match-screenshot.png index 12c0b313da6..d634c0bfc6b 100644 Binary files a/__snapshots__/textarea/showcase/webkit/regular/neutral/DBTextarea-should-match-screenshot.png and b/__snapshots__/textarea/showcase/webkit/regular/neutral/DBTextarea-should-match-screenshot.png differ diff --git a/docs/definition-of-done-pr.md b/docs/definition-of-done-pr.md index b3c75914400..76b79262c20 100644 --- a/docs/definition-of-done-pr.md +++ b/docs/definition-of-done-pr.md @@ -2,9 +2,9 @@ ## General -- Depending on necessary code changes for consuming packages you'll probably need to add entries to [`docs/migrationGuide.adoc`](docs/migrationGuide.adoc) -- Please have a final lookup of all of your changes e.g. within the "Files changed" tab of the PR within GitHub. This final check could lead to some findings on outstanding work, missing TODOs, `console.log` leftovers or whatever. +- Depending on necessary code changes for consuming packages you'll probably need to add entries to [`docs/migrationGuide.adoc`](docs/migrationGuide.adoc) +- Please have a final lookup of all of your changes e.g. within the "Files changed" tab of the PR within GitHub. This final check could lead to some findings on outstanding work, missing TODOs, `console.log` leftovers or whatever. ## Added patterns -- Update the test-URLs within `.pa11yci` and `tests/backstop.json` +- Update the test-URLs within `.pa11yci` and `tests/backstop.json` diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx index ce860aaa092..0db57a3ef06 100644 --- a/packages/components/src/components/checkbox/checkbox.lite.tsx +++ b/packages/components/src/components/checkbox/checkbox.lite.tsx @@ -119,17 +119,25 @@ export default function DBCheckbox(props: DBCheckboxProps) { } } } - }, [state.initialized, props.indeterminate, props.checked, props.defaultChecked]); + }, [ + state.initialized, + props.indeterminate, + props.checked, + props.defaultChecked + ]); return ( - <> + ); } diff --git a/packages/components/src/components/checkbox/checkbox.scss b/packages/components/src/components/checkbox/checkbox.scss index 850d2e53954..6a637e5145e 100644 --- a/packages/components/src/components/checkbox/checkbox.scss +++ b/packages/components/src/components/checkbox/checkbox.scss @@ -3,98 +3,33 @@ @use "@db-ui/foundations/build/scss/tonality"; @use "@db-ui/foundations/build/scss/colors"; @use "../../styles/component"; - -// TODO: Move this to shared style -$font-size-height: calc(var(--db-base-font-size) * var(--db-base-line-height)); +@use "../../styles/form-components"; .db-checkbox { - @include colors.bg-transparent-interactive(); - - align-content: center; - - appearance: none; - aspect-ratio: 1; - position: relative; - - border: max(calc(#{$font-size-height} / 16 + 0.5px), 2px) solid currentColor; - border-radius: component.$checkbox-border-radius; + @extend %check-element; - display: inline-flex; - block-size: $font-size-height; - justify-content: center; - - // TODO: probably extract this to an overwrite or external file - // workarounds for power apps - inline-size: auto; - padding: 0; - - // We need to reset the general icons margin, as we want to use it in a tiny space - &:checked, - &:indeterminate { - --db-icon-margin-end: 0; + input { + border-radius: component.$checkbox-border-radius; &::before { + --db-icon-margin-end: 0; position: absolute; + inset-inline: 0; + inset-block: 0; } - } - - &:checked { - @extend %db-base-component-interactive; - - // Check icon - @include icons.set-icon("done"); - - // The icon within the checkbox has the same dimensions as the checkbox itself and that for there can't be any border - border-width: 0; - } - - // TODO: We need to set the correct styling / color for invalid - // &:is(:user-invalid), - // &[aria-invalid="true"] { - - // } - - &:indeterminate { - @include icons.set-icon("minus"); - - &::before { - line-height: 20px; - } - } - &:disabled { - &, - & + label { - opacity: 0.5; - } - } + &:checked { + @extend %db-base-component-interactive; - & + label { - margin-inline-start: variables.$db-spacing-fixed-xs; + // Check icon + @include icons.set-icon("done"); - vertical-align: top; - } - - // Sizes - &%size-Small { - @extend %db-overwrite-font-size-sm; - - // TODO: we still need to scale this - & + label { - @extend %db-overwrite-font-size-sm; - margin-inline-start: variables.$db-spacing-fixed-2xs; + // The icon within the checkbox has the same dimensions as the checkbox itself and that for there can't be any border + border-width: 0; } - } - - &[data-size="small"] { - @extend %size-Small; - } - &:required { - & + label { - &::after { - content: " *"; - } + &:indeterminate { + @include icons.set-icon("minus"); } } } diff --git a/packages/components/src/components/checkbox/docs/HTML.md b/packages/components/src/components/checkbox/docs/HTML.md index a3d01f670ed..269e1a746ba 100644 --- a/packages/components/src/components/checkbox/docs/HTML.md +++ b/packages/components/src/components/checkbox/docs/HTML.md @@ -8,12 +8,9 @@ For general installation and configuration take a look at the [components](https ... - - + ``` diff --git a/packages/components/src/components/drawer/drawer.scss b/packages/components/src/components/drawer/drawer.scss index 8100bf39495..3ad31d7afd4 100644 --- a/packages/components/src/components/drawer/drawer.scss +++ b/packages/components/src/components/drawer/drawer.scss @@ -169,41 +169,45 @@ $spacings: ( .db-drawer-container { &:not([data-direction]), &[data-direction="right"] { - animation: show-right-to-left animation.$animation-show-timing; + animation: show-right-to-left + variables.$db-transition-show-straight; } &[data-direction="left"] { - animation: show-left-to-right animation.$animation-show-timing; + animation: show-left-to-right + variables.$db-transition-show-straight; } &[data-direction="up"] { - animation: show-bottom-to-top animation.$animation-show-timing; + animation: show-bottom-to-top + variables.$db-transition-show-straight; } &[data-direction="down"] { - animation: show-top-to-bottom animation.$animation-show-timing; + animation: show-top-to-bottom + variables.$db-transition-show-straight; } &[hidden] { &:not([data-direction]), &[data-direction="right"] { animation: hide-right-to-left - animation.$animation-hide-timing; + variables.$db-transition-hide-straight; } &[data-direction="left"] { animation: hide-left-to-right - animation.$animation-hide-timing; + variables.$db-transition-hide-straight; } &[data-direction="up"] { animation: hide-bottom-to-top - animation.$animation-hide-timing; + variables.$db-transition-hide-straight; } &[data-direction="down"] { animation: hide-top-to-bottom - animation.$animation-hide-timing; + variables.$db-transition-hide-straight; } } } diff --git a/packages/components/src/components/input/docs/HTML.md b/packages/components/src/components/input/docs/HTML.md index a1ff0459fd7..c7da98e48fa 100644 --- a/packages/components/src/components/input/docs/HTML.md +++ b/packages/components/src/components/input/docs/HTML.md @@ -10,7 +10,7 @@ Use it: ```html
- - + +
``` diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx index 742b6c03516..1830adbebf7 100644 --- a/packages/components/src/components/input/input.lite.tsx +++ b/packages/components/src/components/input/input.lite.tsx @@ -2,7 +2,11 @@ import { For, onMount, Show, useMetadata, useStore } from '@builder.io/mitosis'; import { DBIcon } from '../icon'; import { cls, getMessageIcon, uuid } from '../../utils'; import { DBInputProps, DBInputState } from './model'; -import { DEFAULT_ID, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX } from '../../shared/constants'; +import { + DEFAULT_ID, + DEFAULT_LABEL, + DEFAULT_MESSAGE_ID_SUFFIX +} from '../../shared/constants'; import { KeyValueType } from '../../shared/model'; import { DBInfotext } from '../infotext'; @@ -55,9 +59,6 @@ export default function DBInput(props: DBInputProps) { label: DEFAULT_LABEL, placeholder: ' ' }, - iconVisible: (icon?: string) => { - return Boolean(icon && icon !== '_' && icon !== 'none'); - }, handleChange: (event: any) => { if (props.onChange) { props.onChange(event); @@ -115,14 +116,16 @@ export default function DBInput(props: DBInputProps) { return (
+ data-variant={props.variant} + data-label-variant={props.labelVariant} + data-icon={props.icon} + data-icon-after={props.iconAfter}> - {/* TODO: move this icon to [data-icon] */} - - - + - - - - diff --git a/packages/components/src/components/input/input.scss b/packages/components/src/components/input/input.scss index 1ac243cd64f..9926fa00f66 100644 --- a/packages/components/src/components/input/input.scss +++ b/packages/components/src/components/input/input.scss @@ -8,329 +8,90 @@ @use "../../styles/component"; @use "../../styles/form-components"; -:root, -.db-ui-regular, -.db-ui-expressive { - --db-input-disabled-label-opacity: 0.25; -} - -.db-ui-functional { - --db-input-disabled-label-opacity: 0; -} - -@mixin label-focus-animation( - $translationX: var(--db-input-padding-inline-start) -) { - $transformScale: -1.25; - - transition: - opacity 0.08s, - transform 0.15s; - opacity: var(--db-input-focus-opacity); - - // add 0.1em to adjust label with input padding-inline-start - transform: translate( - calc(#{$translationX} + 0.1em), - calc(#{variables.$db-sizing-md} * #{$transformScale}) - ) - scale(var(--db-input-label-scale)); -} - -%absolute-icon { - block-size: variables.$db-sizing-md; - display: flex; - align-items: center; - position: absolute; - inset-block-start: 0; - margin-inline: variables.$db-spacing-fixed-sm; -} - -%date-icon { - &::after { - @extend %absolute-icon; - pointer-events: none; - } - - input { - &::-webkit-calendar-picker-indicator { - margin-block-start: -0.75em; - background-image: none; - padding: 0 variables.$db-spacing-fixed-sm 0 0; - inline-size: icons.$default-icon-font-size; - block-size: icons.$default-icon-font-size; - } - } -} +// 1px for border +$icon-padding: calc( + #{form-components.$font-size-height} + 2 * #{variables.$db-spacing-fixed-sm} - + 1px +); .db-input { - --db-input-padding-inline-start: #{variables.$db-spacing-fixed-sm}; - --db-input-padding-end-icon-after: 0; - --db-input-padding-end-data-variant: 0; - --db-input-padding-end-datalist: 0; - --db-icon-margin-end: 0; - --db-input-label-max-width: 80%; - - @extend %default-form-message; - @extend %disabled-form-element; - @extend %required-form-element; - @extend %db-overwrite-font-size-sm; - - @include form-components.get-input-variants(); - - position: relative; + @include form-components.set-default-form-component(input); // padding-inline-end according to current amount of icons - &:has(> .icon-before, > [type="search"]) { - --db-input-padding-inline-start: #{calc(#{variables.$db-sizing-md})}; - --db-input-label-max-width: 70%; - - input { - padding-inline-start: var(--db-input-padding-inline-start); - } + &[data-icon], + &:has(input[type="search"]) { + --db-form-component-padding-inline-start: #{$icon-padding}; } - &:has(> .icon-after) { - --db-input-padding-end-icon-after: 1; + &[data-icon-after], + &:has(input[type="search"]), + &:has(datalist) { + --db-form-component-padding-inline-end: #{$icon-padding}; } - &[data-variant] { - --db-input-padding-end-data-variant: 1; - } - - // two trailing icons - &[data-variant]:has(> .icon-after) { - --db-input-label-max-width: 61%; - } - - &:has(> datalist):has(> .icon-after) { - .icon-after { - padding-inline-start: variables.$db-spacing-fixed-xs; - } - } - - &:has(> datalist) { - --db-input-padding-end-datalist: 1; - @extend %dropdown-icon; + &:has(input[type="search"]) { + @include icons.set-icon("search"); + @include icons.set-icon("cancel", "after"); &::after { - @extend %absolute-icon; + opacity: 0; + transition: opacity variables.$db-transition-duration-fast; } - &:has(input:is(:focus, :not(:placeholder-shown))) { + &:has(input:not(:placeholder-shown)):has( + input:hover, + input:focus-visible + ) { &::after { - transform: form-components.$dropdown-icon-transform; + opacity: 1; } } - - input { - &::-webkit-calendar-picker-indicator { - display: none !important; - } - } - } - - &:has(> [type="search"]) { - @include icons.set-icon("search"); - - &::before { - @extend %absolute-icon; - } } - &:has(> [type="date"]), - &:has(> [type="week"]), - &:has(> [type="datetime-local"]), - &:has(> [type="month"]) { - @extend %date-icon; + &:has(input[type="date"]), + &:has(input[type="week"]), + &:has(input[type="datetime-local"]), + &:has(input[type="month"]) { @include icons.set-icon("calendar", "after"); } - &:has(> [type="time"]) { - @extend %date-icon; + &:has(input[type="time"]) { @include icons.set-icon("schedule", "after"); } - .db-icon, - db-icon { - @extend %absolute-icon; - } - - .icon-after, - // angular specific nesting - dbicon.icon-after > .db-icon, - &::after, { - inset-inline-end: 0; - } - - .icon-after { - margin-inline-end: calc( - #{variables.$db-spacing-fixed-sm} + var( - --db-input-padding-end-datalist - ) * #{variables.$db-sizing-md} - var( - --db-input-padding-end-datalist - ) * #{variables.$db-spacing-fixed-sm} - ); - } - - // currently not supported by firefox - &:has(> input:disabled) { - .db-icon, - &:has(> datalist)::after { - opacity: 0.5; - } - } - - label { - position: absolute; - display: flex; - align-items: center; - font-size: var(--db-type-body-font-size-md); - - transform-origin: left; - transform: translate( - var(--db-input-padding-inline-start), - calc(-1 * #{variables.$db-sizing-md}) - ); - transition: transform 0.2s variables.$db-transition-functional-timing; - will-change: transform; - block-size: variables.$db-sizing-md; - cursor: text; - // setting max-width to prevent users from too long labels by displaying text-overflow: ellipsis - max-inline-size: var(--db-input-label-max-width, 80%); - - span:first-child { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } - } - input { - --db-input-padding-inline-end: calc( - ( - var(--db-input-padding-end-icon-after) + - var(--db-input-padding-end-data-variant) + - var(--db-input-padding-end-datalist) - ) * #{variables.$db-sizing-md} - ); - - @extend %default-interactive-component; - @extend %component-border; + position: relative; - @include colors.bg-transparent-hover(); - @include colors.get-variant-bg-color(0.08); - - color: colors.$db-base-on-bg; - - block-size: variables.$db-sizing-md; - max-inline-size: 100%; - inline-size: 100%; - padding: variables.$db-spacing-fixed-xs - var(--db-input-padding-inline-end) variables.$db-spacing-fixed-xs - var(--db-input-padding-inline-start); - - // TODO: Evaluate whether those could get moved to ../_form-elements.scss - &:focus, - &:not(:placeholder-shown) { - // move filled text for expressive and regular to center with focused label - padding-block: calc( - var(--db-spacing-fixed-xs) + 0.25em * - var(--db-input-focus-opacity) - ) - calc( - #{variables.$db-spacing-fixed-xs} - var( - --db-input-focus-opacity - ) * #{variables.$db-spacing-fixed-xs} - ); - - + label { - @include label-focus-animation(); - } + &::-webkit-calendar-picker-indicator, + &::-webkit-search-cancel-button { + background-image: none; + inline-size: icons.$default-icon-font-size; + block-size: icons.$default-icon-font-size; + padding: 0; + cursor: pointer; } - // disabled and prefilled value – different in tonalities - &:disabled:not(:placeholder-shown) { - + label { - opacity: var(--db-input-disabled-label-opacity); - } + &::-webkit-search-cancel-button { + appearance: none; + position: absolute; + // 1px for border + inset-inline-end: calc(#{variables.$db-spacing-fixed-sm} + 1px); } + } - &[type="color"], - &[type="date"], - &[type="datetime-local"], - &[type="email"], - &[type="month"], - &[type="number"], - &[type="password"], - &[type="search"], - &[type="tel"], - &[type="text"], - &[type="time"], - &[type="url"], - &[type="week"] { - @extend %db-overwrite-font-size-sm; - - &:not([type="date"]):not([type="datetime-local"]):not( - [type="month"] - ):not([type="time"]):not([type="week"]) - + label { - // Adopted by https://www.heise.de/developer/artikel/a11y-Reduced-Motion-4356171.html - @media (prefers-reduced-motion: reduce) { - transition-duration: 0.01s !important; - } - } - - // Hiding inputs placeholder for floating label - &::placeholder { - opacity: 0; - } + &:has(datalist) { + @extend %dropdown-icon; - &:focus { - &::placeholder { - opacity: 0.5; - } + &:has(input:focus) { + &::after { + transform: form-components.$dropdown-icon-transform; } } - &[type="search"] { - padding-inline-start: var(--db-input-padding-inline-start); - - &, - & + label { - --db-input-padding-inline-start: #{calc( - #{variables.$db-spacing-fixed-sm} * 2 + #{variables.$db-spacing-fixed-md} - )}; - } - - &:focus, - &:not(:placeholder-shown) { - &:enabled { - + label { - padding-inline-start: 0; - } - } - } - - // https://stackoverflow.com/questions/20804016/editing-input-type-search-pseudo-element-button-x - &::-webkit-search-cancel-button { - appearance: none; - position: absolute; - inset-inline-end: variables.$db-spacing-fixed-sm; - inset-block-start: 0; - block-size: variables.$db-sizing-md; - inline-size: 1em; - // TODO: find a better solution for this - background: url(#{$icons-path}functional/images/navigation/db_ic_cancel_24.svg) - no-repeat 50% 50%; - background-size: contain; - cursor: pointer; - transition: opacity 0.12s; + input { + &::-webkit-calendar-picker-indicator { + display: none !important; } } } - - input:required:invalid:not(:placeholder-shown), - input[aria-invalid="true"] { - @extend %adaptive-critical-component; - } } diff --git a/packages/components/src/components/input/model.ts b/packages/components/src/components/input/model.ts index 73df0bad744..0f18a7a27d6 100644 --- a/packages/components/src/components/input/model.ts +++ b/packages/components/src/components/input/model.ts @@ -12,9 +12,9 @@ import { FormTextProps, IconAfterProps, IconProps, - IconVisibleState, KeyValueType, - ValidEventProps + ValidEventProps, + OverflowProps } from '../../shared/model'; export type DBInputDefaultProps = { @@ -77,5 +77,4 @@ export type DBInputState = DBInputDefaultState & GlobalState & ChangeEventState & FocusEventState & - FormState & - IconVisibleState; + FormState; diff --git a/packages/components/src/components/link/link.scss b/packages/components/src/components/link/link.scss index bde91071454..51e6a0d63ee 100644 --- a/packages/components/src/components/link/link.scss +++ b/packages/components/src/components/link/link.scss @@ -41,8 +41,7 @@ // "disabled" links &[aria-disabled="true"] { - // TODO: probably move these to the tokens as well - opacity: var(--db-disabled-text-opacity, 0.5); + opacity: component.$default-placeholder-opacity; pointer-events: none; } @@ -75,7 +74,16 @@ // We couldn't extend any existing SCSS placeholders, as this is a special construct &[data-variant="primary"] { - @extend %db-brand-text-interactive; + --db-current-color: #{colors.$db-brand-text}; + color: colors.$db-current-color; + + &:hover { + --db-current-color: #{colors.$db-brand-text-hover}; + } + + &:active { + --db-current-color: #{colors.$db-brand-text-pressed}; + } } &[data-size="small"] { diff --git a/packages/components/src/components/navigation-item/navigation-item.scss b/packages/components/src/components/navigation-item/navigation-item.scss index 28b1be96759..64c5feb97fc 100644 --- a/packages/components/src/components/navigation-item/navigation-item.scss +++ b/packages/components/src/components/navigation-item/navigation-item.scss @@ -26,7 +26,7 @@ & ~ .db-sub-navigation { visibility: visible; transition: visibility 0ms linear 0ms; - animation: show-right-to-left animation.$animation-show-timing; + animation: show-right-to-left variables.$db-transition-show-straight; .db-sub-navigation { inset-block: 0; @@ -37,7 +37,7 @@ &:not(&[aria-expanded="true"]) { & ~ .db-sub-navigation { transition: visibility 0ms linear 410ms; // hide animation is 0.4s - animation: hide-right-to-left animation.$animation-hide-timing; + animation: hide-right-to-left variables.$db-transition-hide-straight; } } } diff --git a/packages/components/src/components/radio/radio.lite.tsx b/packages/components/src/components/radio/radio.lite.tsx index 1ff2acd699b..a69fe27a0d2 100644 --- a/packages/components/src/components/radio/radio.lite.tsx +++ b/packages/components/src/components/radio/radio.lite.tsx @@ -101,40 +101,46 @@ export default function DBRadio(props: DBRadioProps) { state._id ) as HTMLInputElement; if (radioElement) { - radioElement.checked = true; - state.initialized = false; + if (props.checked != undefined) { + radioElement.checked = true; + } + + if (props.defaultChecked !== undefined) { + // only set by JS: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#instance_properties_that_apply_only_to_elements_of_type_checkbox_or_radio + radioElement.defaultChecked = props.defaultChecked; + } } } }, [state.initialized]); return ( - <> + ); } diff --git a/packages/components/src/components/radio/radio.scss b/packages/components/src/components/radio/radio.scss index a6c87d49de1..43f15b8eea8 100644 --- a/packages/components/src/components/radio/radio.scss +++ b/packages/components/src/components/radio/radio.scss @@ -1,89 +1,24 @@ @use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/helpers"; -@use "@db-ui/foundations/build/scss/tonality"; @use "@db-ui/foundations/build/scss/colors"; +@use "../../styles/form-components"; @use "../../styles/component"; -$font-size-height: calc(var(--db-base-font-size) * var(--db-base-line-height)); - .db-radio { - @include colors.bg-transparent-interactive(); - - appearance: none; - - aspect-ratio: 1; - - border: min(calc(#{$font-size-height} / 16 + 0.5px), 2px) solid #{colors.$db-base-on-bg}; - // Full rounded - border-radius: 100px; - - // * the basic, unchecked style - display: inline-block; - - block-size: $font-size-height; - - // TODO: Extract those transition durations as variables #645 - transition: border-width 0.15s variables.$db-transition-functional-timing; - - // TODO: probably extract this to an overwrite or external file - // workarounds for power apps - inline-size: auto; - padding: 0; - - &:checked { - border-width: calc(#{$font-size-height} * 0.3); - - // The radio element still has the default background for the dot on :hover when in checked state - &:enabled:hover { - @extend %bg-transparent; - } - } - - // * The invalid style using the :user-invalid pseudo class (and [aria-invalid="true"] equivalent) - // TODO: We need to set the correct styling / color here after alignment - &:is(:user-invalid), - &[aria-invalid="true"] { - @extend %db-bg-critical-transparent-semi; - border-color: colors.$db-critical-border-weak; + @extend %check-element; - & + label { - color: colors.$db-critical-text; - } - } + input { + border-color: #{colors.$db-neutral-on-bg}; + border-radius: component.$full-border-radius; + transition: border-width variables.$db-transition-duration-fast + variables.$db-transition-functional-timing; - & + label { - margin-inline-start: variables.$db-spacing-fixed-xs; - - vertical-align: top; - } - - &:disabled { - &, - & + label { - opacity: component.$default-disabled-opacity; - } - } + &:checked { + border-width: calc(#{form-components.$font-size-height} * 0.3); - &:required { - & + label { - &::after { - content: " *"; + // The radio element still has the default background for the dot on :hover when in checked state + &:enabled:hover { + @extend %bg-transparent; } } } - - // Sizes - &[data-size="small"] { - @extend %db-overwrite-font-size-sm; - - & + label { - @extend %db-overwrite-font-size-sm; - margin-inline-start: variables.$db-spacing-fixed-2xs; - } - } - - // Adopted by https://www.heise.de/developer/artikel/a11y-Reduced-Motion-4356171.html - @media (prefers-reduced-motion: reduce) { - transition-duration: 0.01s !important; - } } diff --git a/packages/components/src/components/select/index.html b/packages/components/src/components/select/index.html index 2dc816f473d..73950926bb9 100644 --- a/packages/components/src/components/select/index.html +++ b/packages/components/src/components/select/index.html @@ -7,21 +7,21 @@
- - No Icon
- - string; - _value?: any; } export type DBSelectState = DBSelectDefaultState & diff --git a/packages/components/src/components/select/select.lite.tsx b/packages/components/src/components/select/select.lite.tsx index 576d6914c54..91b35b97b0a 100644 --- a/packages/components/src/components/select/select.lite.tsx +++ b/packages/components/src/components/select/select.lite.tsx @@ -8,7 +8,12 @@ import { } from '@builder.io/mitosis'; import { DBSelectOptionType, DBSelectProps, DBSelectState } from './model'; import { cls, getMessageIcon, uuid } from '../../utils'; -import { DEFAULT_ID, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX } from '../../shared/constants'; +import { + DEFAULT_ID, + DEFAULT_LABEL, + DEFAULT_MESSAGE_ID_SUFFIX, + DEFAULT_PLACEHOLDER_ID_SUFFIX +} from '../../shared/constants'; import { DBInfotext } from '../infotext'; useMetadata({ @@ -26,8 +31,8 @@ export default function DBSelect(props: DBSelectProps) { const state = useStore({ _id: DEFAULT_ID, _messageId: DEFAULT_ID + DEFAULT_MESSAGE_ID_SUFFIX, + _placeholderId: DEFAULT_ID + DEFAULT_PLACEHOLDER_ID_SUFFIX, _isValid: undefined, - _value: undefined, handleClick: (event: any) => { if (props.onClick) { props.onClick(event); @@ -42,9 +47,6 @@ export default function DBSelect(props: DBSelectProps) { props.change(event); } - // using controlled components for react forces us to using state for value - state._value = event.target.value; - if (event.target?.validity?.valid != state._isValid) { state._isValid = event.target?.validity?.valid; if (props.validityChange) { @@ -83,49 +85,44 @@ export default function DBSelect(props: DBSelectProps) { }); onMount(() => { - state._id = props.id || 'select-' + uuid(); - state._messageId = state._id + DEFAULT_MESSAGE_ID_SUFFIX; - - if (props.value) { - state._value = props.value; - } + const id = props.id || 'select-' + uuid(); + state._id = id; + state._messageId = id + DEFAULT_MESSAGE_ID_SUFFIX; + state._placeholderId = id + DEFAULT_PLACEHOLDER_ID_SUFFIX; if (props.stylePath) { state.stylePath = props.stylePath; } }); - - onUpdate(() => { - if (props.value) { - state._value = props.value; - } - }, [props.value]); // jscpd:ignore-end return (
- {/* Required has to be true to use floating label */} - {/* data-value is used in css to check if value is set */} + - + + {props.placeholder ?? props.label} + select option:checked:not([hidden])) { + [id$="-placeholder"] { + display: none; + } } } diff --git a/packages/components/src/components/select/select.spec.tsx b/packages/components/src/components/select/select.spec.tsx index 407fed76044..5c15f522bba 100644 --- a/packages/components/src/components/select/select.spec.tsx +++ b/packages/components/src/components/select/select.spec.tsx @@ -6,7 +6,7 @@ import { DBSelect } from './index'; import { DEFAULT_VIEWPORT } from '../../shared/constants.ts'; const comp = ( - + @@ -34,6 +34,8 @@ test.describe('DBSelect', () => { await mount(comp); const accessibilityScanResults = await new AxeBuilder({ page }) .include('.db-select') + .exclude('test-placeholder') + .disableRules('color-contrast') .analyze(); expect(accessibilityScanResults.violations).toEqual([]); diff --git a/packages/components/src/components/tag/model.ts b/packages/components/src/components/tag/model.ts index ebc7f11e3d4..039111c0199 100644 --- a/packages/components/src/components/tag/model.ts +++ b/packages/components/src/components/tag/model.ts @@ -1,12 +1,9 @@ import { - ChangeEventState, DefaultVariantProps, EmphasisProps, - FormState, GlobalProps, GlobalState, IconProps, - InitializedState, OverflowProps } from '../../shared/model'; @@ -56,5 +53,4 @@ export interface DBTagDefaultState { handleRemove?: () => void; } -export type DBTagState = DBTagDefaultState & - GlobalState ; +export type DBTagState = DBTagDefaultState & GlobalState; diff --git a/packages/components/src/components/tag/tag.scss b/packages/components/src/components/tag/tag.scss index 760673a7d3b..f2babfc1a41 100644 --- a/packages/components/src/components/tag/tag.scss +++ b/packages/components/src/components/tag/tag.scss @@ -32,7 +32,8 @@ &:has(dbbutton):has(dbbutton:not(.db-tab-remove-button)), &:has(db-button):has(db-button:not(.db-tab-remove-button)), &:not(:has(dbbutton)):has(button:not(.db-tab-remove-button)), - &:has(a) { + &:has(a), + &:has(label) { padding-inline: 0; } } @@ -73,26 +74,26 @@ @extend %db-tag; position: relative; - input { + label { @extend %default-transition; - @extend %component-border; - appearance: none; inline-size: 100%; - block-size: inherit; - border-radius: component.$default-border-radius; - position: absolute; + margin-inline-start: 0; - &:not(:checked) { + &:has(input:not(:checked)) { --db-current-base-color-alpha: 100%; } - &:checked { + &:has(input:checked) { border-width: component.$default-border-height; &::before { content: none; } } + + input { + display: none; + } } a { @@ -114,14 +115,8 @@ } } - label { - @extend %db-overwrite-font-size-sm; - margin-inline-start: 0; - z-index: 1; - } - &:not(:has(dbbutton, db-button)):has(button:not(.db-tab-remove-button)), - &:has(:is(dbbutton, db-button):not(.db-tab-remove-button), a, input) { + &:has(:is(dbbutton, db-button):not(.db-tab-remove-button), a, label) { border: none; } @@ -134,13 +129,25 @@ } button, - input:checked, - a { + label:has(input:checked) { + @include colors.bg-transparent-interactive(); @include colors.get-variant-bg-color(0.08); } + &:not([data-emphasis="strong"]) { + label:has(input[type="radio"]:checked) { + &:enabled { + &:hover, + &:active { + --db-current-base-color-alpha: 92%; + } + } + } + } + button, - a { + a, + label { @extend %db-overwrite-font-size-sm; @extend %component-border; block-size: inherit; @@ -148,6 +155,11 @@ border-radius: component.$default-border-radius; } + button, + a { + @include colors.get-variant-bg-color(0.08); + } + db-button, dbbutton, db-checkbox, diff --git a/packages/components/src/components/textarea/model.ts b/packages/components/src/components/textarea/model.ts index be47c0fc230..3ce2381385a 100644 --- a/packages/components/src/components/textarea/model.ts +++ b/packages/components/src/components/textarea/model.ts @@ -46,8 +46,7 @@ export type DBTextareaProps = DBTextareaDefaultProps & FormProps & GlobalProps & FormTextProps & - FormMessageProps & - OverflowProps; + FormMessageProps; export interface DBTextareaDefaultState {} diff --git a/packages/components/src/components/textarea/textarea.lite.tsx b/packages/components/src/components/textarea/textarea.lite.tsx index 1459f7fe3e3..de6c2d0cdb9 100644 --- a/packages/components/src/components/textarea/textarea.lite.tsx +++ b/packages/components/src/components/textarea/textarea.lite.tsx @@ -2,7 +2,11 @@ import { onMount, Show, useMetadata, useStore } from '@builder.io/mitosis'; import { DBTextareaProps, DBTextareaState } from './model'; import { DBInfotext } from '../infotext'; import { cls, getMessageIcon, uuid } from '../../utils'; -import { DEFAULT_ID, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX } from '../../shared/constants'; +import { + DEFAULT_ID, + DEFAULT_LABEL, + DEFAULT_MESSAGE_ID_SUFFIX +} from '../../shared/constants'; useMetadata({ isAttachedToShadowDom: true, @@ -102,15 +106,13 @@ export default function DBTextarea(props: DBTextareaProps) {
-