refactor(Combobox): ♻️ Move styling to combobox.css (#1979)

digdir · May 14, 2024 · 4f9ed15 · 4f9ed15
1 parent f97a9eb
commit 4f9ed15
Show file tree

Hide file tree

Showing 22 changed files with 402 additions and 450 deletions.
diff --git a/packages/css/combobox.css b/packages/css/combobox.css
@@ -0,0 +1,344 @@
+@layer fds.combobox {
+  .fds-combobox {
+    display: grid;
+    background-color: transparent;
+    gap: var(--fds-spacing-2);
+  }
+
+  .fds-combobox__options-wrapper {
+    padding: var(--fds-spacing-2);
+    background: var(--fds-semantic-background-default);
+    overflow-y: auto;
+    z-index: 1600;
+  }
+
+  .fds-combobox--readonly .fds-combobox__input {
+    pointer-events: none;
+  }
+
+  .fds-combobox__input__wrapper {
+    display: flex;
+    align-items: center;
+    position: relative;
+    gap: var(--fds-spacing-1);
+    cursor: text;
+    padding: var(--fds-spacing-2);
+    width: 100%;
+    height: auto;
+    justify-content: space-between;
+    font: var(--fds-typography-paragraph-medium);
+    font-family: inherit;
+  }
+
+  .fds-combobox__input__wrapper .fds-combobox__input {
+    height: 100%;
+    min-width: 50px;
+    flex-grow: 1;
+    appearance: none;
+    border: none;
+    background-color: transparent;
+  }
+
+  .fds-combobox--small .fds-combobox__input__wrapper {
+    min-height: var(--fds-sizing-10);
+    font: var(--fds-typography-paragraph-small);
+    font-family: inherit;
+    padding: 5px var(--fds-spacing-2);
+  }
+
+  .fds-combobox--small .fds-combobox__input__wrapper .fds-combobox__input {
+    font: var(--fds-typography-paragraph-small);
+    font-family: inherit;
+  }
+
+  .fds-combobox--medium .fds-combobox__input__wrapper {
+    min-height: var(--fds-sizing-12);
+    font: var(--fds-typography-paragraph-medium);
+    font-family: inherit;
+    padding: 7px var(--fds-spacing-3);
+  }
+
+  .fds-combobox--medium .fds-combobox__input__wrapper .fds-combobox__input {
+    font: var(--fds-typography-paragraph-medium);
+    font-family: inherit;
+  }
+
+  .fds-combobox--large .fds-combobox__input__wrapper {
+    min-height: var(--fds-sizing-14);
+    font: var(--fds-typography-paragraph-large);
+    font-family: inherit;
+    padding: 7px var(--fds-spacing-4);
+  }
+
+  .fds-combobox--large .fds-combobox__input__wrapper .fds-combobox__input {
+    font: var(--fds-typography-paragraph-large);
+    font-family: inherit;
+  }
+
+  .fds-combobox__input__wrapper .fds-combobox__input:focus {
+    outline: none;
+  }
+
+  .fds-combobox__input__wrapper.fds-combobox--error {
+    border-color: var(--fds-semantic-border-danger-default);
+    border-width: 2px;
+  }
+
+  .fds-combobox__chip-and-input {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    gap: var(--fds-spacing-2);
+    padding: var(--fds-spacing-2) 0;
+    align-items: center;
+    background-color: transparent;
+  }
+
+  .fds-combobox__arrow {
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+  }
+
+  .fds-combobox__input__wrapper.fds-combobox--readonly {
+    background: var(--fds-semantic-surface-neutral-subtle);
+    border-color: var(--fds-semantic-border-neutral-default);
+  }
+
+  .fds-combobox__label {
+    min-width: min-content;
+    display: inline-flex;
+    flex-direction: row;
+    gap: var(--fds-spacing-1);
+    align-items: center;
+  }
+
+  .fds-combobox__description {
+    color: var(--fds-semantic-text-neutral-subtle);
+    margin-top: calc(var(--fds-spacing-2) * -1);
+  }
+
+  .fds-combobox__clear-button {
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+    background-color: transparent;
+    color: var(--fds-semantic-text-neutral-default);
+    border: none;
+    padding: 0;
+    border-radius: var(--fds-spacing-1);
+    height: 29px;
+    width: 29px;
+    aspect-ratio: 1;
+  }
+
+  .fds-combobox--small .fds-combobox__clear-button {
+    height: 25px;
+    width: 25px;
+  }
+
+  .fds-combobox--medium .fds-combobox__clear-button {
+    height: 29px;
+    width: 29px;
+  }
+
+  .fds-combobox--large .fds-combobox__clear-button {
+    height: 31px;
+    width: 31px;
+  }
+
+  .fds-combobox__clear-button:not(:disabled):hover {
+    background-color: var(--fds-semantic-surface-info-subtle-hover);
+  }
+
+  .fds-combobox__disabled {
+    opacity: var(--fds-opacity-disabled);
+  }
+
+  .fds-combobox__disabled * {
+    cursor: not-allowed;
+  }
+
+  .fds-combobox__readonly__icon {
+    height: 1.2em;
+    width: 1.2em;
+  }
+
+  .fds-combobox__error-message {
+    margin-top: var(--fds-spacing-2);
+  }
+
+  .fds-combobox__error-message:empty {
+    display: none;
+  }
+
+  .fds-combobox__loading {
+    display: flex;
+    gap: var(--fds-spacing-2);
+    align-content: center;
+  }
+
+  /**
+   * Apply a focus outline on an element when it is focused with keyboard
+   */
+  .fds-combobox__input__wrapper:has(input:focus) {
+    --fds-focus-border-width: 3px;
+
+    outline: var(--fds-focus-border-width) solid var(--fds-semantic-border-focus-outline);
+    outline-offset: var(--fds-focus-border-width);
+    box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-focus-boxshadow) !important;
+  }
+
+  .fds-combobox__empty {
+    padding: var(--fds-spacing-2) var(--fds-spacing-3);
+  }
+
+  .fds-combobox--large .fds-combobox__empty {
+    font: var(--fds-typography-label-large);
+    font-family: inherit;
+    font-weight: 400;
+  }
+
+  .fds-combobox--medium .fds-combobox__empty {
+    font: var(--fds-typography-label-medium);
+    font-family: inherit;
+    font-weight: 400;
+  }
+
+  .fds-combobox--small .fds-combobox__empty {
+    font: var(--fds-typography-label-small);
+    font-family: inherit;
+    font-weight: 400;
+  }
+
+  .fds-combobox__custom {
+    padding: var(--fds-spacing-2) var(--fds-spacing-3);
+  }
+
+  .fds-combobox--large .fds-combobox__custom {
+    font: var(--fds-typography-label-large);
+    font-family: inherit;
+    font-weight: 400;
+  }
+
+  .fds-combobox--medium .fds-combobox__custom {
+    font: var(--fds-typography-label-medium);
+    font-family: inherit;
+    font-weight: 400;
+  }
+
+  .fds-combobox--small .fds-combobox__custom {
+    font: var(--fds-typography-label-small);
+    font-family: inherit;
+    font-weight: 400;
+  }
+
+  .fds-combobox__option {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1.2em 1fr;
+    padding: var(--fds-spacing-2) var(--fds-spacing-3);
+    padding-left: var(--fds-spacing-1);
+    border: none;
+    border-left: 5px solid transparent;
+    border-radius: var(--fds-border_radius-interactive);
+    justify-content: start;
+    background: none;
+    text-align: left;
+    height: auto;
+    cursor: pointer;
+    font: var(--fds-typography-label-medium);
+    font-family: inherit;
+  }
+
+  .fds-combobox__option.fds-combobox__option--active {
+    background: var(--fds-semantic-surface-action-first-no_fill-hover);
+    border-left: 5px solid var(--fds-semantic-border-input-hover);
+  }
+
+  .fds-combobox__option > div {
+    align-self: flex-start;
+  }
+
+  .fds-combobox__option.fds-combobox__option--multiple {
+    grid-template-columns: auto 1fr;
+    gap: var(--fds-spacing-2);
+  }
+
+  .fds-combobox__option__label {
+    margin: auto 0;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    cursor: pointer;
+    gap: var(--fds-spacing-1);
+    color: var(--fds-semantic-text-neutral-default);
+  }
+
+  .fds-combobox__option--active .fds-combobox__option__label {
+    color: var(--fds-semantic-text-action-hover);
+  }
+
+  .fds-combobox__option__icon-wrapper {
+    width: var(--fds-spacing-6);
+    aspect-ratio: 1 / 1;
+    border: 2px solid var(--fds-semantic-border-input-default);
+    border-radius: var(--fds-border_radius-interactive);
+    background-color: white;
+    display: grid;
+    place-items: center;
+  }
+
+  .fds-combobox__option--active .fds-combobox__option__icon-wrapper {
+    border-color: var(--fds-semantic-border-input-hover);
+  }
+
+  .fds-combobox--small .fds-combobox__option .fds-combobox__option__icon-wrapper {
+    width: var(--fds-spacing-5);
+  }
+
+  .fds-combobox--medium .fds-combobox__option .fds-combobox__option__icon-wrapper {
+    width: var(--fds-spacing-6);
+  }
+
+  .fds-combobox--large .fds-combobox__option .fds-combobox__option__icon-wrapper {
+    width: var(--fds-spacing-7);
+  }
+
+  .fds-combobox__option__icon-wrapper.fds-combobox__option__icon-wrapper--selected {
+    border-color: var(--fds-semantic-border-input-hover);
+    background-color: var(--fds-semantic-border-input-hover);
+  }
+
+  .fds-combobox__option__icon-wrapper__icon {
+    box-sizing: border-box;
+    padding-top: 0.2em;
+    transform: scale(1.4);
+    stroke: var(--fds-semantic-text-neutral-default);
+    color: var(--fds-semantic-text-neutral-default);
+  }
+
+  .fds-combobox__option__icon-wrapper .fds-combobox__option__icon-wrapper__icon {
+    padding-top: 0;
+  }
+
+  .fds-combobox__option--active .fds-combobox__option__icon-wrapper__icon {
+    stroke: var(--fds-semantic-text-action-hover);
+    color: var(--fds-semantic-text-action-hover);
+  }
+
+  .fds-combobox__option__icon-wrapper.fds-combobox__option__icon-wrapper--selected .fds-combobox__option__icon-wrapper__icon {
+    color: white;
+    stroke: white;
+  }
+
+  .fds-combobox__option__description {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: var(--fds-spacing-1);
+    color: var(--fds-semantic-text-neutral-subtle);
+    font: inherit;
+    font-family: inherit;
+  }
+}
diff --git a/packages/css/index.css b/packages/css/index.css
@@ -41,3 +41,4 @@
 @import url('./tooltip.css');
 @import url('./spinner.css');
 @import url('./table.css');
+@import url('./combobox.css');
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -14,7 +14,7 @@
     "dist/**"
   ],
   "scripts": {
-    "build": "yarn run clean && tsc -p tsconfig.build.json && yarn run copy-css-to-build && rollup -c --bundleConfigAsCjs",
+    "build": "yarn run clean && tsc -p tsconfig.build.json && rollup -c --bundleConfigAsCjs",
     "generate:css": "esno ./scripts/generate-css.ts",
     "clean": "rimraf dist && rimraf tsc-build",
     "copy-css-to-build": "copyfiles -u 1 ./src/**/*.css ./tsc-build/",