Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Expose ref of components #314

Open
gabro opened this issue Jul 26, 2022 · 4 comments
Open

Expose ref of components #314

gabro opened this issue Jul 26, 2022 · 4 comments
Assignees

Comments

@gabro
Copy link
Member

gabro commented Jul 26, 2022

Apart from Box, we currently don't forward the ref prop of any of the components. This is rather arbitrary and potentially problematic in some situations.

For example, we can't use a Button directly as a trigger for Menu since it doesn't accept a ref.
As another example, users of Bento can't programmatically control focus on the components in case they need to, and so on.

This is issue is potentially broad, but I propose we expose ref on every component. Where to forward ref heavily depends on the component itself: in some cases it may make sense to target the top-level wrapper of the component, in other cases we may need to target the native component we're wrapping (think of NumberInput for instance).

@gabro
Copy link
Member Author

gabro commented Dec 12, 2022

I think we should split this in smaller chunks of work, the first piece of work would be listing the components we want to expose the ref of (I.e. a list with checkboxes in this issue) and then start working on a component-per-component basis

@federico-ercoles federico-ercoles self-assigned this Dec 15, 2022
@federico-ercoles
Copy link
Contributor

List of components:

  • Actions
  • AreaLoader
  • Avatar
  • Banner
  • Box
  • Breadcrumb
  • Button
  • ButtonLink
  • Card
  • Charts
    • BarChart
    • DonutChart
    • LineChart
  • Checkbox
  • CheckboxField
  • CheckboxGroupField
  • Chip
  • ContentBlock
  • ContentWithSidebar
  • DateField
  • Disclosure
  • DisclosureGroup
  • Divider
  • Feedback
  • Field
  • FileUploaderField
  • Form
    • FormRow
    • FormSection
  • IconButton
  • Icons
  • Illustrations
  • InlineLoader
  • Layout
    • Bleed
    • Column
    • Columns
    • Inline
    • Inset
    • Stack
    • Tiles
  • Link
  • List
    • ListItem
  • Menu
  • Modal
  • Navigation
  • NumberField
  • NumberInput
  • Popover
  • ProgressBar
  • RadioGroupField
  • ReadOnlyField
  • SearchBar
  • SelectField
  • Slider
  • SliderField
  • Stepper
  • Switch
  • Table
  • Tabs
  • TextArea
  • TextField
  • TimeField
  • Toast
  • Tooltip
  • Typography
    • Body
    • Display
    • Headline
    • Label
    • Title

@federico-ercoles
Copy link
Contributor

federico-ercoles commented Dec 23, 2022

I had a look at what MUI does for their components that have an equivalent in Bento, and it looks to me that the default behaviour is always forwarding the ref to the root element. I haven't been able to find one with a different behaviour.

@gabro
Copy link
Member Author

gabro commented Dec 23, 2022

There are cases in which there are multiple refs. E.g. https://mui.com/material-ui/api/input/ has an inputRef which references the inner input element

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: To do
Development

No branches or pull requests

2 participants