refactor: form elements (#1545)

* docs(textarea): added missing aspects

* refactor: added missing attribute

* chore: typo

* docs(textarea): added missing aspects

* refactor: added missing stylings

* refactor: extracted validity

* chore: simple restructuring

* refactor: corrected source order and removed obsolete attributes

* Update index.html

* refactor: generalized styling

* fix: selector

* fix: headlines

* Update index.html

* refactor: removed that namespace again

* Update index.html

* refactor: integrated changes out of !893

#893

* chore: update from main

* feat: add floating label

* fix: issue with wrong path naming in patternhub

* fix: issue with component test

* fix: issue with select component tests

* fix: issue with select component tests

* refactor: form-components to match requirements in zeplin

* fix: issue with patternhub build

* fix: issue with patternhub build

* fix: issue with vue and angular showcase

* fix: increase the maxDiffPixels for webkit

* refactor: checkbox and radio to work with form-components.scss

---------

Co-authored-by: NicolasMerget <[email protected]>
Co-authored-by: Nicolas Merget <[email protected]>

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`

packages/components/src/components/checkbox/checkbox.lite.tsx

@@ -119,36 +119,41 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 				}
 			}
 		}
-	}, [state.initialized, props.indeterminate, props.checked, props.defaultChecked]);
+	}, [
+		state.initialized,
+		props.indeterminate,
+		props.checked,
+		props.defaultChecked
+	]);
 
 	return (
-		<>
+		<label
+			data-size={props.size}
+			data-label-hidden={props.labelHidden}
+			className={cls('db-checkbox', props.className)}
+			htmlFor={state._id}>
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />
 			</Show>
 			<input
 				ref={component}
 				type="checkbox"
-				class={cls('db-checkbox', props.className)}
 				id={state._id}
 				name={props.name}
 				checked={props.checked}
 				disabled={props.disabled}
 				value={props.value}
 				aria-describedby={props.describedbyid}
 				aria-invalid={props.invalid}
-				data-size={props.size}
 				required={props.required}
 				onChange={(event) => state.handleChange(event)}
 				onBlur={(event) => state.handleBlur(event)}
 				onFocus={(event) => state.handleFocus(event)}
 			/>
-			<label htmlFor={state._id}>
-				<Show when={props.label}>
-					<span>{props.label}</span>
-				</Show>
-				{props.children}
-			</label>
-		</>
+			<Show when={props.label}>
+				<span>{props.label}</span>
+			</Show>
+			{props.children}
+		</label>
 	);
 }

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");
 		}
 	}
 }

packages/components/src/components/checkbox/docs/HTML.md

@@ -8,12 +8,9 @@ For general installation and configuration take a look at the [components](https
 <!-- index.html -->
 ...
 <body>
-	<input
-		type="checkbox"
-		class="db-checkbox"
-		id="checkbox-element"
-		name="States"
-	/>
-	<label for="checkbox-element">Label</label>
+	<label class="db-checkbox" for="checkbox-element">
+		<input type="checkbox" id="checkbox-element" name="States" />
+		Label
+	</label>
 </body>
 ```

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;
 				}
 			}
 		}

packages/components/src/components/input/docs/HTML.md

@@ -10,7 +10,7 @@ Use it:
 
 ```html
 <div class="db-input">
-	<input type="text" name="username" aria-labelledby="username-label" />
-	<label for="username" id="username-label" aria-hidden="true">Label</label>
+	<label for="username">Label</label>
+	<input type="text" name="username" id="username" />
 </div>
 ```

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 (
 		<div
 			class={cls('db-input', props.className)}
-			data-variant={props.variant}>
+			data-variant={props.variant}
+			data-label-variant={props.labelVariant}
+			data-icon={props.icon}
+			data-icon-after={props.iconAfter}>
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />
 			</Show>
-			{/* TODO: move this icon to [data-icon] */}
-			<Show when={state.iconVisible(props.icon)}>
-				<DBIcon icon={props.icon} class="icon-before" />
-			</Show>
+			<label htmlFor={state._id}>
+				{props.label ?? state.defaultValues.label}
+			</label>
 			<input
 				ref={component}
 				id={state._id}
@@ -131,7 +134,6 @@ export default function DBInput(props: DBInputProps) {
 				placeholder={
 					props.placeholder ?? state.defaultValues.placeholder
 				}
-				aria-labelledby={state._id + '-label'}
 				disabled={props.disabled}
 				required={props.required}
 				defaultValue={props.defaultValue}
@@ -153,15 +155,6 @@ export default function DBInput(props: DBInputProps) {
 				list={props.dataList && state._dataListId}
 				aria-describedby={props.message && state._messageId}
 			/>
-			<label
-				htmlFor={state._id}
-				aria-hidden="true"
-				id={state._id + '-label'}>
-				<span>{props.label ?? state.defaultValues.label}</span>
-			</label>
-			<Show when={state.iconVisible(props.iconAfter)}>
-				<DBIcon icon={props.iconAfter} class="icon-after" />
-			</Show>
 			<Show when={props.dataList}>
 				<datalist id={state._dataListId}>
 					<For each={props.dataList}>