calcite-react
calcite-react copied to clipboard
Refactor Tabs component to use context api
Tabs
should use context api to pass props to child components.
Expected Behavior
Tabs should create a context provider and pass style props as well as click event handler and active tab index to child components.
Current Behavior
Current implementation uses a method of mapping over children and cloning them with new props, this causes an issue when attempting to extend a component with styled-components
. Rather than the underlying styled component receiving the new class attribute the whole component is wrapped in a new styled component which doesn't receive the props from the parent when the children are mapped.
Possible Solution
Use context api to pass style props, activeTabIndex
, onTabChange
to child components. Each child should have a dom ref
and check its own index to determine if the index matches the activeTabIndex
.