calcite-react icon indicating copy to clipboard operation
calcite-react copied to clipboard

Refactor Tabs component to use context api

Open codylawson opened this issue 5 years ago • 0 comments

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.

codylawson avatar Jul 25 '19 22:07 codylawson