fix(select): slotted label content works with outline notch

[liamdebeasi]

Issue number: N/A

---

What is the current behavior?

The label slot content does not work with the notch behavior for fill="outline". The notch cutout does not match the dimensions of the floating/stacked label.

What is the new behavior?

• ion-select now computes the notch size manually if slotted label content is used.

Stencil re-renders the component when slotted content is added, removed, or modified, so we call setNotchWidth in componentDidRender. This ensures that the method is run if labelPlacement is changed too.

setNotchWidth has a couple optimizations built in to ensure we are not doing unnecessary computations:

1. If no label exists or the label prop is in use then the function returns early. The notch for the label prop is computed based on its intrinsic size because we can render that text content in multiple places.
2. If the slotted label has a width of 0 but has an offsetParent then we return early to avoid adding an IntersectionObserver on content that is not hidden.

In the event that the select is hidden, then we use an IntersectionObserver to be notified of when the select is visible again. At that point, we will attempt to set the notch width again.

Does this introduce a breaking change?

• Yes
• No

Other information

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[averyjohnston]

Setting this style on a floating label causes the label to render too low when the select is closed:

Not sure if this is best addressed in another PR, though.

[liamdebeasi]

This is another tricky one. The problem here is we are translating based on %, which will be based on the height of the label element. If the label element grows in height so will the translation.

MDC "fixes" this by giving the label a fixed height. However, this causes the text to get cut off at larger font sizes. This also causes the label to no longer be centered in the container as the select increases in height, though I'm not 100% if that's by design.

We could also make the label height 100%, but then we're going to need to translate by seemingly arbitrary values that may also be wrong as the select changes in height.

Any thoughts on how best to address? I'll keep testing it. It's worth noting that Material Design doesn't seem to do a lot of customizations on floating/stacked labels beyond colors and such. Perhaps this is by design?

[averyjohnston]

I was able to get pretty close by changing the following styles on .label-text-wrapper (screenshots linked):

• In the default styles, replace the current transform with top: 50% and transform: translateY(-50%) scale(1). The top: 50/translateY(-50) is a trick I've used to vertically center absolutely positioned items.
• When floating, add top: auto.

The animation doesn't work right, but maybe there's a good way to fix it? An alternative could be to not do position: absolute at all and use flex styles to vertically center the label instead, maybe only when the label isn't floating if the position is necessary to make the float work.

[liamdebeasi]

During refinement we discussed that this is the same problem as https://ionic-cloud.atlassian.net/browse/FW-4083, so we are going to handle this fix in a separate ticket.