# Changelog ## Porsche Design System All notable changes to this project will be documented in this file and published as following npm packages: - `@porsche-design-system/components-js` - `@porsche-design-system/components-angular` - `@porsche-design-system/components-react` - `@porsche-design-system/components-vue` The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ### [Unreleased] ### [3.27.3] - 2025-03-21 ### [3.27.2] - 2025-03-20 ### [3.27.2-rc.0] - 2025-03-18 #### Changed - `Table`: add border-bottom styles to `Table Head` to support both, empty and missing `Table Body` ([#3788](https://github.com/porsche-design-system/porsche-design-system/pull/3788)) #### Fixed - `Styles`: change `Gradient` color values from `rgba` to `hsla` to fix Chrome rendering bug ([#3793](https://github.com/porsche-design-system/porsche-design-system/pull/3793)) ### [3.27.1] - 2025-03-05 ### [3.27.1-rc.0] - 2025-03-05 #### Fixed - `Carousel`: `auto` value of `slides-per-page` prop is breakpoint customizable ([#3783](https://github.com/porsche-design-system/porsche-design-system/pull/3783)) - `Select`, `Multi Select`, `Select Wrapper`: remove positioning with native anchor positioning due to a Chrome bug ([#3780](https://github.com/porsche-design-system/porsche-design-system/pull/3780)) ### [3.27.0] - 2025-02-28 ### [3.27.0-rc.6] - 2025-02-28 #### Added - `Table`: `compact` prop to enable a smaller, space-saving version for compact layouts ([#3758](https://github.com/porsche-design-system/porsche-design-system/pull/3758)) - `Table`: `layout` prop to render table with `table-layout: fixed` css for manual control of column widths ([#3758](https://github.com/porsche-design-system/porsche-design-system/pull/3758)) - `Carousel`: `align-controls` prop to align the controls slot to the left or center (overwrites auto-alignment) ([#3766](https://github.com/porsche-design-system/porsche-design-system/pull/3766)) #### Changed - `Select`, `Multi Select`, `Select Wrapper`: - gets rendered on `#top-layer` which enables it to be shown correctly even when used e.g. within a scroll container or overflow context ([#3754](https://github.com/porsche-design-system/porsche-design-system/pull/3754)) - gets positioned by [CSS Anchor Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning) or [Floating UI](https://floating-ui.com) as fallback for browsers not supporting it yet ([#3754](https://github.com/porsche-design-system/porsche-design-system/pull/3754)) - modernized visual appearance, dynamic max-height based on viewport and fade in animation of option list ([#3754](https://github.com/porsche-design-system/porsche-design-system/pull/3754)) - `Select`, `Select Wrapper`: - focus outline becomes default focus style when no filter is used ([#3754](https://github.com/porsche-design-system/porsche-design-system/pull/3754)) - `Carousel`: Center layout of Carousel on mobile view ([#3765](https://github.com/porsche-design-system/porsche-design-system/pull/3765)) - `Carousel`: `auto` value of `slides-per-page` prop is breakpoint customizable ([#3771](https://github.com/porsche-design-system/porsche-design-system/pull/3771)) ### [3.27.0-rc.5] - 2025-02-20 #### Fixed - `AG Grid`: error on reload in next.js. ([#3759](https://github.com/porsche-design-system/porsche-design-system/pull/3759)) ### [3.27.0-rc.4] - 2025-02-20 #### Fixed - `AG Grid`: not accessing cdn base url correctly. ([#3759](https://github.com/porsche-design-system/porsche-design-system/pull/3759)) ### [3.27.0-rc.3] - 2025-02-18 #### Fixed - `AG Grid`: not resolving dependencies correctly. ([#3757](https://github.com/porsche-design-system/porsche-design-system/pull/3757)) ### [3.27.0-rc.2] - 2025-02-18 #### Fixed - `AG Grid`: not resolving dependencies correctly. ([#3756](https://github.com/porsche-design-system/porsche-design-system/pull/3756)) ### [3.27.0-rc.1] - 2025-02-17 #### Changed - **Breaking Change** `AG Grid`: Updated from v32 to v33, which introduced a new Theming API. AG Grid migrated from a CSS-based theming approach to a JavaScript object-based theming system. As a result, our custom theme also had to be adjusted accordingly. ([#3740](https://github.com/porsche-design-system/porsche-design-system/pull/3740)) #### Fixed - Styles: `vanilla-extract` returns `getMediaQueryMax`, `getMediaQueryMin`, `getMediaQueryMinMax` & `getSkeletonStyle` in wrong format ([#3753](https://github.com/porsche-design-system/porsche-design-system/pull/3753)) ### [3.27.0-rc.0] - 2025-02-13 #### Added - `@font-face` supports Thai language ([#3750](https://github.com/porsche-design-system/porsche-design-system/pull/3750)) - Partials: `getFontLinks` supports preloading `thai` subset ([#3750](https://github.com/porsche-design-system/porsche-design-system/pull/3750)) #### Changed - `Popover`: gets rendered on `#top-layer` which enables it to be shown correctly even when used e.g. within a scroll container ([#3732](https://github.com/porsche-design-system/porsche-design-system/pull/3732)) #### Removed - `Popover`: default styling for slotted anchors ([#3732](https://github.com/porsche-design-system/porsche-design-system/pull/3732)) ### [3.26.0] - 2025-02-07 ### [3.26.0-rc.0] - 2025-02-06 #### Added - `Switch`: `compact` prop to enable a smaller, space-saving version for compact layouts ([#3728](https://github.com/porsche-design-system/porsche-design-system/pull/3728)) - `Select`: `compact` prop to enable a smaller, space-saving version for compact layouts ([#3731](https://github.com/porsche-design-system/porsche-design-system/pull/3731)) - `Canvas`: named slot `sidebar-end-header` ([#3736](https://github.com/porsche-design-system/porsche-design-system/pull/3736)) - `Icon`: `4-wheel-drive`, `aggregation`, `arrow-compact-down`, `arrow-compact-left`, `arrow-compact-right`, `arrow-compact-up`, `arrows`, `battery-half`, `battery-one-quarter`, `battery-three-quarters`, `brain`, `cabriolet`, `charging-network`, `cloud`, `color-picker`, `compass`, `coupe`, `cut`, `door`, `drag`, `ear`, `error`, `exclamation-filled`, `fast-backward`, `fast-forward`, `file-csv`, `file-excel`, `flag`, `genuine-parts`, `geo-localization`, `grip`, `group`, `hand`, `highway-filled`, `history`, `laptop`, `limousine`, `linked`, `logo-apple-carplay`, `logo-apple-music`, `logo-kununu`, `logo-snapchat`, `microphone`, `news`, `north-arrow`, `online-search`, `paste`, `pivot`, `price-tag`, `qr-off`, `question-filled`, `radar`, `radio`, `return`, `road`, `seat`, `service-technician`, `skip-backward`, `skip-forward`, `stop`, `suv`, `theme`, `turismo`, `trigger-finger`, `unlinked` and `weather` ([#3737](https://github.com/porsche-design-system/porsche-design-system/pull/3737)) ### [3.25.1] - 2025-01-23 ### [3.25.1-rc.0] - 2025-01-23 #### Fixed - `Carousel`: throws error when object-like string is passed by `pagination` ([#3715](https://github.com/porsche-design-system/porsche-design-system/pull/3715)) ### [3.25.0] - 2025-01-23 ### [3.25.0-rc.1] - 2025-01-22 #### Fixed - `Carousel`: throws error when object-like string is passed by `slides-per-page` ([#3710](https://github.com/porsche-design-system/porsche-design-system/pull/3710)) ### [3.25.0-rc.0] - 2025-01-21 #### Added - `Sheet` ([#3704](https://github.com/porsche-design-system/porsche-design-system/pull/3704)) - `Button`, `Button-Pure`: Add `form` prop to explicitly associate the component with a form, even when it's not directly nested within it. ([#3648](https://github.com/porsche-design-system/porsche-design-system/pull/3648)) #### Changed - `Table`: Enable `Table Head Cell` to be used within `Table Row` in addition to `Table Head Row` to further align with table structure defined by W3C ([#3701](https://github.com/porsche-design-system/porsche-design-system/pull/3701)) #### Fixed - `Textarea`, `Textarea Wrapper`, `Textfield Wrapper`: color contrast of `unit` prop and counter in `readonly` mode meets WCAG 2.2 AA standard ([#3693](https://github.com/porsche-design-system/porsche-design-system/pull/3693)) ### [3.24.0] - 2025-01-08 ### [3.24.0-rc.1] - 2025-01-08 ### [3.24.0-rc.0] - 2025-01-07 #### Added - Styles: support for `vanilla-extract` available under `import { … } from '@porsche-design-system/components-{js|angular|react|vue}/styles/vanilla-extract';` ([#3666](https://github.com/porsche-design-system/porsche-design-system/pull/3666)) #### Changed - React: updated peer dependency to `>=19.0.0 <20.0.0` ### [3.23.0] - 2024-12-12 ### [3.23.0-rc.0] - 2024-12-12 #### Changed - `Select`: Slotted image of selected option now visible in combobox ([#3651](https://github.com/porsche-design-system/porsche-design-system/pull/3651)) #### Fixed - `Flyout`: transition bug in Safari ([3674](https://github.com/porsche-design-system/porsche-design-system/pull/3674)) - `Styles`: dart sass deprecation warnings in `SCSS` variant ([3664](https://github.com/porsche-design-system/porsche-design-system/pull/3664)) ### [3.22.1] - 2024-12-09 ### [3.22.1-rc.0] - 2024-12-09 #### Fixed - `Flyout Multilevel`: Secondary scroll area not shown in iOS Safari (iPhone only) ([3663](https://github.com/porsche-design-system/porsche-design-system/pull/3663)) ### [3.22.0] - 2024-12-06 ### [3.22.0-rc.1] - 2024-12-06 #### Added - `Flyout Multilevel`: Supports infinite layers ([3647](https://github.com/porsche-design-system/porsche-design-system/pull/3647)) #### Fixed - Partials: error when using in projects without `react/jsx-runtime` as dependency ([#3660](https://github.com/porsche-design-system/porsche-design-system/pull/3660)) - `Textfield Wrapper`: text alignment of type `email` and `tel` values in RTL mode ([3655](https://github.com/porsche-design-system/porsche-design-system/pull/3655)) - `Popover`: - Rendering bug of drop-shadow in Safari 18.x ([3622](https://github.com/porsche-design-system/porsche-design-system/pull/3622)) - Positioning in RTL mode if rendered inside a table (in #top-layer) ([3658](https://github.com/porsche-design-system/porsche-design-system/pull/3658)) ### [3.22.0-rc.0] - 2024-11-19 #### Added - `Modal`, `Flyout`: - `aria-label` is generated from slotted header contents if `aria` prop is not provided - ARIA `role` to `aria` prop of `Modal` component to support setting `alertdialog` role ([3618](https://github.com/porsche-design-system/porsche-design-system/pull/3618)) - `Pin-Code`: Add `form` prop to explicitly associate the component with a form, even when it's not directly nested within it. ([#3588](https://github.com/porsche-design-system/porsche-design-system/pull/3588)) - `Segmented-Control`: Use ElementInternals API and add `form` prop to explicitly associate the component with a form, even when it's not directly nested within it. ([#3614](https://github.com/porsche-design-system/porsche-design-system/pull/3614)) #### Changed - Angular: updated peer dependency to `>=19.0.0 <20.0.0` - `Pin-Code`: - Remove native input and use ElementInternals API - **Breaking Change**: `Pin-Code` component no longer support native validation due to the removal of the underlying native `` element. ([#3588](https://github.com/porsche-design-system/porsche-design-system/pull/3588)) - `Styles`: `SCSS` variant uses `@forward/@use` internally to replace deprecated `@import` ([#3623](https://github.com/porsche-design-system/porsche-design-system/pull/3623)) #### Fixed - Partials: removed bundled `react/jsx-runtime` due to React 18/19 incompatibilities. When using `jsx` in the `format` option, it is necessary to have `react/jsx-runtime` as a dependency in the project included. ([#3613](https://github.com/porsche-design-system/porsche-design-system/pull/3613)) - `Select`, `Multi-Select`: Ensure that dynamically changing the `disabled` property via `optgroups` persists the `disabled` state for individual options within the group. ([#3614](https://github.com/porsche-design-system/porsche-design-system/pull/3614)) ### [3.21.0] - 2024-11-12 ### [3.21.0-rc.0] - 2024-11-11 #### Added - `Flyout`: Prop `footerBehavior` to always make footer fixed ([3590](https://github.com/porsche-design-system/porsche-design-system/pull/3590)) - `Checkbox`, `Textarea`: `formDisabledCallback` and `formStateRestoreCallback` from ElementInternals API and sync validity with form element. ([#3528](https://github.com/porsche-design-system/porsche-design-system/pull/3528)) - `Link`, `Link Pure`, `Link Tile`: `aria-haspopup` is now supported for `aria` prop ([#3589](https://github.com/porsche-design-system/porsche-design-system/pull/3589)) - `Button`, `Link`: `compact` prop is breakpoint customizable ([#3580](https://github.com/porsche-design-system/porsche-design-system/pull/3580)) - `Select`, `Multi-Select`: Add `form` prop to explicitly associate these components with a specific form when they are not directly nested within it. ([#3542](https://github.com/porsche-design-system/porsche-design-system/pull/3542)) #### Changed - `Select`, `Multi-Select`: - Remove native select and use ElementInternals API ([#3542](https://github.com/porsche-design-system/porsche-design-system/pull/3542)) - **Breaking Change**: `Select` and `Multi-Select` components no longer support native validation due to the removal of the underlying native ` - + ``` ### [3.0.0-alpha.3] - 2023-03-17 #### 🤖 Property deprecations 🤖 ##### Accordion: - Event `accordionChange` is deprecated, use `change` event instead. ```diff - ) => {}} /> + ) => {}} /> ``` ##### Banner: - Named `slot="title"` is deprecated, use `heading` prop or `slot="heading"` instead. ```diff - Some heading + Some heading Some notification description. - + - Some heading - Some notification description. ``` ##### Carousel: - Prop `disablePagination` is deprecated, use `pagination` instead. - Event `carouselChange` is deprecated, use `change` event instead. ```diff - + - ) => {}} /> + ) => {}} /> ``` ##### Divider: - Prop `orientation` is deprecated, use `direction` instead. ```diff - + ``` ##### Icon: - Prop `colors`'s value `disabled` is removed, use `state-disabled` instead. ```diff - + ``` ##### Link Tile: - Prop `weight`'s value `semibold` is deprecated, use `semi-bold` instead. ```diff - + ``` ##### Modal: - Prop `disableCloseButton` is deprecated, use `dismissButton` instead. - Event `close` is deprecated, use `dismiss` event instead. ```diff - + - ) => {}} /> + ) => {}} /> ``` ##### Pagination: - Props `allyLabelNext`, `allyLabelPage`, `allyLabelPrev` and `allyLabel` are deprecated. - Event `pageChange` is deprecated, use `change` event instead. ```diff - + - ) => {}} /> + ) => {}} /> ``` ##### Scroller: - Prop `gradientColorScheme` is deprecated, use `gradientColor` instead. - Prop `scrollIndicatorPosition` is deprecated, use `alignScrollIndicator` instead. ```diff - + - + ``` ##### Segmented Control: - Event `segmentedControlChange` is deprecated, use `change` event instead. ```diff - ) => {}} /> + ) => {}} /> ``` ##### Stepper Horizontal: - Event `stepChange` is deprecated, use `change` event instead. ```diff - ) => {}} /> + ) => {}} /> ``` ##### Switch: - Event `switchChange` is deprecated, use `change` event instead. ```diff - ) => {}} /> + ) => {}} /> ``` ##### Table: - Event `sortingChange` is deprecated, use `change` event instead. ```diff - ) => {}} /> + ) => {}} /> ``` ##### Tabs: - Prop `gradientColorScheme` is deprecated, use `gradientColor` instead. - Prop `weight`'s value `semibold` is deprecated, use `semi-bold` instead. - Event `tabChange` is deprecated, use `change` event instead. ```diff - + - + - ) => {}} /> + ) => {}} /> ``` ##### Tabs Bar: - Prop `gradientColorScheme` is deprecated, use `gradientColor` instead. - Prop `weight`'s value `semibold` is deprecated, use `semi-bold` instead. - Event `tabChange` is deprecated, use `change` event instead. ```diff - + - + - ) => {}} /> + ) => {}} /> ``` ##### Tag: - Prop `color`'s value `notification-warning`, `notification-success` and `notification-error` are deprecated, use `notification-warning-soft`, `notification-success-soft` and `notification-error-soft` instead. ```diff - + - + - + ``` ##### Text Field Wrapper: - Prop `showCharacterCount` is deprecated, use `showCounter` instead. ```diff - + ``` ##### Textarea Wrapper: - Prop `showCharacterCount` is deprecated, use `showCounter` instead. ```diff - + ``` ##### Text List - Props `listType` and `orderType` are deprecated, use `type` instead. ```diff - + - + - + ``` #### Added - `Text`, `Icon`, `Button Pure` and `Link Pure` support value `xx-small` for prop `size` - `Display` supports value `small` for prop `size` - Partials: `getInitialStyles` supports multi prefix, e.g. `getInitialStyles({ prefix: ['', 'some-prefix', 'another-prefix'] });` - Styles: `displaySmallStyle` and `$pds-display-small` - Styles: `textXXSmallStyle` and `$pds-text-xx-small` - Styles: `fontSizeDisplaySmall` and `$pds-font-size-display-small` - Styles: `fontSizeTextXXSmall` and `$pds-font-size-text-xx-small` - Styles: `getHoverStyle` and `pds-hover()` - `Banner` has `heading` and `description` prop as well as `slot="heading"` and deprecated `slot="title"` - Custom events have consistent names across components and deprecated old event names - `Accordion` emits `change` and deprecated `accordionChange` event - `Carousel` emits `change` and deprecated `carouselChange` event - `Modal` emits `dismiss` and deprecated `close` event - `Pagination` emits `change` and deprecated `pageChange` event - `Segmented Control` emits `change` and deprecated `segmentedControlChange` event - `Stepper Horizontal` emits `change` and deprecated `stepChange` event - `Switch` emits `change` and deprecated `switchChange` event - `Table` emits `change` and deprecated `sortingChange` event - `Tabs` emits `change` and deprecated `tabChange` event - `Tabs Bar` emits `change` and deprecated `tabChange` event - Props have consistent names across components and deprecated old props - `Carousel` got `pagination` prop and deprecated `disablePagination` prop - `Divider` got `direction` prop and deprecated `orientation` prop - `Modal` got `dismissButton` prop and deprecated `disableCloseButton` prop - `Pagination` got `intl` prop and deprecated `allyLabelNext`, `allyLabelPage`, `allyLabelPrev` and `allyLabel` props - `Scroller` got `gradientColor` prop and deprecated `gradientColorScheme` prop - `Scroller` got `alignScrollIndicator` prop and deprecated `scrollIndicatorPosition` prop - `Tabs` got `gradientColor` prop and deprecated `gradientColorScheme` prop - `Tabs Bar` got `gradientColor` prop and deprecated `gradientColorScheme` prop - `Text Field Wrapper` got `showCounter` prop and deprecated `showCharacterCount` prop - `Textarea Wrapper` got `showCounter` prop and deprecated `showCharacterCount` prop - `Text List` got `type` prop and deprecated `listType` and `orderType` prop - Props have consistent values across components and deprecated old values - `Icon` prop `color` got value `state-disabled` and removed `disabled` value - `Link Tile` prop `weight` got value `semi-bold` and deprecated `semibold` value - `Tabs Bar` and `Tabs` prop `weight` got value `semi-bold` and deprecated `semibold` value - `Tag` prop `color` got values `notification-info-soft`, `notification-warning-soft`, `notification-success-soft`, `notification-error-soft` and deprecated `notification-warning`, `notification-success`, `notification-error` values #### Changed - `Display` uses font-weight regular and font-style normal - Partials: `getInitialStyles` matches new design language - Partials: All component related, slotted Light DOM styles have been moved to `getInitialStyles` - Styles: `getFocusStyle` and `pds-focus()` doesn't need `theme` parameter anymore - Styles: `breakpoint{Base|XS|S|M|L|XL|XXL}` and `$pds-breakpoint-{base|xs|s|m|l|xl|xxl}` are provided as number without unit (px) - `Link Tile` matches new design language - Typings for all component props start with the component name, e.g. `SwitchAlignLabel`, `TabsBarGradientColor` or `LinkPureIcon` - `Icon` prop `color` value `disabled` is renamed to `state-disabled` - `Tag` prop `color` value `notification-info` is renamed to `notification-info-soft` #### Fixed - `Text Field Wrapper` calendar and time indicator icons respect color definition in dark theme - `Text Field Wrapper` has correct height when type date or time is used - Partials: Typings of return value with and without options parameter - `Modal` scrolling behavior on mouse drag #### Removed - `Heading`: value `xxx-large` for prop `size` - Styles: `headingXXXLargeStyle` and `$pds-heading-xxx-large` - Styles: `fontSizeHeadingXXLarge` and `$pds-font-size-heading-xx-large` ### [3.0.0-alpha.2] - 2023-02-27 #### 🤖 Property deprecations 🤖 ##### Carousel: - Prop `wrap-content` is deprecated. ```diff - + ``` ##### Divider: - Prop values `neutral-contrast-low | neutral-contrast-medium | neutral-contrast-high` of `color` prop are deprecated. ```diff - + - + - + ``` #### Changed - `Divider`, `Button Group`, `Carousel` and `Text List` match new design language - Background color of `Scroller`'s `prev` and `next` buttons in dark theme - Partials: Removed deprecated `withoutTags` option for all partials, please use `format: 'jsx'` instead - `Content Wrapper` default value of prop `width` has changed from `basic` to `extended` #### Added - `Model Signature` - Props `align-header` and `width` for `Carousel` - Vue: plugin functions `createPorscheDesignSystem` and `usePorscheDesignSystemPlugin` #### Fixed - `Radio Button Wrapper` keyboard arrow navigation - `Button Pure` and `Link Pure` lagging active state background when scrolling on iOS ### [3.0.0-alpha.1] - 2023-02-16 #### Added - Porsche Next font supports Vietnamese charset - Prop `color` of `Icon` supports `disabled` - React: `patchRemixRunProcessBrowserGlobalIdentifier` binary to support SSR components with Remix #### Changed - `Stepper Horizontal` matches new design language - Styles: Optimize design tokens "spacing", "typography" and "theme" provided by styles sub-package `@porsche-design-system/components-{js|angular|react|vue}/styles` - Styles: Use calc() instead of max() to calculate padding for `gridStyle` (JS) and `pds-grid()` (SCSS) - Styles: `gridStyle` (JS) and `pds-grid()` (SCSS) uses optimized grid gap ### [3.0.0-alpha.0] - 2023-02-08 #### Note to the new `v3` major release of the Porsche Design System With the new **Porsche Design Language** comes a lot of changes regarding layout and design principles. To keep refactoring efforts as low as possible when upgrading from `v2` to `v3`, **breaking changes** were avoided as far as possible. Nevertheless, there are a few breaking changes and some more deprecations which should receive attention. #### 👹 Breaking Changes 👹 ##### Button: - Removed deprecated prop `tabbable`. ```diff - Some label + Some label ``` - Default value of prop `icon` has changed from `arrow-head-right` to `none`. Therefore, the `icon` property **must** be set if the component has the `hide-label` property. ```diff - Some label + Some label - Some label + Some label ``` ##### Button Pure: - Removed `subline` slot (visually not intended anymore). ```diff Some label -

Some Subline

 ``` - Removed deprecated prop `tabbable`. ```diff - Some label + Some label ``` ##### Icon: - Value `inherit` for prop `color` works slightly different to the previous major version. A CSS filter is required to apply custom coloring to take advantage of using an SVG embedded in an `` for better SSR support and loading performance in general. ```diff - + ``` - Camel case syntax for `name` prop isn't supported, please use param case syntax instead (TypeScript typings have been updated too). ```diff - + ``` ##### Link: - Default value of prop `icon` has changed from `arrow-head-right` to `none`. Therefore, the `icon` property **must** be set if the component has the `hide-label` property. ```diff - Some label + Some label - Some label + Some label ``` ##### Link Pure: - Removed `subline` slot (visually not intended anymore). ```diff Some label -

Some Subline

 ``` ##### Marque: - Removed `variant` property. ```diff - + // or even better, replace component by wordmark + ``` ##### Switch: - Removed deprecated prop `tabbable`. ```diff - Some label + Some label ``` ##### Partials: - `getIconLinks()` partial accepts only param-cased icon names. ```diff - require('@porsche-design-system/components-js/partials').getIconLinks({ icons: ['arrowRight'] }) + require('@porsche-design-system/components-js/partials').getIconLinks({ icons: ['arrow-right'] }) ``` ##### CSS global scope: - Changed naming of CSS global variables names. ```diff - --p-animation-duration__spinner - --p-animation-duration__banner + --p-animation-duration ``` #### 🤡 Component deprecations 🤡 All deprecated components are refactored to match the new design language, therefor it's technically not breaking, but we highly recommend to migrate to the mentioned alternative, since those deprecated components will be removed with next major version. ##### Content Wrapper: - Component is deprecated and will be removed with the next major release. Please use **[Porsche Grid](styles/grid)** instead, which is based on [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid) covering the specific layout needs for a harmonic appearance across all digital Porsche touch-points. ##### Flex: - Component is deprecated and will be removed with the next major release. In general, please use native [CSS Flex](https://css-tricks.com/snippets/css/a-guide-to-flexbox) instead for better performance and more standardized layout technique. ##### Grid: - Component is deprecated and will be removed with the next major release. In general, please use native [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid) in combination with **[Porsche Grid](styles/grid)** instead for better performance and more standardized layout technique. ##### Headline: ```diff - The quick brown fox jumps over the lazy dog + The quick brown fox jumps over the lazy dog ``` ##### Link Social: - Component is deprecated and will be removed with the next major release. Please use the **[Link](components/link)** component instead. #### 🤖 Property deprecations 🤖 All deprecated properties are still present without any effect, therefor it's technically not breaking, but we highly recommend to migrate and remove the deprecated props since those ones will be removed with next major version. ##### Button Pure: - Prop `weight` is deprecated, only regular font weight will be applied. ```diff - Some label - Some label - Some label - Some label + Some label ``` ##### Content Wrapper (deprecated): - Prop `theme` and `background-color` are deprecated. ```diff - Some content + Some content ``` ##### Grid (deprecated): - The `gutter` property is deprecated and has no effect anymore. Instead, a fluid gutter depending on the viewport width is used. ```diff - Some content - Some content - Some content + Some content ``` ##### Icon: - Prop `lazy` is deprecated. ```diff - + ``` ##### Link Pure: - Prop `weight` is deprecated, only regular font weight will be applied. ```diff - Some label - Some label - Some label - Some label + Some label ``` ##### Segmented Control: - Prop `background-color` is deprecated. ```diff - XS S + XS S ``` #### 👾 Property value deprecations 👾 All deprecated values are mapped to new ones, therefor it's technically not breaking, but we highly recommend to migrate to the new values since those ones will be removed with next major version. ##### Banner: - Prop value `fluid` of `width` prop is deprecated. ```diff - + ``` - Prop value `neutral` of `state` prop is deprecated. ```diff - Some banner title Some banner description. You can also add inline links to route to another page. + Some banner title Some banner description. You can also add inline links to route to another page. ``` ##### Content Wrapper: - Prop value `fluid` of `width` prop is deprecated. ```diff - Some content + Some content ``` ##### Icon: - Prop values `brand | default | neutral-contrast-low | neutral-contrast-medium | neutral-contrast-high | notification-neutral` of `color` prop are deprecated. ```diff - + - + - + - + - + - + ``` ##### Inline Notification: - Prop value `neutral` of `state` prop is deprecated. ```diff - + ``` ##### Tag: - Prop value `notification-neutral | neutral-contrast-high | background-default` of `color` prop is deprecated. ```diff - Color label + Color label - Color label + Color label - Color label + Color label ``` ##### Tag Dismissible: - Prop value `background-default` of `color` prop is deprecated. ```diff - Color label + Color label ``` ##### Text: - Prop value `thin | semibold` of `weight` prop is deprecated. ```diff - Some text + Some text - Some text + Some text ``` - Prop value `brand | default | neutral-contrast-low | neutral-contrast-medium | neutral-contrast-high | notification-neutral` of `color` prop is deprecated. ```diff - Some text + Some text - Some text + Some text - Some text + Some text - Some text + Some text - Some text + Some text - Some text + Some text ``` ##### ToastManager: - Prop value `neutral` of `state` parameter is deprecated. ```diff - …addMessage({ text: `Some message`, state: 'neutral' }) + …addMessage({ text: `Some message`, state: 'info' }) ``` #### Added - `Display` component - `Heading` component - Prop `underline` for `Link Pure` - Prop `theme` for `Checkbox Wrapper`, `Radio Button Wrapper`, `Popover`, `Tag Dismissible`, `Textarea Wrapper`, `Text Field Wrapper` and `Fieldset Wrapper` - Prop `size` for `Icon` supports `x-small` and `x-large` - Prop `size` for `Accordion` `compact="true"` supports `medium` #### Changed - `Spinner`, `Icon`, `Link Pure`, `Button Pure`, `Link`, `Link Social`, `Button`, `Checkbox Wrapper`, `Radio Button Wrapper`, `Popover`, `Modal`, `Select Wrapper`, `Tag`, `Tag Dismissible`, `Textarea Wrapper`, `Inline Notification`, `Banner`, `Toast`, `Grid`, `Flex`, `Pagination`, `Scroller`, `Accordion`, `Text`, `Text Field Wrapper`, `Content Wrapper`, `Segmented Control`, `Tabs`, `Tabs Bar`, `Headline` and `Fieldset Wrapper` match new design language - `Icon` supports `primary | contrast-low | contrast-medium | contrast-high | notification-success | notification-warning | notification-error | notification-info | inherit` for `color` prop - Default value of prop `width` of `Banner` has changed from `basic` to `extended` - Default value of prop `action-icon` of `Inline Notification` has changed from `arrow-head-right` to `arrow-right` - Default value of prop `name` of `Icon` has changed from `arrow-head-right` to `arrow-right` - Default value of prop `variant` of `Link` and `Button` has changed from `secondary` to `primary` #### Removed - Custom slotted CSS for mostly all components. Equivalent styles are now provided by `getInitialStyles()` partial instead. - `applyNormalizeStyles` option from `getInitialStyles()` partial which is applied by default now. ### [2.20.0] - 2023-02-06 ### [2.20.0-rc.1] - 2023-02-06 ### [2.20.0-rc.0] - 2023-01-30 #### Added - `applyNormalizeStyles` option for `getInitialStyles()` partial which includes basic css styles for Light DOM ### [2.19.1-rc.1] - 2023-01-18 #### Added - `jsdom-polyfill` subpackage is available at `@porsche-design-system/components-{js|angular|react|vue}/jsdom-polyfill` and can be used to have working web components in jsdom based tests (e.g. jest) - `testing` subpackage is available at `@porsche-design-system/components-{js|angular|react|vue}/testing` to provide `getByRoleShadowed`, `getByLabelTextShadowed` and `getByTextShadowed` utilities which use `@testing-library/dom` queries internally to support Shadow DOM - Validation if `prefix` is already reserved by a different version upon initialization of the Porsche Design System #### Fixed - `componentsReady()` waits for Porsche Design System being initialized before checking components which can happen in certain test scenarios without partials ### [2.19.1-rc.0] - 2023-01-18 #### Fixed - Bug in `@porsche-design-system/components-react/ssr` where in some cases during SSG an error was thrown when components render their children conditionally ### [2.19.0] - 2022-12-22 ### [2.19.0-rc.2] - 2022-12-22 ### [2.19.0-rc.1] - 2022-12-22 #### Fixed - `Stepper Horizontal` calculation of scroll position when used within any parent that has a margin or padding ### [2.19.0-rc.0] - 2022-12-21 #### Added - Vue: typed components are available via the `@porsche-design-system/components-vue` package #### Fixed - `Modal` focus cycle when pressing Shift Tab right after it was opened ### [2.18.0] - 2022-12-15 ### [2.18.0-rc.2] - 2022-12-14 #### Added - Validation to ensure crucial partials are used. **Disclaimer:** The Porsche Design System will **not** inject its initial styles anymore. Please use the `getInitialStyles()` partial to reduce flash of unstyled content (FOUC) as described here: [getInitialStyles() documentation](https://designsystem.porsche.com/v2/partials/initial-styles) #### Changed - `line-height` calculation for all components is handled CSS only now by using `ex`-unit in combination with `calc()` which gives the best performance, the easiest possible integration and respects UI best practices in having **larger** `line-height` values for **small** `font-size` definitions and **smaller** `line-height` values for **larger** `font-size` definitions. The calculated values by CSS slightly differ compared to the ones calculated by JavaScript, which might result in minor visual changes. #### Fixed - Screen reader announcements of `Textfield` and `Textarea` in `counter` mode - Screen reader announcements in `Select Wrapper` ### [2.18.0-rc.1] - 2022-11-24 #### Added - `Carousel` now has a `rewind` property, better prev/next icons, a `max-width` for `heading` and `description` and support for slotted `description` #### Fixed - `Select Wrapper` height if text is zoomed up to 200% ### [2.18.0-rc.0] - 2022-11-17 #### Added - SSR/SSG ready components using Declarative Shadow DOM for Next JS are shipped via `@porsche-design-system/components-react/ssr`. To use it simply change your imports. **Important:** make sure to apply the new `getDSRPonyfill()` partial right before your closing `` tag. More information can be found here: [getDSRPonyfill() documentation](https://designsystem.porsche.com/v2/partials/dsr-ponyfill) ```diff - import { PorscheDesignSystemProvider, PButton, ... } from '@porsche-design-system/components-react'; + import { PorscheDesignSystemProvider, PButton, ... } from '@porsche-design-system/components-react/ssr'; + import { getDSRPonyfill } from '@porsche-design-system/components-react/partials'; ``` #### Changed - Improve height calculation for `Accordion` - Slotted anchor support for `Link Pure` is stricter (In case slotted `` is used it must be a direct child of `Link Pure`) - `getFontLinks()` partial now has `{ weights: ['regular', 'semi-bold'] }` for a default ### [2.17.0] - 2022-10-31 ### [2.17.0-rc.0] - 2022-10-31 #### Added - `Link Tile` #### Fixed - `Scroller` bug where scrollable content was not fully hidden by the gradient, when zoomed into the page. #### Changed - Removed `!important` keyword from css property `display` of `Link Pure` and `Button Pure` ### [2.16.3] - 2022-10-21 ### [2.16.3-rc.0] - 2022-10-21 #### Fixed - `Button Pure` and `Link Pure` error when using `size="inherit"` and `icon="none"` #### Changed - Replaced all internal usage of `Text` and `Headline` components ### [2.16.2] - 2022-09-15 ### [2.16.2-rc.0] - 2022-09-15 #### Fixed - Issue with `Popover` where drop-shadow is not shown correctly in Chrome >= 105 - Issue with `Carousel` and `wrap-content="true"` where the layout was out of sync with `Content Wrapper` for viewports >= 1760px. - `Select Wrapper` with custom dropdown keeps attribute changes of native select options in sync if changed programmatically ### [2.16.1] - 2022-09-09 #### Fixed - Issue with `Options` typing import for `Carousel` ### [2.16.0] - 2022-09-08 ### [2.15.1-rc.1] - 2022-09-08 #### Added - `Carousel` - `Scroller` #### Changed - `Stepper Horizontal` now has `size` property - `Stepper Horizontal` uses improved focus behavior in case it becomes scrollable and scroll indicators are centered correctly. - `Tabs Bar` uses improved focus behavior in case it becomes scrollable and scroll indicators are centered correctly. ### [2.15.1-rc.0] - 2022-08-24 #### Fixed - `Radio Button Wrapper` visual selection change bug in Safari >= 15.5 ### [2.15.0] - 2022-08-22 ### [2.15.0-rc.1] - 2022-08-18 #### Changed - Downgraded `@angular` to `v13` to ensure backwards compatibility of `@porsche-design-system/components-angular` ### [2.15.0-rc.0] - 2022-08-16 #### Fixed - `Popover` visual shadow bug in Safari - `Stepper Horizontal Item` bug where pseudo styles of the counter element were overridable ### [2.15.0-beta.0] - 2022-08-05 #### Fixed - `Tabs` & `Tabs Bar` `size` property when using `BreakpointCustomizable` #### Changed - `Modal` uses poly fluid sizing for outer spacing - `Banner` uses poly fluid sizing for outer spacing - `Content Wrapper` uses poly fluid sizing for inner spacing - `Modal` min-width is slightly updated to perfectly fit into content area of `Content Wrapper` at 320px viewport width #### Added - Validation of properties for all components - `Text Field Wrapper` with `input type="search"` is clearable via Escape key and custom clear button across browsers - `Text Field Wrapper` with `input type="search"` shows a "Locate me" button when `actionIcon="locate"` is set, emits the `action` event on click and can be put into a loading state via `actionLoading="true"` ### [2.14.0] - 2022-07-11 ### [2.14.0-rc.1] - 2022-07-11 ### [2.14.0-rc.0] - 2022-07-11 #### Added - `getBrowserSupportFallbackScript()` partial supporting `cdn` and `format` options as replacement for `includeOverlay()` of `@porsche-design-system/browser-notification` npm package - `getCookiesFallbackScript()` partial supporting `cdn` and `format` options as replacement for `includeCookieOverlay()` of `@porsche-design-system/browser-notification` npm package #### Changed - `getMetaTagsAndIconLinks()` partial to return `theme-color` meta tags with `prefers-color-scheme: {light|dark}` media query ### [2.13.0] - 2022-06-23 ### [2.13.0-rc.5] - 2022-06-23 #### Fixed - `Stepper Horizontal Item` `state` validation - `Button` and `Link` with `theme="dark" variant="tertiary"` and `Tag Dismissible` bug on Safari < v15.5 where wrong colors on hover were shown ### [2.13.0-rc.4] - 2022-06-22 #### Added - `Stepper Horizontal` ### [2.13.0-rc.3] - 2022-06-22 #### Added - `Segmented Control` ### [2.13.0-rc.2] - 2022-06-21 ### [2.13.0-rc.1] - 2022-06-21 ### [2.13.0-rc.0] - 2022-06-21 #### Changed - `Button`, `Button Pure` and `Switch` apply `aria-disabled="true"` instead of `disabled` attribute to native button internally in case `disabled` and/or `loading` property is set ### [2.12.1] - 2022-05-25 ### [2.12.1-rc.0] - 2022-05-25 #### Fixed - Issue with `JssStyle` typing import ### [2.12.0] - 2022-05-19 #### Changed - npm package is prepared for public release on [npmjs.org](https://npmjs.com) ### [2.12.0-rc.2] - 2022-05-12 ### [2.12.0-rc.1] - 2022-05-11 ### [2.12.0-rc.0] - 2022-05-04 #### Added - `Table Head Cell` now has a `multiline` property #### Changed - `Headline` has no `hypens` / `overflow-wrap` style by default - Partials now throw an exception if they are executed in browser #### Fixed - Exception in `Headline`, `Select Wrapper`, `Text` and `Text List` when changing `theme` prop from `dark` to `light` - `getInitialStyles()` partial now returns `.hydrated` styles, too ### [2.11.0-skeletons] - 2022-04-21 ### [2.11.0] - 2022-04-21 ### [2.11.0-rc.0] - 2022-04-20 #### Added - `Tag` - `Tag Dismissible` ### [2.10.0-skeletons] - 2022-04-13 ### [2.10.0] - 2022-04-13 ### [2.9.3-rc.1] - 2022-04-06 #### Added - `Text Field Wrapper` now has a `showCharacterCount` property which can be used to hide the character count when a `maxLength` attribute is set on the wrapped `input`. - `Textarea Wrapper` now has a `showCharacterCount` property which can be used to hide the character count when a `maxLength` attribute is set on the wrapped `textarea`. ### [2.9.3-rc.0-skeletons] - 2022-03-29 ### [2.9.3-rc.0] - 2022-03-28 #### Added - `Text Field Wrapper` supports `unit` property on `input type="text"` - `Marque` optional configurable clickable/focusable area by defining padding on host element #### Fixed - `Tabs Item` improved accessibility - Angular: circular dependency in development mode in `2.9.2-skeletons` ### [2.9.2-skeletons] - 2022-03-24 #### Added - **[EXPERIMENTAL]** `getInitialStyles` partial now accepts a `skeletonTagNames` array of component names that will initially have skeleton styles while the Porsche Design System is loading - **[EXPERIMENTAL]** `Button`, `Button Pure`, `Checkbox Wrapper`, `Fieldset Wrapper`, `Link`, `Link Pure`, `Link Social`, `Radio Button Wrapper`, `Select Wrapper`, `Text Field Wrapper`, `Textarea Wrapper` can now have initial skeleton styles when passed as `skeletonTagNames` to the `getInitialStyles` partial ### [2.9.2] - 2022-03-24 ### [2.9.2-rc.1] - 2022-03-23 #### Fixed - Bug caused by Chrome where hover styles of `Link Pure` are not displayed correctly ### [2.9.2-rc.0] - 2022-03-22 #### Added - Normalized font behavior (`hyphen`, `overflow-wrap` and `text-size-adjust`) across components #### Fixed - `Modal` scrolling and pinch to zoom on iOS - `Modal` initial position if scrollable - `Table Head Cell` sort icon `asc` + `desc` ### [2.9.1] - 2022-03-10 ### [2.9.1-rc.0] - 2022-03-09 #### Added - Styles for slotted `