📣 New Features 🛠️ Setup Changes ⭐ Introducing Color Scheme 👹 Breaking Changes ❌ Removed Props, Slots and Events (deprecated in v3 already) ❌ Removed Components (deprecated in v3 already) 🤡 Deprecations (will be removed in v5)
v3 to v4, we have avoided breaking changes wherever possible.
However, a few essential breaking changes and deprecations have been introduced to align with the new standards and
require your attention.light-dark() and color-schemescheme-light, scheme-dark or scheme-light-dark CSS class to any HTML element
light-dark() and color-scheme logic), typography,
spacing, and others./* src/global-style.css */
+ @import '@porsche-design-system/components-{js|angular|react|vue}';
/* Alternative with fonts from China CDN */
+ @import '@porsche-design-system/components-{js|angular|react|vue}/cn';
/* Alternative: If your bundler requires an explicit .css extension, use this path instead */
+ @import '@porsche-design-system/components-{js|angular|react|vue}/index.css';
/* Alternative with fonts from China CDN: If your bundler requires an explicit .css extension, use this path instead */
+ @import '@porsche-design-system/components-{js|angular|react|vue}/cn/index.css';
getInitialStyles(). Because
these JavaScript partials have been removed, you must now implement this logic manually within your global stylesheet./* src/global-style.css */
/* Vanilla Js, React, Vue */
+ :not(:defined) {
+ visibility: hidden;
+ }
/* Angular (Uses custom elements which are never defined like app-root, so we need to manually list the components) */
+ :is(p-accordion, p-banner, p-button, prefixed-p-button,...):not(:defined) {
+ visibility: hidden;
+ }
/* Next.js, React Router */
+ :not(:defined,[data-ssr]) {
+ visibility: hidden;
+ }
/* src/global-style.css */
+ @import '@porsche-design-system/components-{js|angular|react|vue}/legacy-radius.css';
light-dark()color-schemelight-dark().scheme-light — Forces light mode..scheme-dark — Forces dark mode..scheme-light-dark — Dynamically follows system/OS settings.light-dark() and color-scheme.<html class="scheme-dark">
<body>
<!-- All components inside will use the dark theme -->
<div class="scheme-light">
<!-- All components inside will use the light theme -->
</div>
</body>
</html>
- <p-button theme="light" name="some-name"></p-button>
+ <p-button class="scheme-light" name="some-name"></p-button>
- <p-button theme="dark" name="some-name"></p-button>
+ <p-button class="scheme-dark" name="some-name"></p-button>
- <p-button theme="auto" name="some-name"></p-button>
+ <p-button class="scheme-light-dark" name="some-name"></p-button>
// app.module.ts
@NgModule({
declarations: [AppComponent],
- imports: [BrowserModule, PorscheDesignSystemModule.load({ theme: 'dark' })],
+ imports: [BrowserModule, PorscheDesignSystemModule.load()],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
bootstrap: [AppComponent],
})
export class AppModule {}
// index.html
- <body>
+ <body class="scheme-dark">
<app-root></app-root>
</body>
// src/main.tsx
- <PorscheDesignSystemProvider theme="dark">
+ <PorscheDesignSystemProvider>
<App />
</PorscheDesignSystemProvider>
// index.html
- <body>
+ <body class="scheme-dark">
<div id="app"></div>
</body>
// pages/App.vue
<template>
- <PorscheDesignSystemProvider theme="dark">
+ <PorscheDesignSystemProvider>
<AppComponent />
</PorscheDesignSystemProvider>
</template>
// index.html
- <body>
+ <body class="scheme-dark">
<div id="app"></div>
</body>
// app/layout.tsx
- <body>
+ <body className="scheme-dark">
- <PorscheDesignSystemProvider theme="dark">
+ <PorscheDesignSystemProvider>
{children}
</PorscheDesignSystemProvider>
</body>
// root.tsx
- <body>
+ <body className="scheme-dark">
{children}
<ScrollRestoration />
<Scripts />
</body>
- <PorscheDesignSystemProvider theme="dark">
+ <PorscheDesignSystemProvider>
<Outlet />
</PorscheDesignSystemProvider>
lightningcsslight-dark() function that is currently broken. To avoid any issues, we recommend disabling the lightningcss
polyfill for now since we also include our own polyfill for the global styles.
// vite.config.ts
+ import { Features } from "lightningcss"
export default defineConfig({
+ css: {
+ transformer: "lightningcss",
+ lightningcss: {
+ exclude: Features.LightDark,
+ },
+ },
});
// next.config.ts
const nextConfig: NextConfig = {
+ experimental: {
+ useLightningcss: true,
+ lightningCssFeatures: {
+ exclude: ['light-dark'],
+ },
+ },
};
getInitialStyles(), getFontFaceStyles() and getFontFaceStylesheet() partials. These styles are now
included in the mandatory global styles, see - import { getInitialStyles, getFontFaceStyles, getFontFaceStylesheet } from '@porsche-design-system/components-{js|angular|react|vue}/partials';
getBrowserSupportFallbackScript() and getCookiesFallbackScript() which are now in separate repo
@porsche-design-system/fallbacks coming soon.- import { getBrowserSupportFallbackScript, getCookiesFallbackScript } from '@porsche-design-system/components-{js|angular|react|vue}/partials';
getDSRPonyfill() partial as it is no longer needed.- import { getDSRPonyfill } from '@porsche-design-system/components-{js|angular|react|vue}/partials';
CustomEvent instead of just the event detail.
The event detail must be accessed via event.detail. Props and other component data can be accessed directly via
event.target.<script setup lang="ts">
import { type AccordionUpdateEventDetail, PAccordion } from '@porsche-design-system/components-vue';
import { ref } from 'vue';
const isOpen = ref(false);
- const onUpdate = (event: AccordionUpdateEventDetail): void => {
+ const onUpdate = (event: CustomEvent<AccordionUpdateEventDetail>): void => {
- isOpen1.value = event.open;
+ isOpen1.value = event.detail.open; // You can also access the value from the component itself via e.target, e.g. e.target.open
};
</script>
<template>
<PAccordion :open="isOpen" @update="onUpdate">
...
</PAccordion>
</template>
p-accordion, p-banner, p-carousel, p-display, p-heading,
p-inline-notification, p-switch, p-table, p-tabs, p-text and p-text-list, use p-link-pure instead or an
anchor <a> with correct styling.// You can still use <a> inside components, but the default styling for anchors <a> has been removed.
<p-accordion heading="Some Heading">
- <a href="https://porsche.com">Some label</a>
+ <p-link-pure href="https://porsche.com" icon="none">Some label</p-link-pure>
</p-accordion>
<p-accordion heading="Some heading">
<a
class="text-current underline rounded-lg transition-colors -mx-static-xs px-static-xs outline-focus outline-offset-2 focus-visible:outline hover:backdrop-blur-frosted hover:bg-frosted-strong"
href="https://porsche.com"
>Some label</a
>
</p-accordion>
/* Adjust the `:is()` selector with the components you want to target and apply the following styles to your global stylesheet (see browser support for native CSS `&` selector: https://caniuse.com/css-nesting): */
:is(p-accordion, p-table) a {
color: currentcolor;
text-decoration: underline;
border-radius: var(--p-radius-lg);
transition: background-color var(--p-duration-sm) var(--p-ease-in-out);
margin-inline: calc(-1 * var(--p-spacing-static-xs));
padding-inline: var(--p-spacing-static-xs);
&:focus-visible {
outline: 2px solid var(--p-color-focus);
outline-offset: 2px;
}
@media (hover: hover) {
&:hover {
backdrop-filter: var(--p-blur-frosted);
background-color: var(--p-color-frosted-strong);
}
}
}
@use '@porsche-design-system/components-{js|angular|react|vue}/scss' as pds;
/* Adjust the `:is()` selector with the components you want to target and apply the following styles to your global stylesheet (see browser support for native CSS `&` selector: https://caniuse.com/css-nesting): */
:is(p-accordion, p-table) a {
@include pds.focus-visible();
color: currentcolor;
text-decoration: underline;
border-radius: pds.$radius-lg;
transition: background-color pds.$duration-sm pds.$ease-in-out;
margin-inline: calc(-1 * #{pds.$spacing-static-xs});
padding-inline: pds.$spacing-static-xs;
@media (hover: hover) {
&:hover {
backdrop-filter: pds.$blur-frosted;
background: pds.$color-frosted;
}
}
}
hyphens and overflow-wrap properties are no longer applied globally across
components. If you relied on automatic word hyphenation, you can restore the previous behavior by setting these
inheritable properties on a common ancestor like body:body {
hyphens: auto;
overflow-wrap: break-word;
}
'notification-success', 'notification-warning', 'notification-error', 'notification-info' of prop
color, use 'success', 'warning', 'error', 'info' instead.- <p-text color="notification-success">Some text</p-text>
+ <p-text color="success">Some text</p-text>
- <p-text color="notification-warning">Some text</p-text>
+ <p-text color="warning">Some text</p-text>
- <p-text color="notification-error">Some text</p-text>
+ <p-text color="error">Some text</p-text>
- <p-text color="notification-info">Some text</p-text>
+ <p-text color="info">Some text</p-text>
- <p-icon color="notification-success">Some text</p-icon>
+ <p-icon color="success">Some text</p-icon>
- <p-icon color="notification-warning">Some text</p-icon>
+ <p-icon color="warning">Some text</p-icon>
- <p-icon color="notification-error">Some text</p-icon>
+ <p-icon color="error">Some text</p-icon>
- <p-icon color="notification-info">Some text</p-icon>
+ <p-icon color="info">Some text</p-icon>
color="inherit" is used no CSS filters are necessary anymore, instead a CSS color can be applied directly.- <p-icon color="inherit" style="filter: brightness(0) saturate(100%) invert(18%) sepia(93%) saturate(3017%) hue-rotate(314deg) brightness(110%) contrast(105%);"></p-icon>
+ <p-icon color="inherit" style="color: deeppink;"></p-icon>
'state-disabled' of prop color.- <p-icon color="state-disabled"></p-icon>
+ <p-icon color="contrast-low"></p-icon>
inherit, the size is derived from a custom font-size defined on a parent element, calculated against the
global line-height (based on ex-unit) to remain visually consistent with other typographic-scale-based components.- <p-flag size="inherit" style="width: 100px; height: 100px;"></p-flag>
+ <p-flag style="--p-flag-size: 100px;"></p-flag>
// When using size="inherit" with a defined font-size, the flag size is calculated from the global line-height (ex-unit) based on that font-size."
<p-flag size="inherit" style="font-size: 100px;"></p-flag>
p-icon, p-flag, p-text and
p-heading.inherit, the size is derived from a custom font-size defined on a parent element, calculated against the
global line-height (based on ex-unit) to remain visually consistent with other typographic-scale-based components.- <p-spinner size="inherit" style="width: 100px; height: 100px;"></p-spinner>
+ <p-spinner style="--p-spinner-size: 100px;"></p-spinner>
// When using size="inherit" with a defined font-size, the spinner size is calculated from the global line-height (ex-unit) based on that font-size."
<p-spinner size="inherit" style="font-size: 100px;"></p-spinner>
color="inherit" is used a CSS color can be applied directly.- <p-model-signature color="inherit" style="filter: brightness(0) saturate(100%) invert(18%) sepia(93%) saturate(3017%) hue-rotate(314deg) brightness(110%) contrast(105%);"></p-model-signature>
+ <p-model-signature color="inherit" style="color: deeppink;"></p-model-signature>
color and introduced prop variant with values primary, secondary, success, warning, error,
info.- <p-tag color="neutral-contrast-high">Color label</p-tag>
- <p-tag color="primary">Some label</p-tag>
+ <p-tag variant="primary">Some label</p-tag>
- <p-tag color="background-default">Color label</p-tag>
- <p-tag color="background-base">Some label</p-tag>
- <p-tag color="background-surface">Some label</p-tag>
- <p-tag color="background-frosted">Some label</p-tag>
+ <p-tag variant="secondary">Some label</p-tag>
- <p-tag color="notification-neutral">Color label</p-tag>
- <p-tag color="notification-info-soft">Some label</p-tag>
+ <p-tag variant="info">Some label</p-tag>
- <p-tag color="notification-warning">Color label</p-tag>
- <p-tag color="notification-warning-soft">Some label</p-tag>
+ <p-tag variant="warning">Some label</p-tag>
- <p-tag color="notification-error">Color label</p-tag>
- <p-tag color="notification-error-soft">Some label</p-tag>
+ <p-tag variant="error">Some label</p-tag>
- <p-tag color="notification-success">Color label</p-tag>
- <p-tag color="notification-success-soft">Some label</p-tag>
+ <p-tag variant="success">Some label</p-tag>
color.- <p-tag-dismissible color="background-default">Color label</p-tag-dismissible>
- <p-tag-dismissible color="background-base">Color label</p-tag-dismissible>
- <p-tag-dismissible color="background-surface">Color label</p-tag-dismissible>
+ <p-tag-dismissible>Color label</p-tag-dismissible>
ghost of prop variant, use secondary instead.- <p-button variant="ghost">Some label</p-button>
+ <p-button variant="secondary">Some label</p-button>
- <p-link variant="ghost" href="https://porsche.com">Some label</p-link>
+ <p-link variant="secondary" href="https://porsche.com">Some label</p-link>
p-button-group, use simple styles instead.// Example using Tailwind CSS:
- <p-button-group>
+ <div role="group" class="flex flex-wrap gap-fluid-sm max-xs:flex-col">
<p-button variant="primary">
Some label
</p-button>
<p-button variant="secondary">
Some label
</p-button>
- </p-button-group>
+ </div>
.stretch-to-full-modal-width, use read only CSS variables --ref-p-modal-pt, --ref-p-modal-px and
--ref-p-modal-pb instead.// Example using Tailwind CSS:
<p-modal>
- <img src="assets/porsche-992-carrera-s.jpg" class="stretch-to-full-modal-width" />
+ <img src="assets/porsche-992-carrera-s.jpg" class="-mt-(--ref-p-modal-pt) -mx-(--ref-p-modal-px) -mb-(--ref-p-modal-pb)" />
</p-modal>
// Example using CSS:
<p-modal>
- <img src="assets/porsche-992-carrera-s.jpg" class="stretch-to-full-modal-width" />
+ <img src="assets/porsche-992-carrera-s.jpg" style="margin-top: calc(-1 * var(--ref-p-modal-pt)); margin-inline: calc(-1 * var(--ref-p-modal-px)); margin-bottom: calc(-1 * var(--ref-p-modal-pb));" />
</p-modal>
--p-flyout-max-width, use --p-flyout-width with a static value or min(), max() or
clamp() instead.// Example using Tailwind CSS:
- <p-flyout class="[--p-flyout-width:800px] [--p-flyout-max-width:90vw]"></p-flyout>
+ <p-flyout class="[--p-flyout-width:min(800px,90vw)]"></p-flyout>
// Example CSS:
- <p-flyout style="--p-flyout-width: 800px; --p-flyout-max-width: 90vw"></p-flyout>
+ <p-flyout style="--p-flyout-width: min(800px, 90vw)"></p-flyout>
max-width limitation for content.// Example using Tailwind CSS:
<p-inline-notification>
- <p-heading size="small" tag="h2" slot="heading">Some heading</p-heading>
- <span>Some description</span>
+ <p-heading size="small" tag="h2" slot="heading" class="max-w-[50rem]">Some heading</p-heading>
+ <span class="max-w-[50rem]">Some description</span>
</p-inline-notification>
// Example using CSS:
<p-inline-notification>
- <p-heading size="small" tag="h2" slot="heading">Some heading</p-heading>
- <span>Some description</span>
+ <p-heading size="small" tag="h2" slot="heading" style="max-width: 50rem;">Some heading</p-heading>
+ <span style="max-width: 50rem;">Some description</span>
</p-inline-notification>
max-width limitation for content.// Example using Tailwind CSS:
<p-banner>
- <p-heading size="small" tag="h2" slot="heading">Some heading</p-heading>
- <span slot="description">Some description</span>
+ <p-heading size="small" tag="h2" slot="heading" class="max-w-[50rem]">Some heading</p-heading>
+ <span slot="description" class="max-w-[50rem]">Some description</span>
</p-banner>
// Example using CSS:
<p-banner>
- <p-heading size="small" tag="h2" slot="heading">Some heading</p-heading>
- <span slot="description">Some description</span>
+ <p-heading size="small" tag="h2" slot="heading" style="max-width: 50rem;">Some heading</p-heading>
+ <span slot="description" style="max-width: 50rem;">Some description</span>
</p-banner>
--p-carousel-prev-next-filter.gradient-color, use gradient="true" instead.- <p-carousel gradient-color="background-surface">
+ <p-carousel gradient="true"></p-carousel>
trim-space from true to false.- <p-carousel></p-carousel>
+ <p-carousel trim-space="true"></p-carousel>
pagination from true to false.- <p-carousel></p-carousel>
+ <p-carousel pagination="true"></p-carousel>
rewind from true to false.- <p-carousel></p-carousel>
+ <p-carousel rewind="true"></p-carousel>
gradient from true to false.- <p-link-tile></p-link-tile>
+ <p-link-tile gradient="true"></p-link-tile>
- <p-button-tile></p-button-tile>
+ <p-button-tile gradient="true"></p-button-tile>
background, use CSS class .scheme-light | .scheme-dark | .scheme-light-dark on :host element instead.- <p-link-tile></p-link-tile>
+ <p-link-tile class="scheme-dark"></p-link-tile>
- <p-link-tile background="light"></p-link-tile>
+ <p-link-tile class="scheme-light"></p-link-tile>
- <p-link-tile background="dark"></p-link-tile>
+ <p-link-tile class="scheme-dark"></p-link-tile>
- <p-link-tile background="auto"></p-link-tile>
+ <p-link-tile class="scheme-light-dark"></p-link-tile>
- <p-button-tile></p-button-tile>
+ <p-button-tile class="scheme-dark"></p-button-tile>
- <p-button-tile background="light"></p-button-tile>
+ <p-button-tile class="scheme-light"></p-button-tile>
- <p-button-tile background="dark"></p-button-tile>
+ <p-button-tile class="scheme-dark"></p-button-tile>
- <p-button-tile background="auto"></p-button-tile>
+ <p-button-tile class="scheme-light-dark"></p-button-tile>
p-link-tile-model-signature, use p-link-tile instead.3:4 | 9:16 of prop aspect-ratio, use 3/4 | 9/16 instead.- <p-link-tile-product aspect-ratio="3:4"></p-link-tile-product>
+ <p-link-tile-product aspect-ratio="3/4"></p-link-tile-product>
- <p-link-tile-product aspect-ratio="9:16"></p-link-tile-product>
+ <p-link-tile-product aspect-ratio="9/16"></p-link-tile-product>
tag. Use heading-tag instead.- <p-accordion tag="h1"></p-accordion>
+ <p-accordion heading-tag="h1"></p-accordion>
accordionChange, use new event update.// Accordingly for other JS frameworks, e.g. React example:
- <PAccordion onAccordionChange={(e: CustomEvent<AccordionChangeEventDetail>) => {}} />
+ <PAccordion onUpdate={(e: CustomEvent<AccordionUpdateEventDetail>) => {}} />
slot="title", use new slot or prop heading.<p-banner>
- <span slot="title">Some heading</span>
+ <span slot="heading">Some heading</span>
<span slot="description">Some notification description.</span>
</p-banner>
persistent, use dismissButton instead.- <p-banner persistent="true"></p-banner>
+ <p-banner dismiss-button="false"></p-banner>
width, instead the component is aligned with the
- <p-banner width="fluid"></p-banner>
+ <p-banner></p-banner>
neutral of state prop, use new value info.- <p-banner state="neutral"></p-banner>
+ <p-banner state="info"></p-banner>
tertiary, use variant="secondary" instead.- <p-button variant="tertiary">Some label</p-button>
+ <p-button variant="secondary">Some label</p-button>
weight, only regular font weight will be applied.- <p-button-pure weight="thin">Some label</p-button-pure>
- <p-button-pure weight="regular">Some label</p-button-pure>
- <p-button-pure weight="semibold">Some label</p-button-pure>
- <p-button-pure weight="bold">Some label</p-button-pure>
+ <p-button-pure>Some label</p-button-pure>
left | right of prop alignLabel, use start | end instead.- <p-button-pure align-label="left">Some label</p-button-pure>
+ <p-button-pure align-label="start">Some label</p-button-pure>
- <p-button-pure align-label="right">Some label</p-button-pure>
+ <p-button-pure align-label="end">Some label</p-button-pure>
wrap-content. The component is always aligned with the
width.- <p-carousel wrap-content="true"></p-carousel>
+ <p-carousel></p-carousel>
disablePagination, use new prop pagination.- <p-carousel disable-pagination="true"></p-carousel>
+ <p-carousel pagination="false"></p-carousel>
left of prop alignHeader, use start instead.- <p-carousel align-header="left"></p-carousel>
+ <p-carousel align-header="start"></p-carousel>
carouselChange, use new event update.// Accordingly for other JS frameworks, e.g. React example:
- <PCarousel onCarouselChange={(e: CustomEvent<CarouselUpdateEventDetail>) => {}} />
+ <PCarousel onUpdate={(e: CustomEvent<CarouselUpdateEventDetail>) => {}} />
update, use new event change.// Accordingly for other JS frameworks, e.g. React example:
- <PCheckbox onUpdate={(e: CustomEvent<CheckboxUpdateEventDetail>) => {}}
+ <PCheckbox onChange={(e: CustomEvent<CheckboxChangeEventDetail>) => {}} />
left | right of prop align, use start | end instead.- <p-display align="left"></p-display>
+ <p-display align="start"></p-display>
- <p-display align="right"></p-display>
+ <p-display align="end"></p-display>
orientation, use direction instead.- <p-divider orientation="horizontal"></p-divider>
+ <p-divider direction="horizontal"></p-divider>
neutral-contrast-{low|medium|high} of prop color, use contrast-{low|medium|high}
instead.- <p-divider color="neutral-contrast-low"></p-divider>
+ <p-divider color="contrast-low"></p-divider>
- <p-divider color="neutral-contrast-medium"></p-divider>
+ <p-divider color="contrast-medium"></p-divider>
- <p-divider color="neutral-contrast-high"></p-divider>
+ <p-divider color="contrast-high"></p-divider>
left | right of prop position, use start | end instead.- <p-flyout position="left"></p-flyout>
+ <p-flyout position="start"></p-flyout>
- <p-flyout position="right"></p-flyout>
+ <p-flyout position="end"></p-flyout>
left | right of prop align, use start | end instead.- <p-heading align="left">Some Heading</p-heading>
+ <p-heading align="start">Some Heading</p-heading>
- <p-heading align="right">Some Heading</p-heading>
+ <p-heading align="end">Some Heading</p-heading>
inherit, the size is derived from a custom font-size defined on a parent element, calculated against the
global line-height (based on ex-unit) to remain visually consistent with other typographic-scale-based components.- <p-icon size="inherit" style="width: 100px; height: 100px;"></p-icon>
+ <p-icon style="--p-icon-size: 100px;"></p-icon>
// When using size="inherit" with a defined font-size, the icon size is calculated from the global line-height (ex-unit) based on that font-size."
<p-icon size="inherit" style="font-size: 100px;"></p-icon>
lazy- <p-icon lazy="true"></p-icon>
+ <p-icon></p-icon>
brand | default | neutral-contrast-low | neutral-contrast-medium | neutral-contrast-high | notification-neutral of
prop color, use primary | contrast-low | contrast-medium | contrast-high | notification-info instead.- <p-icon color="brand"></p-icon>
+ <p-icon color="primary"></p-icon>
- <p-icon color="default"></p-icon>
+ <p-icon color="primary"></p-icon>
- <p-icon color="neutral-contrast-low"></p-icon>
+ <p-icon color="contrast-low"></p-icon>
- <p-icon color="neutral-contrast-medium"></p-icon>
+ <p-icon color="contrast-medium"></p-icon>
- <p-icon color="neutral-contrast-high"></p-icon>
+ <p-icon color="contrast-high"></p-icon>
- <p-icon color="notification-neutral"></p-icon>
+ <p-icon color="info"></p-icon>
- <p-icon color="notification-success"></p-icon>
+ <p-icon color="success"></p-icon>
- <p-icon color="notification-warning"></p-icon>
+ <p-icon color="warning"></p-icon>
- <p-icon color="notification-error"></p-icon>
+ <p-icon color="error"></p-icon>
persistent, use dismissButton instead.- <p-inline-notification persistent="true"></p-inline-notification>
+ <p-inline-notification dismiss-button="false"></p-inline-notification>
neutral of prop state, use info instead.- <p-inline-notification state="neutral"></p-inline-notification>
+ <p-inline-notification state="info"></p-inline-notification>
tertiary, use variant="secondary" instead.- <p-link variant="tertiary">Some label</p-link>
+ <p-link variant="secondary">Some label</p-link>
weight, can't be configured anymore.- <p-link-pure href="#" weight="thin">Some label</p-link-pure>
- <p-link-pure href="#" weight="regular">Some label</p-link-pure>
- <p-link-pure href="#" weight="semibold">Some label</p-link-pure>
- <p-link-pure href="#" weight="bold">Some label</p-link-pure>
+ <p-link-pure href="#">Some label</p-link-pure>
left | right of prop alignLabel, use start | end instead.- <p-link-pure href="#" align-label="left">Some label</p-link-pure>
+ <p-link-pure href="#" align-label="start">Some label</p-link-pure>
- <p-link-pure href="#" align-label="right">Some label</p-link-pure>
+ <p-link-pure href="#" align-label="end">Some label</p-link-pure>
1:1 | 4:3 | 3:4 | 16:9 | 9:16 of prop aspect-ratio, use 1/1 | 4/3 | 3/4 | 16/9 | 9/16
instead.- <p-link-tile aspect-ratio="1:1 | 4:3 | 3:4 | 16:9 | 9:16"></p-link-tile>
+ <p-link-tile aspect-ratio="1/1 | 4/3 | 3/4 | 16/9 | 9/16"></p-link-tile>
- <p-button-tile aspect-ratio="1:1 | 4:3 | 3:4 | 16:9 | 9:16"></p-button-tile>
+ <p-button-tile aspect-ratio="1/1 | 4/3 | 3/4 | 16/9 | 9/16"></p-button-tile>
- <p-link-tile-model-signature aspect-ratio="1:1 | 4:3 | 3:4 | 16:9 | 9:16"></p-link-tile-model-signature>
+ <p-link-tile-model-signature aspect-ratio="1/1 | 4/3 | 3/4 | 16/9 | 9/16"></p-link-tile-model-signature>
default of prop size, use medium instead.- <p-link-tile size="default"></p-link-tile>
+ <p-link-tile size="medium"></p-link-tile>
- <p-button-tile size="default"></p-button-tile>
+ <p-button-tile size="medium"></p-button-tile>
semibold of prop weight, use semi-bold instead.- <p-link-tile weight="semibold"></p-link-tile>
+ <p-link-tile weight="semi-bold"></p-link-tile>
- <p-button-tile weight="semibold"></p-button-tile>
+ <p-button-tile weight="semi-bold"></p-button-tile>
disableCloseButton, use dismissButton instead.- <p-modal disable-close-button="true"></p-modal>
+ <p-modal dismiss-button="false"></p-modal>
heading, use slot="header" instead.- <p-modal heading="Some Heading"></p-modal>
+ <p-modal>
+ <p-heading slot="header" size="large" tag="h2">
+ Some Heading
+ </p-heading>
+ </p-modal>
heading, use slot="header" instead.<p-modal>
- <p-heading slot="heading" size="large" tag="h2">Some Heading</p-heading>
+ <p-heading slot="header" size="large" tag="h2">Some Heading</p-heading>
</p-modal>
close, use dismiss instead.// Accordingly for other JS frameworks, e.g. React example:
- <PModal onClose={(e: CustomEvent<void>) => {}} />
+ <PModal onDismiss={(e: CustomEvent<void>) => {}} />
update, use change instead.// Accordingly for other JS frameworks, e.g. React example:
- <PMultiSelect onUpdate={(e: CustomEvent<MultiSelectUpdateEventDetail>) => {}} />
+ <PMultiSelect onChange={(e: CustomEvent<MultiSelectChangeEventDetail>) => {}} />
allyLabelNext, allyLabelPage, allyLabelPrev and allyLabel, use intl instead.- <p-pagination ally-label="Paginierung" ally-label-prev="Vorherige Seite" ally-label-next="Nächste Seite" ally-label-page="Seite"></p-pagination>
+ <p-pagination intl="{root: 'Paginierung', prev: 'Vorherige Seite', next: 'Nächste Seite', page: 'Seite'}"></p-pagination>
maxNumberOfPageLinks, has no effect anyway. Instead there is responsive behavior out of the
box with full SSR support- <p-pagination max-number-of-page-links="5"></p-pagination>
+ <p-pagination></p-pagination>
pageChange, use update instead.// Accordingly for other JS frameworks, e.g. React example:
- <PPagination onPageChange={(e: CustomEvent<PaginationUpdateEventDetail>) => {}} />
+ <PPagination onUpdate={(e: CustomEvent<PaginationUpdateEventDetail>) => {}} />
update, use change instead.// Accordingly for other JS frameworks, e.g. React example:
- <PPinCode onUpdate={(e: CustomEvent<PinCodeUpdateEventDetail>) => {}} />
+ <PPinCode onChange={(e: CustomEvent<PinCodeChangeEventDetail>) => {}} />
gradientColorScheme, has no effect anyway.- <p-scroller gradient-color-scheme="surface"></p-scroller>
+ <p-scroller></p-scroller>
gradientColor, has no effect anyway.- <p-scroller gradient-color="surface"></p-scroller>
+ <p-scroller></p-scroller>
backgroundColor, has no effect anyway.- <p-segmented-control background-color="background-surface">
+ <p-segmented-control>
<p-segmented-control-item value="xs">XS</p-segmented-control-item>
<p-segmented-control-item value="s">S</p-segmented-control-item>
</p-segmented-control>
segmentedControlChange and update use change instead.// Accordingly for other JS frameworks, e.g. React example:
- <PSegmentedControl onSegmentedControlChange={(e: CustomEvent<SegmentedControlUpdateEventDetail>) => {}} />
- <PSegmentedControl onUpdate={(e: CustomEvent<SegmentedControlUpdateEventDetail>) => {}} />
+ <PSegmentedControl onChange={(e: CustomEvent<SegmentedControlChangeEventDetail>) => {}} />
update, use change instead.// Accordingly for other JS frameworks, e.g. React example:
- <PSelect onUpdate={(e: CustomEvent<SelectUpdateEventDetail>) => {}} />
+ <PSelect onChange={(e: CustomEvent<SelectChangeEventDetail>) => {}} />
stepChange, use update instead.// Accordingly for other JS frameworks, e.g. React example:
- <PStepperHorizontal onStepChange={(e: CustomEvent<StepperHorizontalUpdateEventDetail>) => {}} />
+ <PStepperHorizontal onUpdate={(e: CustomEvent<StepperHorizontalUpdateEventDetail>) => {}} />
left | right of prop alignLabel, use start | end instead.- <p-switch align-label="left"></p-switch>
+ <p-switch align-label="start"></p-switch>
- <p-switch align-label="right"></p-switch>
+ <p-switch align-label="end"></p-switch>
switchChange, use update instead.// Accordingly for other JS frameworks, e.g. React example:
- <PSwitch onSwitchChange={(e: CustomEvent<SwitchUpdateEventDetail>) => {}} />
+ <PSwitch onUpdate={(e: CustomEvent<SwitchUpdateEventDetail>) => {}} />
sortingChange, use update instead.// Accordingly for other JS frameworks, e.g. React example:
- <PTable onSortingChange={(e: CustomEvent<TableUpdateEventDetail>) => {}} />
+ <PTable onUpdate={(e: CustomEvent<TableUpdateEventDetail>) => {}} />
gradientColorScheme, has no effect anyway.- <p-tabs gradient-color-scheme="surface"></p-tabs>
+ <p-tabs></p-tabs>
gradientColor, has no effect anyway.- <p-tabs gradient-color="surface"></p-tabs>
+ <p-tabs></p-tabs>
semibold of prop weight, use semi-bold instead.- <p-tabs weight="semibold"></p-tabs>
+ <p-tabs weight="semi-bold"></p-tabs>
tabChange, use update instead.// Accordingly for other JS frameworks, e.g. React example:
- <PTabs onTabChange={(e: CustomEvent<TabsUpdateEventDetail>) => {}} />
+ <PTabs onUpdate={(e: CustomEvent<TabsUpdateEventDetail>) => {}} />
gradientColorScheme, has no effect anyway.- <p-tabs-bar gradient-color-scheme="surface"></p-tabs-bar>
+ <p-tabs-bar></p-tabs-bar>
gradientColor, has no effect anyway.- <p-tabs-bar gradient-color="surface"></p-tabs-bar>
+ <p-tabs-bar></p-tabs-bar>
semibold of prop weight, use semi-bold instead.- <p-tabs-bar weight="semibold"></p-tabs-bar>
+ <p-tabs-bar weight="semi-bold"></p-tabs-bar>
tabChange, use update instead.// Accordingly for other JS frameworks, e.g. React example:
- <PTabsBar onTabChange={(e: CustomEvent<TabsBarUpdateEventDetail>) => {}} />
+ <PTabsBar onUpdate={(e: CustomEvent<TabsBarUpdateEventDetail>) => {}} />
left | right of prop align, use start | end instead.- <p-text align="left"></p-text>
+ <p-text align="start"></p-text>
- <p-text align="right"></p-text>
+ <p-text align="end"></p-text>
brand | default | neutral-contrast-low | neutral-contrast-medium | neutral-contrast-high | notification-neutral of
prop color, use primary | contrast-low | contrast-medium | contrast-high | notification-info instead.- <p-text color="brand">Some text</p-text>
+ <p-text>Some text</p-text>
- <p-text color="default">Some text</p-text>
+ <p-text>Some text</p-text>
- <p-text color="neutral-contrast-low">Some text</p-text>
+ <p-text color="contrast-low">Some text</p-text>
- <p-text color="neutral-contrast-medium">Some text</p-text>
+ <p-text color="contrast-medium">Some text</p-text>
- <p-text color="neutral-contrast-high">Some text</p-text>
+ <p-text color="contrast-high">Some text</p-text>
- <p-text color="notification-neutral">Some text</p-text>
- <p-text color="notification-info">Some text</p-text>
+ <p-text color="info">Some text</p-text>
thin | semibold of prop weight, use semi-bold instead. thin is mapped to regular
by default.- <p-text weight="thin">Some text</p-text>
+ <p-text>Some text</p-text>
- <p-text weight="semibold">Some text</p-text>
+ <p-text weight="semi-bold">Some text</p-text>
listType and orderType, use type instead.- <p-text-list list-type="unordered"></p-text-list>
+ <p-text-list type="unordered"></p-text-list>
- <p-text-list list-type="ordered" order-type="numbered"></p-text-list>
+ <p-text-list type="numbered"></p-text-list>
- <p-text-list list-type="ordered" order-type="alphabetically"></p-text-list>
+ <p-text-list type="alphabetically"></p-text-list>
neutral of prop state, use info instead.- …addMessage({ text: `Some message`, state: 'neutral' })
+ …addMessage({ text: `Some message`, state: 'info' })
p-checkbox-wrapper, use p-checkbox instead.- <p-checkbox-wrapper label="Some label">
- <input type="checkbox" name="some-name" />
- </p-checkbox-wrapper>
+ <p-checkbox label="Some label" name="some-name"></p-checkbox>
p-radio-button-wrapper, use p-radio-group instead.- <p-radio-button-wrapper label="Some label">
- <input type="radio" name="some-name" />
- </p-radio-button-wrapper>
- <p-radio-button-wrapper label="Some label" class="mt-fluid-sm">
- <input type="radio" name="some-name" />
- </p-radio-button-wrapper>
+ <p-radio-group name="some-name" label="Some Label">
+ <p-radio-group-option value="a" label="Option A"></p-radio-group-option>
+ <p-radio-group-option value="b" label="Option B"></p-radio-group-option>
+ </p-radio-group>
p-content-wrapper, use - <p-content-wrapper>
<div class="example-content">
Some content
</div>
- </p-content-wrapper>
// Example using Tailwind CSS:
+ <div class="grid-template">
+ <div class="col-extended">
<div class="example-content">
Some content
</div>
+ </div>
+ </div>
p-fieldset-wrapper, use p-fieldset instead.- <p-fieldset-wrapper label="Some legend label">
- <!-- form elements -->
- </p-fieldset-wrapper>
+ <p-fieldset label="Some legend label">
+ <!-- form elements -->
+ </p-fieldset>
p-flex, use CSS Flex instead, Tailwind CSS is recommended.// Example using Tailwind CSS:
- <p-flex>
- <p-flex-item>1</p-flex-item>
- <p-flex-item>2</p-flex-item>
- <p-flex-item>3</p-flex-item>
- </p-flex>
+ <div class="flex">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+ </div>
// Example using CSS:
- <p-flex>
- <p-flex-item>1</p-flex-item>
- <p-flex-item>2</p-flex-item>
- <p-flex-item>3</p-flex-item>
- </p-flex>
+ <div style="display: flex">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+ </div>
p-grid, use CSS Grid instead, Tailwind CSS is recommended.// Example using Tailwind CSS:
- <p-grid>
- <p-grid-item size="4">1</p-grid-item>
- <p-grid-item size="4">2</p-grid-item>
- <p-grid-item size="4">3</p-grid-item>
- </p-grid>
+ <div class="grid grid-cols-3">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+ </div>
// Example using CSS:
- <p-grid>
- <p-grid-item size="4">1</p-grid-item>
- <p-grid-item size="4">2</p-grid-item>
- <p-grid-item size="4">3</p-grid-item>
- </p-grid>
+ <div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+ </div>
p-headline, use p-heading instead.- <p-headline>Some Headline</p-headline>
+ <p-heading>Some Headline</p-heading>
p-link-social, use p-link instead.- <p-link-social href="https://example.com" icon="logo-facebook">
- Facebook
- </p-link-social>
+ <p-link href="https://example.com" icon="logo-facebook">
+ Facebook
+ </p-link>
p-marque, use p-wordmark (recommended) or p-crest instead.- <p-marque></p-marque>
+ <p-wordmark></p-wordmark> // preferred over crest
// or
+ <p-crest></p-crest>
p-select-wrapper, use p-select, p-select-option and p-optgroup instead.- <p-select-wrapper label="Some label">
- <select name="some-name">
- <option value="a">Option A</option>
- <option value="b">Option B</option>
- </select>
- </p-select-wrapper>
+ <p-select label="Some label" name="some-name">
+ <p-select-option value="a">Option A</p-select-option>
+ <p-select-option value="b">Option B</p-select-option>
+ </p-select>
p-text-field-wrapper, use p-input-date, p-input-email, p-input-month,
p-input-number, p-input-password, p-input-search, p-input-tel, p-input-text, p-input-time, p-input-url
or p-input-week depending on type.- <p-text-field-wrapper label="Some label">
- <input type="date" name="some-name" />
- </p-text-field-wrapper>
+ <p-input-date label="Some label" name="some-name"></p-input-date>
- <p-text-field-wrapper label="Some label">
- <input type="email" name="some-name" />
- </p-text-field-wrapper>
+ <p-input-email label="Some label" name="some-name"></p-input-email>
- <p-text-field-wrapper label="Some label">
- <input type="month" name="some-name" />
- </p-text-field-wrapper>
+ <p-input-month label="Some label" name="some-name"></p-input-month>
- <p-text-field-wrapper label="Some label">
- <input type="number" name="some-name" />
- </p-text-field-wrapper>
+ <p-input-number label="Some label" name="some-name"></p-input-number>
- <p-text-field-wrapper label="Some label">
- <input type="password" name="some-name" />
- </p-text-field-wrapper>
+ <p-input-password label="Some label" name="some-name"></p-input-password>
- <p-text-field-wrapper label="Some label">
- <input type="search" name="some-name" />
- </p-text-field-wrapper>
+ <p-input-search label="Some label" name="some-name"></p-input-search>
- <p-text-field-wrapper label="Some label">
- <input type="tel" name="some-name" />
- </p-text-field-wrapper>
+ <p-input-tel label="Some label" name="some-name"></p-input-tel>
- <p-text-field-wrapper label="Some label">
- <input type="text" name="some-name" />
- </p-text-field-wrapper>
+ <p-input-text label="Some label" name="some-name"></p-input-text>
- <p-text-field-wrapper label="Some label">
- <input type="time" name="some-name" />
- </p-text-field-wrapper>
+ <p-input-time label="Some label" name="some-name"></p-input-time>
- <p-text-field-wrapper label="Some label">
- <input type="url" name="some-name" />
- </p-text-field-wrapper>
+ <p-input-url label="Some label" name="some-name"></p-input-url>
- <p-text-field-wrapper label="Some label">
- <input type="week" name="some-name" />
- </p-text-field-wrapper>
+ <p-input-week label="Some label" name="some-name"></p-input-week>
p-textarea-wrapper, use p-textarea instead.- <p-textarea-wrapper label="Some label">
- <textarea name="some-name"></textarea>
- </p-textarea-wrapper>
+ <p-textarea label="Some label" name="some-name"></p-textarea>
heading, heading-tag and size in favor of slot="summary" for more flexibility.- <p-acccordion heading="Some summary" heading-tag="h3" size="small">
<p-text>Some details</p-text>
</p-accordion>
+ <p-accordion>
+ <p-heading slot="summary" tag="h3" size="small">Some summary</p-heading>
<p-text>Some details</p-text>
</p-accordion>
heading in favor of slot="summary", enabling semantic slots and more flexibility<p-acccordion>
- <span slot="heading">Some summary</span>
<p-text>Some details</p-text>
</p-accordion>
<p-accordion>
+ <p-heading slot="summary" tag="h3" size="small">Some summary</p-heading>
<p-text>Some details</p-text>
</p-accordion>
--p-accordion-position-sticky-top, use --p-accordion-summary-top insteadalignScrollIndicator, has no effect anyway.- <p-scroller align-scroll-indicator="top"></p-scroller>
+ <p-scroller></p-scroller>
scrollToPosition, use native scrollIntoView() on the slotted element itself, e.g.
el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center', container: 'nearest' }).weight, has no effect anymore.- <p-tabs-bar weight="semi-bold"></p-tabs-bar>
+ <p-tabs-bar></p-tabs-bar>
weight, has no effect anymore.- <p-tabs weight="semi-bold"></p-tabs>
+ <p-tabs></p-tabs>
'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' of prop size, use
'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' instead.- <p-text size="xx-small">…</p-text>
+ <p-text size="2xs">…</p-text>
- <p-text size="x-small">…</p-text>
+ <p-text size="xs">…</p-text>
- <p-text size="small">…</p-text>
+ <p-text size="sm">…</p-text>
- <p-text size="medium">…</p-text>
+ <p-text size="md">…</p-text>
- <p-text size="large">…</p-text>
+ <p-text size="lg">…</p-text>
- <p-text size="x-large">…</p-text>
+ <p-text size="xl">…</p-text>
'regular' | 'semi-bold' of prop weight, use 'normal' | 'semibold' instead.- <p-text weight="regular">…</p-text>
+ <p-text weight="normal">…</p-text>
- <p-text weight="semi-bold">…</p-text>
+ <p-text weight="semibold">…</p-text>
'small' | 'medium' | 'large' | 'x-large' | 'xx-large' of prop size, use
'sm' | 'md' | 'lg' | 'xl' | '2xl' instead.- <p-heading size="small">…</p-heading>
+ <p-heading size="sm">…</p-heading>
- <p-heading size="medium">…</p-heading>
+ <p-heading size="md">…</p-heading>
- <p-heading size="large">…</p-heading>
+ <p-heading size="lg">…</p-heading>
- <p-heading size="x-large">…</p-heading>
+ <p-heading size="xl">…</p-heading>
- <p-heading size="xx-large">…</p-heading>
+ <p-heading size="2xl">…</p-heading>
'regular' | 'semi-bold' of prop weight, use 'normal' | 'semibold' instead.- <p-heading weight="regular">…</p-heading>
+ <p-heading weight="normal">…</p-heading>
- <p-heading weight="semi-bold">…</p-heading>
+ <p-heading weight="semibold">…</p-heading>
'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' of prop size, use
'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' instead.- <p-icon size="xx-small">…</p-icon>
+ <p-icon size="2xs">…</p-icon>
- <p-icon size="x-small">…</p-icon>
+ <p-icon size="xs">…</p-icon>
- <p-icon size="small">…</p-icon>
+ <p-icon size="sm">…</p-icon>
- <p-icon size="medium">…</p-icon>
+ <p-icon size="md">…</p-icon>
- <p-icon size="large">…</p-icon>
+ <p-icon size="lg">…</p-icon>
- <p-icon size="x-large">…</p-icon>
+ <p-icon size="xl">…</p-icon>
- <p-icon size="xx-large">…</p-icon>
+ <p-icon size="2xl">…</p-icon>
'small' | 'medium' | 'large' of prop size, use 'sm' | 'md' | 'lg' instead.- <p-spinner size="small">…</p-spinner>
+ <p-spinner size="sm">…</p-spinner>
- <p-spinner size="medium">…</p-spinner>
+ <p-spinner size="md">…</p-spinner>
- <p-spinner size="large">…</p-spinner>
+ <p-spinner size="lg">…</p-spinner>
'small' | 'medium' | 'large' of prop size, use 'sm' | 'md' | 'lg' instead.- <p-flag size="small">…</p-flag>
+ <p-flag size="sm">…</p-flag>
- <p-flag size="medium">…</p-flag>
+ <p-flag size="md">…</p-flag>
- <p-flag size="large">…</p-flag>
+ <p-flag size="lg">…</p-flag>
'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' of prop size, use
'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' instead.- <p-button-pure size="xx-small">…</p-button-pure>
+ <p-button-pure size="2xs">…</p-button-pure>
- <p-button-pure size="x-small">…</p-button-pure>
+ <p-button-pure size="xs">…</p-button-pure>
- <p-button-pure size="small">…</p-button-pure>
+ <p-button-pure size="sm">…</p-button-pure>
- <p-button-pure size="medium">…</p-button-pure>
+ <p-button-pure size="md">…</p-button-pure>
- <p-button-pure size="large">…</p-button-pure>
+ <p-button-pure size="lg">…</p-button-pure>
- <p-button-pure size="x-large">…</p-button-pure>
+ <p-button-pure size="xl">…</p-button-pure>
'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' of prop size, use
'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' instead.- <p-link-pure size="xx-small">…</p-link-pure>
+ <p-link-pure size="2xs">…</p-link-pure>
- <p-link-pure size="x-small">…</p-link-pure>
+ <p-link-pure size="xs">…</p-link-pure>
- <p-link-pure size="small">…</p-link-pure>
+ <p-link-pure size="sm">…</p-link-pure>
- <p-link-pure size="medium">…</p-link-pure>
+ <p-link-pure size="md">…</p-link-pure>
- <p-link-pure size="large">…</p-link-pure>
+ <p-link-pure size="lg">…</p-link-pure>
- <p-link-pure size="x-large">…</p-link-pure>
+ <p-link-pure size="xl">…</p-link-pure>
p-display, use p-heading with the new typographic scale sizes instead.- <p-display size="large">…</p-display>
+ <p-heading size="5xl">…</p-heading>
- <p-display size="medium">…</p-display>
+ <p-heading size="4xl">…</p-heading>
- <p-display size="small">…</p-display>
+ <p-heading size="3xl">…</p-heading>