@danske/sapphire-css 16.3.0 → 26.1.0

package/components/field/field.module.css

@@ -0,0 +1,164 @@
+.sapphire-field {
+  display: inline-grid;
+  grid-template-columns: auto; /* One column by default */
+  row-gap: var(--sapphire-field-size-spacing-vertical);
+  column-gap: var(--sapphire-field-size-spacing-horizontal);
+  font-family: var(--sapphire-field-font-name);
+  grid-auto-rows: min-content;
+
+  /* The below is meant to address a font rendering quirk in OSX where the text
+   * looks bolder than intended due to subpixel rendering. This quirk generally
+   * occurs for bold fonts on dark backgrounds but depending on the font, it
+   * can happen in other contexts as well.
+   *
+   * These do not do anything except in webkit browsers & firefox on OSX.
+   *
+   * For more details see:
+   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
+   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
+   */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  box-sizing: border-box;
+}
+
+/**
+ * We need to reset browser styles in case the DOM element is a <fieldset>
+ */
+fieldset.sapphire-field {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.sapphire-field__label {
+  order: 1;
+  justify-content: end;
+}
+
+/**
+ * We need to reset browser styles in case the DOM element is a <legend>.
+ * Setting "float" is ugly, but seems like it needs to be done.
+ * https://stackoverflow.com/questions/3973456/default-css-values-for-a-fieldset-legend
+ */
+legend.sapphire-field__label {
+  padding: 0;
+  float: left;
+}
+
+.sapphire-field__control {
+  order: 2;
+  min-width: 100%;
+}
+
+/**
+ * For when the control contains a group of inputs
+ */
+.sapphire-field__control--group {
+  display: flex;
+  gap: var(--sapphire-field-size-spacing-control-group);
+}
+
+/**
+ * Modifier which makes the control's width exceed the
+ * field's container. This is useful when the control's
+ * contents must not shrink beyond a min width.
+ */
+.sapphire-field--no-shrink .sapphire-field__control {
+  min-width: initial;
+}
+
+.sapphire-field__message {
+  /**
+   * The below "min-width" and "max-width" combination is a little bit magical.
+   * It results in this element always having a width equal to the widest of the
+   * other grid rows but never greater than that.
+   *
+   * The reason for why "max-width: 100%" alone is not enough has to do with
+   * its interacton with the grid's column width definiton from the parent.
+   **/
+  min-width: 100%;
+  max-width: min-content;
+  order: 3;
+}
+
+/**
+ * Note
+ * An error message or a note, which by design are mutually exclusive.
+ */
+.sapphire-field__note-row {
+  display: flex;
+  align-items: top;
+  font-size: var(--sapphire-field-size-font-note-l);
+  line-height: var(--sapphire-field-size-line-height-note-l);
+  color: var(--sapphire-field-color-note-default);
+}
+
+.sapphire-field--medium .sapphire-field__note-row {
+  font-size: var(--sapphire-field-size-font-note-m);
+  line-height: var(--sapphire-field-size-line-height-note-m);
+}
+
+.sapphire-field__note {
+  flex: 1;
+}
+
+.sapphire-field--error .sapphire-field__note {
+  color: var(--sapphire-field-color-note-error);
+}
+
+/**
+ * Disabled
+ */
+.sapphire-field.is-disabled {
+  opacity: var(--sapphire-field-opacity-disabled);
+  cursor: not-allowed;
+}
+.sapphire-field.is-disabled .sapphire-field__control * {
+  cursor: inherit;
+}
+
+/**
+ * Side placement
+ */
+.sapphire-field--label-placement-side {
+  grid-template-columns: max-content auto;
+}
+.sapphire-field--label-placement-side .sapphire-field__control,
+.sapphire-field--label-placement-side .sapphire-field__message {
+  grid-column: 2;
+}
+.sapphire-field--label-placement-side .sapphire-field__label {
+  /* label is center aligned with control by default. But if the control is too long (e.g. textarea)
+   * the label stays at the top (max-height)
+   */
+  display: flex;
+  align-items: center;
+  max-height: var(--sapphire-field-size-max-height-label);
+}
+
+/*
+ * FieldSet - a wrapper for fields, that handles spacing, and label alignment when labels are on
+ * the side.
+ */
+.sapphire-fieldset {
+  display: inline-flex;
+  flex-direction: column;
+  width: min-content; /* this is needed to have the labels column shrunk to the largest one */
+  gap: var(--sapphire-field-size-spacing-fieldset-large);
+}
+
+.sapphire-fieldset .sapphire-field--label-placement-side {
+  grid-template-columns: 1fr min-content;
+}
+
+.sapphire-fieldset
+  .sapphire-field--label-placement-side
+  .sapphire-field__label {
+  /* That is necessary because of width: min-content on field-set. Would be nice to avoid it
+     but couldn't find a way to avoid it while meeting the other requirements of having labels
+     aligned and not take up more space than needed.
+   */
+  white-space: nowrap;
+}

package/components/fieldGroup/fieldGroup.module.css

@@ -1,64 +1,18 @@
-.sapphire-fieldGroup-label-container {
-  /* The below is meant to address a font rendering quirk in OSX where the text
-   * looks bolder than intended due to subpixel rendering. This quirk generally
-   * occurs for bold fonts on dark backgrounds but depending on the font, it
-   * can happen in other contexts as well.
-   *
-   * These do not do anything except in webkit browsers & firefox on OSX.
-   *
-   * For more details see:
-   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
-   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
-   */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  display: flex;
-  align-items: center;
-  gap: var(--sapphire-field-group-size-spacing-heading-horizontal);
-  margin-bottom: var(--sapphire-field-group-size-spacing-heading-vertical);
-}
-
-.sapphire-fieldGroup-label-text {
-  font-family: var(--sapphire-field-group-font-heading-name);
-  font-weight: var(--sapphire-field-group-font-heading-weight);
-  font-size: var(--sapphire-field-group-size-font-default);
-  line-height: var(--sapphire-field-group-size-line-height);
-  color: var(--sapphire-field-group-color-label);
-}
-
-.sapphire-fieldGroup-label-text--disabled {
-  opacity: var(--sapphire-radio-opacity-disabled);
-}
-
-.sapphire-fieldGroup-content {
+.sapphire-field-group {
   display: flex;
-}
-
-.sapphire-fieldGroup-content--horizontal {
-  flex-direction: row;
   flex-wrap: wrap;
+  column-gap: var(--sapphire-field-group-size-spacing-field-horizontal);
+  row-gap: var(--sapphire-field-group-size-spacing-field-vertical-l);
 }
 
-.sapphire-fieldGroup-content--horizontal
-  .sapphire-fieldGroup-field:not(:last-child) {
-  margin-right: var(--sapphire-field-group-size-spacing-field-horizontal);
+.sapphire-field-group--horizontal {
+  flex-direction: row;
 }
 
-.sapphire-fieldGroup-content--vertical {
+.sapphire-field-group--vertical {
   flex-direction: column;
 }
 
-.sapphire-fieldGroup-content--vertical
-  .sapphire-fieldGroup-field:not(:last-child) {
-  margin-bottom: var(--sapphire-field-group-size-spacing-field-vertical);
-}
-
-.sapphire-fieldGroup-error-text {
-  display: block;
-  font-family: var(--sapphire-field-group-font-heading-name);
-  font-weight: var(--sapphire-field-group-font-error-text-weight);
-  font-size: var(--sapphire-field-group-size-font-error-text);
-  margin-top: var(--sapphire-field-group-size-spacing-error-text-vertical);
-  color: var(--sapphire-field-group-color-error-text);
+.sapphire-field-group--medium {
+  row-gap: var(--sapphire-field-group-size-spacing-field-vertical-m);
 }

package/components/fieldGroup/fieldGroup.module.css.d.ts

@@ -1,12 +1,8 @@
 declare const styles: {
-  readonly "sapphire-fieldGroup-label-container": string;
-  readonly "sapphire-fieldGroup-label-text": string;
-  readonly "sapphire-fieldGroup-label-text--disabled": string;
-  readonly "sapphire-fieldGroup-content": string;
-  readonly "sapphire-fieldGroup-content--horizontal": string;
-  readonly "sapphire-fieldGroup-field": string;
-  readonly "sapphire-fieldGroup-content--vertical": string;
-  readonly "sapphire-fieldGroup-error-text": string;
+  readonly "sapphire-field-group": string;
+  readonly "sapphire-field-group--horizontal": string;
+  readonly "sapphire-field-group--vertical": string;
+  readonly "sapphire-field-group--medium": string;
 };
 export = styles;
 

package/components/icon/icon.module.css

@@ -1,14 +1,19 @@
 .sapphire-icon.sapphire-icon--small {
-  height: var(--sapphire-icon-size-small);
-  width: var(--sapphire-icon-size-small);
+  height: var(--sapphire-icon-size-s);
+  width: var(--sapphire-icon-size-s);
 }
 
 .sapphire-icon.sapphire-icon--medium {
-  height: var(--sapphire-icon-size-medium);
-  width: var(--sapphire-icon-size-medium);
+  height: var(--sapphire-icon-size-m);
+  width: var(--sapphire-icon-size-m);
 }
 
 .sapphire-icon.sapphire-icon--large {
-  height: var(--sapphire-icon-size-large);
-  width: var(--sapphire-icon-size-large);
+  height: var(--sapphire-icon-size-l);
+  width: var(--sapphire-icon-size-l);
+}
+
+.sapphire-icon.sapphire-icon--extra-large {
+  height: var(--sapphire-icon-size-xl);
+  width: var(--sapphire-icon-size-xl);
 }

package/components/icon/icon.module.css.d.ts

@@ -3,6 +3,7 @@ declare const styles: {
   readonly "sapphire-icon--small": string;
   readonly "sapphire-icon--medium": string;
   readonly "sapphire-icon--large": string;
+  readonly "sapphire-icon--extra-large": string;
 };
 export = styles;