Merged in feat/SW-3655-input-component (pull request #3296)

feat: (SW-3655) new Input and FormInput components * First version new Input and FormInput components * Handle aria-describedby with react-aria instead of manually add it * Update breaking unit and stories tests * Merge branch 'master' into feat/SW-3655-input-component * Update example form * Merge branch 'master' into feat/SW-3655-input-component * New lock file Approved-by: Linus Flood
2025-12-08 08:51:03 +00:00
parent de4b3c1c3c
commit edca33c49f
33 changed files with 2159 additions and 71 deletions
--- a/packages/design-system/lib/components/InputNew/input.module.css
+++ b/packages/design-system/lib/components/InputNew/input.module.css
@@ -0,0 +1,139 @@
+/* Label positioned above input (outside container) */
+.labelAbove {
+  color: var(--Text-Default);
+  font-family: var(--Label-Font-family), var(--Label-Font-fallback);
+  font-size: var(--Body-Supporting-text-Size);
+  font-weight: var(--Body-Supporting-text-Font-weight-2);
+  letter-spacing: var(--Body-Supporting-text-Letter-spacing);
+  line-height: 1.5;
+}
+
+.container {
+  align-content: center;
+  background-color: var(--Surface-Primary-Default);
+  border: 1px solid var(--Border-Interactive-Default);
+  border-radius: var(--Corner-radius-md);
+  display: grid;
+  min-width: 0; /* allow shrinkage */
+  height: 56px;
+  padding: 0 var(--Space-x15);
+  box-sizing: border-box;
+  cursor: text;
+  margin-top: var(--Space-x1);
+
+  &:has(.input:focus):not(:has(.input:disabled)):not(
+      :has(.input:read-only)
+    ):not(:has(.input[data-invalid='true'])):not(
+      :has(.input[aria-invalid='true'])
+    ):not(:has(.input[data-warning='true'])):not(
+      :has(.input[data-validation-state='warning'])
+    ):not([data-validation-state='warning']) {
+    outline-offset: -2px;
+    outline: 2px solid var(--Border-Interactive-Focus);
+  }
+
+  &:has(.input:disabled),
+  &:has(.input:read-only) {
+    background-color: var(--Surface-Primary-Disabled);
+    border: transparent;
+    cursor: unset;
+  }
+
+  &:has(.input[data-invalid='true'], .input[aria-invalid='true']) {
+    border-color: var(--Border-Interactive-Error);
+
+    &:focus-within,
+    &:has(.input:focus) {
+      outline-offset: -2px;
+      outline: 2px solid var(--Border-Interactive-Error);
+      border-color: var(--Border-Interactive-Error);
+    }
+  }
+
+  &:has(.input[data-warning='true']),
+  &:has(.input[data-validation-state='warning']),
+  &[data-validation-state='warning'] {
+    background-color: var(--Surface-Feedback-Warning-light);
+    border-color: var(--Border-Interactive-Focus);
+
+    &:focus-within,
+    &:has(.input:focus) {
+      outline-offset: -2px;
+      outline: 2px solid var(--Border-Interactive-Focus);
+      border-color: var(--Border-Interactive-Focus);
+    }
+  }
+}
+
+.containerWithLeftIcon {
+  padding-left: calc(var(--Space-x5) + 4px);
+}
+
+.containerWithRightIcon {
+  padding-right: calc(var(--Space-x5));
+}
+
+.input {
+  background: none;
+  border: none;
+  color: var(--Text-Default);
+  height: 1px;
+  order: 2;
+  padding: 0;
+  transition: height 150ms ease;
+  width: 100%;
+
+  &:focus,
+  &:placeholder-shown,
+  &[value]:not([value='']) {
+    height: 24px;
+    outline: none;
+  }
+
+  &:disabled,
+  &:read-only {
+    color: var(--Text-Interactive-Disabled);
+    cursor: unset;
+  }
+}
+
+/* Input with label on top - always has proper height */
+.inputTopLabel {
+  height: 24px;
+  order: 2;
+}
+
+.inputContainer {
+  position: relative;
+}
+
+.leftIconContainer {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  top: 0;
+  bottom: 0;
+  margin: auto 0 auto var(--Space-x15);
+}
+
+.rightIconContainer {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto var(--Space-x15) auto 0;
+}
+
+.rightIconButton {
+  width: 24px;
+  height: 24px;
+}
+
+@media (hover: hover) {
+  .input:active:not(:disabled) {
+    height: 24px;
+    outline: none;
+  }
+}