Porsche Design System
You are currently viewing an earlier release of the Porsche Design System.Switch to the latest Porsche Design System documentation.
SearchNavigate to GitHub repository of Porsche Design SystemOpen sidebar
Contribution If you want to contribute solutions or fixes, you can create pull requests in the Porsche Design System repository. Besides our Definition of Done, there are several things to keep in mind. To keep the quality high we rely on extensive testing and test automation. Our CI pipeline will report back most issues for already existing features and it is possible to work by trial and error. Since this isn't ideal you can use the following high-level checklist to get a better understanding of how, where and in which context a single component is tested. Checklist to keep in mind per package when modifying components components unit tests for component itself, e.g. button.spec.ts unit tests for component styles, e.g. button-styles.spec.ts unit tests for component utils, e.g. button-utils.spec.ts generic unit tests for all components, e.g. lifecycleValidtion.spec.ts or a11y.spec.ts components-js e2e tests for component, e.g. e2e/specs/button.e2e.ts generic e2e tests for all components, e.g. e2e/specs/default-dom.e2e.ts and e2e/specs/lifecycle-after-disconnect.e2e.ts vrt tests of button.html page for component, e.g. vrt/specs/button.vrt.ts vrt tests of button.html with playwright for component, e.g. vrt/specs/button.vrt.ts vrt tests of hover and focus states for component, e.g. vrt/specs/button.vrt.ts vrt tests of overview.html for all components including prefixing, e.g. vrt/specs/overview.vrt.ts generic vrt tests for all components, e.g. vrt/specs/component-high-contrast-mode.vrt.ts and vrt/specs/component-scaling.vrt.ts components-angular vrt pages are generated via generateVRTPages.ts but tests are maintained manually and have to match shared fixtures of components-js, e.g. vrt/specs/button.vrt.ts components-react vrt pages are generated via generateVRTPages.ts but tests are maintained manually and have to match shared fixtures of components-js, e.g. vrt/specs/button.vrt.ts components-vue vrt pages and tests are maintained manually and OverviewPage.vue need to be kept in sync, e.g. vrt/specs/overview.vrt.ts components-react/projects/react-ssr-wrapper unit tests for component edge cases, e.g. react-ssr-wrapper.spec.tsx generic unit tests for all components, e.g. react-ssr-wrapper.spec.tsx components-react/projects/next-js vrt pages are generated automatically via generateVRTPages.ts but fixtures are separate because we are screenshotting the server side rendered pages with disabled javascript, e.g. vrt/specs/button.vrt.ts components-react/projects/remix vrt pages are generated automatically via generateVRTPages.ts but only overview.tsx and fixtures are shared with projects/next-js and have to match, e.g. vrt/specs/overview.vrt.ts
Global settingsThemeChanges the theme of the application and any Porsche Design System component. It's possible to choose between forced theme light and dark. It's also possible to use auto, which applies light or dark theme depending on the operating system settings automatically.LightDarkAuto (sync with operating system)DirectionThe dir global attribute in HTML changes the direction of text and other content within an element. It's most often used on the <html> tag to set the entire page's direction, which is crucial for supporting languages that are written from right to left (RTL), such as Arabic and Hebrew. For example, using <html dir="rtl"> makes the entire page display from right to left, adjusting the layout and text flow accordingly.LTR (left-to-right)RTL (right-to-left)Text ZoomTo ensure accessibility and comply with WCAG 2.2 AA standards, it is mandatory for web content to support text resizing up to at least 200% without loss of content or functionality. Using relative units like rem is a best practice for achieving this, as they allow the text to scale uniformly based on the user's browser settings.100%130%150%200%