Docs don't accurately reflect ThemeProvider ids

[seancrater]

Expectations

As a user, I'd like the IDs provided in the documentation to match up to what the code is looking for. I was working with the Checkbox component and needed to reverse engineer a bit to figure out that the API had changed to forms.check_label from checkboxes.label which is listed in the docs.

Reality

Expected to see my styles come through, but seems the wrong selectors are documented

Steps to Reproduce

1. Install @zendeskgarden/forms @ 6.20
2. Create a basic Checkbox (with Label as well) instance with a ThemeProvider wrapping it
3. Apply some styles using the ID checkboxes.label

Example

https://codesandbox.io/s/garden-create-react-app-72pey?fontsize=14

Fine Print

• Component: Checkbox (but probably more?)
• Version: 6.20
• Browsers: all

[austingreendev]

👋 Hi @seancrater. Thanks for opening this issue.

The checkboxes.label value you are referencing is still valid for the deprecated, react-checkboxes package.

The values prefixed with forms are relevant to the react-forms package. Unfortunately, it looks like our automated ID table in the theming documentation isn't pulling the values from react-forms correctly. We should figure this out.

In regards to the ID theming... Starting with react-forms the need for the styling ID's might be minimized for your use-case. With the new peerDependencies we are using the context API which allows you to wrap the element you need to style. i.e.:

const MyCoolLabel = styled(Label)`
    color: red;
`;

<Field>
  <Checkbox>
    <MyCoolLabel>Example checkbox</MyCoolLabel>
    <Hint>Hints are included</Hint>
  </Checkbox>
</Field>

[seancrater]

Hey @Austin94, thanks for the response! Good point about being able to wrap with a styled component, should work great when I have one-off styles, just wanted to implement some global overrides for a little POC using Garden in this example but seems it'll be easy to work around like this for now.

Thanks!