Semantic-Org/Semantic-UI-React

Advertise all underlying propTypes and typings in wrapper components

Open

#1,169 opened on Jan 16, 2017

View on GitHub
 (20 comments) (0 reactions) (0 assignees)JavaScript (4,065 forks)batch import
docsgood first issuehelp wanted

Repository metrics

Stars
 (13,136 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

See #1163 for the inspiration here.

Some components wrap others, like a Popup wrapping a Portal. However, we do not advertise the Portal props as propTypes nor typings of the Popup. This means there is no way for users to know what props are available.

Add propTypes

I propose we explicitly list all known props in propTypes and typings of the underlying component when a component wraps another component.

Add Examples

We should then also add doc site examples showing use of these props. Example, Popup mouse enter/leave delays are not shown but are available as it composes the Portal which has mouse enter/leave delays.

Task List

Here is a brain dump of wrapper components, there may be more. @jcarbo / @layershifter feel free to update this list at will:

  • Popup -> Portal
  • Modal -> Portal
  • Confirm -> Modal
  • Select -> Dropdown
  • Radio -> Checkbox
  • Table.Footer -> Table.Header
  • Table.HeaderCell -> Table.Cell
  • Form.Button -> FormField + Button
  • Form.Checkbox -> FormField + Checkbox
  • Form.Dropdown -> FormField + Dropdown
  • Form.Input -> FormField + Input
  • Form.Radio -> FormField + Radio
  • Form.Select -> FormField + Select
  • Form.TextArea -> FormField + TextArea

Contributor guide

Research direction
Examine each wrapper component in the list (e.g., Popup > Portal) and identify props from the underlying component that are not currently exposed. Then add those props to the wrapper's propTypes and TypeScript typings. Also add documentation examples for each wrapper to demonstrate the newly exposed props.
Tech stack
javascriptreact
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
ReactPropTypesTypeScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70