[core] Better distinction between the private and public components

mui · Apr 17, 2018 · b0196c2 · b0196c2
1 parent e85802d
commit b0196c2
Show file tree

Hide file tree

Showing 14 changed files with 120 additions and 24 deletions.
diff --git a/.size-limit b/.size-limit
@@ -15,7 +15,7 @@
     "name": "The main bundle of the docs",
     "webpack": false,
     "path": ".next/main.js",
-    "limit": "185 KB"
+    "limit": "186 KB"
   },
   {
     "name": "The home page of the docs",

diff --git a/packages/material-ui/src/ButtonBase/TouchRipple.js b/packages/material-ui/src/ButtonBase/TouchRipple.js
@@ -87,9 +87,6 @@ export const styles = theme => ({
   },
 });
 
-/**
- * @ignore - internal component.
- */
 class TouchRipple extends React.Component {
   state = {
     nextKey: 0,

diff --git a/packages/material-ui/src/Hidden/HiddenCss.js b/packages/material-ui/src/Hidden/HiddenCss.js
@@ -151,4 +151,4 @@ HiddenCss.propTypes = {
   xsUp: PropTypes.bool,
 };
 
-export default withStyles(styles, { name: 'MuiHiddenCss' })(HiddenCss);
+export default withStyles(styles)(HiddenCss);
diff --git a/packages/material-ui/src/Input/Textarea.js b/packages/material-ui/src/Input/Textarea.js
@@ -231,4 +231,4 @@ Textarea.defaultProps = {
   rows: 1,
 };
 
-export default withStyles(styles, { name: 'MuiTextarea' })(Textarea);
+export default withStyles(styles)(Textarea);
diff --git a/packages/material-ui/src/Stepper/StepConnector.js b/packages/material-ui/src/Stepper/StepConnector.js
@@ -84,4 +84,4 @@ StepConnector.defaultProps = {
   orientation: 'horizontal',
 };
 
-export default withStyles(styles, { name: 'MuiStepConnector' })(StepConnector);
+export default withStyles(styles)(StepConnector);
diff --git a/packages/material-ui/src/Stepper/StepPositionIcon.js b/packages/material-ui/src/Stepper/StepPositionIcon.js
@@ -46,4 +46,4 @@ StepPositionIcon.propTypes = {
   position: PropTypes.node,
 };
 
-export default withStyles(styles, { name: 'MuiStepPositionIcon' })(StepPositionIcon);
+export default withStyles(styles)(StepPositionIcon);
diff --git a/packages/material-ui/src/Table/TablePaginationActions.js b/packages/material-ui/src/Table/TablePaginationActions.js
@@ -97,6 +97,4 @@ TablePaginationActions.propTypes = {
   theme: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles, { name: 'MuiTablePaginationActions', withTheme: true })(
-  TablePaginationActions,
-);
+export default withStyles(styles, { withTheme: true })(TablePaginationActions);
diff --git a/packages/material-ui/src/Tabs/TabIndicator.js b/packages/material-ui/src/Tabs/TabIndicator.js
@@ -51,4 +51,4 @@ TabIndicator.propTypes = {
   color: PropTypes.oneOf(['primary', 'secondary']),
 };
 
-export default withStyles(styles, { name: 'MuiTabIndicator' })(TabIndicator);
+export default withStyles(styles)(TabIndicator);
diff --git a/packages/material-ui/src/internal/SwitchBase.js b/packages/material-ui/src/internal/SwitchBase.js
@@ -31,9 +31,6 @@ export const styles = {
   },
 };
 
-/**
- * @ignore - internal component.
- */
 class SwitchBase extends React.Component {
   constructor(props, context) {
     super(props, context);

diff --git a/packages/material-ui/src/styles/overrides.d.ts b/packages/material-ui/src/styles/overrides.d.ts
@@ -64,7 +64,6 @@ import { SnackbarClassKey } from '../Snackbar/Snackbar';
 import { SnackbarContentClassKey } from '../Snackbar/SnackbarContent';
 import { StepClasskey } from '../Stepper/Step';
 import { StepButtonClasskey } from '../Stepper/StepButton';
-import { StepConnectorClasskey } from '../Stepper/StepConnector';
 import { StepContentClasskey } from '../Stepper/StepContent';
 import { StepIconClasskey } from '../Stepper/StepIcon';
 import { StepLabelClasskey } from '../Stepper/StepLabel';
@@ -80,7 +79,6 @@ import { TablePaginationClassKey } from '../Table/TablePagination';
 import { TableRowClassKey } from '../Table/TableRow';
 import { TableSortLabelClassKey } from '../Table/TableSortLabel';
 import { TabsClassKey } from '../Tabs/Tabs';
-import { TextareaClassKey } from '../Input/Textarea';
 import { ToolbarClassKey } from '../Toolbar/Toolbar';
 import { TooltipClassKey } from '../Tooltip/Tooltip';
 import { TouchRippleClassKey } from '../ButtonBase/TouchRipple';
@@ -99,7 +97,7 @@ type ComponentNameToClassKey = {
   MuiBottomNavigationAction: BottomNavigationActionClassKey;
   MuiButton: ButtonClassKey;
   MuiButtonBase: ButtonBaseClassKey;
-  // MuiCard: CardClassKey;
+  MuiCard: CardClassKey;
   MuiCardActions: CardActionsClassKey;
   MuiCardContent: CardContentClassKey;
   MuiCardHeader: CardHeaderClassKey;
@@ -144,20 +142,16 @@ type ComponentNameToClassKey = {
   MuiListSubheader: ListSubheaderClassKey;
   MuiMenu: MenuClassKey;
   MuiMenuItem: MenuItemClassKey;
-  // MuiMenuList: MenuListClassKey;
   MuiMobileStepper: MobileStepperClassKey;
   MuiModal: ModalClassKey;
   MuiPaper: PaperClassKey;
   MuiPopover: PopoverClassKey;
   MuiRadio: RadioClassKey;
-  // MuiRadioGroup: RadioGroupClassKey;
   MuiSelect: SelectClassKey;
-  // MuiSelectInput: SelectInputClassKey;
   MuiSnackbar: SnackbarClassKey;
   MuiSnackbarContent: SnackbarContentClassKey;
   MuiStep: StepClasskey;
   MuiStepButton: StepButtonClasskey;
-  MuiStepConnector: StepConnectorClasskey;
   MuiStepContent: StepContentClasskey;
   MuiStepIcon: StepIconClasskey;
   MuiStepLabel: StepLabelClasskey;
@@ -172,8 +166,6 @@ type ComponentNameToClassKey = {
   MuiTableRow: TableRowClassKey;
   MuiTableSortLabel: TableSortLabelClassKey;
   MuiTabs: TabsClassKey;
-  MuiTextarea: TextareaClassKey;
-  // MuiTextField: TextFieldClassKey;
   MuiToolbar: ToolbarClassKey;
   MuiTooltip: TooltipClassKey;
   MuiTouchRipple: TouchRippleClassKey;

diff --git a/pages/api/switch-base.js b/pages/api/switch-base.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import withRoot from 'docs/src/modules/components/withRoot';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import markdown from './switch-base.md';
+
+function Page() {
+  return <MarkdownDocs markdown={markdown} />;
+}
+
+export default withRoot(Page);
diff --git a/pages/api/switch-base.md b/pages/api/switch-base.md
@@ -0,0 +1,53 @@
+---
+filename: /packages/material-ui/src/internal/SwitchBase.js
+---
+
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# SwitchBase
+
+
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| <span class="prop-name">checked</span> | <span class="prop-type">union:&nbsp;bool&nbsp;&#124;<br>&nbsp;string<br> |  | If `true`, the component is checked. |
+| <span class="prop-name required">checkedIcon *</span> | <span class="prop-type">node |  | The icon to display when the component is checked. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool |  | If `true`, the switch will be disabled. |
+| <span class="prop-name">disableRipple</span> | <span class="prop-type">bool |  | If `true`, the ripple effect will be disabled. |
+| <span class="prop-name required">icon *</span> | <span class="prop-type">node |  | The icon to display when the component is unchecked. |
+| <span class="prop-name">id</span> | <span class="prop-type">string |  | The id of the `input` element. |
+| <span class="prop-name">indeterminate</span> | <span class="prop-type">bool |  | If `true`, the component appears indeterminate. |
+| <span class="prop-name">indeterminateIcon</span> | <span class="prop-type">node |  | The icon to display when the component is indeterminate. |
+| <span class="prop-name">inputProps</span> | <span class="prop-type">object |  | Properties applied to the `input` element. |
+| <span class="prop-name">inputRef</span> | <span class="prop-type">func |  | Use that property to pass a ref callback to the native input component. |
+| <span class="prop-name">name</span> | <span class="prop-type">string |  |  |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func |  | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object, checked: boolean) => void`<br>*event:* The event source of the callback. You can pull out the new value by accessing `event.target.checked`.<br>*checked:* The `checked` value of the switch |
+| <span class="prop-name">type</span> | <span class="prop-type">string | <span class="prop-default">'checkbox'</span> | The input component property `type`. |
+| <span class="prop-name">value</span> | <span class="prop-type">string |  | The value of the component. |
+
+Any other properties supplied will be [spread to the root element](/guides/api#spread).
+
+## CSS API
+
+You can override all the class names injected by Material-UI thanks to the `classes` property.
+This property accepts the following keys:
+- `root`
+- `checked`
+- `disabled`
+- `input`
+
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
+and the [implementation of the component](https://github.com/mui-org/material-ui/tree/v1-beta/packages/material-ui/src/internal/SwitchBase.js)
+for more detail.
+
+If using the `overrides` key of the theme as documented
+[here](/customization/themes#customizing-all-instances-of-a-component-type),
+you need to use the following style sheet name: `MuiSwitchBase`.
+
+## Inheritance
+
+The properties of the [IconButton](/api/icon-button) component are also available.
+
diff --git a/pages/api/touch-ripple.js b/pages/api/touch-ripple.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import withRoot from 'docs/src/modules/components/withRoot';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import markdown from './touch-ripple.md';
+
+function Page() {
+  return <MarkdownDocs markdown={markdown} />;
+}
+
+export default withRoot(Page);
diff --git a/pages/api/touch-ripple.md b/pages/api/touch-ripple.md
@@ -0,0 +1,39 @@
+---
+filename: /packages/material-ui/src/ButtonBase/TouchRipple.js
+---
+
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# TouchRipple
+
+
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| <span class="prop-name">center</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the ripple starts at the center of the component rather than at the point of interaction. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+
+Any other properties supplied will be [spread to the root element](/guides/api#spread).
+
+## CSS API
+
+You can override all the class names injected by Material-UI thanks to the `classes` property.
+This property accepts the following keys:
+- `root`
+- `ripple`
+- `rippleVisible`
+- `ripplePulsate`
+- `child`
+- `childLeaving`
+- `childPulsate`
+
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
+and the [implementation of the component](https://github.com/mui-org/material-ui/tree/v1-beta/packages/material-ui/src/ButtonBase/TouchRipple.js)
+for more detail.
+
+If using the `overrides` key of the theme as documented
+[here](/customization/themes#customizing-all-instances-of-a-component-type),
+you need to use the following style sheet name: `MuiTouchRipple`.
+