Feat: [DS-145] ComboBox - single select (#434)

gsoft-inc · Sep 19, 2024 · ae36834 · ae36834
2 parents 5807a53 + 3781423
commit ae36834
Show file tree

Hide file tree

Showing 17 changed files with 1,407 additions and 51 deletions.
diff --git a/.changeset/shiny-chefs-invent.md b/.changeset/shiny-chefs-invent.md
@@ -0,0 +1,5 @@
+---
+"@hopper-ui/components": patch
+---
+
+Added the ComboBox single select component.
diff --git a/packages/components/src/ComboBox/index.ts b/packages/components/src/ComboBox/index.ts
@@ -0,0 +1 @@
+export * from "./src/index.ts";
diff --git a/packages/components/src/ComboBox/src/ComboBox.module.css b/packages/components/src/ComboBox/src/ComboBox.module.css
@@ -0,0 +1,217 @@
+.hop-ComboBox {
+    /* Default */
+    --hop-ComboBox-row-gap: var(--hop-space-stack-xs);
+    --hop-ComboBox-inline-size: 20rem;
+    --hop-ComboBox-inline-size-fluid: 100%;
+    --hop-ComboBox-max-inline-size: 100%;
+
+    /* Trigger */
+    --hop-ComboBox-trigger-sm-block-size: 2rem;
+    --hop-ComboBox-trigger-md-block-size: 2.5rem;
+    --hop-ComboBox-trigger-background-color: var(--hop-neutral-surface);
+    --hop-ComboBox-trigger-border-color: var(--hop-neutral-border);
+    --hop-ComboBox-trigger-border-radius: var(--hop-shape-rounded-md);
+    --hop-ComboBox-trigger-border-size: var(--hop-space-10);
+    --hop-ComboBox-trigger-outline-offset: calc(-1 * var(--hop-space-20));
+    --hop-ComboBox-trigger-column-gap: var(--hop-space-inline-sm);
+    --hop-ComboBox-trigger-cursor: pointer;
+    --hop-ComboBox-trigger-color: var(--hop-neutral-text);
+    --hop-ComboBox-trigger-padding-inline-start: var(--hop-space-inset-md);
+
+    /* Search Input */
+    --hop-ComboBox-input-placeholder-color: var(--hop-neutral-text-weakest);
+    --hop-ComboBox-input-sm-font-family: var(--hop-body-sm-font-family);
+    --hop-ComboBox-input-sm-font-size: var(--hop-body-sm-font-size);
+    --hop-ComboBox-input-sm-font-weight: var(--hop-body-sm-font-weight);
+    --hop-ComboBox-input-sm-line-height: var(--hop-body-sm-line-height);
+    --hop-ComboBox-input-md-font-family: var(--hop-body-md-font-family);
+    --hop-ComboBox-input-md-font-size: var(--hop-body-md-font-size);
+    --hop-ComboBox-input-md-font-weight: var(--hop-body-md-font-weight);
+    --hop-ComboBox-input-md-line-height: var(--hop-body-md-line-height);
+
+    /* ComboBox Button */
+    --hop-ComboBox-button-padding-inline: var(--hop-space-inset-md);
+
+    /* Button Icon */
+    --hop-ComboBox-button-icon-color: var(--hop-neutral-icon-weak);
+
+    /* Prefix */
+    --hop-ComboBox-prefix-color: var(--hop-neutral-text-weak);
+
+    /* Hovered */
+    --hop-ComboBox-trigger-background-color-hovered: var(--hop-neutral-surface-hover);
+    --hop-ComboBox-trigger-border-color-hovered: var(--hop-neutral-border-hover);
+    --hop-ComboBox-trigger-color-hovered: var(--hop-neutral-text-hover);
+    --hop-ComboBox-button-icon-color-hovered: var(--hop-neutral-icon-hover);
+
+    /* Focused */
+    --hop-ComboBox-trigger-background-color-focused: var(--hop-neutral-surface-hover);
+    --hop-ComboBox-trigger-border-color-focused: var(--hop-primary-border-focus);
+    --hop-ComboBox-trigger-color-focused: var(--hop-neutral-text-hover);
+    --hop-ComboBox-button-icon-color-focused: var(--hop-neutral-icon-hover);
+    --hop-ComboBox-trigger-outline-color-focused: var(--hop-primary-border-focus);
+
+    /**
+    * Selected 
+    * Note: The selected state is the pressed state in RAC. Pressed is activated when the dropdown is open.
+    * This can be viewed here: https://github.com/adobe/react-spectrum/blob/7336849a1ddb754ba264f0adb4a1e898e49e1579/packages/react-aria-components/src/ComboBox.tsx#L170 
+    */
+    --hop-ComboBox-button-background-color-selected: var(--hop-neutral-surface);
+    --hop-ComboBox-button-border-color-selected: var(--hop-neutral-border-selected);
+    --hop-ComboBox-button-color-selected: var(--hop-neutral-text);
+    --hop-ComboBox-button-icon-color-selected: var(--hop-neutral-icon);
+
+    /* Invalid */
+    --hop-ComboBox-trigger-border-color-invalid: var(--hop-danger-border-strong);
+
+    /* Disabled */
+    --hop-ComboBox-trigger-background-color-disabled: var(--hop-neutral-surface-disabled);
+    --hop-ComboBox-trigger-border-color-disabled: var(--hop-neutral-border-disabled);
+    --hop-ComboBox-trigger-color-disabled: var(--hop-neutral-text-disabled);
+    --hop-ComboBox-button-icon-color-disabled: var(--hop-neutral-icon-disabled);
+    --hop-ComboBox-trigger-cursor-disabled: not-allowed;
+
+    /* Internal Variables */
+    --inline-size: var(--hop-ComboBox-inline-size);
+    --trigger-background-color: var(--hop-ComboBox-trigger-background-color);
+    --trigger-border-color: var(--hop-ComboBox-trigger-border-color);
+    --trigger-cursor: var(--hop-ComboBox-trigger-cursor);
+    --trigger-color: var(--hop-ComboBox-trigger-color);
+    --button-icon-color: var(--hop-ComboBox-button-icon-color);
+    --input-font-family: var(--hop-ComboBox-input-md-font-family);
+    --input-font-size: var(--hop-ComboBox-input-md-font-size);
+    --input-font-weight: var(--hop-ComboBox-input-md-font-weight);
+    --input-line-height: var(--hop-ComboBox-input-md-line-height);
+
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--hop-ComboBox-row-gap);
+
+    box-sizing: border-box;
+    inline-size: var(--inline-size);
+    max-inline-size: var(--hop-ComboBox-max-inline-size);
+}
+
+.hop-ComboBox--fluid  {
+    --inline-size: var(--hop-ComboBox-inline-size-fluid);
+}
+
+.hop-ComboBox__label {
+    order: 1;
+}
+
+.hop-ComboBox__trigger {
+    cursor: var(--trigger-cursor);
+
+    overflow: hidden;
+    display: flex;
+    column-gap: var(--hop-ComboBox-trigger-column-gap);
+    order: 2;
+
+    block-size: var(--trigger-block-size);
+    padding-inline-start: var(--hop-ComboBox-trigger-padding-inline-start);
+
+    color: var(--trigger-color);
+
+    background-color: var(--trigger-background-color);
+    border: var(--hop-ComboBox-trigger-border-size) solid var(--trigger-border-color);
+    border-radius: var(--hop-ComboBox-trigger-border-radius);
+}
+
+.hop-ComboBox__trigger--sm {
+    --trigger-block-size: var(--hop-ComboBox-trigger-sm-block-size);
+    --input-font-family: var(--hop-ComboBox-input-sm-font-family);
+    --input-font-size: var(--hop-ComboBox-input-sm-font-size);
+    --input-font-weight: var(--hop-ComboBox-input-sm-font-weight);
+    --input-line-height: var(--hop-ComboBox-input-sm-line-height);
+}
+
+.hop-ComboBox__trigger--md {
+    --trigger-block-size: var(--hop-ComboBox-trigger-md-block-size);
+}
+
+.hop-ComboBox__trigger[data-hovered] {
+    --trigger-background-color: var(--hop-ComboBox-trigger-background-color-hovered);
+    --trigger-border-color: var(--hop-ComboBox-trigger-border-color-hovered);
+    --trigger-color: var(--hop-ComboBox-trigger-color-hovered);
+    --button-icon-color: var(--hop-ComboBox-button-icon-color-hovered);
+}
+
+.hop-ComboBox__trigger[data-selected] {
+    --trigger-background-color: var(--hop-ComboBox-button-background-color-selected);
+    --trigger-border-color: var(--hop-ComboBox-button-border-color-selected);
+    --trigger-color: var(--hop-ComboBox-button-color-selected);
+    --button-icon-color: var(--hop-ComboBox-button-icon-color-selected);
+}
+
+.hop-ComboBox__trigger[data-invalid] {
+    --trigger-border-color: var(--hop-ComboBox-trigger-border-color-invalid);
+}
+
+.hop-ComboBox__trigger[data-focus-visible] {
+    --trigger-background-color: var(--hop-ComboBox-trigger-background-color-focused);
+    --trigger-border-color: var(--hop-ComboBox-trigger-border-color-focused);
+    --trigger-color: var(--hop-ComboBox-trigger-color-focused);
+    --button-icon-color: var(--hop-ComboBox-button-icon-color-focused);
+
+    outline: var(--hop-ComboBox-trigger-border-size) solid var(--hop-ComboBox-trigger-outline-color-focused);
+    outline-offset: var(--hop-ComboBox-trigger-outline-offset);
+}
+
+.hop-ComboBox__trigger[data-disabled] {
+    --trigger-background-color: var(--hop-ComboBox-trigger-background-color-disabled);
+    --trigger-border-color: var(--hop-ComboBox-trigger-border-color-disabled);
+    --trigger-color: var(--hop-ComboBox-trigger-color-disabled);
+    --button-icon-color: var(--hop-ComboBox-button-icon-color-disabled);
+    --trigger-cursor: var(--hop-ComboBox-trigger-cursor-disabled);
+}
+
+.hop-ComboBox__input {
+    flex: 1 1 auto;
+
+    min-inline-size: 0;
+
+    font-family: var(--input-font-family);
+    font-size: var(--input-font-size);
+    font-weight: var(--input-font-weight);
+    line-height: var(--input-line-height);
+    color: var(--trigger-color);
+
+    background: none;
+    border: none;
+    outline: none;
+}
+
+.hop-ComboBox__input::placeholder {
+    color: var(--hop-ComboBox-input-placeholder-color);
+}
+
+/* ComboBox Button */
+.hop-ComboBox__button {
+    cursor: var(--trigger-cursor);
+
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+
+    padding-inline: var(--hop-ComboBox-button-padding-inline);
+
+    background-color: var(--trigger-background-color);
+    border: none;
+    outline: none;
+}
+
+.hop-ComboBox__prefix {
+    align-self: center;
+    color: var(--hop-ComboBox-prefix-color);
+}
+
+.hop-ComboBox__button-icon {
+    margin-inline-start: auto;
+    color: var(--button-icon-color);
+}
+
+.hop-ComboBox__helper-message,
+.hop-ComboBox__error-message {
+    order: 3;
+}