Field - child elements rendered with font-size: 0

[albertfdp]

Expectations

It should be possible to render <Anchor /> tags and other elements as child of <Field />

Reality

Tags that implement font-size: inherit result in not being rendered when child or nested child of Field as it implements font-size: 0. (Introduced in https://github.com/zendeskgarden/react-components/pull/1076/files#diff-5a92bfca891e0c20d051635b3021272225e65bd3115c8af399fea8abfe933944R27)

This results in elements unexpectedly disappearing from previous versions behavior.

Before

After

Steps to Reproduce

1. Import Field from react-forms
2. Import Anchor from react-buttons (it can also be a <div />)
3. Render

<Field><Anchor>Hello world</Anchor></Field>

Example here: https://codesandbox.io/s/exciting-currying-ife3u5?file=/src/Example.tsx

Fine Print

• Component: Field
• Version: ^8.37.0
• Browsers: all

[Francois-Esquire]

Hey @albertfdp thanks for reporting this, will be looking into this with the team.

[jzempel]

@albertfdp this along with a number of a11y violations is fixed with Garden's new Combobox. Please see the following references for details:

• https://www.npmjs.com/package/@zendeskgarden/react-dropdowns.next
• https://zendeskgarden.github.io/react-components/?path=/story/packages-dropdowns-next-combobox--uncontrolled
• https://codesandbox.io/s/combobox-demo-vhhlgh?file=/src/ComboboxNext.tsx