@coopdigital/styles 0.37.0 → 0.39.0

package/src/components/Textarea.scss

@@ -1,8 +1,7 @@
 .coop-textarea,
 textarea {
-  --font-size: var(--text-size-18);
-  --padding: var(--spacing-14) var(--spacing-12);
-  --height: var(--spacing-48);
+  --padding: calc(var(--field-size) / 2 - 4px) calc(var(--field-size) / 2);
+  --height: calc(var(--field-size) + var(--spacing-16));
 
   position: relative;
 
@@ -11,7 +10,8 @@ textarea {
   width: 100%;
   min-height: var(--height);
   padding: var(--padding);
-  border: 2px solid var(--color-mid-dark-grey);
+  border: 2px solid;
+  border-color: var(--field-border);
   border-radius: var(--ui-border-radius-sm);
 
   font-size: var(--font-size); // [data-size="md"]
@@ -28,21 +28,6 @@ textarea {
     transition: opacity 0.2s 0.2s ease-out;
   }
 
-  &[data-size="sm"] {
-    --height: var(--spacing-40);
-    --font-size: var(--text-size-16);
-  }
-
-  &[data-size="lg"] {
-    --height: var(--spacing-56);
-    --font-size: var(--text-size-20);
-    --padding: var(--spacing-14) var(--spacing-16);
-  }
-
-  &[data-error] {
-    border-color: var(--color-error-red);
-  }
-
   &:focus-visible {
     border-color: var(--color-black);
 
@@ -65,7 +50,7 @@ textarea {
 }
 
 .coop-textarea-counter {
-  &[data-error] {
+  &[data-error="true"] {
     font-weight: 500;
     color: var(--color-error-red);
   }

package/src/form.scss

@@ -1,3 +1,45 @@
+/* Single fields */
+
+.coop-field {
+  --font-size: var(--text-size-18);
+  --field-border: var(--color-mid-dark-grey);
+  --field-size: var(--spacing-32);
+  --gap: var(--spacing-12);
+  --hint-offset: -2px;
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+/* stylelint-disable no-descending-specificity */
+.coop-field:has(input[data-size="sm"], textarea[data-size="sm"]),
+.coop-fieldset[data-size="sm"] .coop-field {
+  --field-size: var(--spacing-24);
+  --font-size: var(--text-size-16);
+  --hint-offset: 0px;
+}
+
+.coop-field:has(input[data-size="lg"], textarea[data-size="lg"]),
+.coop-fieldset[data-size="lg"] .coop-field {
+  --field-size: var(--spacing-40);
+  --font-size: var(--text-size-20);
+  --hint-offset: -4px;
+}
+/* stylelint-enable no-descending-specificity */
+
+.coop-field-control {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.coop-field-markers {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
 .coop-field-error {
   display: block;
   color: var(--color-offer-red);
@@ -8,25 +50,89 @@
   color: var(--color-text-alt);
 }
 
-.coop-field-hint:has(+ .coop-form-item),
-.coop-field-error:has(+ .coop-form-item) {
-  margin-bottom: var(--spacing-4);
-}
-
 .coop-field-label {
-  display: block;
+  display: flex;
+  align-items: center;
+
+  width: fit-content;
   padding: 0;
+
   font-weight: var(--font-weight-medium);
   color: var(--color-text);
+
+  & > span {
+    display: flex;
+    gap: var(--spacing-8);
+    align-items: center;
+    justify-content: space-between;
+  }
 }
 
-.coop-form-item {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
-  width: 100%;
+/* Field variants */
+/* stylelint-disable no-descending-specificity */
+.coop-field.coop-field-inline {
+  .coop-field-markers {
+    padding-left: var(--spacing-12);
+  }
+
+  .coop-field-label + .coop-field-hint,
+  .coop-field-label + .coop-field-error {
+    margin-top: var(--hint-offset);
+  }
+}
+
+.coop-field:not(.coop-field-inline) {
+  .coop-field-control {
+    margin-top: var(--spacing-8);
+  }
+}
+
+.coop-field:has(:checked) {
+  --field-border: var(--color-text-black);
+}
+
+.coop-fieldset-fields[data-boxed="true"] .coop-field,
+.coop-field[data-boxed="true"] {
+  --min-width: 160px;
+  --field-border: var(--color-mid-dark-grey);
+  --border-width: 2px;
+
+  padding: 1rem;
+  border-radius: var(--ui-border-radius-sm);
+  box-shadow: inset 0 0 0 var(--border-width) var(--field-border);
+  transition: box-shadow 0.1s ease-out;
+
+  &:has(:checked),
+  &:not(:has(:disabled)):hover {
+    --field-border: var(--color-text-black);
+    --border-width: 4px;
+  }
+
+  .coop-field-label {
+    width: 100%;
+  }
+
+  .coop-field-label > span {
+    width: 100%;
+  }
+}
+
+.coop-fieldset-fields[data-boxed="true"] .coop-field.coop-field-inline,
+.coop-field.coop-field-inline[data-boxed="true"] {
+  label > span::after {
+    content: "";
+
+    position: absolute;
+    top: -1rem;
+    left: -1rem;
+
+    width: calc(100% + 2rem);
+    height: calc(100% + 2rem);
+  }
 }
 
+/* Fieldsets */
+
 .coop-fieldset {
   display: flex;
   flex-direction: column;
@@ -36,38 +142,38 @@
   padding: 0;
   border: 0;
 
-  legend {
-    float: left;
+  .coop-fieldset-fields {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8) var(--spacing-32);
+
+    &:not(:first-child) {
+      margin-top: var(--spacing-8);
+    }
   }
 
-  // Fieldsets do not play nice with flexbox in safari
-  // So use a margin on direct descendents instead of a gap
-  & > *:not(:last-child) {
-    margin-bottom: var(--spacing-8);
+  .coop-fieldset-fields[data-orientation="horizontal"] {
+    flex-flow: row wrap;
   }
 }
 
-.coop-form-item:has(:disabled) {
-  input,
-  select,
-  textarea,
-  .coop-checkbox-wrapper > *,
-  .coop-radio-button-wrapper > * {
-    cursor: not-allowed;
-  }
+/* Error states */
+
+/* prettier-ignore */
+.coop-field:not(.coop-fieldset[data-error="true"] .coop-field, .coop-field[data-hide-error="true"]):is([data-error="true"]),
+.coop-field:not(.coop-fieldset[data-error="true"] .coop-field, .coop-field[data-hide-error="true"]):has(:invalid),
+.coop-fieldset:not([data-hide-error="true"]):is([data-error="true"]) {
+  padding-left: var(--spacing-16);
+  border-left: 4px solid var(--color-error-red);
 }
 
-// This block sets all labels, hints and errors to be grey
-.coop-form-item:has(:disabled),
-.coop-fieldset:disabled {
-  .coop-field-label,
-  .coop-field-error,
-  .coop-field-hint {
-    color: var(--color-mid-grey);
-  }
+.coop-field:not(.coop-field-inline):is([data-error="true"]),
+.coop-field:not(.coop-field-inline):has(:invalid),
+.coop-fieldset[data-error="true"] .coop-field:not(.coop-field-inline) {
+  --field-border: var(--color-error-red);
 }
 
-// If the previous behaviour is not desirable, and we want to keep labels black,
+// If the below behaviour is not desirable, and we want to keep labels black,
 // including those on fieldsets, this version affects only checkbox/radio labels
 // .coop-form-item:has(:disabled),
 // .coop-fieldset:disabled {
@@ -77,11 +183,28 @@
 //   }
 // }
 
-.coop-form-item:not(.coop-fieldset .coop-form-item):has([data-error]),
-.coop-form-item:not(.coop-fieldset .coop-form-item):has(:invalid),
-.coop-fieldset:is([data-error]),
-.coop-fieldset:has([data-error]),
-.coop-fieldset:has(:invalid) {
-  padding-left: var(--spacing-16);
-  border-left: 4px solid var(--color-error-red);
+/* Disabled states */
+
+.coop-field:has(:disabled),
+.coop-fieldset:disabled,
+.coop-fieldset:disabled .coop-field,
+.coop-fieldset-fields[data-boxed] .coop-field:has(:disabled) {
+  --field-border: var(--color-mid-light-grey);
+  --border-width: 2px;
+
+  input,
+  select,
+  textarea,
+  label,
+  legend,
+  input + div:has(label) {
+    cursor: not-allowed;
+  }
+
+  .coop-field-label,
+  .coop-field-error,
+  .coop-field-hint {
+    color: var(--color-mid-grey);
+  }
 }
+/* stylelint-enable no-descending-specificity */

package/src/reset.scss

@@ -37,9 +37,7 @@ select {
 }
 
 button,
-input,
-label,
-legend {
+input {
   line-height: 1.1;
 }