feat: select

packages/components/src/components/select/select.lite.tsx

@@ -114,7 +114,6 @@ export default function DBSelect(props: DBSelectProps) {
 				ref={component}
 				data-value={props.value || state._value}
 				aria-invalid={props.invalid}
-				aria-required={props.required}
 				required={props.required}
 				disabled={props.disabled}
 				id={state._id}

packages/components/src/components/select/select.scss

@@ -36,6 +36,8 @@
 	@extend %db-overwrite-font-size-sm;
 	@extend %select-icon;
 	@extend %default-form-message;
+	@extend %disabled-form-element;
+	@extend %required-form-element;
 
 	@include form.get-input-color-variants();
 

showcases/angular-showcase/src/app/components/form/form.component.html

@@ -46,6 +46,17 @@
 			label="Checkbox ngModel"
 		></db-checkbox>
 
+		<p>DBSelect:</p>
+		<db-select
+			name="ngModelSelect"
+			[(ngModel)]="model.select"
+			label="Select with ngModel"
+			message="Description"
+		>
+			<option value="test1">Test1</option>
+			<option value="test2">Test2</option>
+		</db-select>
+
 		<h6>Reactive Forms Example:</h6>
 		<form [formGroup]="form" (submit)="onFormSubmit()">
 			<fieldset>
@@ -139,15 +150,27 @@ <h6>Reactive Forms Example:</h6>
 						label="Checkbox"
 					></db-checkbox>
 				</fieldset>
-				<p>DBSelect:</p>
+				<p>Select:</p>
 				<db-select
+					name="select"
+					label="Select"
+					placeholder="Placeholder"
+					description="Description"
+					icon="account"
+					formControlName="select"
+					(change)="handleChange4($event)"
+				>
+					<option value="test1">Test1</option>
+					<option value="test2">Test2</option>
+				</db-select>
+				<!-- <db-select
 					[value]="select"
 					label="Label"
 					(change)="select = $event.target.value"
 				>
 					<option value="test1">Test1</option>
 					<option value="test2">Test2</option>
-				</db-select>
+				</db-select> -->
 				<p>Button:</p>
 				<db-button type="button" (click)="resetValues()">
 					Reset

showcases/angular-showcase/src/app/components/form/form.component.ts

@@ -21,7 +21,8 @@ export class FormComponent {
 		textarea: 'default value',
 		radio: 'X',
 		checkbox: true,
-		checkbox2: true
+		checkbox2: true,
+		select: 'test2'
 	};
 
 	dataList = [{ key: 'test', value: 'Test' }, { key: 'test2' }];
@@ -30,7 +31,8 @@ export class FormComponent {
 	form = new FormGroup({
 		input: new FormControl('Filled with formControl'),
 		textarea: new FormControl('Filled with formControl as well'),
-		checkbox: new FormControl(true)
+		checkbox: new FormControl(true),
+		select: new FormControl('test2')
 	});
 
 	getRadioName = (radioName: string): string => `Radio ${radioName}`;
@@ -78,6 +80,12 @@ export class FormComponent {
 		this.checked = [this.checked[0], event.target.checked];
 	};
 
+	handleChange4 = (event: any) => {
+		this.form.get('select')?.setValue(event.target.value, {
+			onlySelf: true
+		});
+	};
+
 	showValues(): void {
 		// eslint-disable-next-line no-alert
 		alert(

showcases/angular-showcase/src/app/components/select/select.component.html

@@ -16,6 +16,7 @@
 			[options]="exampleProps.options"
 			[disabled]="exampleProps.disabled"
 			[icon]="exampleProps.icon"
+			[required]="exampleProps.required"
 			[value]="exampleProps.value"
 			[message]="exampleProps.message"
 			>{{ exampleName }}</db-select

showcases/react-showcase/src/components/select/index.tsx

@@ -12,7 +12,8 @@ const getSelect = ({
 	icon,
 	message,
 	disabled,
-	value
+	value,
+	required
 }: DBSelectProps) => (
 	<DBSelect
 		label={label}
@@ -21,7 +22,8 @@ const getSelect = ({
 		disabled={disabled}
 		icon={icon}
 		value={value}
-		message={message}>
+		message={message}
+		required={required}>
 		{children}
 	</DBSelect>
 );

showcases/shared/select.json

@@ -1,4 +1,33 @@
 [
+	{
+		"name": "Tonality",
+		"examples": [
+			{
+				"name": "functional",
+				"className": "db-ui-functional",
+				"props": {
+					"label": "Label",
+					"message": "functional"
+				}
+			},
+			{
+				"name": "regular (Default)",
+				"className": "db-ui-regular",
+				"props": {
+					"label": "Label",
+					"message": "regular (Default)"
+				}
+			},
+			{
+				"name": "expressive",
+				"className": "db-ui-expressive",
+				"props": {
+					"label": "Label",
+					"message": "expressive"
+				}
+			}
+		]
+	},
 	{
 		"name": "Variant",
 		"examples": [
@@ -117,6 +146,22 @@
 					]
 				}
 			},
+			{
+				"name": "Required",
+				"props": {
+					"label": "Label",
+					"message": "Required",
+					"options": [
+						{
+							"value": "Option 1"
+						},
+						{
+							"value": "Option 2"
+						}
+					],
+					"required": true
+				}
+			},
 			{
 				"name": "Disabled",
 				"props": {

showcases/vue-showcase/src/components/select/Select.vue

@@ -17,6 +17,7 @@ import { DBSelect } from "../../../../../output/vue/vue3/src";
 				:icon="exampleProps.icon"
 				:value="exampleProps.value"
 				:message="exampleProps.message"
+				:required="exampleProps.required"
 				>{{ exampleName }}</DBSelect
 			>
 		</template>