@equinor/eds-core-react 2.4.0 → 2.4.1-beta.0

package/build/index.css

@@ -203,16 +203,10 @@
    * Button height is controlled by min-height.
    * The span keeps its natural line-height and is centered by flexbox.
    *
-   * Spacious (default): sm=24px, md=36px, lg=44px
-   * Comfortable:        sm=20px, md=24px, lg=36px
+   * Spacious (default): sm=24px, md=36px
+   * Comfortable:        sm=20px, md=24px
    */
 
-  .eds-button[data-selectable-space='lg'] {
-    gap: var(--eds-typography-gap-horizontal);
-    min-height: 2.75rem; /* 44px */
-    padding-inline: var(--eds-selectable-space-horizontal);
-  }
-
   .eds-button[data-selectable-space='md'] {
     gap: var(--eds-typography-gap-horizontal);
     min-height: 2.25rem; /* 36px */
@@ -227,10 +221,6 @@
 
   /* Comfortable density */
 
-  [data-density='comfortable'] .eds-button[data-selectable-space='lg'] {
-    min-height: 2.25rem; /* 36px */
-  }
-
   [data-density='comfortable'] .eds-button[data-selectable-space='md'] {
     min-height: 1.5rem; /* 24px */
   }
@@ -936,37 +926,45 @@
   .eds-input-container {
     /* Temporary alias until proper input background token is available */
     --_bg-input: var(--eds-color-bg-canvas);
+
     /* Temporary alias until proper readonly text token is available */
     --_readonly-text-color: var(--eds-color-border-strong);
 
     isolation: isolate;
+
     display: flex;
     flex-direction: row;
-    align-items: center;
     gap: var(--eds-typography-gap-horizontal);
+    align-items: center;
+
     box-sizing: border-box;
     inline-size: 100%;
+    padding-block: var(--eds-selectable-space-vertical);
+    padding-inline: var(--eds-selectable-space-horizontal);
+    border-radius: var(--eds-spacing-border-radius-rounded, 4px);
+
     background: var(--_bg-input);
+
     /* Outline instead of border to not affect height calculation */
     outline: var(--eds-sizing-stroke-thin) solid var(--eds-color-border-subtle);
     outline-offset: calc(-1 * var(--eds-sizing-stroke-thin));
-    border-radius: var(--eds-spacing-border-radius-none);
-    padding-inline: var(--eds-selectable-space-horizontal);
-    padding-block: var(--eds-selectable-space-vertical);
+
     transition:
       background-color 150ms,
       outline-color 150ms;
 
-    &:hover:not([data-disabled]):not([data-readonly]) {
+    &:hover:not([data-disabled], [data-readonly]) {
       outline-color: var(--eds-color-border-strong);
 
       & .eds-input {
         color: var(--eds-color-text-strong);
+
         /* Safari autofill override */
         -webkit-text-fill-color: var(--eds-color-text-strong);
 
         &::placeholder {
           color: var(--eds-color-text-strong);
+
           /* Safari autofill override */
           -webkit-text-fill-color: var(--eds-color-text-strong);
         }
@@ -999,14 +997,16 @@
       outline-color: transparent;
 
       & .eds-input {
-        color: var(--eds-color-text-disabled);
         cursor: not-allowed;
+        color: var(--eds-color-text-disabled);
         opacity: 1;
+
         /* Safari autofill override */
         -webkit-text-fill-color: var(--eds-color-text-disabled);
 
         &::placeholder {
           color: var(--eds-color-text-disabled);
+
           /* Safari autofill override */
           -webkit-text-fill-color: var(--eds-color-text-disabled);
         }
@@ -1025,6 +1025,7 @@
 
       & .eds-input {
         color: var(--_readonly-text-color);
+
         /* Safari autofill override */
         -webkit-text-fill-color: var(--_readonly-text-color);
       }
@@ -1043,23 +1044,27 @@
 
   /* Input/Textarea element */
   .eds-input {
-    /* Temporary alias until proper placeholder text token is available */
-    --_placeholder-text-color: var(--eds-color-border-strong);
+    --_placeholder-text-color: var(--eds-color-text-subtle);
 
+    resize: none;
+
+    overflow: hidden;
     flex: 1;
+
     min-inline-size: 0;
+    padding: 0;
     border: var(--eds-sizing-stroke-none);
-    background: transparent;
-    outline: none;
+
     color: var(--eds-color-text-strong);
-    padding: 0;
-    overflow: hidden;
-    white-space: nowrap;
     text-overflow: ellipsis;
-    resize: none;
+    white-space: nowrap;
+
+    background: transparent;
+    outline: none;
 
     &::placeholder {
       color: var(--_placeholder-text-color);
+
       /* Safari autofill override */
       -webkit-text-fill-color: var(--_placeholder-text-color);
     }
@@ -1067,16 +1072,17 @@
 
   /* Error icon */
   .eds-error-icon {
-    color: var(--eds-color-text-subtle);
     flex-shrink: 0;
+    color: var(--eds-color-text-subtle);
   }
 
   /* Adornments container */
   .eds-adornment {
     display: flex;
-    align-items: center;
-    gap: var(--eds-typography-gap-horizontal);
     flex-shrink: 0;
+    gap: var(--eds-typography-gap-horizontal);
+    align-items: center;
+
     color: var(--eds-color-text-subtle);
   }
 
@@ -1131,4 +1137,339 @@
     margin-block: calc(var(--eds-sizing-icon-xs) / -2);
   }
 }
+@layer eds-components {
+  .eds-text-area {
+    & .label-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--eds-typography-gap-horizontal);
+      inline-size: 100%;
+
+      & > button {
+        flex-shrink: 0;
+        margin-block: calc(var(--eds-sizing-icon-xs) / -2);
+      }
+    }
+
+    & .eds-input-container {
+      align-items: flex-start;
+      padding-block: var(--eds-container-space-vertical);
+      overflow: hidden;
+
+      & textarea.eds-input {
+        box-sizing: border-box;
+        overflow: auto;
+        white-space: pre-wrap;
+        text-overflow: clip;
+        resize: vertical;
+        padding-block-end: var(--eds-container-space-vertical);
+        padding-inline-end: var(--eds-selectable-space-horizontal);
+      }
+
+      &:has(+ .helper-row) {
+        margin-block-end: calc(
+          var(--eds-spacing-vertical-3xs) - var(--eds-generic-gap-vertical)
+        );
+      }
+    }
+
+    & .helper-row {
+      display: flex;
+      align-items: baseline;
+      gap: var(--eds-typography-gap-horizontal);
+      inline-size: 100%;
+    }
+
+    & .char-count {
+      flex-shrink: 0;
+      color: var(--eds-color-text-subtle);
+    }
+  }
+}
+/* Must be outside @layer: [data-font-family] { margin: 0 } in variables.css
+   is unlayered and overrides any margin inside @layer eds-components. */
+.eds-text-area {
+  & .eds-error-icon {
+    margin-block-start: var(--eds-spacing-vertical-2xs);
+  }
+
+  & .char-count {
+    margin-inline-start: auto;
+  }
+
+  /* Extend textarea to bottom-right corner so the resize handle sits flush. */
+  & textarea.eds-input {
+    margin-block-end: calc(-1 * var(--eds-container-space-vertical));
+    margin-inline-end: calc(-1 * var(--eds-selectable-space-horizontal));
+  }
+}
+@layer eds-components {
+  .eds-search {
+    /* Color changes based on state — accent by default, overridden when readonly/disabled */
+    & .search-icon {
+      color: var(--eds-color-text-subtle);
+
+      [data-readonly] & {
+        color: var(--eds-color-border-strong);
+      }
+
+      [data-disabled] & {
+        color: var(--eds-color-text-disabled);
+      }
+    }
+
+    /* Hide native clear button — replaced by our custom one */
+    & [type='search']::-webkit-search-cancel-button {
+      appearance: none;
+    }
+  }
+}
+@layer eds-components {
+  .eds-link {
+    color: var(--eds-color-text-link);
+    text-decoration: underline;
+    text-decoration-thickness: var(--eds-sizing-stroke-thin);
+    text-underline-offset: var(--eds-spacing-vertical-4xs);
+
+    transition: color 150ms ease-in-out;
+  }
+
+  .eds-link:hover {
+    color: var(--eds-color-text-strong);
+  }
+
+  .eds-link:focus-visible {
+    border-radius: var(--eds-spacing-border-radius-rounded);
+    color: var(--eds-color-text-strong);
+    outline: var(--eds-sizing-stroke-thin) solid var(--eds-color-border-focus);
+    outline-offset: var(--eds-spacing-vertical-3xs);
+  }
+
+  /* Standalone variant: flex layout for icon + text */
+  .eds-link[data-variant='standalone'] {
+    position: relative;
+
+    gap: var(--eds-typography-gap-horizontal);
+    align-items: center;
+
+    border-bottom: var(--eds-sizing-stroke-thin) solid currentcolor;
+
+    text-decoration: none;
+  }
+
+  /* Use pseudo-element for focus ring so it can have border-radius
+     while border-bottom stays straight */
+  .eds-link[data-variant='standalone']:focus-visible {
+    border-radius: 0;
+    outline: none;
+  }
+
+  .eds-link[data-variant='standalone']:focus-visible::after {
+    pointer-events: none;
+    content: '';
+
+    position: absolute;
+    inset: calc(var(--eds-spacing-vertical-3xs) * -1);
+
+    border: var(--eds-sizing-stroke-thin) solid var(--eds-color-border-focus);
+    border-radius: var(--eds-spacing-border-radius-rounded);
+  }
+}
+/* Outside @layer to override typography.css [data-font-family] { display: block } */
+.eds-link[data-variant='standalone'] {
+  display: inline-flex;
+}
+@layer eds-components {
+  .eds-tooltip {
+    /* Gap between tooltip and anchor; also used for the arrow height */
+    --_arrow: var(--eds-spacing-vertical-3xs);
+    /* Width of the arrow tip (1px = visually sharp, matches Figma) */
+    --_tip: 1px;
+
+    /* UA popover reset */
+    position: fixed;
+    margin: 0;
+    inset: auto;
+    border: none;
+    overflow: visible;
+
+    position-anchor: var(--tooltip-anchor-name);
+    width: max-content;
+    background-color: var(--eds-color-text-strong);
+    color: var(--eds-color-text-strong-on-emphasis);
+    border-radius: var(--eds-spacing-border-radius-rounded);
+    padding-block: var(--eds-container-space-vertical);
+    padding-inline: var(--eds-container-space-horizontal);
+
+    /* Rectangle shadow — always downward regardless of arrow direction (no shadow tokens in EDS 2.0) */
+    box-shadow:
+      0px 2px 4px rgba(0, 0, 0, 0.14),
+      0px 3px 4px rgba(0, 0, 0, 0.12),
+      0px 1px 5px rgba(0, 0, 0, 0.2);
+
+    /* Arrow: ::before is expanded by --_arrow on all sides via `inset: calc(-1 * var(--_arrow))`.
+       A 16-point star clip-path pre-draws all 4 arrows. `margin: inherit` shifts the pseudo-element
+       to match the tooltip's own margin, so 3 arrows hide behind the tooltip body (z-index:-1)
+       and only the gap-side arrow remains visible. */
+    &::before {
+      content: '';
+      position: absolute;
+      z-index: -1;
+      background: inherit;
+      inset: calc(-1 * var(--_arrow));
+      margin: inherit;
+      clip-path: polygon(
+        /* top */
+        calc(50% - var(--_arrow)) var(--_arrow),
+        calc(50% - var(--_tip)) 0,
+        calc(50% + var(--_tip)) 0,
+        calc(50% + var(--_arrow)) var(--_arrow),
+        /* right */
+        calc(100% - var(--_arrow)) calc(50% - var(--_arrow)),
+        100% calc(50% - var(--_tip)),
+        100% calc(50% + var(--_tip)),
+        calc(100% - var(--_arrow)) calc(50% + var(--_arrow)),
+        /* bottom */
+        calc(50% + var(--_arrow)) calc(100% - var(--_arrow)),
+        calc(50% + var(--_tip)) 100%,
+        calc(50% - var(--_tip)) 100%,
+        calc(50% - var(--_arrow)) calc(100% - var(--_arrow)),
+        /* left */
+        var(--_arrow) calc(50% + var(--_arrow)),
+        0 calc(50% + var(--_tip)),
+        0 calc(50% - var(--_tip)),
+        var(--_arrow) calc(50% - var(--_arrow))
+      );
+    }
+
+    &[data-placement='top'] {
+      position-area: top;
+      bottom: var(--_arrow);
+      margin: var(--_arrow) var(--_arrow) 0;
+      position-try-fallbacks: flip-block, --eds-tooltip-bottom;
+    }
+
+    &[data-placement='bottom'] {
+      position-area: bottom;
+      top: var(--_arrow);
+      margin: 0 var(--_arrow) var(--_arrow);
+      position-try-fallbacks: flip-block, --eds-tooltip-top;
+    }
+
+    &[data-placement='right'] {
+      position-area: right;
+      left: var(--_arrow);
+      margin: var(--_arrow) var(--_arrow) var(--_arrow) 0;
+      position-try-fallbacks: flip-inline, --eds-tooltip-left;
+    }
+
+    &[data-placement='left'] {
+      position-area: left;
+      right: var(--_arrow);
+      margin: var(--_arrow) 0 var(--_arrow) var(--_arrow);
+      position-try-fallbacks: flip-inline, --eds-tooltip-right;
+    }
+
+    & .label {
+      font-feature-settings: 'lnum', 'tnum';
+    }
+  }
+
+  .eds-tooltip-anchor {
+    display: inline-block;
+    anchor-name: var(--tooltip-anchor-name);
+  }
+}
+/* @position-try must be outside @layer per spec. */
+@position-try --eds-tooltip-bottom {
+  position-area: bottom;
+  top: var(--_arrow);
+  margin: 0 var(--_arrow) var(--_arrow);
+}
+@position-try --eds-tooltip-top {
+  position-area: top;
+  bottom: var(--_arrow);
+  margin: var(--_arrow) var(--_arrow) 0;
+}
+@position-try --eds-tooltip-left {
+  position-area: left;
+  right: var(--_arrow);
+  margin: var(--_arrow) 0 var(--_arrow) var(--_arrow);
+}
+@position-try --eds-tooltip-right {
+  position-area: right;
+  left: var(--_arrow);
+  margin: var(--_arrow) var(--_arrow) var(--_arrow) 0;
+}
+@layer eds-components {
+  .eds-banner {
+    position: relative;
+
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--eds-container-space-horizontal);
+    align-items: flex-start;
+
+    padding: var(--eds-container-space-vertical)
+      var(--eds-container-space-horizontal);
+    border-radius: var(--eds-spacing-border-radius-rounded, 4px);
+
+    background: var(--eds-color-bg-surface);
+    outline: var(--eds-sizing-stroke-thin) solid var(--eds-color-border-medium);
+  }
+
+  .eds-banner__icon {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+
+    height: var(--eds-typography-line-height, 1.5rem);
+
+    /*
+     * Negative margin compensates for Figma's icon container padding,
+     * pulling the icon closer to the component edge.
+     * Figma variable: selectable/icon-container-padding (↕︎ -6px, ↔︎ -4.8px)
+     * See #4684 for exporting this as a CSS custom property.
+     */
+    margin-block: -6px;
+    margin-inline-start: -4.8px;
+
+    color: var(--eds-color-text-subtle);
+  }
+
+  .eds-banner__message {
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+    color: var(--eds-color-text-strong);
+  }
+
+  .eds-banner__actions {
+    display: flex;
+    gap: var(--eds-selectable-gap-horizontal, 8px);
+    align-items: center;
+  }
+
+  .eds-banner__actions[data-placement='bottom'] {
+    flex-basis: 100%;
+  }
+
+  .eds-banner:has(.eds-banner__dismiss) {
+    padding-inline-end: calc(
+      var(--eds-container-space-horizontal) + 24px +
+        var(--eds-container-space-horizontal)
+    );
+  }
+
+  .eds-banner__dismiss {
+    position: absolute;
+    top: var(--eds-container-space-vertical);
+    right: var(--eds-container-space-horizontal);
+
+    /* Same Figma icon container padding compensation as .eds-banner__icon */
+    margin-block: -6px;
+    margin-inline-end: -4.8px;
+  }
+}