fix: issues from PR

db-ui · Apr 12, 2024 · faaaf44 · faaaf44
1 parent b4daed5
commit faaaf44
Show file tree

Hide file tree

Showing 91 changed files with 64 additions and 64 deletions.
diff --git a/...s__/alert/showcase/chromium/regular/neutral/DBAlert-should-match-screenshot.png b/...s__/alert/showcase/chromium/regular/neutral/DBAlert-should-match-screenshot.png
diff --git a/...ts__/alert/showcase/firefox/regular/neutral/DBAlert-should-match-screenshot.png b/...ts__/alert/showcase/firefox/regular/neutral/DBAlert-should-match-screenshot.png
diff --git a/...lert/showcase/mobile-chrome/regular/neutral/DBAlert-should-match-screenshot.png b/...lert/showcase/mobile-chrome/regular/neutral/DBAlert-should-match-screenshot.png
diff --git a/...lert/showcase/mobile-safari/regular/neutral/DBAlert-should-match-screenshot.png b/...lert/showcase/mobile-safari/regular/neutral/DBAlert-should-match-screenshot.png
diff --git a/...ots__/alert/showcase/webkit/regular/neutral/DBAlert-should-match-screenshot.png b/...ots__/alert/showcase/webkit/regular/neutral/DBAlert-should-match-screenshot.png
diff --git a/__snapshots__/badge/component/chromium/DBBadge-should-match-screenshot.png b/__snapshots__/badge/component/chromium/DBBadge-should-match-screenshot.png
diff --git a/__snapshots__/badge/component/firefox/DBBadge-should-match-screenshot.png b/__snapshots__/badge/component/firefox/DBBadge-should-match-screenshot.png
diff --git a/__snapshots__/badge/component/mobile-chrome/DBBadge-should-match-screenshot.png b/__snapshots__/badge/component/mobile-chrome/DBBadge-should-match-screenshot.png
diff --git a/...utton/component/chromium/DBButton-should-match-screenshot-for-variant-brand.png b/...utton/component/chromium/DBButton-should-match-screenshot-for-variant-brand.png
diff --git a/...tton/component/chromium/DBButton-should-match-screenshot-for-variant-filled.png b/...tton/component/chromium/DBButton-should-match-screenshot-for-variant-filled.png
diff --git a/...utton/component/chromium/DBButton-should-match-screenshot-for-variant-ghost.png b/...utton/component/chromium/DBButton-should-match-screenshot-for-variant-ghost.png
diff --git a/...ton/component/chromium/DBButton-should-match-screenshot-for-variant-primary.png b/...ton/component/chromium/DBButton-should-match-screenshot-for-variant-primary.png
diff --git a/...utton/component/chromium/DBButton-should-match-screenshot-for-variant-solid.png b/...utton/component/chromium/DBButton-should-match-screenshot-for-variant-solid.png
diff --git a/...button/component/chromium/DBButton-should-match-screenshot-for-variant-text.png b/...button/component/chromium/DBButton-should-match-screenshot-for-variant-text.png
diff --git a/.../button/component/chromium/DBButton-should-only-have-icon-for-variant-brand.png b/.../button/component/chromium/DBButton-should-only-have-icon-for-variant-brand.png
diff --git a/...button/component/chromium/DBButton-should-only-have-icon-for-variant-filled.png b/...button/component/chromium/DBButton-should-only-have-icon-for-variant-filled.png
diff --git a/.../button/component/chromium/DBButton-should-only-have-icon-for-variant-ghost.png b/.../button/component/chromium/DBButton-should-only-have-icon-for-variant-ghost.png
diff --git a/...utton/component/chromium/DBButton-should-only-have-icon-for-variant-primary.png b/...utton/component/chromium/DBButton-should-only-have-icon-for-variant-primary.png
diff --git a/.../button/component/chromium/DBButton-should-only-have-icon-for-variant-solid.png b/.../button/component/chromium/DBButton-should-only-have-icon-for-variant-solid.png
diff --git a/..._/button/component/chromium/DBButton-should-only-have-icon-for-variant-text.png b/..._/button/component/chromium/DBButton-should-only-have-icon-for-variant-text.png
diff --git a/...button/component/firefox/DBButton-should-match-screenshot-for-variant-brand.png b/...button/component/firefox/DBButton-should-match-screenshot-for-variant-brand.png
diff --git a/...utton/component/firefox/DBButton-should-match-screenshot-for-variant-filled.png b/...utton/component/firefox/DBButton-should-match-screenshot-for-variant-filled.png
diff --git a/...button/component/firefox/DBButton-should-match-screenshot-for-variant-ghost.png b/...button/component/firefox/DBButton-should-match-screenshot-for-variant-ghost.png
diff --git a/...tton/component/firefox/DBButton-should-match-screenshot-for-variant-primary.png b/...tton/component/firefox/DBButton-should-match-screenshot-for-variant-primary.png
diff --git a/...button/component/firefox/DBButton-should-match-screenshot-for-variant-solid.png b/...button/component/firefox/DBButton-should-match-screenshot-for-variant-solid.png
diff --git a/.../button/component/firefox/DBButton-should-match-screenshot-for-variant-text.png b/.../button/component/firefox/DBButton-should-match-screenshot-for-variant-text.png
diff --git a/..._/button/component/firefox/DBButton-should-only-have-icon-for-variant-brand.png b/..._/button/component/firefox/DBButton-should-only-have-icon-for-variant-brand.png
diff --git a/.../button/component/firefox/DBButton-should-only-have-icon-for-variant-filled.png b/.../button/component/firefox/DBButton-should-only-have-icon-for-variant-filled.png
diff --git a/..._/button/component/firefox/DBButton-should-only-have-icon-for-variant-ghost.png b/..._/button/component/firefox/DBButton-should-only-have-icon-for-variant-ghost.png
diff --git a/...button/component/firefox/DBButton-should-only-have-icon-for-variant-primary.png b/...button/component/firefox/DBButton-should-only-have-icon-for-variant-primary.png
diff --git a/..._/button/component/firefox/DBButton-should-only-have-icon-for-variant-solid.png b/..._/button/component/firefox/DBButton-should-only-have-icon-for-variant-solid.png
diff --git a/...__/button/component/firefox/DBButton-should-only-have-icon-for-variant-text.png b/...__/button/component/firefox/DBButton-should-only-have-icon-for-variant-text.png
diff --git a/.../component/mobile-chrome/DBButton-should-match-screenshot-for-variant-brand.png b/.../component/mobile-chrome/DBButton-should-match-screenshot-for-variant-brand.png
diff --git a/...component/mobile-chrome/DBButton-should-match-screenshot-for-variant-filled.png b/...component/mobile-chrome/DBButton-should-match-screenshot-for-variant-filled.png
diff --git a/.../component/mobile-chrome/DBButton-should-match-screenshot-for-variant-ghost.png b/.../component/mobile-chrome/DBButton-should-match-screenshot-for-variant-ghost.png
diff --git a/...omponent/mobile-chrome/DBButton-should-match-screenshot-for-variant-primary.png b/...omponent/mobile-chrome/DBButton-should-match-screenshot-for-variant-primary.png
diff --git a/.../component/mobile-chrome/DBButton-should-match-screenshot-for-variant-solid.png b/.../component/mobile-chrome/DBButton-should-match-screenshot-for-variant-solid.png
diff --git a/...n/component/mobile-chrome/DBButton-should-match-screenshot-for-variant-text.png b/...n/component/mobile-chrome/DBButton-should-match-screenshot-for-variant-text.png
diff --git a/...on/component/mobile-chrome/DBButton-should-only-have-icon-for-variant-brand.png b/...on/component/mobile-chrome/DBButton-should-only-have-icon-for-variant-brand.png
diff --git a/...n/component/mobile-chrome/DBButton-should-only-have-icon-for-variant-filled.png b/...n/component/mobile-chrome/DBButton-should-only-have-icon-for-variant-filled.png
diff --git a/...on/component/mobile-chrome/DBButton-should-only-have-icon-for-variant-ghost.png b/...on/component/mobile-chrome/DBButton-should-only-have-icon-for-variant-ghost.png
diff --git a/.../component/mobile-chrome/DBButton-should-only-have-icon-for-variant-primary.png b/.../component/mobile-chrome/DBButton-should-only-have-icon-for-variant-primary.png
diff --git a/...on/component/mobile-chrome/DBButton-should-only-have-icon-for-variant-solid.png b/...on/component/mobile-chrome/DBButton-should-only-have-icon-for-variant-solid.png
diff --git a/...ton/component/mobile-chrome/DBButton-should-only-have-icon-for-variant-text.png b/...ton/component/mobile-chrome/DBButton-should-only-have-icon-for-variant-text.png
diff --git a/__snapshots__/code-docs/component/chromium/DBCodeDocs-should-match-screenshot.png b/__snapshots__/code-docs/component/chromium/DBCodeDocs-should-match-screenshot.png
diff --git a/__snapshots__/code-docs/component/firefox/DBCodeDocs-should-match-screenshot.png b/__snapshots__/code-docs/component/firefox/DBCodeDocs-should-match-screenshot.png
diff --git a/...hots__/code-docs/component/mobile-chrome/DBCodeDocs-should-match-screenshot.png b/...hots__/code-docs/component/mobile-chrome/DBCodeDocs-should-match-screenshot.png
diff --git a/...s__/input/showcase/chromium/regular/neutral/DBInput-should-match-screenshot.png b/...s__/input/showcase/chromium/regular/neutral/DBInput-should-match-screenshot.png
diff --git a/...ts__/input/showcase/firefox/regular/neutral/DBInput-should-match-screenshot.png b/...ts__/input/showcase/firefox/regular/neutral/DBInput-should-match-screenshot.png
diff --git a/...nput/showcase/mobile-chrome/regular/neutral/DBInput-should-match-screenshot.png b/...nput/showcase/mobile-chrome/regular/neutral/DBInput-should-match-screenshot.png
diff --git a/...nput/showcase/mobile-safari/regular/neutral/DBInput-should-match-screenshot.png b/...nput/showcase/mobile-safari/regular/neutral/DBInput-should-match-screenshot.png
diff --git a/...ots__/input/showcase/webkit/regular/neutral/DBInput-should-match-screenshot.png b/...ots__/input/showcase/webkit/regular/neutral/DBInput-should-match-screenshot.png
diff --git a/.../showcase/chromium/regular/neutral/DBNavigationItem-should-match-screenshot.png b/.../showcase/chromium/regular/neutral/DBNavigationItem-should-match-screenshot.png
diff --git a/...m/showcase/firefox/regular/neutral/DBNavigationItem-should-match-screenshot.png b/...m/showcase/firefox/regular/neutral/DBNavigationItem-should-match-screenshot.png
diff --git a/...case/mobile-chrome/regular/neutral/DBNavigationItem-should-match-screenshot.png b/...case/mobile-chrome/regular/neutral/DBNavigationItem-should-match-screenshot.png
diff --git a/...case/mobile-safari/regular/neutral/DBNavigationItem-should-match-screenshot.png b/...case/mobile-safari/regular/neutral/DBNavigationItem-should-match-screenshot.png
diff --git a/...em/showcase/webkit/regular/neutral/DBNavigationItem-should-match-screenshot.png b/...em/showcase/webkit/regular/neutral/DBNavigationItem-should-match-screenshot.png
diff --git a/...s__/popover/component/chromium/DBPopover-after-open-should-match-screenshot.png b/...s__/popover/component/chromium/DBPopover-after-open-should-match-screenshot.png
diff --git a/...ts__/popover/component/firefox/DBPopover-after-open-should-match-screenshot.png b/...ts__/popover/component/firefox/DBPopover-after-open-should-match-screenshot.png
diff --git a/...opover/component/mobile-chrome/DBPopover-after-open-should-match-screenshot.png b/...opover/component/mobile-chrome/DBPopover-after-open-should-match-screenshot.png
diff --git a/__snapshots__/select/component/chromium/DBSelect-should-match-screenshot.png b/__snapshots__/select/component/chromium/DBSelect-should-match-screenshot.png
diff --git a/__snapshots__/select/component/firefox/DBSelect-should-match-screenshot.png b/__snapshots__/select/component/firefox/DBSelect-should-match-screenshot.png
diff --git a/__snapshots__/select/component/mobile-chrome/DBSelect-should-match-screenshot.png b/__snapshots__/select/component/mobile-chrome/DBSelect-should-match-screenshot.png
diff --git a/__snapshots__/textarea/component/chromium/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/component/chromium/DBTextarea-should-match-screenshot.png
diff --git a/__snapshots__/textarea/component/firefox/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/component/firefox/DBTextarea-should-match-screenshot.png
diff --git a/...shots__/textarea/component/mobile-chrome/DBTextarea-should-match-screenshot.png b/...shots__/textarea/component/mobile-chrome/DBTextarea-should-match-screenshot.png
diff --git a/...xtarea/showcase/chromium/regular/neutral/DBTextarea-should-match-screenshot.png b/...xtarea/showcase/chromium/regular/neutral/DBTextarea-should-match-screenshot.png
diff --git a/...extarea/showcase/firefox/regular/neutral/DBTextarea-should-match-screenshot.png b/...extarea/showcase/firefox/regular/neutral/DBTextarea-should-match-screenshot.png
diff --git a/...a/showcase/mobile-chrome/regular/neutral/DBTextarea-should-match-screenshot.png b/...a/showcase/mobile-chrome/regular/neutral/DBTextarea-should-match-screenshot.png
diff --git a/...a/showcase/mobile-safari/regular/neutral/DBTextarea-should-match-screenshot.png b/...a/showcase/mobile-safari/regular/neutral/DBTextarea-should-match-screenshot.png
diff --git a/...textarea/showcase/webkit/regular/neutral/DBTextarea-should-match-screenshot.png b/...textarea/showcase/webkit/regular/neutral/DBTextarea-should-match-screenshot.png
diff --git a/packages/components/src/components/button/button.spec.tsx b/packages/components/src/components/button/button.spec.tsx
@@ -6,7 +6,7 @@ import { DBButton } from './index';
 import { DEFAULT_VIEWPORT } from '../../shared/constants.ts';
 
 const testButton = () => {
-	for (const variant of ['outlined', 'primary', 'solid', 'text']) {
+	for (const variant of ['outlined', 'brand', 'filled', 'ghost']) {
 		test(`should contain text for variant ${variant}`, async ({
 			mount
 		}) => {

diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx
@@ -168,7 +168,9 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 				id={state._invalidMessageId}
 				size="small"
 				semantic="critical">
-				{props.invalidMessage || DEFAULT_INVALID_MESSAGE}
+				{props.invalidMessage ||
+					ref?.validationMessage ||
+					DEFAULT_INVALID_MESSAGE}
 			</DBInfotext>
 		</div>
 	);

diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx
@@ -180,7 +180,9 @@ export default function DBInput(props: DBInputProps) {
 				id={state._invalidMessageId}
 				size="small"
 				semantic="critical">
-				{props.invalidMessage || DEFAULT_INVALID_MESSAGE}
+				{props.invalidMessage ||
+					ref?.validationMessage ||
+					DEFAULT_INVALID_MESSAGE}
 			</DBInfotext>
 		</div>
 	);

diff --git a/packages/components/src/components/select/select.lite.tsx b/packages/components/src/components/select/select.lite.tsx
@@ -195,7 +195,9 @@ export default function DBSelect(props: DBSelectProps) {
 				id={state._invalidMessageId}
 				size="small"
 				semantic="critical">
-				{props.invalidMessage || DEFAULT_INVALID_MESSAGE}
+				{props.invalidMessage ||
+					ref?.validationMessage ||
+					DEFAULT_INVALID_MESSAGE}
 			</DBInfotext>
 		</div>
 	);

diff --git a/packages/components/src/components/textarea/textarea.lite.tsx b/packages/components/src/components/textarea/textarea.lite.tsx
@@ -156,7 +156,9 @@ export default function DBTextarea(props: DBTextareaProps) {
 				id={state._invalidMessageId}
 				size="small"
 				semantic="critical">
-				{props.invalidMessage || DEFAULT_INVALID_MESSAGE}
+				{props.invalidMessage ||
+					ref?.validationMessage ||
+					DEFAULT_INVALID_MESSAGE}
 			</DBInfotext>
 		</div>
 	);

diff --git a/packages/components/src/styles/_form-components.scss b/packages/components/src/styles/_form-components.scss
@@ -60,6 +60,7 @@ $input-types: "button", "checkbox", "color", "date", "datetime-local", "email",
 	&[data-variant="floating"] {
 		label {
 			@extend %db-overwrite-font-size-md;
+			opacity: component.$default-disabled;
 			position: absolute;
 			z-index: 2;
 			inset-block-start: calc(
@@ -110,6 +111,7 @@ $input-types: "button", "checkbox", "color", "date", "datetime-local", "email",
 			label {
 				@extend %db-overwrite-font-size-2xs;
 				inset-block-start: variables.$db-spacing-fixed-2xs;
+				opacity: 1;
 			}
 
 			#{$selector} {
@@ -310,7 +312,6 @@ $input-valid-types: "color", "date", "datetime-local", "email", "file", "hidden"
 		padding-block-end: variables.$db-spacing-fixed-xs;
 		pointer-events: none;
 		cursor: text;
-		opacity: component.$default-disabled;
 
 		transition: font-size variables.$db-transition-straight-emotional;
 		max-inline-size: 25ch;

diff --git a/packages/foundations/src/colors.html b/packages/foundations/src/colors.html
@@ -38,68 +38,59 @@
 
 	<body style="padding: var(--db-spacing-fixed-md)">
 		<div>
-			<div class="db-bg-base">base</div>
-			<div class="db-bg-base-strong">base-strong</div>
-			<div class="db-bg-base" data-emphasis="weak">base-weak</div>
-			<div class="db-bg-base-transparent-semi">base-transparent-semi</div>
-			<div class="db-bg-base-transparent-full">base-transparent-full</div>
-			<div class="db-bg-neutral">neutral</div>
-			<div class="db-bg-neutral-strong">neutral-strong</div>
-			<div class="db-bg-neutral" data-emphasis="weak">neutral-weak</div>
-			<div class="db-bg-neutral-transparent-semi">
-				neutral-transparent-semi
+			<div class="db-neutral-bg-lvl-1">neutral-bg-lvl-1</div>
+			<div class="db-neutral-bg-lvl-2">neutral-bg-lvl-2</div>
+			<div class="db-neutral-bg-lvl-3">neutral-bg-lvl-3</div>
+			<div class="db-neutral-bg-transparent-semi">
+				neutral-bg-transparent-semi
 			</div>
-			<div class="db-bg-neutral-transparent-full">
-				neutral-transparent-full
+			<div class="db-neutral-bg-transparent-full">
+				neutral-bg-transparent-full
 			</div>
-			<div class="db-bg-brand">brand</div>
-			<div class="db-bg-brand-strong">brand-strong</div>
-			<div class="db-bg-brand" data-emphasis="weak">brand-weak</div>
-			<div class="db-bg-brand-transparent-semi">
-				brand-transparent-semi
+			<div class="db-brand-bg-lvl-1">brand-bg-lvl-1</div>
+			<div class="db-brand-bg-lvl-2">brand-bg-lvl-2</div>
+			<div class="db-brand-bg-lvl-3">brand-bg-lvl-3</div>
+			<div class="db-brand-bg-transparent-semi">
+				brand-bg-transparent-semi
 			</div>
-			<div class="db-bg-brand-transparent-full">
-				brand-transparent-full
+			<div class="db-brand-bg-transparent-full">
+				brand-bg-transparent-full
 			</div>
-			<div class="db-bg-successful">successful</div>
-			<div class="db-bg-successful-strong">successful-strong</div>
-			<div class="db-bg-successful" data-emphasis="weak">
-				successful-weak
+			<div class="db-critical-bg-lvl-1">critical-bg-lvl-1</div>
+			<div class="db-critical-bg-lvl-2">critical-bg-lvl-2</div>
+			<div class="db-critical-bg-lvl-3">critical-bg-lvl-3</div>
+			<div class="db-critical-bg-transparent-semi">
+				critical-bg-transparent-semi
 			</div>
-			<div class="db-bg-successful-transparent-semi">
-				successful-transparent-semi
+			<div class="db-critical-bg-transparent-full">
+				critical-bg-transparent-full
 			</div>
-			<div class="db-bg-successful-transparent-full">
-				successful-transparent-full
+			<div class="db-warning-bg-lvl-1">warning-bg-lvl-1</div>
+			<div class="db-warning-bg-lvl-2">warning-bg-lvl-2</div>
+			<div class="db-warning-bg-lvl-3">warning-bg-lvl-3</div>
+			<div class="db-warning-bg-transparent-semi">
+				warning-bg-transparent-semi
 			</div>
-			<div class="db-bg-critical">critical</div>
-			<div class="db-bg-critical-strong">critical-strong</div>
-			<div class="db-bg-critical" data-emphasis="weak">critical-weak</div>
-			<div class="db-bg-critical-transparent-semi">
-				critical-transparent-semi
+			<div class="db-warning-bg-transparent-full">
+				warning-bg-transparent-full
 			</div>
-			<div class="db-bg-critical-transparent-full">
-				critical-transparent-full
+			<div class="db-successful-bg-lvl-1">successful-bg-lvl-1</div>
+			<div class="db-successful-bg-lvl-2">successful-bg-lvl-2</div>
+			<div class="db-successful-bg-lvl-3">successful-bg-lvl-3</div>
+			<div class="db-successful-bg-transparent-semi">
+				successful-bg-transparent-semi
 			</div>
-			<div class="db-bg-warning">warning</div>
-			<div class="db-bg-warning-strong">warning-strong</div>
-			<div class="db-bg-warning" data-emphasis="weak">warning-weak</div>
-			<div class="db-bg-warning-transparent-semi">
-				warning-transparent-semi
+			<div class="db-successful-bg-transparent-full">
+				successful-bg-transparent-full
 			</div>
-			<div class="db-bg-warning-transparent-full">
-				warning-transparent-full
+			<div class="db-informational-bg-lvl-1">informational-bg-lvl-1</div>
+			<div class="db-informational-bg-lvl-2">informational-bg-lvl-2</div>
+			<div class="db-informational-bg-lvl-3">informational-bg-lvl-3</div>
+			<div class="db-informational-bg-transparent-semi">
+				informational-bg-transparent-semi
 			</div>
-			<div class="db-bg-informational">informational</div>
-			<div class="db-bg-informational-strong">informational-strong</div>
-			<div class="db-bg-informational" data-emphasis="weak">
-				informational-weak
-			</div>
-			<div class="db-bg-informational-transparent-semi">
-				informational-transparent-semi
-			</div>
-			<div class="db-bg-informational-transparent-full">
-				informational-transparent-full
+			<div class="db-informational-bg-transparent-full">
+				informational-bg-transparent-full
 			</div>
 		</div>
 	</body>

diff --git a/packages/foundations/src/fonts.html b/packages/foundations/src/fonts.html
@@ -8,7 +8,6 @@
 			href="/build/css/db-ui-foundations-absolute.css"
 		/>
 		<link rel="stylesheet" href="/build/css/default-theme.css" />
-		<link rel="stylesheet" href="/build/css/internals.css" />
 		<style>
 			body {
 				font-family: "DB Screen Sans";
@@ -25,8 +24,8 @@
 			}
 
 			small {
-				/* TODO: define "DB Screen Sans" as a fallback */
-				font-family: "DB Screen Sans Digital";
+				font-family: "DB Screen Sans";
+				font-weight: 300;
 			}
 
 			p strong {

diff --git a/showcases/angular-showcase/src/app/components/notification/notification.component.html b/showcases/angular-showcase/src/app/components/notification/notification.component.html
@@ -26,7 +26,7 @@
 			@if (exampleProps.img) {
 				<img
 					image
-					src="./assets/images/placeholder.png"
+					src="./assets/images/placeholder.jpg"
 					alt="Placeholder"
 				/>
 			}

diff --git a/showcases/angular-showcase/src/assets/images/placeholder.jpg b/showcases/angular-showcase/src/assets/images/placeholder.jpg
diff --git a/showcases/angular-showcase/src/assets/images/placeholder.png b/showcases/angular-showcase/src/assets/images/placeholder.png
diff --git a/showcases/patternhub/public/assets/images/placeholder.jpg b/showcases/patternhub/public/assets/images/placeholder.jpg
diff --git a/showcases/patternhub/public/assets/images/placeholder.png b/showcases/patternhub/public/assets/images/placeholder.png
diff --git a/showcases/react-showcase/public/assets/images/placeholder.jpg b/showcases/react-showcase/public/assets/images/placeholder.jpg
diff --git a/showcases/react-showcase/public/assets/images/placeholder.png b/showcases/react-showcase/public/assets/images/placeholder.png
diff --git a/showcases/react-showcase/src/components/notification/index.tsx b/showcases/react-showcase/src/components/notification/index.tsx
@@ -26,7 +26,7 @@ const getNotification = ({
 				<img
 					src={`${
 						import.meta.env.BASE_URL
-					}/assets/images/placeholder.png`}
+					}/assets/images/placeholder.jpg`}
 					alt="Placeholder"
 				/>
 			) : undefined

diff --git a/showcases/shared/navigation-item.json b/showcases/shared/navigation-item.json
@@ -58,7 +58,8 @@
 			{
 				"name": "Text - Icons (Leading, Chevron)",
 				"props": {
-					"icon": "account"
+					"icon": "account",
+					"areaPopup": true
 				}
 			},
 			{

diff --git a/showcases/vue-showcase/public/assets/images/placeholder.jpg b/showcases/vue-showcase/public/assets/images/placeholder.jpg
diff --git a/showcases/vue-showcase/public/assets/images/placeholder.png b/showcases/vue-showcase/public/assets/images/placeholder.png
diff --git a/showcases/vue-showcase/src/components/notification/Notification.vue b/showcases/vue-showcase/src/components/notification/Notification.vue
@@ -32,7 +32,7 @@ const log = (exampleName: string) => {
 				</template>
 				<template v-if="exampleProps.img" v-slot:image>
 					<img
-						src="/assets/images/placeholder.png"
+						src="/assets/images/placeholder.jpg"
 						alt="Placeholder"
 					/>
 				</template>