@danske/sapphire-css 28.4.0 → 30.0.0

package/components/listbox/listbox.module.css

@@ -1,11 +1,7 @@
 .sapphire-listbox {
   box-sizing: border-box;
-  display: flex;
-  justify-content: stretch;
-  flex-direction: column;
   min-width: var(--sapphire-listbox-size-width-min);
   margin: 0;
-  padding: 0;
   position: relative;
   list-style: none;
   outline: none;
@@ -26,14 +22,11 @@
    * between the horizontal and vertical item paddings.
    */
 
-  padding-top: calc(
-    var(--sapphire-listbox-size-spacing-outer-horizontal) -
-      var(--sapphire-listbox-size-spacing-outer-vertical)
-  );
-  padding-bottom: calc(
-    var(--sapphire-listbox-size-spacing-outer-horizontal) -
-      var(--sapphire-listbox-size-spacing-outer-vertical)
-  );
+  padding: calc(
+      var(--sapphire-listbox-size-spacing-outer-horizontal) -
+        var(--sapphire-listbox-size-spacing-outer-vertical)
+    )
+    0;
 
   /* 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
@@ -61,6 +54,14 @@
   color: var(--sapphire-listbox-color-content-normal-primary-default);
   outline: none;
   cursor: pointer;
+
+  /**
+   * Making sure listbox will grow to the maximum width needed by the content, which should
+   * practically disable text wrapping. Ideally we would want the text to wrap, if listbox width
+   * is limited by a container, but with the implementation of virtualization, we couldn't find
+   * a solution to both allow wrapping and not wrapping too eagerly.
+   */
+  min-width: max-content;
 }
 
 .sapphire-listbox__item--danger {
@@ -79,6 +80,11 @@
 
 .sapphire-listbox__content {
   width: 100%;
+  /**
+   * max-width set to mitigate the issue of not being able to set a max-width on the popover the
+   * listbox is rendered in, in use cases like Select.
+   */
+  max-width: calc(100vw - 2 * var(--sapphire-listbox-size-width-icon-l));
   display: grid;
   grid-auto-flow: column;
   align-items: center;

package/components/tag/tag.module.css

@@ -5,19 +5,7 @@
   outline: none;
 }
 
-.sapphire-tag-group__note {
-  font-size: var(--sapphire-tag-size-font-note);
-  color: var(--sapphire-tag-color-note);
-}
-
-.sapphire-tag__gridcell {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--sapphire-tag-size-spacing-with-icon);
-}
-
 .sapphire-tag {
-  /* sizing */
   display: inline-flex;
   flex-direction: row;
   height: var(--sapphire-tag-size-height);
@@ -30,10 +18,11 @@
   cursor: default;
 
   /* typography */
-  font-size: var(--sapphire-tag-size-font-tag);
+  font-size: var(--sapphire-tag-size-font);
   font-family: var(--sapphire-tag-font-name);
   font-weight: var(--sapphire-tag-font-weight);
   font-style: normal;
+  text-decoration: none;
 
   /* color default */
   background-color: var(--sapphire-tag-color-background-primary-default);
@@ -60,22 +49,32 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-/* ## Tag states */
-.sapphire-tag:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-tag:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
-  background-color: var(--sapphire-tag-color-background-primary-hover);
-  cursor: pointer;
-}
 .sapphire-tag.is-focus,
 .sapphire-tag:not(.js-focus):focus-visible {
   background-color: var(--sapphire-tag-color-background-primary-focus);
   outline: var(--sapphire-tag-size-focus-ring-border) solid
     var(--sapphire-tag-color-focus-ring);
+  outline-offset: var(--sapphire-tag-size-focus-ring-offset);
+}
+
+.sapphire-tag__content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sapphire-tag-size-spacing-with-icon);
 }
-.sapphire-tag.is-active {
+
+/* Actionable */
+.sapphire-tag--actionable:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-tag--actionable:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+  background-color: var(--sapphire-tag-color-background-primary-hover);
+  cursor: pointer;
+}
+
+.sapphire-tag--actionable.is-active {
   background-color: var(--sapphire-tag-color-background-primary-active);
   cursor: pointer;
 }
+
 .sapphire-tag:disabled,
 .sapphire-tag.is-disabled {
   opacity: var(--sapphire-tag-opacity-disabled);
@@ -87,22 +86,17 @@
 .sapphire-tag:has(.sapphire-tag__button) {
   padding-right: var(--sapphire-tag-size-spacing-with-icon);
 }
-.sapphire-tag:has(.sapphire-tag__icon--error) {
+
+.sapphire-tag:has(.sapphire-tag__error-icon) {
   padding-left: var(--sapphire-tag-size-spacing-with-icon);
 }
 
 /**
- * Icon
+ * Error Icon
  */
-.sapphire-tag__icon {
+.sapphire-tag__error-icon {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
   align-items: center;
-  height: var(--sapphire-tag-size-icon);
-  width: var(--sapphire-tag-size-icon);
-}
-.sapphire-tag--error .sapphire-tag__icon--error {
   color: var(--sapphire-tag-color-error);
 }
 
@@ -114,11 +108,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  vertical-align: middle;
   white-space: nowrap;
-  height: var(--sapphire-tag-size-icon);
-  width: var(--sapphire-tag-size-icon);
   border: none;
+  margin: 0;
+  padding: 0;
+  background-color: transparent;
 
   /* transition */
   transition-property: color;
@@ -130,6 +124,7 @@
   background-color: transparent;
   color: var(--sapphire-tag-color-button);
 }
+
 .sapphire-tag__button:focus {
   outline: none;
 }

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

@@ -1,18 +1,16 @@
 declare const styles: {
   readonly "sapphire-tag-group": string;
-  readonly "sapphire-tag-group__note": string;
-  readonly "sapphire-tag__gridcell": string;
   readonly "sapphire-tag": string;
+  readonly "is-focus": string;
+  readonly "js-focus": string;
+  readonly "sapphire-tag__content": string;
+  readonly "sapphire-tag--actionable": string;
   readonly "is-disabled": string;
   readonly "is-active": string;
   readonly "js-hover": string;
   readonly "is-hover": string;
-  readonly "is-focus": string;
-  readonly "js-focus": string;
   readonly "sapphire-tag__button": string;
-  readonly "sapphire-tag__icon--error": string;
-  readonly "sapphire-tag__icon": string;
-  readonly "sapphire-tag--error": string;
+  readonly "sapphire-tag__error-icon": string;
 };
 export = styles;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "28.4.0",
+  "version": "30.0.0",
   "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
   "license": "SEE LICENSE IN LICENSE",
   "sideEffects": false,
@@ -66,7 +66,7 @@
     "typescript": "~4.6.4"
   },
   "dependencies": {
-    "@danske/sapphire-design-tokens": "^37.3.0"
+    "@danske/sapphire-design-tokens": "^38.0.0"
   },
-  "gitHead": "546502d6671ee7c2ef9802b577b78cd587ba110c"
+  "gitHead": "2ff8412b24532d59317fba3af90c5e305bc6ee6b"
 }