@porsche-design-system/components-react 3.0.0-alpha.6 → 3.0.0-rc.1

package/CHANGELOG.md

@@ -9,6 +9,36 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [3.0.0-rc.1] - 2023-04-19
+
+#### Added
+
+- Prop `name` for `Icon` supports `push-pin`, `push-pin-off`, `qr`, `pin-filled`, `shopping-cart-filled`,
+  `shopping-bag-filled`, `logo-apple-podcast`, `logo-spotify` and `user-filled`
+  ([#2471](https://github.com/porsche-design-system/porsche-design-system/pull/2471)).
+- **[EXPERIMENTAL]** Prop `loading` for `Checkbox Wrapper`
+  ([#2483](https://github.com/porsche-design-system/porsche-design-system/pull/2483))
+
+#### Fixed
+
+- `Wordmark`, `Crest` and `Model Signature` respect parent width/height
+  ([#2479](https://github.com/porsche-design-system/porsche-design-system/pull/2479))
+- `Button Tile`, `Link Tile` and `Link Tile Model Signature` are using correct border radius of
+  `pds-border-radius-large` ([#2473](https://github.com/porsche-design-system/porsche-design-system/pull/2473))
+- `Text Field Wrapper` with `input type="search"` has better accessibility for clear button
+  ([#2476](https://github.com/porsche-design-system/porsche-design-system/pull/2476))
+- `Accordion` layout shift with nested accordions
+  ([#2465](https://github.com/porsche-design-system/porsche-design-system/pull/2465))
+- Color Contrast issues and rendering in Windows High Contrast Mode
+  ([#2420](https://github.com/porsche-design-system/porsche-design-system/pull/2420))
+
+### [3.0.0-rc.0] - 2023-04-11
+
+#### Fixed
+
+- Styles: `borderRadiusLarge` and `pds-border-radius-large` are exposing correct value
+  ([#2463](https://github.com/porsche-design-system/porsche-design-system/pull/2463))
+
 ### [3.0.0-alpha.6] - 2023-04-06
 
 #### Added
@@ -43,7 +73,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ```diff
 - <PAccordion onAccordionChange={(e: CustomEvent<AccordionChangeEvent>) => {}} />
-+ <PAccordion onUpdate={(e: CustomEvent<AccordionUPdateEvent>) => {}} />
++ <PAccordion onUpdate={(e: CustomEvent<AccordionUpdateEvent>) => {}} />
 ```
 
 ##### Banner:
@@ -82,7 +112,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <PPagination onUpdate={(e: CustomEvent<PaginationUpdateEvent>) => {}} />
 ```
 
-#### Segmented Control:
+##### Segmented Control:
 
 - Event `segmentedControlChange` is deprecated, use `update` event instead.
 
@@ -91,7 +121,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <PSegmentedControl onUpdate={(e: CustomEvent<SegmentedControlUpdateEvent>) => {}} />
 ```
 
-#### Stepper Horizontal:
+##### Stepper Horizontal:
 
 - Event `stepChange` is deprecated, use `update` event instead.
 
@@ -100,7 +130,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <PStepperHorizontal onUpdate={(e: CustomEvent<StepperHorizontalUpdateEvent>) => {}} />
 ```
 
-#### Switch:
+##### Switch:
 
 - Event `switchChange` is deprecated, use `update` event instead.
 
@@ -109,7 +139,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <PSwitch onUpdate={(e: CustomEvent<SwitchUpdateEvent>) => {}} />
 ```
 
-#### Table:
+##### Table:
 
 - Event `sortingChange` is deprecated, use `update` event instead.
 
@@ -142,6 +172,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - `Wordmark` ([#2418](https://github.com/porsche-design-system/porsche-design-system/pull/2418))
 - `Crest` ([#2437](https://github.com/porsche-design-system/porsche-design-system/pull/2437))
+
+#### Changed
+
 - Styles: changed color values of `theme[Light|Dark]ContrastMedium` and `theme[Light|Dark]Notification[*]` color tokens
   of `Styles` subpackage ([#2436](https://github.com/porsche-design-system/porsche-design-system/pull/2436))
 
@@ -193,9 +226,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - `Banner`: CSS variable `--p-banner-position-type`
   ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
-- `gridSafeZone`, `gridSafeZoneBase`, `gridSafeZoneXXL` and `pds-grid-safe-zone-base`, `pds-grid-safe-zone-xxl`
+- Styles: `gridSafeZone`, `gridSafeZoneBase`, `gridSafeZoneXXL` and `pds-grid-safe-zone-base`, `pds-grid-safe-zone-xxl`
   ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
-- `gridWidth`, `gridWidthMin`, `gridWidthMax` and `pds-grid-width-min`, `pds-grid-width-max`
+- Styles: `gridWidth`, `gridWidthMin`, `gridWidthMax` and `pds-grid-width-min`, `pds-grid-width-max`
   ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
 
 #### 🤖 Property deprecations 🤖
@@ -239,7 +272,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <PAccordion onChange={(e: CustomEvent<AccordionChangeEvent>) => {}} />
 ```
 
-#### Banner:
+##### Banner:
 
 - Named `slot="title"` is deprecated, use `heading` prop or `slot="heading"` instead.
 
@@ -297,7 +330,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <p-link-tile weight="semi-bold"></p-link-tile>
 ```
 
-#### Modal:
+##### Modal:
 
 - Prop `disableCloseButton` is deprecated, use `dismissButton` instead.
 - Event `close` is deprecated, use `dismiss` event instead.
@@ -336,7 +369,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <p-scroller align-scroll-indicator="top"></p-scroller>
 ```
 
-#### Segmented Control:
+##### Segmented Control:
 
 - Event `segmentedControlChange` is deprecated, use `change` event instead.
 
@@ -345,7 +378,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <PSegmentedControl onChange={(e: CustomEvent<SegmentedControlChangeEvent>) => {}} />
 ```
 
-#### Stepper Horizontal:
+##### Stepper Horizontal:
 
 - Event `stepChange` is deprecated, use `change` event instead.
 
@@ -354,7 +387,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <PStepperHorizontal onChange={(e: CustomEvent<StepperHorizontalChangeEvent>) => {}} />
 ```
 
-#### Switch:
+##### Switch:
 
 - Event `switchChange` is deprecated, use `change` event instead.
 
@@ -363,7 +396,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <PSwitch onChange={(e: CustomEvent<SwitchChangeEvent>) => {}} />
 ```
 
-#### Table:
+##### Table:
 
 - Event `sortingChange` is deprecated, use `change` event instead.
 
@@ -427,9 +460,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Prop `showCharacterCount` is deprecated, use `showCounter` instead.
 
 ```diff
--<p-text-field-wrapper show-character-count="false">
-+<p-text-field-wrapper show-counter="false">
-  <input type="text" maxlength="20" />
+- <p-text-field-wrapper show-character-count="false">
++ <p-text-field-wrapper show-counter="false">
+    <input type="text" maxlength="20" />
 </p-text-field-wrapper>
 ```
 
@@ -438,9 +471,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Prop `showCharacterCount` is deprecated, use `showCounter` instead.
 
 ```diff
--<p-textarea-wrapper show-character-count="false">
-+<p-textarea-wrapper show-counter="false">
-  <textarea maxlength="80"></textarea>
+- <p-textarea-wrapper show-character-count="false">
++ <p-textarea-wrapper show-counter="false">
+    <textarea maxlength="80"></textarea>
 </p-textarea-wrapper>
 ```
 
@@ -478,10 +511,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
   - `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
+  - `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

package/esm/lib/components/checkbox-wrapper.wrapper.js

@@ -3,13 +3,13 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PCheckboxWrapper = forwardRef(({ hideLabel = false, label = '', message = '', state = 'none', theme = 'light', className, ...rest }, ref) => {
+const PCheckboxWrapper = forwardRef(({ hideLabel = false, label = '', loading = false, message = '', state = 'none', theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-checkbox-wrapper');
-    const propsToSync = [hideLabel, label, message, state, theme];
+    const propsToSync = [hideLabel, label, loading, message, state, theme];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['hideLabel', 'label', 'message', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['hideLabel', 'label', 'loading', 'message', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/lib/components/checkbox-wrapper.wrapper.d.ts

@@ -9,6 +9,10 @@ export type PCheckboxWrapperProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange
      * The label text.
      */
     label?: string;
+    /**
+     * Disables the checkbox and shows a loading indicator.
+     */
+    loading?: boolean;
     /**
      * The message styled depending on validation state.
      */
@@ -31,6 +35,10 @@ export declare const PCheckboxWrapper: import("react").ForwardRefExoticComponent
      * The label text.
      */
     label?: string;
+    /**
+     * Disables the checkbox and shows a loading indicator.
+     */
+    loading?: boolean;
     /**
      * The message styled depending on validation state.
      */

package/lib/components/checkbox-wrapper.wrapper.js

@@ -5,13 +5,13 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PCheckboxWrapper = react.forwardRef(({ hideLabel = false, label = '', message = '', state = 'none', theme = 'light', className, ...rest }, ref) => {
+const PCheckboxWrapper = react.forwardRef(({ hideLabel = false, label = '', loading = false, message = '', state = 'none', theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-checkbox-wrapper');
-    const propsToSync = [hideLabel, label, message, state, theme];
+    const propsToSync = [hideLabel, label, loading, message, state, theme];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['hideLabel', 'label', 'message', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['hideLabel', 'label', 'loading', 'message', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/lib/types.d.ts

@@ -79,6 +79,7 @@ declare const ICON_NAMES: readonly [
     "locate",
     "lock",
     "lock-open",
+    "logo-apple-podcast",
     "logo-baidu",
     "logo-delicious",
     "logo-digg",
@@ -98,6 +99,7 @@ declare const ICON_NAMES: readonly [
     "logo-reddit",
     "logo-skyrock",
     "logo-sohu",
+    "logo-spotify",
     "logo-tecent",
     "logo-telegram",
     "logo-tiktok",
@@ -126,12 +128,16 @@ declare const ICON_NAMES: readonly [
     "pause",
     "phone",
     "pin",
+    "pin-filled",
     "play",
     "plug",
     "plus",
     "preheating",
     "printer",
     "purchase",
+    "push-pin",
+    "push-pin-off",
+    "qr",
     "question",
     "racing-flag",
     "refresh",
@@ -145,7 +151,9 @@ declare const ICON_NAMES: readonly [
     "send",
     "share",
     "shopping-bag",
+    "shopping-bag-filled",
     "shopping-cart",
+    "shopping-cart-filled",
     "sidelights",
     "snowflake",
     "sort",
@@ -163,6 +171,7 @@ declare const ICON_NAMES: readonly [
     "truck",
     "upload",
     "user",
+    "user-filled",
     "user-group",
     "user-manual",
     "video",
@@ -897,7 +906,7 @@ declare const MODEL_SIGNATURE_SIZES: readonly [
     "small",
     "inherit"
 ];
-export declare type ModelSignatureSize = typeof MODEL_SIGNATURE_SIZES[number];
+export declare type ModelSignatureSize = (typeof MODEL_SIGNATURE_SIZES)[number];
 export declare type ModelSignatureModel = keyof typeof MODEL_SIGNATURES_MANIFEST;
 declare const MODEL_SIGNATURE_COLORS: readonly [
     "primary",
@@ -906,7 +915,7 @@ declare const MODEL_SIGNATURE_COLORS: readonly [
     "contrast-high",
     "inherit"
 ];
-export declare type ModelSignatureColor = typeof MODEL_SIGNATURE_COLORS[number];
+export declare type ModelSignatureColor = (typeof MODEL_SIGNATURE_COLORS)[number];
 export declare type LinkTileModelSignatureModel = ModelSignatureModel;
 declare const LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS: readonly [
     "h2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.0.0-alpha.6",
+  "version": "3.0.0-rc.1",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.0.0-alpha.6"
+    "@porsche-design-system/components-js": "3.0.0-rc.1"
   },
   "peerDependencies": {
     "react": ">=17.0.0 <19.0.0",