✨(react) add generic Field component

This component will wrap most of form components in order to provide them a generic state attribute along with texts below them.
2023-04-14 16:38:08 +02:00
parent 6d195f6dad
commit 4f1168463f
8 changed files with 142 additions and 0 deletions
--- a/packages/react/src/components/Forms/Field/index.scss
+++ b/packages/react/src/components/Forms/Field/index.scss
@@ -0,0 +1,30 @@
+.c__field {
+  display: inline-flex;
+  flex-direction: column;
+  width: var(--c--components--forms-field--width);
+  color: var(--c--components--forms-field--color);
+  box-sizing: border-box;
+
+  &__footer {
+    font-size: var(--c--components--forms-field--font-size);
+    padding: 0.25rem calc(1rem + 2px) 0 calc(1rem + 2px);
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__text, &__text-right {
+    word-break: break-word;
+  }
+
+  &--error {
+    color: var(--c--theme--colors--danger-500);
+  }
+
+  &--success {
+    color: var(--c--theme--colors--success-600)
+  }
+
+  &--full-width {
+    width: 100%;
+  }
+}