Skip to content

Commit

Permalink
Merge pull request porsche-design-system#2913 from porsche-design-sys…
Browse files Browse the repository at this point in the history 
…tem/issue/2810

display style shall never contain !important for all PDS components (Issue/2810)
  • Loading branch information
@denyo
denyo authored Nov 30, 2023
2 parents f278e27 + 3673fc8 commit a6f34f7
Show file tree
Hide file tree
Showing 50 changed files with 573 additions and 516 deletions.
82 changes: 41 additions & 41 deletions ...projects/react-ssr-wrapper/tests/unit/specs/__snapshots__/react-ssr-wrapper.spec.tsx.snap
View file

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions packages/components/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),

- Hide `border-bottom` of `Accordion` if used as single item
([#2911](https://github.com/porsche-design-system/porsche-design-system/pull/2911))
- `display` css property can be overridden on all components, e.g. within media queries
([#2913](https://github.com/porsche-design-system/porsche-design-system/pull/2913))

### [3.9.0] - 2023-11-24

Expand Down
88 changes: 44 additions & 44 deletions packages/components/src/components/accordion/__snapshots__/accordion-styles.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@

exports[`getComponentCss() should return correct css for size: "medium", compact: false, open: false and theme: light 1`] = `
":host {
display: block !important;
display: block;
border-bottom: 1px solid #D8D8DB !important;
color-scheme: light dark !important;
}
:host([hidden]) {
display: none !important;
}
:host(:only-of-type) {
border-bottom: 0 !important;
}
:host([hidden]) {
display: none !important;
}
button {
display: flex;
position: relative;
Expand Down Expand Up @@ -99,16 +99,16 @@ button:not(:focus-visible)::before {

exports[`getComponentCss() should return correct css for size: "medium", compact: false, open: true and theme: light 1`] = `
":host {
display: block !important;
display: block;
border-bottom: 1px solid #D8D8DB !important;
color-scheme: light dark !important;
}
:host([hidden]) {
display: none !important;
}
:host(:only-of-type) {
border-bottom: 0 !important;
}
:host([hidden]) {
display: none !important;
}
button {
display: flex;
position: relative;
Expand Down Expand Up @@ -197,15 +197,15 @@ button:not(:focus-visible)::before {

exports[`getComponentCss() should return correct css for size: "medium", compact: true, open: false and theme: dark 1`] = `
":host {
display: block !important;
display: block;
color-scheme: light dark !important;
}
:host([hidden]) {
display: none !important;
}
:host(:only-of-type) {
border-bottom: 0 !important;
}
:host([hidden]) {
display: none !important;
}
button {
display: flex;
position: relative;
Expand Down Expand Up @@ -293,15 +293,15 @@ button:not(:focus-visible)::before {

exports[`getComponentCss() should return correct css for size: "medium", compact: true, open: false and theme: light 1`] = `
":host {
display: block !important;
display: block;
color-scheme: light dark !important;
}
:host([hidden]) {
display: none !important;
}
:host(:only-of-type) {
border-bottom: 0 !important;
}
:host([hidden]) {
display: none !important;
}
button {
display: flex;
position: relative;
Expand Down Expand Up @@ -389,15 +389,15 @@ button:not(:focus-visible)::before {

exports[`getComponentCss() should return correct css for size: "medium", compact: true, open: true and theme: light 1`] = `
":host {
display: block !important;
display: block;
color-scheme: light dark !important;
}
:host([hidden]) {
display: none !important;
}
:host(:only-of-type) {
border-bottom: 0 !important;
}
:host([hidden]) {
display: none !important;
}
button {
display: flex;
position: relative;
Expand Down Expand Up @@ -486,16 +486,16 @@ button:not(:focus-visible)::before {

exports[`getComponentCss() should return correct css for size: "small", compact: false, open: false and theme: light 1`] = `
":host {
display: block !important;
display: block;
border-bottom: 1px solid #D8D8DB !important;
color-scheme: light dark !important;
}
:host([hidden]) {
display: none !important;
}
:host(:only-of-type) {
border-bottom: 0 !important;
}
:host([hidden]) {
display: none !important;
}
button {
display: flex;
position: relative;
Expand Down Expand Up @@ -583,16 +583,16 @@ button:not(:focus-visible)::before {

exports[`getComponentCss() should return correct css for size: "small", compact: false, open: true and theme: dark 1`] = `
":host {
display: block !important;
display: block;
border-bottom: 1px solid #404044 !important;
color-scheme: light dark !important;
}
:host([hidden]) {
display: none !important;
}
:host(:only-of-type) {
border-bottom: 0 !important;
}
:host([hidden]) {
display: none !important;
}
button {
display: flex;
position: relative;
Expand Down Expand Up @@ -681,16 +681,16 @@ button:not(:focus-visible)::before {

exports[`getComponentCss() should return correct css for size: "small", compact: false, open: true and theme: light 1`] = `
":host {
display: block !important;
display: block;
border-bottom: 1px solid #D8D8DB !important;
color-scheme: light dark !important;
}
:host([hidden]) {
display: none !important;
}
:host(:only-of-type) {
border-bottom: 0 !important;
}
:host([hidden]) {
display: none !important;
}
button {
display: flex;
position: relative;
Expand Down Expand Up @@ -779,15 +779,15 @@ button:not(:focus-visible)::before {

exports[`getComponentCss() should return correct css for size: "small", compact: true, open: false and theme: light 1`] = `
":host {
display: block !important;
display: block;
color-scheme: light dark !important;
}
:host([hidden]) {
display: none !important;
}
:host(:only-of-type) {
border-bottom: 0 !important;
}
:host([hidden]) {
display: none !important;
}
button {
display: flex;
position: relative;
Expand Down Expand Up @@ -875,15 +875,15 @@ button:not(:focus-visible)::before {

exports[`getComponentCss() should return correct css for size: "small", compact: true, open: true and theme: light 1`] = `
":host {
display: block !important;
display: block;
color-scheme: light dark !important;
}
:host([hidden]) {
display: none !important;
}
:host(:only-of-type) {
border-bottom: 0 !important;
}
:host([hidden]) {
display: none !important;
}
button {
display: flex;
position: relative;
Expand Down Expand Up @@ -972,16 +972,16 @@ button:not(:focus-visible)::before {

exports[`getComponentCss() should return correct css for size: {"base":"small","xs":"medium","s":"small","m":"medium","l":"small","xl":"medium"}, compact: false, open: true and theme: dark 1`] = `
":host {
display: block !important;
display: block;
border-bottom: 1px solid #404044 !important;
color-scheme: light dark !important;
}
:host([hidden]) {
display: none !important;
}
:host(:only-of-type) {
border-bottom: 0 !important;
}
:host([hidden]) {
display: none !important;
}
button {
display: flex;
position: relative;
Expand Down
20 changes: 11 additions & 9 deletions packages/components/src/components/accordion/accordion-styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,18 +40,20 @@ export const getComponentCss = (

return getCss({
'@global': {
':host': addImportantToEachRule({
':host': {
display: 'block',
...(!compact && {
borderBottom: `1px solid ${contrastLowColor}`,
...prefersColorSchemeDarkMediaQuery(theme, {
borderColor: contrastLowColorDark,
...addImportantToEachRule({
...(!compact && {
borderBottom: `1px solid ${contrastLowColor}`,
...prefersColorSchemeDarkMediaQuery(theme, {
borderColor: contrastLowColorDark,
}),
}),
'&(:only-of-type)': { borderBottom: 0 },
...colorSchemeStyles,
...hostHiddenStyles,
}),
...colorSchemeStyles,
...hostHiddenStyles,
'&(:only-of-type)': { borderBottom: 0 },
}),
},
button: {
display: 'flex',
position: 'relative',
Expand Down
26 changes: 13 additions & 13 deletions packages/components/src/components/carousel/__snapshots__/carousel-styles.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`getComponentCss() should return correct css for width: basic, hasPagination: false, isInfinitePagination: false, alignHeader: center and theme: light 1`] = `
":host {
display: flex !important;
display: flex;
gap: clamp(16px, 1.25vw + 12px, 36px) !important;
flex-direction: column !important;
box-sizing: content-box !important;
Expand Down Expand Up @@ -134,7 +134,7 @@ h2,::slotted([slot=heading]),p,::slotted([slot=description]) {

exports[`getComponentCss() should return correct css for width: basic, hasPagination: false, isInfinitePagination: true, alignHeader: left and theme: light 1`] = `
":host {
display: flex !important;
display: flex;
gap: clamp(16px, 1.25vw + 12px, 36px) !important;
flex-direction: column !important;
box-sizing: content-box !important;
Expand Down Expand Up @@ -264,7 +264,7 @@ h2,::slotted([slot=heading]),p,::slotted([slot=description]) {

exports[`getComponentCss() should return correct css for width: basic, hasPagination: false, isInfinitePagination: true, alignHeader: start and theme: light 1`] = `
":host {
display: flex !important;
display: flex;
gap: clamp(16px, 1.25vw + 12px, 36px) !important;
flex-direction: column !important;
box-sizing: content-box !important;
Expand Down Expand Up @@ -394,7 +394,7 @@ h2,::slotted([slot=heading]),p,::slotted([slot=description]) {

exports[`getComponentCss() should return correct css for width: basic, hasPagination: true, isInfinitePagination: false, alignHeader: center and theme: dark 1`] = `
":host {
display: flex !important;
display: flex;
gap: clamp(16px, 1.25vw + 12px, 36px) !important;
flex-direction: column !important;
box-sizing: content-box !important;
Expand Down Expand Up @@ -554,7 +554,7 @@ h2,::slotted([slot=heading]),p,::slotted([slot=description]) {

exports[`getComponentCss() should return correct css for width: basic, hasPagination: true, isInfinitePagination: false, alignHeader: start and theme: light 1`] = `
":host {
display: flex !important;
display: flex;
gap: clamp(16px, 1.25vw + 12px, 36px) !important;
flex-direction: column !important;
box-sizing: content-box !important;
Expand Down Expand Up @@ -712,7 +712,7 @@ h2,::slotted([slot=heading]),p,::slotted([slot=description]) {

exports[`getComponentCss() should return correct css for width: basic, hasPagination: true, isInfinitePagination: true, alignHeader: center and theme: light 1`] = `
":host {
display: flex !important;
display: flex;
gap: clamp(16px, 1.25vw + 12px, 36px) !important;
flex-direction: column !important;
box-sizing: content-box !important;
Expand Down Expand Up @@ -896,7 +896,7 @@ h2,::slotted([slot=heading]),p,::slotted([slot=description]) {

exports[`getComponentCss() should return correct css for width: basic, hasPagination: true, isInfinitePagination: true, alignHeader: start and theme: dark 1`] = `
":host {
display: flex !important;
display: flex;
gap: clamp(16px, 1.25vw + 12px, 36px) !important;
flex-direction: column !important;
box-sizing: content-box !important;
Expand Down Expand Up @@ -1078,7 +1078,7 @@ h2,::slotted([slot=heading]),p,::slotted([slot=description]) {

exports[`getComponentCss() should return correct css for width: extended, hasPagination: {"base":false,"xs":true,"s":false,"m":true,"l":false,"xl":true}, isInfinitePagination: false, alignHeader: start and theme: light 1`] = `
":host {
display: flex !important;
display: flex;
gap: clamp(16px, 1.25vw + 12px, 36px) !important;
flex-direction: column !important;
box-sizing: content-box !important;
Expand Down Expand Up @@ -1263,7 +1263,7 @@ h2,::slotted([slot=heading]),p,::slotted([slot=description]) {

exports[`getComponentCss() should return correct css for width: extended, hasPagination: {"base":false,"xs":true,"s":false,"m":true,"l":false,"xl":true}, isInfinitePagination: true, alignHeader: center and theme: light 1`] = `
":host {
display: flex !important;
display: flex;
gap: clamp(16px, 1.25vw + 12px, 36px) !important;
flex-direction: column !important;
box-sizing: content-box !important;
Expand Down Expand Up @@ -1474,7 +1474,7 @@ h2,::slotted([slot=heading]),p,::slotted([slot=description]) {

exports[`getComponentCss() should return correct css for width: extended, hasPagination: false, isInfinitePagination: false, alignHeader: center and theme: light 1`] = `
":host {
display: flex !important;
display: flex;
gap: clamp(16px, 1.25vw + 12px, 36px) !important;
flex-direction: column !important;
box-sizing: content-box !important;
Expand Down Expand Up @@ -1606,7 +1606,7 @@ h2,::slotted([slot=heading]),p,::slotted([slot=description]) {

exports[`getComponentCss() should return correct css for width: extended, hasPagination: false, isInfinitePagination: true, alignHeader: start and theme: light 1`] = `
":host {
display: flex !important;
display: flex;
gap: clamp(16px, 1.25vw + 12px, 36px) !important;
flex-direction: column !important;
box-sizing: content-box !important;
Expand Down Expand Up @@ -1736,7 +1736,7 @@ h2,::slotted([slot=heading]),p,::slotted([slot=description]) {

exports[`getComponentCss() should return correct css for width: extended, hasPagination: true, isInfinitePagination: false, alignHeader: start and theme: light 1`] = `
":host {
display: flex !important;
display: flex;
gap: clamp(16px, 1.25vw + 12px, 36px) !important;
flex-direction: column !important;
box-sizing: content-box !important;
Expand Down Expand Up @@ -1894,7 +1894,7 @@ h2,::slotted([slot=heading]),p,::slotted([slot=description]) {

exports[`getComponentCss() should return correct css for width: extended, hasPagination: true, isInfinitePagination: true, alignHeader: center and theme: light 1`] = `
":host {
display: flex !important;
display: flex;
gap: clamp(16px, 1.25vw + 12px, 36px) !important;
flex-direction: column !important;
box-sizing: content-box !important;
Expand Down
Loading

0 comments on commit a6f34f7

Please sign in to comment.