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";