Editing shadow root components

[ythattori]

Hello,

So I’ve been using the astroux components for a bit (in react) but I have a bit of a problem. If there is a shadow root component that doesn’t have a “part” then I can’t edit the styling of it at all.

For example, with the component, I want to have the “text-align:center”. But I can’t seem to get any selectors to get the input component with that style. I can select the form-field and label, but nothing else.

Please let me know if it is possible to edit the shadow root components somehow in react.

Thanks!

[amalyah]

Hello @ythattori! I'm a UX designer who works on Astro components. Could you give us some more information about your need for an input that can have center-aligned text? Currently, we only support left-aligned text in inputs.

[ythattori]

For now, one of the uses I have for the input is putting the RuxInput in a table cell so I can edit table cells. It doesn't look that great as a left aligned so I just wanted to get it center aligned, but of course I can't since the input is nested in a shadow root. Another option I want to add is assign a max length for the input component as well.

This isn't the only problem I have had with the shadow root. In the past I wanted to remove the labels for the Clock component and I ran into the same shadow root problem (Although in your recent updates I do see that you can remove it now).

I just want to be able to edit components to how I see fit, rather than being stuck with the strict styling of the components.

Hope this helps, thanks!

[markacianfrani]

Totally understand the frustration! Not being able to style shadow roots was a big limitation to web components that's thankfully solved now with parts.

We're working on a full proper implementation of shadow parts across all components first thing next year.

[ythattori]

Okay that sounds good! Guess I'll just have to wait and see!

But I was thinking, couldn't you implement it as a prop? Like shadowStyles = {....} and then we could just add css class/id selectors to update what we want? Of course this is easier said than done since I don't know how you guys have your components built.

[rbureau85]

Is there an update to the parts? I am needing to change the header background color based on status of my mission. I've tried rux-global-status-bar::part(container) but that does not seem to change the color.

[rbureau85]

Just an FYI, I gave it a class for background but when it toggles something changes the visibility to hidden so I added style:{{visibility: 'visable'}} with the added class and just toggled the class with the props.state

[markacianfrani]

@rbureau85 sorry about that, we prematurely published the 6.1 docs. the new shadow parts should be included in the 6.1-rc though.

we don't officially support changing the bg color, so it's a little clunky--you'll have to target both the rux-global-status-bar element and its container shadow part:

rux-global-status-bar, rux-global-status-bar::part(container) {
  background: blue;
}

[rbureau85]

Aaahh I see. Thank you for the explanation. I actually need to change it based on a state. This will change the color if someone hits that start button on a mission so they know the mission is active. AKA visual indicator.

Adding the below seems to get it to work well with that state change
<RuxGlobalStatusBar style={{visibility: 'visible'}} class={start === true ? "active-header" : undefined}>

[dmcalester]

@rbureau85 would you be able to chat with one of our UX team on that use case? It’s interesting and not one we’ve encountered yet (to my knowledge).

cc: @amalyah

[rbureau85]

Yes, Of course. I can give them an idea of what we do in our shop as it's very different than most other units. I will be available in the evenings until Saturday but then I will be out of town for a while.