Adjust Dropdown CSS to Match Design

src/app/app.html

@@ -1,6 +1,6 @@
 <div class="container">
   <h1>AEF Component Test</h1>
-  
+
   <section>
     <h2>Switch Component</h2>
     <switch [(isActive)]="isToggled" (toggle)="handleToggle($event)"></switch>
@@ -9,10 +9,11 @@
 
   <section>
     <h2>Dropdown Component</h2>
-    <dropdown 
+    <dropdown
-      [options]="dropdownOptions" 
+      [options]="dropdownOptions"
-      [(selectedValue)]="selectedDropdownValue" 
+      [(selectedValue)]="selectedDropdownValue"
-      (change)="handleDropdownChange($event)">
+      (change)="handleDropdownChange($event)"
+      icon="language">
     </dropdown>
     <p>Selected Value: {{ selectedDropdownValue() }}</p>
   </section>

src/app/components/dropdown/dropdown.html

@@ -1,14 +1,17 @@
-<div class="dropdown-trigger">
+<div class="dropdown-box">
+  @if (icon()) {
+    <span class="material-symbols-outlined icon-24 prefix-icon">{{ icon() }}</span>
+  }
   <span class="placeholder">{{ selectedLabel }}</span>
-  <span class="chevron" [class.open]="isOpen()"></span>
+  <span class="material-symbols-outlined icon-24 chevron" [class.open]="isOpen()">keyboard_arrow_down</span>
 </div>
 
 @if (isOpen()) {
   <ul class="dropdown-list" role="listbox">
     @for (option of options(); track option.value; let i = $index) {
-      <li 
+      <li
-        class="dropdown-item" 
+        class="dropdown-item"
-        role="option" 
+        role="option"
         [class.selected]="option.value === selectedValue()"
         [class.focused]="i === focusedIndex()"
         [attr.aria-selected]="option.value === selectedValue()"

src/app/components/dropdown/dropdown.scss

@@ -3,14 +3,13 @@
 @use "styles/library" as library;
 
 $dropdown_bg: #FFFFFF;
-$dropdown_border: #E0E0E0;
+$dropdown_border_color: oklch(0 0 0 / 20%);
 $dropdown_hover: #F5F5F5;
 $dropdown_selected: #FFF4F0;
-$dropdown_accent: #FF6E37;
+$dropdown_accent: oklch(0.7086 0.1896 39.86);
 
-$dropdown_min_width: 150px;
+$dropdown_dimension: (324px, 40px);
-$dropdown_height: 40px;
+$dropdown_padding: (10px, 5px);
-$dropdown_padding: (0px, 16px);
 $dropdown_border_radius: 8px;
 
 $dropdown_animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
@@ -18,52 +17,52 @@ $dropdown_animation_duration: 0.2s;
 
 :host {
   display: inline-block;
-  min-width: $dropdown_min_width;
   position: relative;
-  font-family: inherit;
+
-  font-size: 14px;
+  width: list.nth($dropdown_dimension, 1);
-  color: #333;
+  padding: 0; margin: 0;
-  cursor: pointer;
+
+  background-color: $dropdown_bg;
+  border-radius: $dropdown_border_radius;
+  box-shadow: 0 0 0 1px $dropdown_border_color inset;
   outline: none;
 
   &:focus-visible {
-    .dropdown-trigger {
+    box-shadow: 0 0 0 1px $dropdown_border_color inset, 0 0 0 2px white, 0 0 0 4px $dropdown_accent;
-      border-color: $dropdown_accent;
-      box-shadow: 0 0 0 2px rgba($dropdown_accent, 0.2);
-    }
   }
 }
 
-.dropdown-trigger {
+.dropdown-box {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
-  height: $dropdown_height;
+  padding: list.nth($dropdown_padding, 2) list.nth($dropdown_padding, 1);
-  padding: 0 list.nth($dropdown_padding, 2);
+  height: list.nth($dropdown_dimension, 2) - list.nth($dropdown_padding, 2) * 2;
-  background-color: $dropdown_bg;
-  border: 1px solid $dropdown_border;
-  border-radius: $dropdown_border_radius;
-  transition: border-color $dropdown_animation_duration $dropdown_animation_timing,
-              box-shadow $dropdown_animation_duration $dropdown_animation_timing;
 
-  &:hover {
+  border-radius: $dropdown_border_radius;
-    border-color: color.adjust($dropdown_border, $lightness: -10%);
+  transition: library.append-transition((border-color, box-shadow), $dropdown_animation_duration $dropdown_animation_timing);
+  gap: 8px;
+
+  .prefix-icon {
+    width: 24px;
+    height: 24px;
+    user-select: none;
   }
 
   .placeholder {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    margin-right: auto;
+
+    font-size: 18px;
   }
 
   .chevron {
-    width: 0;
+    width: 24px;
-    height: 0;
+    height: 24px;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-    border-top: 5px solid #666;
-    margin-left: 8px;
     transition: transform $dropdown_animation_duration $dropdown_animation_timing;
+    user-select: none;
 
     &.open {
       transform: rotate(180deg);
@@ -80,7 +79,7 @@ $dropdown_animation_duration: 0.2s;
   margin: 0;
   list-style: none;
   background-color: $dropdown_bg;
-  border: 1px solid $dropdown_border;
+  border: 1px solid $dropdown_border_color;
   border-radius: $dropdown_border_radius;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   z-index: 1000;

src/app/components/dropdown/dropdown.ts

@@ -1,4 +1,5 @@
-import { Component, input, model, output, signal, HostListener, ElementRef } from '@angular/core'
+import { Component, input, model, output, signal, HostListener, ElementRef
+} from '@angular/core'
 import { CommonModule } from '@angular/common'
 
 export interface DropdownOption {
@@ -29,6 +30,7 @@ export interface DropdownOption {
 export class Dropdown {
   options = input<DropdownOption[]>([]);
   placeholder = input<string>('Select an option');
+  icon = input<string>();
   selectedValue = model<any>(null);
   change = output<any>();
 

src/index.html

@@ -1,13 +1,14 @@
 <!doctype html>
 <html lang="en">
-<head>
+  <head>
-  <meta charset="utf-8">
+    <meta charset="utf-8">
-  <title>AefComponentTest</title>
+    <title>AefComponentTest</title>
-  <base href="/">
+    <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,300,0..1,-50..200" />
-<body>
+  </head>
-  <app-root></app-root>
+  <body>
-</body>
+    <app-root></app-root>
+  </body>
 </html>

src/styles/_library.scss

@@ -1 +1,21 @@
 @forward 'functions';
+
+.icon-24 {
+  font-variation-settings:
+    'FILL' 0,
+    'wght' 300,
+    'GRAD' 0,
+    'opsz' 24;
+
+  line-height: 24px;
+}
+
+.icon-40 {
+  font-variation-settings:
+    'FILL' 0,
+    'wght' 300,
+    'GRAD' 0,
+    'opsz' 40;
+
+  line-height: 40px;
+}