@danske/sapphire-css 38.1.1 → 39.0.0

package/components/list/list.module.css

@@ -19,6 +19,7 @@
    */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  list-style: none;
 }
 
 .sapphire-list__item {
@@ -31,9 +32,29 @@
     --sapphire-semantic-color-background-action-tertiary-ghost-default
   );
   outline: none;
+  font-family: var(--sapphire-semantic-font-name-default);
 }
 
-.sapphire-list__item:has(.sapphire-list__item-content-wrapper) {
+/**
+* .sapphire-list__item--interactive is used either for a list item or list item content wrapper.
+* Created to reuse the same styles for angular and react.
+*/
+.sapphire-list__item--interactive {
+  /* When list item is a button or anchor, we need to remove the default styles */
+  border: none;
+  outline: none;
+  text-decoration: none;
+  box-sizing: border-box;
+  width: 100%;
+
+  transition-property: opacity, background-color, color;
+  transition-duration: var(--sapphire-semantic-time-fade-quick);
+  transition-timing-function: ease-in-out;
+
+  cursor: pointer;
+}
+
+.sapphire-list__item:has(.sapphire-list__item--interactive) {
   padding: 0;
 }
 
@@ -41,7 +62,11 @@
   z-index: 1;
 }
 
-.sapphire-list__item-content-wrapper {
+/* the flex style needed in the scenario where the 
+--interactive element is rendered as a wrapper of the content inside the list item, 
+instead of being applied on the list item itself  */
+
+.sapphire-list__item > .sapphire-list__item--interactive {
   display: flex;
   justify-content: space-between;
   width: 100%;
@@ -78,10 +103,8 @@
   );
 }
 
-.sapphire-list__item:disabled .sapphire-list__item-content-wrapper,
-.sapphire-list__item[aria-disabled='true'] .sapphire-list__item-content-wrapper,
-.sapphire-list__item-content-wrapper:disabled,
-.sapphire-list__item-content-wrapper[aria-disabled='true'] {
+.sapphire-list__item--interactive:disabled,
+.sapphire-list__item--interactive[aria-disabled='true'] {
   cursor: not-allowed;
   opacity: var(--sapphire-semantic-opacity-disabled);
 }
@@ -90,70 +113,78 @@
   Only render a divider if
   - item isn't last child of without-last-divider list
   - next item is focused (as next item's top box-shadow will act as divider) either by
-    - parent item of item-content-wrapper not having a sibling with a focused child item-content-wrapper
-    - sibling of a list item without a child item-content-wrapper not having a focused child item-content-wrapper
-  - item-content-wrapper is not focused itself
+    - parent item of item--interactive not having a sibling with a focused child item--interactive
+    - sibling of a list item without a child item--interactive not having a focused child item--interactive
+  - item--interactive is not focused itself
 
   Note that using box-shadow both for divider and focus styling complicates the selectors
   as we for instance have to exclude the focus states when adding the divider.
 */
-.sapphire-list__item-content-wrapper:not(.is-focus, :not(.js-focus):focus),
-.sapphire-list__item:not(:has(.sapphire-list__item-content-wrapper)) {
+.sapphire-list__item--interactive:not(.is-focus, :not(.js-focus):focus),
+.sapphire-list__item:not(:has(.sapphire-list__item--interactive)) {
   box-shadow: inset 0px -1px 0px 0px var(--sapphire-semantic-color-border-separator-default);
 }
 /* For not virtualized list */
 .sapphire-list--without-last-divider:not(:has([role="presentation"] > [role="presentation"]))
   .sapphire-list__item:last-child
-  .sapphire-list__item-content-wrapper:not(.is-focus):not(:focus),
+.sapphire-list__item--interactive:not(.is-focus):not(:focus),
 .sapphire-list--without-last-divider:not(:has([role="presentation"] > [role="presentation"]))
-  .sapphire-list__item:last-child,
+  .sapphire-list__item:not(.sapphire-list__item--interactive):last-child,
 /* For virtualized lists.
  * This is admittedly a bad-looking selector. To keep in
  * mind that a virtualized list adds one or more extra nesting with role
  * presentation. */
 .sapphire-list--without-last-divider
   [role="presentation"]:last-child > .sapphire-list__item
-  .sapphire-list__item-content-wrapper:not(.is-focus):not(:focus),
+  .sapphire-list__item--interactive:not(.is-focus):not(:focus),
 .sapphire-list--without-last-divider
   [role="presentation"]:last-child > .sapphire-list__item,
 /* other */
 .sapphire-list__item:has(+ .sapphire-list__item
-    > .sapphire-list__item-content-wrapper.is-focus)
-  > .sapphire-list__item-content-wrapper:not(.is-focus, :not(.js-focus):focus),
+    > .sapphire-list__item--interactive.is-focus)
+  > .sapphire-list__item--interactive:not(.is-focus, :not(.js-focus):focus),
 .sapphire-list__item:has(+ .sapphire-list__item
-    > .sapphire-list__item-content-wrapper:not(.js-focus):focus)
-  > .sapphire-list__item-content-wrapper:not(.is-focus, :not(.js-focus):focus),
+    > .sapphire-list__item--interactive:not(.js-focus):focus)
+  > .sapphire-list__item-ineractive:not(.is-focus, :not(.js-focus):focus),
 .sapphire-list__item:has(+ .sapphire-list__item
-    > .sapphire-list__item-content-wrapper.is-focus),
+    > .sapphire-list__item--interactive.is-focus),
 .sapphire-list__item:has(+ .sapphire-list__item
-    > .sapphire-list__item-content-wrapper:not(.js-focus):focus) {
+    > .sapphire-list__item--interactive:not(.js-focus):focus) {
+  box-shadow: none;
+}
+
+/* 
+ * This is used in the list item in Anular to remove the last divider
+ */
+.sapphire-list__item.sapphire-list__item--interactive:not(
+    .is-focus,
+    :not(.js-focus):focus
+  ).sapphire-list__item--without-divider {
   box-shadow: none;
 }
 
 /*
  * Hover
  */
-.sapphire-list .sapphire-list__item-content-wrapper.is-hover,
-.sapphire-list
-  .sapphire-list__item-content-wrapper:not(.js-hover):not(
+.sapphire-list__item--interactive.is-hover:not(.is-active),
+.sapphire-list__item--interactive:not(.js-hover):not(
     [aria-disabled='true']
-  ):not(:disabled):hover {
+  ):not(:disabled):not(:active):hover {
   background-color: var(
     --sapphire-semantic-color-background-action-secondary-default
   );
-  cursor: pointer;
 }
 
 /*
  * Focus
  */
-.sapphire-list__item-content-wrapper:focus,
-.sapphire-list__item-content-wrapper:focus-visible {
+.sapphire-list__item-content-interactive:focus,
+.sapphire-list__item-content-interactive:focus-visible {
   outline: none;
 }
 
-.sapphire-list__item-content-wrapper.is-focus,
-.sapphire-list__item-content-wrapper:not(.js-focus):focus {
+.sapphire-list__item--interactive.is-focus,
+.sapphire-list__item--interactive:not(.js-focus):focus {
   outline: none;
   box-shadow: inset 0px 0px 0px var(--sapphire-semantic-size-focus-ring)
     var(--sapphire-semantic-color-focus-ring);
@@ -161,12 +192,27 @@
   border-radius: var(--sapphire-semantic-size-radius-sm);
 }
 
+/* Active */
+
+.sapphire-list__item--interactive:not(.is-disabled).is-active,
+.sapphire-list__item--interactive:not([aria-disabled='true']):not(
+    :disabled
+  ):active,
+.sapphire-list__item--interactive:not([aria-disabled='true']):not(
+    :disabled
+  ):focus-visible:active {
+  background-color: var(
+    --sapphire-semantic-color-background-action-secondary-hover
+  );
+}
+
 .sapphire-list__item-content-left {
   display: flex;
   align-items: center;
   margin-right: var(--sapphire-semantic-size-spacing-30);
   /* This was added to accommodate nowrap + hidden text overflow situations */
   min-width: 0;
+  gap: var(--sapphire-semantic-size-spacing-30);
 }
 
 .sapphire-list__item-content-right {
@@ -175,6 +221,7 @@
   text-align: right;
   margin-left: var(--sapphire-semantic-size-spacing-30);
   color: var(--sapphire-semantic-color-content-default-primary);
+  gap: var(--sapphire-semantic-size-spacing-30);
 }
 
 .sapphire-list__item-text {
@@ -190,16 +237,6 @@
   flex-direction: column-reverse;
 }
 
-/* If sibling is present before the text, we apply margin to the left on the text */
-* + .sapphire-list__item-text {
-  margin-left: var(--sapphire-semantic-size-spacing-30);
-}
-
-/* If sibling is present after the text, we apply margin to the left on that sibling */
-.sapphire-list__item-text + * {
-  margin-left: var(--sapphire-semantic-size-spacing-30);
-}
-
 .sapphire-list__item-text-primary {
   color: var(--sapphire-semantic-color-content-default-primary);
   line-height: var(--sapphire-semantic-size-line-height-md);

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

@@ -1,13 +1,18 @@
 declare const styles: {
   readonly "sapphire-list": string;
   readonly "sapphire-list__item": string;
-  readonly "sapphire-list__item-content-wrapper": string;
+  readonly "sapphire-list__item--interactive": string;
   readonly "sapphire-list--negative-margin-self": string;
   readonly "is-focus": string;
   readonly "js-focus": string;
   readonly "sapphire-list--without-last-divider": string;
+  readonly "sapphire-list__item-ineractive": string;
+  readonly "sapphire-list__item--without-divider": string;
   readonly "is-hover": string;
+  readonly "is-active": string;
   readonly "js-hover": string;
+  readonly "sapphire-list__item-content-interactive": string;
+  readonly "is-disabled": string;
   readonly "sapphire-list__item-content-left": string;
   readonly "sapphire-list__item-content-right": string;
   readonly "sapphire-list__item-text": string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "38.1.1",
+  "version": "39.0.0",
   "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
   "license": "SEE LICENSE IN LICENSE",
   "sideEffects": false,
@@ -45,7 +45,7 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@danske/sapphire-icons": "^2.2.0",
+    "@danske/sapphire-icons": "^2.3.0",
     "@danske/sapphire-react": "^4.3.0",
     "@mdx-js/react": "^1.6.22",
     "@storybook/addon-essentials": "^6.5.13",
@@ -69,5 +69,5 @@
   "dependencies": {
     "@danske/sapphire-design-tokens": "^41.5.0"
   },
-  "gitHead": "6bd3c484a3b470e3efbb4b9bc14f8132ad50071f"
+  "gitHead": "f2079a7e0cd3e3c50c5b75c0aa545f8beee78d3c"
 }