@danske/sapphire-css 37.0.0 → 38.1.0

package/components/filterDropdown/filterDropdown.module.css

@@ -0,0 +1,18 @@
+.sapphire-filter-dropdown {
+  display: flex;
+  flex-direction: column;
+  height: 100%; /* meant to be rendered as a single child of an overlay container */
+}
+
+.sapphire-filter-dropdown__body {
+  flex: 1;
+  overflow: auto;
+  padding: var(--sapphire-semantic-size-spacing-container-horizontal-sm);
+  padding-bottom: 0;
+}
+
+.sapphire-filter-dropdown__footer {
+  display: flex;
+  justify-content: space-between;
+  padding: var(--sapphire-semantic-size-spacing-container-horizontal-sm);
+}

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

@@ -0,0 +1,7 @@
+declare const styles: {
+  readonly "sapphire-filter-dropdown": string;
+  readonly "sapphire-filter-dropdown__body": string;
+  readonly "sapphire-filter-dropdown__footer": string;
+};
+export = styles;
+

package/components/popover/popover.module.css

@@ -28,6 +28,18 @@
    */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  /**
+   * flex display makes it possible to have a content container with height: 100%, which otherwise
+   * is not possible when popover only has a max-height and not a height.
+   * Having an extra block inner container (.sapphire-popover__content) then avoid having the
+   * content of the popover a direct flex child which comes with some side effects.
+   */
+  display: flex;
+}
+
+.sapphire-popover__content {
+  flex-basis: 100%;
 }
 
 .sapphire-popover--padded {

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

@@ -1,6 +1,7 @@
 declare const styles: {
   readonly "sapphire-popover": string;
   readonly "fade-in": string;
+  readonly "sapphire-popover__content": string;
   readonly "sapphire-popover--padded": string;
   readonly "sapphire-popover--max-width": string;
 };

package/components/table/table.module.css

@@ -30,6 +30,11 @@
   border-collapse: collapse;
   border-spacing: 0;
   width: 100%;
+  table-layout: auto;
+}
+
+.sapphire-table__table--fixed-layout {
+  table-layout: fixed;
 }
 
 .sapphire-table-sortedIcon {
@@ -199,11 +204,13 @@
   color: var(--sapphire-semantic-color-content-default-primary);
   font-family: var(--sapphire-semantic-font-name-default);
   font-weight: var(--sapphire-semantic-font-weight-default-regular);
+  overflow-wrap: break-word;
 }
 
 .sapphire-table__cell-contents {
   display: block;
   width: 100%;
+  overflow-wrap: break-word;
 }
 
 /* Overflow behaviour */
@@ -417,6 +424,10 @@ and to avoid the complications of merging the two shadows */ {
   background-color: var(
     --sapphire-semantic-color-background-action-secondary-default
   );
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: 3;
 }
 
 /**

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

@@ -2,6 +2,7 @@ declare const styles: {
   readonly "sapphire-table": string;
   readonly "sapphire-table--overflow": string;
   readonly "sapphire-table__table": string;
+  readonly "sapphire-table__table--fixed-layout": string;
   readonly "sapphire-table-sortedIcon": string;
   readonly "sapphire-table-sortableIcon": string;
   readonly "sapphire-table__head": string;

package/components/toast/toast.module.css

@@ -146,6 +146,7 @@
   align-items: center;
   justify-content: space-between;
 
+  overflow-wrap: anywhere;
   background-color: var(--sapphire-semantic-color-background-surface);
   color: var(--sapphire-semantic-color-content-default-primary);
   font-family: var(--sapphire-semantic-font-name-default);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "37.0.0",
+  "version": "38.1.0",
   "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
   "license": "SEE LICENSE IN LICENSE",
   "sideEffects": false,
@@ -67,7 +67,7 @@
     "typescript": "~4.6.4"
   },
   "dependencies": {
-    "@danske/sapphire-design-tokens": "^41.4.0"
+    "@danske/sapphire-design-tokens": "^41.5.0"
   },
-  "gitHead": "d2568c6a3ae281f2664333a4e6a30cd173aeff3e"
+  "gitHead": "836d631a89aec147d5f4c817d7d7e9f02c9f9d7b"
 }