Components not inheriting first/last child element state styles correctly

Ignition
1

Hey Guys,

Seeing an issue on "One shot buttons" and "Numeric entry fields" whereas when I apply a style it isn't inheriting it correctly.

The style has element states: base, first child and last child. The 'first-child' state is being applied to these components, even though they are not the first children in the container. The other components in the container work as expected and obey the first/last child rules.

Wondering if anyone else has seen this kind of thing? / workaround? / is it a known issue?

2

I believe the numeric entry components are wrapped (they have the input field within an outer container)?
Could this be a cascade issue, where the style is being applied to the inner container since it is the first child within its outer container?

3

That would make a lot of sense! Probably should be an exception for it in this case I would have expected but I bet you're right!

Perhaps the same with the buttons.. as there are primary and secondary options, perhaps its 2 buttons in one container, as the style options are 'style' and 'disabled style'.

4

For the numeric entry, apply your style to the containerStyle property instead of the basic style location.

For the one-shot button, wrap the button in a flex container, and then apply the style to that container instead.

After some quick browsing:
Regular Button

<button class="style-classes-applied-here">
  <div>...contents...</div>
</button>

Oneshot Button

<div>
   <button class="style-classes-applied-here"> 
      <div>...contents...</div>
   </button>
<div>

So yes, the one shot button is always the only child (i.e. first and last child) in its parent div.

2 Likes
5

Can you tag the original post as "Perspective" (which it seems to be)? It makes it clearer for those wishing to help.

6

When this happens:

  • Give the component a class with a name you can easily spot,
  • open your browser on the page containing the component
  • open the dev tools (ctrl + shift + i)
  • click on the component selecting tool:
    image
  • click on the component
  • find the element with your class:
    one-shot button:
    image
    numeric field:
    image

This can give you enough insight to figure out why something doesn't apply properly.
It also tells you what you can target in the advanced stylesheet.
In the case of the one-shot button and the numeric field, the structure is simple enough that you probably won't ever need special selectors, but you might still want to use the stylesheet to go deeper in the customization.

edit: I mean something that's not possible with basic style classes (unless injecting css), but easily achievable through the css stylesheet:

image

.psc-inset_shadow {
	background-color: lightslategrey;
	color: transparent;
	text-shadow: 1px 1px 2px var(--containerRoot);
	background-clip: text;
	-webkit-background-clip: text;
	-moz-background-clip: text;
}

image

2 Likes