feat: select component (#225)

* feat: select components initialized

* feat: single & multi select

* feat: click-outisde handler

* feat: select component

* feat: floating-ui

* feat: tests added

* feat: stories, invalid text

* feat: disabled state

* fix: review notes

* fix: pr reviews

* fix: tests & max-height

* fix: disable state & stories

* fix: decorators added to stories

* fix: positioning, pr reviews

* fix: ui notes

Co-authored-by: Mustafa Adıgüzel <mustafa.adiguzel@trendyol.com>
Co-authored-by: Murat Çorlu <127687+muratcorlu@users.noreply.github.com>

scripts/generate-react-exports.js

@@ -7,7 +7,7 @@ function writeBaklavaReactFile(fileContentParts) {
     // @ts-nocheck
     import React from 'react';
     import { createComponent } from '@lit-labs/react';
-    
+
     ${fileContentParts.join('\n\n')}
   `;
 

src/baklava.ts

@@ -9,4 +9,6 @@ export { default as BlTooltip } from './components/tooltip/bl-tooltip';
 export { default as BlProgressIndicator } from './components/progress-indicator/bl-progress-indicator';
 export { default as BlCheckbox } from './components/checkbox/bl-checkbox';
 export { default as BlAlert } from './components/alert/bl-alert';
+export { default as BlSelect } from './components/select/bl-select';
+export { default as BlSelectOption } from './components/select/option/bl-select-option';
 export { getIconPath, setIconPath } from './utilities/asset-paths';

src/components/select/bl-select.css

@@ -0,0 +1,239 @@
+:host {
+  width: 200px;
+  display: inline-block;
+}
+
+.select-wrapper {
+  width: 100%;
+  position: relative;
+
+  --padding-vertical: var(--bl-size-2xs);
+  --padding-horizontal: var(--bl-size-xs);
+  --background-color: #fff;
+  --border-color: var(--bl-color-border);
+  --border-focus-color: var(--bl-color-primary-hover);
+  --icon-color: var(--bl-color-content-tertiary);
+  --text-color: var(--bl-color-content-primary);
+  --label-color: var(--bl-color-content-secondary);
+  --placeholder-color: var(--bl-color-content-tertiary);
+  --height: var(--bl-size-2xl);
+  --menu-padding: 0 var(--bl-size-m);
+  --menu-margin-top: var(--bl-size-2xs);
+  --font-size: var(--bl-font-size-m);
+  --disabled-color: var(--bl-color-tertiary);
+  --z-index: 1;
+  --menu-height: 250px;
+}
+
+:host([size='large']) .select-wrapper {
+  --height: var(--bl-size-3xl);
+  --padding-vertical: var(--bl-size-xs);
+  --padding-horizontal: var(--bl-size-m);
+}
+
+:host([size='small']) .select-wrapper {
+  --height: var(--bl-size-xl);
+  --padding-vertical: var(--bl-size-3xs);
+  --padding-horizontal: var(--bl-size-xs);
+  --font-size: var(--bl-font-size-s);
+}
+
+.placeholder {
+  color: var(--placeholder-color);
+}
+
+:host([disabled]) .placeholder {
+  --placeholder-color: var(--bl-color-content-passive);
+}
+
+.invalid {
+  --border-color: var(--bl-color-danger);
+  --border-focus-color: var(--bl-color-danger-hover);
+  --label-color: var(--bl-color-danger);
+}
+
+.select-input {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  outline: none;
+  box-sizing: border-box;
+  height: var(--height);
+  border: solid 1px var(--border-color);
+  font: var(--bl-font-title-3-regular);
+  padding: 0 var(--padding-horizontal);
+  border-radius: var(--bl-border-radius-s);
+  color: var(--text-color);
+  user-select: none;
+}
+
+.remove-all {
+  display: none;
+}
+
+.remove-all::after {
+  content: '';
+  position: absolute;
+  left: 1.5rem;
+  bottom: 4px;
+  height: 1rem;
+  border-left: 1px solid var(--bl-color-border);
+}
+
+.selected .remove-all {
+  display: block;
+}
+
+:host([disabled]) .remove-all,
+:host([disabled]) .remove-all::after {
+  display: none;
+}
+
+.dropdown-icon {
+  font-size: var(--bl-font-size-m);
+}
+
+.selected .dropdown-icon {
+  --icon-color: var(--bl-color-secondary);
+}
+
+:host([disabled]) .dropdown-icon {
+  --icon-color: var(--bl-color-content-passive);
+}
+
+.select-open .select-input {
+  border: solid 1px var(--border-focus-color);
+}
+
+:host([disabled]) {
+  cursor: not-allowed;
+}
+
+:host([disabled]) .select-input {
+  pointer-events: none;
+  background-color: var(--disabled-color);
+}
+
+.select-input .selected-options {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.selected-options li {
+  display: inline;
+  font-size: var(--font-size);
+  color: var(--text-color);
+}
+
+.selected-options li:not(:last-child)::after {
+  content: ', ';
+}
+
+:host([disabled]) .selected-options li
+{
+  color: var(--bl-color-content-passive);
+}
+
+.select-input .actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--bl-size-2xs);
+  margin-left: var(--bl-size-2xs);
+}
+
+.popover {
+  --left: 0;
+  --top: 0;
+
+  position: fixed;
+  border: solid 1px var(--border-color);
+  background-color: var(--background-color);
+  font: var(--bl-font-title-3-regular);
+  border-radius: var(--bl-border-radius-s);
+  padding: var(--menu-padding);
+  outline: none;
+  box-sizing: border-box;
+  max-height: var(--menu-height);
+  overflow-y: auto;
+  display: none;
+  flex-direction: column;
+  z-index: var(--z-index);
+  width: 100%;
+  top: var(--top);
+  left: var(--left);
+}
+
+.select-open .popover {
+  display: flex;
+  border: solid 1px var(--border-focus-color);
+}
+
+bl-icon {
+  color: var(--icon-color);
+}
+
+label {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  top: var(--padding-vertical);
+  left: var(--padding-horizontal);
+  transition: all ease-in 0.2s;
+  pointer-events: none;
+  font: var(--bl-font-title-3-regular);
+  font-size: var(--font-size);
+  color: var(--placeholder-color);
+  padding: 0;
+}
+
+:where(.select-open, .selected) label {
+  top: 0;
+  left: var(--bl-size-2xs);
+  transform: translateY(-50%);
+  font: var(--bl-font-form-label);
+  color: var(--label-color);
+  padding: 0 var(--bl-size-3xs);
+  background-color: var(--bl-color-primary-background);
+  pointer-events: initial;
+}
+
+:host([label-fixed]) .select-wrapper {
+  padding-top: var(--bl-size-m);
+}
+
+:host([label-fixed]) label {
+  top: 0;
+  left: 0;
+  transition: none;
+  transform: none;
+  pointer-events: initial;
+  font: var(--bl-font-form-label);
+  color: var(--label-color);
+  padding: 0;
+}
+
+.help-text,
+.invalid-text {
+  margin: var(--bl-size-3xs) 0 0 var(--bl-size-2xs);
+  font: var(--bl-font-title-4-regular);
+  padding: var(--bl-size-3xs) var(--bl-input-padding-horizontal);
+}
+
+.help-text {
+  color: var(--bl-color-content-secondary);
+}
+
+.invalid-text {
+  color: var(--bl-color-danger);
+}
+
+.select-open .help-text,
+.select-open .invalid-text {
+  visibility: hidden;
+}