Merged in chore/sw-3145-move-deprecated-select (pull request #2518)

chore(SW-3145): Move DeprecatedSelect to design-system * Move DeprecatedSelect to design-system Approved-by: Linus Flood
2025-07-04 06:34:18 +00:00
parent 923206ee4c
commit 9e1cc66f95
15 changed files with 97 additions and 77 deletions
--- a/packages/design-system/lib/components/DeprecatedSelect/select.module.css
+++ b/packages/design-system/lib/components/DeprecatedSelect/select.module.css
@@ -0,0 +1,125 @@
+.container {
+  position: relative;
+}
+
+.select {
+  border: 1px solid var(--Base-Border-Normal);
+  border-radius: var(--Corner-radius-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-half);
+}
+
+.select[data-focused='true'] {
+  border: 1px solid var(--Border-Interactive-Focus);
+  outline: none;
+}
+
+.select[data-focused='true'].discreet {
+  border: 1px solid transparent;
+  outline: none;
+}
+.select[data-focus-visible='true'].discreet {
+  border: 1px solid var(--Border-Interactive-Focus);
+}
+
+.select.discreet {
+  border: 1px solid transparent;
+}
+
+.select.discreet .input {
+  background-color: unset;
+  color: var(--Base-Text-High-contrast);
+  gap: var(--Spacing-x1);
+}
+
+.select[data-disabled],
+.select[data-disabled] .input {
+  background-color: var(--UI-Input-Controls-Surface-Disabled);
+  border: none;
+  pointer-events: none;
+}
+
+.iconLabel {
+  display: flex;
+  gap: var(--Spacing-x-half);
+}
+
+.input {
+  align-items: center;
+  background-color: var(--UI-Opacity-White-100);
+  border: none;
+  border-radius: var(--Corner-radius-md);
+  color: var(--UI-Text-High-contrast);
+  display: flex;
+  gap: var(--Spacing-x-half);
+  height: 60px;
+  outline: none;
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+  text-align: left;
+  justify-content: space-between;
+}
+
+.input :global(.react-aria-SelectValue) {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 0;
+}
+
+.select.discreet :global(.react-aria-SelectValue) {
+  align-items: center;
+  justify-content: flex-end;
+  flex-direction: row;
+  font-weight: 500;
+  gap: var(--Spacing-x-half);
+}
+
+.popover {
+  background-color: var(--Main-Grey-White);
+  border-radius: var(--Corner-radius-md);
+  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--Spacing-x1);
+  overflow: auto;
+  width: 100%;
+}
+
+.listBox {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x1);
+  padding: var(--Spacing-x2);
+}
+
+.listBoxItem {
+  padding: var(--Spacing-x1);
+}
+
+.listBoxItem[data-focused='true'],
+.listBoxItem[data-selected='true'] {
+  background: var(--UI-Input-Controls-Surface-Hover);
+  border-radius: var(--Corner-radius-md);
+  outline: none;
+}
+
+.listBoxItem.showRadioButton {
+  display: flex;
+  align-items: center;
+}
+
+.listBoxItem.showRadioButton:before {
+  flex-shrink: 0;
+  content: '';
+  margin-right: var(--Spacing-x-one-and-half);
+  background-color: white;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 2px var(--Base-Border-Normal);
+}
+
+.listBoxItem[data-selected='true'].showRadioButton:before {
+  box-shadow: inset 0 0 0 8px var(--Surface-UI-Fill-Active);
+}