@danske/sapphire-css 27.0.1 → 27.1.0

package/components/avatar/avatar.module.css

@@ -55,6 +55,13 @@
   font-size: var(--sapphire-avatar-size-font-l);
 }
 
+.sapphire-avatar--extra-large {
+  height: var(--sapphire-avatar-size-height-xl);
+  width: var(--sapphire-avatar-size-height-xl);
+  border-radius: var(--sapphire-avatar-size-radius-xl);
+  font-size: var(--sapphire-avatar-size-font-xl);
+}
+
 /* Colors and variants */
 .sapphire-avatar--positive {
   color: var(--sapphire-avatar-color-content-positive);

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

@@ -3,6 +3,7 @@ declare const styles: {
   readonly "sapphire-avatar--extra-small": string;
   readonly "sapphire-avatar--small": string;
   readonly "sapphire-avatar--large": string;
+  readonly "sapphire-avatar--extra-large": string;
   readonly "sapphire-avatar--positive": string;
   readonly "sapphire-avatar--negative": string;
   readonly "sapphire-avatar--warning": string;

package/components/buttonGroup/buttonGroup.module.css

@@ -1,8 +1,43 @@
 .sapphire-button-group {
   display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: stretch;
   gap: var(--sapphire-button-group-size-spacing-m);
 }
 
+/*
+The initial idea of buttons that stack on top of each other if the container width is too small was to use @container queries.
+There was an attempt to make use of the query based on ".sapphire-button-group" when it was under 320px, but we encountered certain limitations.
+For the query to work, the CSS property `container-type: inline-size;` should be set, but due to how the container query works, the width of the button group would always collapse (read more: https://developer.mozilla.org/en-US/docs/Web/CSS/container-type)
+It was decided that, in order to fulfill the requirements, a new modifier (--stretch) needs to be added.
+This enables, if desired, conditional rendering of button group as stretch, overcoming the limitations of container queries.
+*/
+.sapphire-button-group--stretch {
+  flex-wrap: wrap-reverse;
+  justify-content: normal;
+  align-items: normal;
+}
+
+/**
+TODO: note - this used to work without !important. Worth checking later if that can be removed.
+Added !important because of Angular implementation, and how the extra attribute selector that's added for emulated style encapsulation increases the default button styles priority.
+ */
+.sapphire-button-group--stretch > * {
+  min-width: fit-content !important;
+  max-width: 100% !important;
+  flex-grow: 1 !important;
+}
+
+.sapphire-button-group--stretch.sapphire-button-group--vertical {
+  flex-direction: column-reverse;
+  flex-wrap: nowrap;
+}
+
+.sapphire-button-group--stretch.sapphire-button-group--stretch-auto-vertical.sapphire-button-group:has(> *:nth-child(3)) {
+  flex-direction: column-reverse;
+}
+
 .sapphire-button-group--large {
   gap: var(--sapphire-button-group-size-spacing-l);
 }

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

@@ -1,11 +1,13 @@
 declare const styles: {
   readonly "sapphire-button-group": string;
+  readonly "sapphire-button-group--stretch": string;
+  readonly "sapphire-button-group--vertical": string;
+  readonly "sapphire-button-group--stretch-auto-vertical": string;
   readonly "sapphire-button-group--large": string;
   readonly "sapphire-button-group--dense": string;
   readonly "sapphire-button-group--align-center": string;
   readonly "sapphire-button-group--align-right": string;
   readonly "sapphire-button-group--align-left": string;
-  readonly "sapphire-button-group--vertical": string;
 };
 export = styles;
 

package/components/dialog/dialog.module.css

@@ -43,6 +43,10 @@
   animation-name: fade-out;
 }
 
+.sapphire-dialog--extra-small {
+  width: var(--sapphire-dialog-size-width-xs);
+}
+
 .sapphire-dialog--small {
   width: var(--sapphire-dialog-size-width-s);
 }

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

@@ -3,6 +3,7 @@ declare const styles: {
   readonly "fade-in": string;
   readonly "sapphire-dialog--exiting": string;
   readonly "fade-out": string;
+  readonly "sapphire-dialog--extra-small": string;
   readonly "sapphire-dialog--small": string;
   readonly "sapphire-dialog--medium": string;
   readonly "sapphire-dialog--large": string;

package/components/feedbackMessage/feedbackMessage.module.css

@@ -26,6 +26,18 @@
   );
   color: var(--sapphire-feedback-message-color-content-icon-error);
 }
+.sapphire-feedback-message__icon--warning {
+  background-color: var(
+    --sapphire-feedback-message-color-background-icon-warning
+  );
+  color: var(--sapphire-feedback-message-color-content-icon-warning);
+}
+.sapphire-feedback-message__icon--informative {
+  background-color: var(
+    --sapphire-feedback-message-color-background-icon-informative
+  );
+  color: var(--sapphire-feedback-message-color-content-icon-informative);
+}
 
 .sapphire-feedback-message__content {
   display: flex;

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

@@ -3,6 +3,8 @@ declare const styles: {
   readonly "sapphire-feedback-message__icon": string;
   readonly "sapphire-feedback-message__icon--success": string;
   readonly "sapphire-feedback-message__icon--error": string;
+  readonly "sapphire-feedback-message__icon--warning": string;
+  readonly "sapphire-feedback-message__icon--informative": string;
   readonly "sapphire-feedback-message__content": string;
   readonly "sapphire-feedback-message__body": string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "27.0.1",
+  "version": "27.1.0",
   "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
   "license": "SEE LICENSE IN LICENSE",
   "sideEffects": false,
@@ -68,5 +68,5 @@
   "dependencies": {
     "@danske/sapphire-design-tokens": "^37.0.0"
   },
-  "gitHead": "ed8a61f0521fe4e7601d6b962e677cd9e151a401"
+  "gitHead": "b32c314ce39dda19db3c38304864b4e63c0f9470"
 }