feat(FieldSelect, FieldChips, FieldTime, FieldTimeSelect): Google Material label style

[mdodgelooker]

• Updates 4 fields to use FloatingLabelField:
  • FieldSelect
  • FieldChips
  • There's no "uncontrolled" version so hasValue is derived simply from props.values
  • checkValueOnBlur is set to false, meaning FloatingLabelField doesn't need to check for a value in the internal input on blur event, since that is automatically converted to a chip on blur (via onChange)
  • FieldTime
  • Custom checkValueOnBlur since there are actually 3 internal inputs to check
  • FieldTimeSelect
• Wrapped all the story templates in ExtendedComponentsThemeProvider so that externalLabel can be toggled in the controls
• Added a few explicitly externalLabel: false stories for each component

[github-actions[bot]]

Coverage report

Total coverage

Status	Category	Percentage	Covered / Total
🟢	Statements	94.84%	7290/7687
🟡	Branches	87.14%	4643/5328
🟢	Functions	93.63%	2101/2244
🟢	Lines	95.38%	7054/7396

Status of coverage: 🟢 - ok, 🟡 - slightly more than threshold, 🔴 - under the threshold

Show files with reduced coverage 🔻

### Reduced coverage | Status | Filename | Statements | Branches | Functions | Lines | | :----: | :------------------------------------------ | :------------------ | :------- | :------------------ | :------------ | | 🔴 | components-date/src/FieldTime/FieldTime.tsx | 63.64% (-36.36% 🔻) | 100% | 33.33% (-66.67% 🔻) | 70% (-30% 🔻) | > Status of coverage: 🟢 - ok, 🟡 - slightly more than threshold, 🔴 - under the threshold

Report generated by 🧪jest coverage report action from 77c2084cef3ad2362b7c3721ee9985c72be0e99c

[mdodgelooker]

@lukelooker I see your point about the placeholder. With text fields, Material seems to allow placeholder but barely mention it in docs: https://material.angular.io/components/form-field/overview#form-field-appearance

But it doesn't seem to exist at all for selects. But the label does move up on focus for selects: https://material-components.github.io/material-web/demos/select/

Do we want to stop just supporting placeholder on Select when externalLabel: false? Or at least I can remove it from our examples...

[jhardy]

My guess is that we have quite a few uses of placeholder's in select, I would be hesitant to remove them.

[mdodgelooker]

@lukelooker I was trippin about externalLabel in the stories – it does show in the controls whether or not you have it in the story args.

As for the Select placeholder... it seems like we need to move the label up immediately on focus to be material-y, but disabling placeholder might be too risky. Maybe we just discourage its use in the docs (once we turn externalLabel off by default in 3.0) or say to only use it with externalLabe={true}? Any other ideas?

[ghost]

@lukelooker I was trippin about externalLabel in the stories – it does show in the controls whether or not you have it in the story args.

👍

As for the Select placeholder... it seems like we need to move the label up immediately on focus to be material-y, but disabling placeholder might be too risky. Maybe we just discourage its use in the docs (once we turn externalLabel off by default in 3.0) or say to only use it with externalLabe={true}? Any other ideas?

I'm fine with moving ahead as-is – I suspect we'll see people downplay the use of placeholders in designs with this new design and I do think it'll be less disconcerting with real placeholder / label text. :)

[ghost]

Happy to re-review when the stories are cleaned up (use externalLabel = truein template instead of modifying all stories) :)

[mdodgelooker]

@lukelooker I think the externalLabel fixes are all in.