Esri / Esri/calcite-react

Refactor Tabs component to use context api

Open
#276 0 comments 1 reaction 1 assignee Claimed by @codylawson View on GitHub
bug enhancement
Dominant language
JavaScript
Stars
51
Forks
13
PR merge metrics
No merged PRs in 30d

Description

`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`.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.