Added props to be able to make custom CSS

[NVEJoel]

PR:

• Added props before being able to submit custom CSS before NVE-button and NVE-menu-item. This is needed so that you can give the flexibility of how you want the component to look. For example, if you want the Dropdown button to be of a fixed width and not responsive, you can now write:

• ` <nve-button variant="primary" slot="trigger"
  customStyle="width: 400px; display: flex; justify-content: space-between; " slotStyle="slot:prefix { display: none; }; slot:label { padding-left: 8px; };"

  Dropdown med custom css

  Tekst

  `

• Added the new functions that are needed before implementing customCSS to components such as Utils functions so that the functions can be reused

• Added a new alias to Utils so it get cleaner imports.

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://kind-mushroom-03c272603-176.westeurope.3.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://kind-mushroom-03c272603-176.westeurope.3.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://kind-mushroom-03c272603-176.westeurope.3.azurestaticapps.net

[tomapedersen]

Er ikke dette det man skal bruke ::part-styling til? Det er jo problematisk når man bruker shoelace og skal style ting som ikke er eksponert, men det er jo tross alt slik webcomponents er spesifisert. Dersom man gjør det mulig å sende inn helt fri custom css til en komponent så føler jeg at det totalt ødelegger meningen med en designsystem

Dersom man trenger å style et element som ikke er eksponert via part så synes jeg heller at man bør skrive om komponenten og ekponere delen heller enn å hacke det til

Min anbefaling er at denne ikke tas inn.

[amish1188]

Er ikke dette det man skal bruke ::part-styling til? Det er jo problematisk når man bruker shoelace og skal style ting som ikke er eksponert, men det er jo tross alt slik webcomponents er spesifisert. Dersom man gjør det mulig å sende inn helt fri custom css til en komponent så føler jeg at det totalt ødelegger meningen med en designsystem

Dersom man trenger å style et element som ikke er eksponert via part så synes jeg heller at man bør skrive om komponenten og ekponere delen heller enn å hacke det til

Min anbefaling er at denne ikke tas inn.

Jeg er enig med deg. Likevel er det ofte slik at når man har nested komponenter, parts hjelper ikke så mye. Men da kommer css custom properties til hjelp (hvis jeg husker riktig brukte jeg den i knappen for å endre ikonet sin farge).

[tomapedersen]

Er ikke dette det man skal bruke ::part-styling til? Det er jo problematisk når man bruker shoelace og skal style ting som ikke er eksponert, men det er jo tross alt slik webcomponents er spesifisert. Dersom man gjør det mulig å sende inn helt fri custom css til en komponent så føler jeg at det totalt ødelegger meningen med en designsystem Dersom man trenger å style et element som ikke er eksponert via part så synes jeg heller at man bør skrive om komponenten og ekponere delen heller enn å hacke det til Min anbefaling er at denne ikke tas inn.

Jeg er enig med deg. Likevel er det ofte slik at når man har nested komponenter, parts hjelper ikke så mye. Men da kommer css custom properties til hjelp (hvis jeg husker riktig brukte jeg den i knappen for å endre ikonet sin farge).

Man skal kunne bruke exportparts til akkurat det. Dersom <bar> har parts prefix og suffix , og <foo> bruker denne, så skal man kunne bruke dette slik i foo-component.ts <bar exportparts="prefix:barprefix, suffix:barsuffix">xxxxxxx</bar>

dersom man da bruker <foo> et sted så skal man i css kunne skrive foo::part(barsuffix) {color: red;}

Jeg tror shoelace bruker det et par steder, men har ikke tatt det i bruk selv

[tomapedersen]

(men ja, css-variabler vil også løse mange problemer der det er implementert)

[amish1188]

Interessant! Jeg har ikke prøvd det selv heller men verdt å teste.

On Wed, 4 Sep 2024 at 08:26, Tom Pedersen @.***> wrote:

Er ikke dette det man skal bruke ::part-styling til? Det er jo problematisk når man bruker shoelace og skal style ting som ikke er eksponert, men det er jo tross alt slik webcomponents er spesifisert. Dersom man gjør det mulig å sende inn helt fri custom css til en komponent så føler jeg at det totalt ødelegger meningen med en designsystem Dersom man trenger å style et element som ikke er eksponert via part så synes jeg heller at man bør skrive om komponenten og ekponere delen heller enn å hacke det til Min anbefaling er at denne ikke tas inn.

Jeg er enig med deg. Likevel er det ofte slik at når man har nested komponenter, parts hjelper ikke så mye. Men da kommer css custom properties til hjelp (hvis jeg husker riktig brukte jeg den i knappen for å endre ikonet sin farge).

Man skal kunne bruke exportparts til akkurat det. Dersom har parts prefix og suffix , og bruker denne, så skal man kunne bruke dette slik i foo-component.ts

xxxxxxx

dersom man da bruker et sted så skal man i css kunne skrive foo::part(barsuffix) {color: red;}

Jeg tror shoelace bruker det et par steder, men har ikke tatt det i bruk selv

— Reply to this email directly, view it on GitHub https://github.com/NVE/Designsystem/pull/176#issuecomment-2328016967, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKFDO5KMP4V3QAM6QK2BALLZU2RZHAVCNFSM6AAAAABKQV434OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMRYGAYTMOJWG4 . You are receiving this because your review was requested.Message ID: @.***>