Pricing Blog

Why no classes on components?

  • lassead-1425920724752924802

    Lasse

    4 days ago

    I often miss the classes section on components to be able to set conditional stylings. Are there any particular reason why they're not available on components?
    1425920725197525043-Screenshot_2025-10-09_at_20.46.07.png
  • lucasg-1425921251792388247

    Lucas G

    4 days ago

    Typically, you'd set all your conditional styles within the component itself and control them via attributes for example
  • The regular style panel is there for any scenarios where you'd do "one-off" styles
  • lucasg-1425921708325343395

    Lucas G

    4 days ago

    Setting different styles outside of the component every time you use it would kinda defeat the purpose of having it be a component to begin with
  • lucasg-1425922188183212093

    Lucas G

    4 days ago

    On that particular scenario, any set classes/styles can be set from the styles view and are set by the package author
  • You can set all the styles you need on the SC button from the styles panel (hover, active, disabled, etc)
  • lassead-1425922848018399234

    Lasse

    4 days ago

    Yes I do that for my own components. But for example in the scenario seen in the screenshot, I'm wrapping the sc-button component from Spark Core which comes with its own pre-defined styles. I want to add my own conditional styling to that, e.g. having a "selected" state, which I would normally add through a class that references a true/false variable
  • lassead-1425923315423383614

    Lasse

    4 days ago

    And even for my own components it just seems less flexible to not be able to add classes to the component itself like I'm able to on any other elements
  • Tod-1425923316929134695

    Tod

    4 days ago

    Great job @Lasse! Your contribution to the Nordcraft Community just made you advance to Community Level 2! 🌲
  • lucasg-1425923496353075282

    Lucas G

    4 days ago

    I agree on more flexibility for styling package components
  • But for your own, you can set those yourself from within the component
  • lucasg-1425923917708529735

    Lucas G

    4 days ago

    If you set them outside the component then it defeats the purpose of it being a component as you'd have to go around your project to make changes if you ever need to update styles
  • lassead-1425925162917957662

    Lasse

    4 days ago

    True. But for the screenshot case I still have no options to use classes other than the built-in "disabled" and "trigger-open" classes that the sc-button component comes with
  • max.kayr-1425925394435149975

    Max

    4 days ago

    I'm with Lasse. I think that that would make a ton of sense and we actually asked for that feature when we built Spark Core 😁
  • I find myself building workarounds for those things all the time
  • lassead-1425925562928599090

    Lasse

    4 days ago

    Same issue with style variables btw, though for that specific case I can often apply the style variable to a parent element and still reference it in the child component. It just adds unneccesary element nesting
  • lucasg-1425925577319256304

    Lucas G

    4 days ago

    Yes for package components, I agree there. I'm not sure for one's own components though
  • I've never had that issue with my own components though so I'm biased lol
  • max.kayr-1425925665483522199

    Max

    4 days ago

    That will come soon, I believe
  • lucasg-1425925850649591870

    Lucas G

    4 days ago

    Yeah a style variable update is currently in development
  • lassead-1425925909336293456

    Lasse

    4 days ago

    Ah that's great
  • lucasg-1425926157559140393

    Lucas G

    4 days ago

    Maybe Spark Core components could be updated to have an "active/selected" class? 😉
  • "Selected" would make more sense than active, not to be confused with the pseudoclass
  • lassead-1425926883752673290

    Lasse

    4 days ago

    Yes that would solve this specific case, but it's more of a general issue I run into on a regular basis
  • And btw Spark Core also has a Toggle component that I could use, but then I'd have to duplicate my button styling into that component just for that one "selected" feature
  • Would just make life easier to be able to "extend" the styling capabilities of (package) components
  • lucasg-1425927332329422848

    Lucas G

    4 days ago

    That's one for the suggestions channel
  • lassead-1425927430790582423

    Lasse

    4 days ago

    Yes I'll add it 🙂
  • lucasg-1425927483068518571

    Lucas G

    4 days ago

    Or bumping an existing one if Max already created one
  • lassead-1425927517432320052

    Lasse

    4 days ago

    I'll take a look
    💪1
  • lucasg-1425928864349159614

    Lucas G

    4 days ago

    Adding to it, being able to add attributes as well as classes would be ideal. For example, in your "selected" state example, the button should also have an aria-selected or pressed attribute
    👍1
  • But including every aria attribute possible in a package component is not realistic
  • andreasmoller-1426297902195671121

    Andreas Møller

    3 days ago

    There are some edge cases that we would have to work out, since not ever component has exactly one root element, but I really like the idea.

    Same for other attributes and events to be honest.
    😍3
    🙌2