Semantic-Org/Semantic-UI-React

Advertise all underlying propTypes and typings in wrapper components

Open

#1169 opened on Jan 16, 2017

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

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

Tech stack
javascriptreacttypescript
Domain
frontenddocumentation
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
over 1 week
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
ReactJavaScriptSemantic UI ReactpropTypes
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
The issue lists wrapper components like Popup wrapping Portal. For each, examine the underlying component's propTypes and typings, then add them to the wrapper. Also, add doc site examples. Start with the Popup >Portal pair; look at Popup.js and Portal.js in the source to see current props. Follow patterns from other similar additions. Check existing PRs or comments for guidance.