diff --git a/docs/migration/v2.x.x-to-v3.0.0.md b/docs/migration/v2.x.x-to-v3.0.0.md
index eec7b342caf3..5f7b4d9ac46e 100644
--- a/docs/migration/v2.x.x-to-v3.0.0.md
+++ b/docs/migration/v2.x.x-to-v3.0.0.md
@@ -16,6 +16,30 @@ Please provide the correct `type` property in your code anyhow as a best practis
We removed the `state` property from the `db-button`/`DBButton` component for now.
It wasn't implemented in any framework causing some confusion, and we will reintroduce it in a future version.
+
+## db-card/DBCard
+
+### `behavior='interactive'` change
+
+We changed the `behavior='interactive'` property not applying `role='button'` and `tabIndex` anymore.
+If you want to use an interactive card, you should wrap the card with the correct HTML element, like a `button` or an `a` HTML tag:
+
+```html
+
+
+
+
+
+```
+
## breakpoints
We updated some breakpoints to align with design:
diff --git a/packages/components/src/components/card/card.lite.tsx b/packages/components/src/components/card/card.lite.tsx
index de7b065fdfdb..b6de238751c7 100644
--- a/packages/components/src/components/card/card.lite.tsx
+++ b/packages/components/src/components/card/card.lite.tsx
@@ -33,8 +33,6 @@ export default function DBCard(props: DBCardProps) {
data-behavior={props.behavior}
data-elevation-level={props.elevationLevel}
data-spacing={props.spacing}
- role={props.behavior === 'interactive' ? 'button' : undefined}
- tabIndex={props.behavior === 'interactive' ? 0 : undefined}
onClick={(event: ClickEvent) =>
state.handleClick(event)
}>
diff --git a/packages/components/src/components/card/card.scss b/packages/components/src/components/card/card.scss
index b028ec92804d..256876501f26 100644
--- a/packages/components/src/components/card/card.scss
+++ b/packages/components/src/components/card/card.scss
@@ -3,54 +3,58 @@
@use "@db-ux/core-foundations/build/styles/helpers";
@use "../../styles/internal/component";
+:is(a, button) {
+ &:has(.db-card) {
+ all: unset;
+ }
+
+ @include helpers.hover {
+ > .db-card,
+ > db-card > .db-card {
+ background-color: var(--db-card-background-color-hovered);
+ }
+ }
+
+ @include helpers.active {
+ > .db-card,
+ > db-card > .db-card {
+ background-color: var(--db-card-background-color-pressed);
+ }
+ }
+}
+
.db-card {
+ --db-card-background-color-default: #{colors.$db-adaptive-bg-basic-level-1-default};
+ --db-card-background-color-hovered: #{colors.$db-adaptive-bg-basic-level-1-hovered};
+ --db-card-background-color-pressed: #{colors.$db-adaptive-bg-basic-level-1-pressed};
+
@extend %default-card;
@include component.get-data-spacing();
display: flex;
flex-direction: column;
+ background-color: var(--db-card-background-color-default);
- &[data-elevation-level="1"],
- &:not([data-elevation-level]) {
- background-color: colors.$db-adaptive-bg-basic-level-1-default;
-
- &[data-behavior="interactive"] {
- @include helpers.hover {
- background-color: colors.$db-adaptive-bg-basic-level-1-hovered;
- }
+ &[data-behavior="interactive"] {
+ @include helpers.hover {
+ background-color: var(--db-card-background-color-hovered);
+ }
- @include helpers.active {
- background-color: colors.$db-adaptive-bg-basic-level-1-pressed;
- }
+ @include helpers.active {
+ background-color: var(--db-card-background-color-pressed);
}
}
&[data-elevation-level="2"] {
- background-color: colors.$db-adaptive-bg-basic-level-2-default;
-
- &[data-behavior="interactive"] {
- @include helpers.hover {
- background-color: colors.$db-adaptive-bg-basic-level-2-hovered;
- }
-
- @include helpers.active {
- background-color: colors.$db-adaptive-bg-basic-level-2-pressed;
- }
- }
+ --db-card-background-color-default: #{colors.$db-adaptive-bg-basic-level-2-default};
+ --db-card-background-color-hovered: #{colors.$db-adaptive-bg-basic-level-2-hovered};
+ --db-card-background-color-pressed: #{colors.$db-adaptive-bg-basic-level-2-pressed};
}
&[data-elevation-level="3"] {
- background-color: colors.$db-adaptive-bg-basic-level-3-default;
-
- &[data-behavior="interactive"] {
- @include helpers.hover {
- background-color: colors.$db-adaptive-bg-basic-level-3-hovered;
- }
-
- @include helpers.active {
- background-color: colors.$db-adaptive-bg-basic-level-3-pressed;
- }
- }
+ --db-card-background-color-default: #{colors.$db-adaptive-bg-basic-level-3-default};
+ --db-card-background-color-hovered: #{colors.$db-adaptive-bg-basic-level-3-hovered};
+ --db-card-background-color-pressed: #{colors.$db-adaptive-bg-basic-level-3-pressed};
}
}
diff --git a/showcases/angular-showcase/src/app/components/card/card.component.html b/showcases/angular-showcase/src/app/components/card/card.component.html
index cc586c18baeb..7da6663a9014 100644
--- a/showcases/angular-showcase/src/app/components/card/card.component.html
+++ b/showcases/angular-showcase/src/app/components/card/card.component.html
@@ -10,12 +10,24 @@
let-exampleIndex="exampleIndex"
let-variantIndex="variantIndex"
>
-
- {{ exampleName }}
-
+ @if (exampleProps?.behavior === "interactive") {
+
+ } @else {
+
+ {{ exampleName }}
+
+ }
diff --git a/showcases/react-showcase/src/components/card/index.tsx b/showcases/react-showcase/src/components/card/index.tsx
index 9738fcd079fb..104a8225eb43 100644
--- a/showcases/react-showcase/src/components/card/index.tsx
+++ b/showcases/react-showcase/src/components/card/index.tsx
@@ -10,25 +10,31 @@ const getCard = ({
children,
spacing,
elevationLevel
-}: DBCardProps) => (
-
- {children}
-
-);
+}: DBCardProps) => {
+ const card = (
+
+ {children}
+
+ );
-const CardComponent = (props: BaseComponentProps) => {
- return (
-
+ return behavior === 'interactive' ? (
+
+ ) : (
+ card
);
};
+const CardComponent = (properties: BaseComponentProps) => (
+
+);
+
export default CardComponent;
diff --git a/showcases/vue-showcase/src/components/card/Card.vue b/showcases/vue-showcase/src/components/card/Card.vue
index 6284da2a8a9b..092d6deffa5c 100644
--- a/showcases/vue-showcase/src/components/card/Card.vue
+++ b/showcases/vue-showcase/src/components/card/Card.vue
@@ -9,7 +9,20 @@ import DefaultComponent from "../DefaultComponent.vue";
+