docs: update rfc constant syntax, rename rfcs folder to 'proposals' (u…

…ber#631)

* fix: rename rfcs dir to proposals

* docs: update constant syntax in rfcs

.prettierignore

@@ -1,5 +1,5 @@
 node_modules
 dist
 coverage
-rfcs
+proposals
 README.md

CONTRIBUTING.md

@@ -24,7 +24,7 @@ This document helps you navigate the process.
 
 ## Contributing new components
 
-1.  Write a mini-RFC on the component you'd like to add, and send a PR. You can find [examples here](https://github.com/uber-web/baseui/tree/master/rfcs).
+1.  Write a mini-RFC on the component you'd like to add, and send a PR. You can find [an example here](https://github.com/uber-web/baseui/tree/master/src/template-component/README.md).
 
 - It is ok, if your new component just implements the features you need, we may extend that later
 

docs/migrations/00520.md

@@ -131,4 +131,4 @@
 +  `overrides: {Root, ControlContainer, Placeholder, ValueContainer, SingleValue, MultiValue, InputContainer, Input, SelectArrow, ClearIcon, LoadingIndicator, SearchIcon, DropDown, DropDownOption, OptionContent}`
 ```
 
-#### See the [Select component RFC](https://github.com/uber-web/baseui/blob/master/rfcs/select-component.md) for the detailed API and full list of added props
+#### See the [Select component RFC](https://github.com/uber-web/baseui/blob/master/src/select/README.md) for the detailed API and full list of added props

package.json

@@ -13,7 +13,7 @@
   "repository": "uber-web/baseui",
   "scripts": {
     "lint:code": "eslint ./",
-    "lint:markdown": "markdownlint -c ./.markdownlint.json rfcs README.md",
+    "lint:markdown": "markdownlint -c ./.markdownlint.json proposals README.md",
     "lint": "yarn lint:code && yarn lint:markdown",
     "test": "yarn lint && yarn flow && yarn unit-test",
     "storybook": "start-storybook -p 6006",

src/button/README.md

@@ -81,11 +81,11 @@ Rough DOM composition:
   * `EndEnhancer?: ReactComponent | {props: {}, style: {}, component: ReactComponent}`
   * `LoadingSpinnerContainer?: ReactComponent | {props: {}, style: {}, component: ReactComponent}`
   * `LoadingSpinner?: ReactComponent | {props: {}, style: {}, component: ReactComponent}`
-* `size?: $Values<SIZE> = SIZE.default`
+* `size?: SIZE[string] = SIZE.default`
   * Defines the size of a button.
-* `shape?: $Values<SHAPE> = SHAPE.default`
+* `shape?: SHAPE[string] = SHAPE.default`
   * Defines the shape of a button.
-* `kind?: $Values<KIND> = KIND.primary`
+* `kind?: KIND[string] = KIND.primary`
   * Defines the kind (purpose) of a button
 * `isLoading?: boolean = false`
   * Show loading button style and spinner.
@@ -99,9 +99,9 @@ These properties are passed to every presentational (styled) component that is e
 `StyledBaseButton`, `StyledStartEnhancer`, `StyledEndEnhancer`, `StyledLoadingSpinner`,
 `StyledLoadingSpinnerContainer`
 
-* `$size?: $Values<SIZE> = SIZE.default`
-* `$shape?: $Values<SHAPE> = SHAPE.default`
-* `$kind?: $Values<KIND> = KIND.primary`
+* `$size?: SIZE[string] = SIZE.default`
+* `$shape?: SHAPE[string] = SHAPE.default`
+* `$kind?: KIND[string] = KIND.primary`
 * `$theme: theme`
 
 ## `KIND` Constant

src/checkbox/README.md

@@ -102,7 +102,7 @@ export default () => {
   * Check or uncheck the control.
 * `autoFocus?: boolean = false`
   Focus the checkbox on initial render.
-* `checkmarkType?: $Values<STYLE_TYPE> = STYLE_TYPE.default`
+* `checkmarkType?: STYLE_TYPE[string] = STYLE_TYPE.default`
   * the style to be applied to a checkmark.
 * `children?: React.Node = ''`
   * Component or String value for label of checkbox.
@@ -143,7 +143,7 @@ export default () => {
   * Initial state of an uncontrolled popover component.
     * `checked` - an initial checked state. Check or uncheck the control.
     * `isIndeterminate` - an initial indeterminate state. `checked` takes precedence over this value.
-* `stateReducer?: (type: $Values<STATE_TYPE>, nextState: {}, currentState: {}, e: SyntheticInputEvent<HTMLInputElement>) => nextState`
+* `stateReducer?: (type: STATE_TYPE[string], nextState: {}, currentState: {}, e: SyntheticInputEvent<HTMLInputElement>) => nextState`
   * A state change handler. Used to override default state transitions.
     * `type` - State change type.
     * `nextState` - A new state, provided by component transition, that will be set.
@@ -174,7 +174,7 @@ These properties are passed to every presentational (styled) component that is e
 
 * `$checked?: boolean = false`
   * Renders UI in 'checked' state.
-* `$checkmarkType?: $Values<STYLE_TYPE> = STYLE_TYPE.default`
+* `$checkmarkType?: STYLE_TYPE[string] = STYLE_TYPE.default`
   * Renders UI as checkmark or toggle switch.
 * `$disabled?: boolean = false`
   * Renders UI in 'disabled' state.

src/header-navigation/README.md

@@ -66,7 +66,7 @@ export default (props) => <HeaderNavigation
 
 ## `StyledNavigationList` API
 
-* `align: $Values<ALIGN> = undefined`
+* `align: ALIGN[string] = undefined`
   * Alignment of elements inside of navigation list.
 * `children?: React.Node = null`
   * All the children of NavigationList.

src/input/README.md

@@ -73,7 +73,7 @@ export default () => {
 * `initialState: {value: string} = {value: ''}`
   * Initial state of an uncontrolled input component.
     * `value` - an initial input value.
-* `stateReducer: (type: $Values<STATE_CHANGE_TYPE>', nextState: {}, currentState: {}, e: SyntheticEvent<HTMLInputElement>) => stateToSet: {}` - Optional
+* `stateReducer: (type: STATE_CHANGE_TYPE[string]', nextState: {}, currentState: {}, e: SyntheticEvent<HTMLInputElement>) => stateToSet: {}` - Optional
   * A state change handler. Used to override default state transitions.
     * `type` - A state change type.
     * `nextState` - A new state value to be set.

src/menu/README.md

@@ -123,7 +123,7 @@ export default () => (
 * `initialState?: {highlightedIndex: number} = {highlightedIndex: -1}`
   * Initial state of an uncontrolled popover component.
     * `highlightedIndex` - Determines which menu item should render highlighted.
-* `stateReducer?: (changeType: $Values<STATE_CHANGE_TYPES>, changes: {highlightedIndex: number}, currentState: {highlightedIndex: number}) => {highlightedIndex: number}`
+* `stateReducer?: (changeType: STATE_CHANGE_TYPES[string], changes: {highlightedIndex: number}, currentState: {highlightedIndex: number}) => {highlightedIndex: number}`
   * State reducer to intercept state changes and return new internal state
 * `onItemSelect?: ({item: ?Object}, event: KeyboardEvent) => void = () => {}`
 * `children?: Function = ({items: Array<any>, highlightedIndex: number, rootRef: React$ElementRef<*>, getRequiredItemProps: (item: Object) => ({key: string, id: string})}) => React.Node`
@@ -166,7 +166,7 @@ These properties are passed to every presentational (styled) component that is e
 
 * `$isHighlighted?: boolean = false`
   * Renders UI in 'highlighted' state.
-* `$size?: $Values<OPTION_LIST_SIZE> = OPTION_LIST_SIZE.default`
+* `$size?: OPTION_LIST_SIZE[string] = OPTION_LIST_SIZE.default`
   * Renders UI in defined scale.
 * `$theme: theme`
 

src/pagination/README.md

@@ -51,7 +51,7 @@ export default () => <StatefulPagination numPages={6} />;
 * `children: ({currentPage: number, onPageChange: number}) => React.Node`
 * `numPages: number`
   * Max number of pages.
-* `stateReducer?: (changeType: $Values<STATE_CHANGE_TYPE>, changes: {currentPage: number}, {currentPage: number}) => {currentPage: number}`
+* `stateReducer?: (changeType: STATE_CHANGE_TYPE[string], changes: {currentPage: number}, {currentPage: number}) => {currentPage: number}`
   * State reducer function.
 * `initialState?: {currentPage: number} = {currentPage: 1}`
   * The initial state.

src/popover/README.md

@@ -80,7 +80,7 @@ export default () => {
   * Event handler when popover is shown.
 * `onClose?: () => {}`
   * Event handler when popover is hidden.
-* `placement?: $Values<PLACEMENT> = PLACEMENT.auto`
+* `placement?: PLACEMENT[string] = PLACEMENT.auto`
   * How to position the popover relative to the target.
 * `content?: React.Node | () => React.Node = null`
   * Content to render within the popover when it's shown.
@@ -103,7 +103,7 @@ export default () => {
 
 * `isOpen?: boolean = false`
   * Whether or not to show the popover.
-* `placement?: $Values<PLACEMENT> = PLACEMENT.auto`
+* `placement?: PLACEMENT[string] = PLACEMENT.auto`
   * How to position the popover relative to the target.
 * `content?: React.Node | () => React.Node = null`
   * Content to render within the popover when it's shown.
@@ -138,7 +138,7 @@ These properties are passed to every presentational (styled) component that is e
   * Object of numeric top/left pixel positions to offset popover.
 * `$showArrow: boolean`
   * Propagated from the parent.
-* `$placement: $Values<PLACEMENT>`
+* `$placement: PLACEMENT[string]`
   * Runtime placement (may differ from placement prop if popover would have overflowed viewport).
 * `$ref: React.Ref<*>`
   * React ref for the popover element (should be passed down to dom element).

src/select/README.md

@@ -214,7 +214,7 @@ export default () => {
   * Defines if the select field is required to have a selection.
 * `searchable?: boolean = true`
   * Defines if the search functionality id enabled.
-* `type?: $Values<TYPE> = TYPE.select`
+* `type?: TYPE[string] = TYPE.select`
   * Defines type of the component to be in select or search mode. When set to `TYPE.search` the searh icon if rendered on the left and the select arrow icon is not rendered.
 * `value?: Array<{}> = []`
   * A current selected value(s). If a selected value has a `clearableValue` prop set to `true` it will be rendered as a disabled selected option that can't be cleared.
@@ -254,8 +254,8 @@ These properties are passed to every presentational (styled) component that is e
 * `$multi: boolean`
 * `$required: boolean`
 * `$searchable: boolean`
-* `$size: $Values<SIZE>`
-* `$type: $Values<TYPE>`
+* `$size: SIZE[string]`
+* `$type: TYPE[string]`
 
 * `$width: string` - is passed to the `Input` element only
 

src/tag/README.md

@@ -56,7 +56,7 @@ export default () => {
 
 ## `Tag` API
 
-* `color?: $Values<KIND> | string = '#000'`:
+* `color?: KIND[string] | string = '#000'`:
   * The color theme to be applied to a Tag. Default is `KIND.primary`.
 * `children: React.Node`: - Required.
   * Component or String value for label of tag. Default is empty string.

src/template-component/README.md

@@ -69,7 +69,7 @@ export default () => {
 * `initialState?: {stateField: boolean} = {stateField: false}`
   * Initial state of stateful container component.
     * `stateField` - a value to maintain this components state.
-* `stateReducer?: (type: $Values<CONSTANT>, nextState: {}, currentState: {}) => nextState`
+* `stateReducer?: (type: CONSTANT[string], nextState: {}, currentState: {}) => nextState`
   * A state change handler. Used to override default state transitions.
     * `type` - State change type.
     * `nextState` - A new state, provided by component transition, that will be set.

src/toast/README.md

@@ -72,7 +72,7 @@ export default () => {
     to dismiss the notification and can be used as a handler for an action inside the toast content.
 * `closeable?: boolean = true`
   * When set to true a close button is displayed and the notification can be dismissed by a user.
-* `kind?: $Values<KIND> = KIND.info`
+* `kind?: KIND[string] = KIND.info`
   * Defines the type of notification.
 * `onClose?: () => void = () => {}`
   * A callback function called when a notification is dismissed.
@@ -93,7 +93,7 @@ export default () => {
 
 ## `ToasterContainer` API
 
-* `placement?: $Values<PLACEMENT> = PLACEMENT.top`
+* `placement?: PLACEMENT[string] = PLACEMENT.top`
   * Position of a toast notification container relative to the browser window.
 * `usePortal?: boolean = true`
   * Defines if the portal is used to append a container to the `body` element. In both cases the container
@@ -150,8 +150,8 @@ These properties are passed to every presentational (styled) component of a Toas
 
 `StyledRoot`, `StyledBody`, `StyledCloseIcon`
 
-* `$kind: $Values<KIND>`
-* `$placement: $Values<PLACEMENT>`
+* `$kind: KIND[string]`
+* `$placement: PLACEMENT[string]`
 * `$theme: theme`
 
 ## Accessibility