diff --git a/__snapshots__/notification/showcase/chromium/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png b/__snapshots__/notification/showcase/chromium/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png index 7dbdd1d5d32..58733c8f920 100644 Binary files a/__snapshots__/notification/showcase/chromium/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png and b/__snapshots__/notification/showcase/chromium/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png differ diff --git a/__snapshots__/notification/showcase/firefox/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png b/__snapshots__/notification/showcase/firefox/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png index fd2175b66f7..435866bec47 100644 Binary files a/__snapshots__/notification/showcase/firefox/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png and b/__snapshots__/notification/showcase/firefox/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png differ diff --git a/__snapshots__/notification/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png b/__snapshots__/notification/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png index 9a91d55d680..ad0ca7a3113 100644 Binary files a/__snapshots__/notification/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png and b/__snapshots__/notification/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png differ diff --git a/__snapshots__/notification/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png b/__snapshots__/notification/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png index b8297b49118..a3f7f67809f 100644 Binary files a/__snapshots__/notification/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png and b/__snapshots__/notification/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png differ diff --git a/__snapshots__/notification/showcase/webkit/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png b/__snapshots__/notification/showcase/webkit/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png index a9fb8185f7f..5a536761bd5 100644 Binary files a/__snapshots__/notification/showcase/webkit/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png and b/__snapshots__/notification/showcase/webkit/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png differ diff --git a/packages/components/src/components/notification/notification-grid-non-overlay.scss b/packages/components/src/components/notification/notification-grid-non-overlay.scss index edfec8d63e1..75fc0902d0a 100644 --- a/packages/components/src/components/notification/notification-grid-non-overlay.scss +++ b/packages/components/src/components/notification/notification-grid-non-overlay.scss @@ -62,58 +62,5 @@ } } } - - &[data-link-variant="inline"] { - // 1. only content (min. requirement) - grid-template-areas: "content link"; - grid-template-columns: 1fr min-content; - - &:has(.db-button) { - grid-template-columns: 1fr min-content min-content; - grid-template-areas: "content link close"; - } - - // 2. headline - &:has(header) { - grid-template-columns: 1fr min-content; - grid-template-areas: - "head link" - "content content"; - - &:has(.db-button) { - grid-template-columns: 1fr min-content min-content; - grid-template-areas: - "head link close" - "content content content"; - } - } - - // 3. icon or img - &[data-icon], - &[data-semantic]:not([data-semantic="adaptive"]), - &:has(img) { - grid-template-areas: "icon content link"; - grid-template-columns: min-content 1fr min-content; - - &:has(.db-button) { - grid-template-columns: min-content 1fr min-content min-content; - grid-template-areas: "icon content link close"; - } - - &:has(header) { - grid-template-columns: min-content 1fr min-content; - grid-template-areas: - "icon head link" - "icon content content"; - - &:has(.db-button) { - grid-template-columns: min-content 1fr min-content min-content; - grid-template-areas: - "icon head link close" - "icon content content content"; - } - } - } - } } } diff --git a/packages/components/src/components/notification/notification-grid-overlay.scss b/packages/components/src/components/notification/notification-grid-overlay.scss index a633f735866..f31b48bd5ca 100644 --- a/packages/components/src/components/notification/notification-grid-overlay.scss +++ b/packages/components/src/components/notification/notification-grid-overlay.scss @@ -1,8 +1,4 @@ %grid-layout-variant-overlay { - a { - display: none; - } - // has timestamp &:has(span) { // 1. only content (min. requirement) diff --git a/packages/components/src/components/notification/notification.scss b/packages/components/src/components/notification/notification.scss index a3606acfe52..87982924a4e 100644 --- a/packages/components/src/components/notification/notification.scss +++ b/packages/components/src/components/notification/notification.scss @@ -124,6 +124,63 @@ grid-area: icon; } + // has link inline or overlay + &:has(a) { + &[data-link-variant="inline"], + &[data-variant="overlay"] { + // 1. only content (min. requirement) + grid-template-areas: "content link"; + grid-template-columns: 1fr min-content; + + &:has(.db-button) { + grid-template-columns: 1fr min-content min-content; + grid-template-areas: "content link close"; + } + + // 2. headline + &:has(header) { + grid-template-columns: 1fr min-content; + grid-template-areas: + "head link" + "content content"; + + &:has(.db-button) { + grid-template-columns: 1fr min-content min-content; + grid-template-areas: + "head link close" + "content content content"; + } + } + + // 3. icon or img + &[data-icon], + &[data-semantic]:not([data-semantic="adaptive"]), + &:has(img) { + grid-template-areas: "icon content link"; + grid-template-columns: min-content 1fr min-content; + + &:has(.db-button) { + grid-template-columns: min-content 1fr min-content min-content; + grid-template-areas: "icon content link close"; + } + + &:has(header) { + grid-template-columns: min-content 1fr min-content; + grid-template-areas: + "icon head link" + "icon content content"; + + &:has(.db-button) { + grid-template-columns: min-content 1fr min-content min-content; + grid-template-areas: + "icon head link close" + "icon content content content"; + } + } + } + } + } + &[data-variant="overlay"] { @extend %grid-layout-variant-overlay; box-shadow: variables.$db-elevation-md; diff --git a/showcases/shared/notification.json b/showcases/shared/notification.json index db0a1957d78..fc2b616bfc6 100644 --- a/showcases/shared/notification.json +++ b/showcases/shared/notification.json @@ -456,6 +456,34 @@ "behaviour": "permanent" } }, + { + "name": "Text & Textlink Inline", + "style": { "width": "300px" }, + "props": { + "link": true, + "variant": "overlay", + "behaviour": "permanent" + } + }, + { + "name": "Text & Headline & Textlink Inline & Cloaseable", + "style": { "width": "300px" }, + "props": { + "headline": "Headline", + "link": true, + "variant": "overlay" + } + }, + { + "name": "Text & Icon & Headline & Textlink Inline & Cloaseable", + "style": { "width": "300px" }, + "props": { + "icon": "information_circle", + "headline": "Headline", + "link": true, + "variant": "overlay" + } + }, { "name": "Text & Timed", "style": { "width": "300px" },