Skip to content

Commit 2e3111f

Browse files
oliviertassinarioliviertassinari
committed
polish
1 parent 8f29619 commit 2e3111f

23 files changed

+264
-168
lines changed

‎docs/pages/api-docs/grid.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ Any other props supplied will be provided to the root element (native element).
5454

5555
| Rule name | Global class | Description |
5656
|:-----|:-------------|:------------|
57-
| <span class="prop-name">root</span> | <span class="prop-name">.MuiGrid-root</span> | Styles applied to the root element
57+
| <span class="prop-name">root</span> | <span class="prop-name">.MuiGrid-root</span> | Styles applied to the root element.
5858
| <span class="prop-name">container</span> | <span class="prop-name">.MuiGrid-container</span> | Styles applied to the root element if `container={true}`.
5959
| <span class="prop-name">item</span> | <span class="prop-name">.MuiGrid-item</span> | Styles applied to the root element if `item={true}`.
6060
| <span class="prop-name">zeroMinWidth</span> | <span class="prop-name">.MuiGrid-zeroMinWidth</span> | Styles applied to the root element if `zeroMinWidth={true}`.

‎docs/pages/api-docs/paper.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ Any other props supplied will be provided to the root element (native element).
4545
|:-----|:-------------|:------------|
4646
| <span class="prop-name">root</span> | <span class="prop-name">.MuiPaper-root</span> | Styles applied to the root element.
4747
| <span class="prop-name">rounded</span> | <span class="prop-name">.MuiPaper-rounded</span> | Styles applied to the root element if `square={false}`.
48-
| <span class="prop-name">outlined</span> | <span class="prop-name">.MuiPaper-outlined</span> | Styles applied to the root element if `variant="outlined"`
48+
| <span class="prop-name">outlined</span> | <span class="prop-name">.MuiPaper-outlined</span> | Styles applied to the root element if `variant="outlined"`.
4949
| <span class="prop-name">elevation0</span> | <span class="prop-name">.MuiPaper-elevation0</span> |
5050
| <span class="prop-name">elevation1</span> | <span class="prop-name">.MuiPaper-elevation1</span> |
5151
| <span class="prop-name">elevation2</span> | <span class="prop-name">.MuiPaper-elevation2</span> |

‎docs/pages/api-docs/popover.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ Any other props supplied will be provided to the root element ([Modal](/api/moda
6161

6262
| Rule name | Global class | Description |
6363
|:-----|:-------------|:------------|
64-
| <span class="prop-name">root</span> | <span class="prop-name">.MuiPopover-root</span> | Styles applied to the root element
64+
| <span class="prop-name">root</span> | <span class="prop-name">.MuiPopover-root</span> | Styles applied to the root element.
6565
| <span class="prop-name">paper</span> | <span class="prop-name">.MuiPopover-paper</span> | Styles applied to the `Paper` component.
6666

6767
You can override the style of the component thanks to one of these customization points:

‎docs/pages/api-docs/step-label.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@ Any other props supplied will be provided to the root element (native element).
4646
| Rule name | Global class | Description |
4747
|:-----|:-------------|:------------|
4848
| <span class="prop-name">root</span> | <span class="prop-name">.MuiStepLabel-root</span> | Styles applied to the root element.
49-
| <span class="prop-name">horizontal</span> | <span class="prop-name">.MuiStepLabel-horizontal</span> | Styles applied to the root element if `orientation="horizontal".
50-
| <span class="prop-name">vertical</span> | <span class="prop-name">.MuiStepLabel-vertical</span> | Styles applied to the root element if `orientation="vertical".
49+
| <span class="prop-name">horizontal</span> | <span class="prop-name">.MuiStepLabel-horizontal</span> | Styles applied to the root element if `orientation="horizontal"`.
50+
| <span class="prop-name">vertical</span> | <span class="prop-name">.MuiStepLabel-vertical</span> | Styles applied to the root element if `orientation="vertical"`.
5151
| <span class="prop-name">label</span> | <span class="prop-name">.MuiStepLabel-label</span> | Styles applied to the `Typography` component which wraps `children`.
5252
| <span class="prop-name">active</span> | <span class="prop-name">.MuiStepLabel-active</span> | Pseudo-class applied to the `Typography` component if `active={true}`.
5353
| <span class="prop-name">completed</span> | <span class="prop-name">.MuiStepLabel-completed</span> | Pseudo-class applied to the `Typography` component if `completed={true}`.

‎docs/pages/api-docs/tab-scroll-button.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
3+
import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
4+
5+
const pageFilename = 'api/tab-scroll-button';
6+
const requireRaw = require.context('!raw-loader!./', false, /\/tab-scroll-button\.md$/);
7+
8+
export default function Page({ docs }) {
9+
return <MarkdownDocs docs={docs} />;
10+
}
11+
12+
Page.getInitialProps = () => {
13+
const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
14+
return { demos, docs };
15+
};

‎docs/pages/api-docs/tab-scroll-button.md

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
filename: /packages/material-ui/src/TabScrollButton/TabScrollButton.js
3+
---
4+
5+
<!--- This documentation is automatically generated, do not try to edit it. -->
6+
7+
# TabScrollButton API
8+
9+
<p class="description">The API documentation of the TabScrollButton React component. Learn more about the props and the CSS customization points.</p>
10+
11+
## Import
12+
13+
```js
14+
import TabScrollButton from '@material-ui/core/TabScrollButton';
15+
// or
16+
import { TabScrollButton } from '@material-ui/core';
17+
```
18+
19+
You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
20+
21+
22+
23+
## Component name
24+
25+
The `MuiTabScrollButton` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
26+
27+
## Props
28+
29+
| Name | Type | Default | Description |
30+
|:-----|:-----|:--------|:------------|
31+
| <span class="prop-name">children</span> | <span class="prop-type">node</span> | | The content of the component. |
32+
| <span class="prop-name">classes</span> | <span class="prop-type">object</span> | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
33+
| <span class="prop-name required">direction&nbsp;*</span> | <span class="prop-type">'left'<br>&#124;&nbsp;'right'</span> | | Which direction should the button indicate? |
34+
| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | | If `true`, the element will be disabled. |
35+
| <span class="prop-name required">orientation&nbsp;*</span> | <span class="prop-type">'horizontal'<br>&#124;&nbsp;'vertical'</span> | | The tabs orientation (layout flow direction). |
36+
37+
The `ref` is forwarded to the root element.
38+
39+
Any other props supplied will be provided to the root element (native element).
40+
41+
## CSS
42+
43+
| Rule name | Global class | Description |
44+
|:-----|:-------------|:------------|
45+
| <span class="prop-name">root</span> | <span class="prop-name">.MuiTabScrollButton-root</span> | Styles applied to the root element.
46+
| <span class="prop-name">vertical</span> | <span class="prop-name">.MuiTabScrollButton-vertical</span> | Styles applied to the root element if `orientation="vertical"`.
47+
| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
48+
49+
You can override the style of the component thanks to one of these customization points:
50+
51+
- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
52+
- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
53+
- With a theme and an [`overrides` property](/customization/globals/#css).
54+
55+
If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/TabScrollButton/TabScrollButton.js) for more detail.
56+
57+
## Demos
58+
59+
- [Tabs](/components/tabs/)
60+

‎docs/pages/api-docs/tabs.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@ The `MuiTabs` name can be used for providing [default props](/customization/glob
3737
| <span class="prop-name">onChange</span> | <span class="prop-type">func</span> | | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: any) => void`<br>*event:* The event source of the callback<br>*value:* We default to the index of the child (number) |
3838
| <span class="prop-name">orientation</span> | <span class="prop-type">'horizontal'<br>&#124;&nbsp;'vertical'</span> | <span class="prop-default">'horizontal'</span> | The tabs orientation (layout flow direction). |
3939
| <span class="prop-name">ScrollButtonComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">TabScrollButton</span> | The component used to render the scroll buttons. |
40-
| <span class="prop-name">scrollButtonProps</span> | <span class="prop-type">object</span> | | Determine behavior of scroll buttons when tabs are set to scroll:<br>- `auto` will only present them when not all the items are visible. - `desktop` will only present them on medium and larger viewports. - `on` will always present them. - `off` will never present them. |
41-
| <span class="prop-name">scrollButtons</span> | <span class="prop-type">'auto'<br>&#124;&nbsp;'desktop'<br>&#124;&nbsp;'on'<br>&#124;&nbsp;'off'</span> | <span class="prop-default">'auto'</span> | |
40+
| <span class="prop-name">TabScrollButtonProps</span> | <span class="prop-type">object</span> | | Props applied to the [`TabScrollButton`](/api/tab-scroll-button/) element. |
41+
| <span class="prop-name">scrollButtons</span> | <span class="prop-type">'auto'<br>&#124;&nbsp;'desktop'<br>&#124;&nbsp;'on'<br>&#124;&nbsp;'off'</span> | <span class="prop-default">'auto'</span> | Determine behavior of scroll buttons when tabs are set to scroll:<br>- `auto` will only present them when not all the items are visible. - `desktop` will only present them on medium and larger viewports. - `on` will always present them. - `off` will never present them. |
4242
| <span class="prop-name">TabIndicatorProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | Props applied to the tab indicator element. |
4343
| <span class="prop-name">textColor</span> | <span class="prop-type">'secondary'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'inherit'</span> | <span class="prop-default">'inherit'</span> | Determines the color of the `Tab`. |
4444
| <span class="prop-name">value</span> | <span class="prop-type">any</span> | | The value of the currently selected `Tab`. If you don't want any selected `Tab`, you can set this property to `false`. |

‎docs/src/pages/components/tabs/tabs.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Tabs React component
3-
components: Tabs, Tab
3+
components: Tabs, Tab, TabScrollButton
44
---
55

66
# Tabs

‎packages/material-ui/src/Grid/Grid.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ function generateGutter(theme, breakpoint) {
9797
// flexWrap: 'nowrap',
9898
// justifyContent: 'flex-start',
9999
export const styles = (theme) => ({
100-
/* Styles applied to the root element */
100+
/* Styles applied to the root element. */
101101
root: {},
102102
/* Styles applied to the root element if `container={true}`. */
103103
container: {

‎packages/material-ui/src/Paper/Paper.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const styles = (theme) => {
2323
rounded: {
2424
borderRadius: theme.shape.borderRadius,
2525
},
26-
/* Styles applied to the root element if `variant="outlined"` */
26+
/* Styles applied to the root element if `variant="outlined"`. */
2727
outlined: {
2828
border: `1px solid ${theme.palette.divider}`,
2929
},

‎packages/material-ui/src/Popover/Popover.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ function getAnchorEl(anchorEl) {
6868
}
6969

7070
export const styles = {
71-
/* Styles applied to the root element */
71+
/* Styles applied to the root element. */
7272
root: {},
7373
/* Styles applied to the `Paper` component. */
7474
paper: {

‎packages/material-ui/src/StepLabel/StepLabel.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ export const styles = (theme) => ({
1717
cursor: 'default',
1818
},
1919
},
20-
/* Styles applied to the root element if `orientation="horizontal". */
20+
/* Styles applied to the root element if `orientation="horizontal"`. */
2121
horizontal: {},
22-
/* Styles applied to the root element if `orientation="vertical". */
22+
/* Styles applied to the root element if `orientation="vertical"`. */
2323
vertical: {},
2424
/* Styles applied to the `Typography` component which wraps `children`. */
2525
label: {

‎packages/material-ui/src/TabScrollButton/TabScrollButton.d.ts

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import * as React from 'react';
2+
import { StandardProps } from '@material-ui/core';
3+
4+
export interface TabScrollButtonProps
5+
extends StandardProps<React.HTMLAttributes<HTMLDivElement>, TabScrollButtonClassKey> {
6+
/**
7+
* Which direction should the button indicate?
8+
*/
9+
direction: 'left' | 'right';
10+
/**
11+
* If `true`, the element will be disabled.
12+
*/
13+
disabled?: boolean;
14+
/**
15+
* The tabs orientation (layout flow direction).
16+
*/
17+
orientation: 'horizontal' | 'vertical';
18+
}
19+
20+
export type TabScrollButtonClassKey = 'root' | 'vertical' | 'disabled';
21+
/**
22+
*
23+
* Demos:
24+
*
25+
* - [Tabs](https://material-ui.com/components/tabs/)
26+
*
27+
* API:
28+
*
29+
* - [TabScrollButton API](https://material-ui.com/api/tab-scroll-button/)
30+
*/
31+
export default function TabScrollButton(props: TabScrollButtonProps): JSX.Element;

‎packages/material-ui/src/Tabs/TabScrollButton.js ‎packages/material-ui/src/TabScrollButton/TabScrollButton.js

+23-10
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,29 @@ import withStyles from '../styles/withStyles';
88
import ButtonBase from '../ButtonBase';
99

1010
export const styles = {
11+
/* Styles applied to the root element. */
1112
root: {
1213
width: 40,
1314
flexShrink: 0,
15+
opacity: 0.8,
16+
'&$disabled': {
17+
opacity: 0,
18+
},
1419
},
20+
/* Styles applied to the root element if `orientation="vertical"`. */
1521
vertical: {
1622
width: '100%',
1723
height: 40,
1824
'& svg': {
1925
transform: 'rotate(90deg)',
2026
},
2127
},
22-
disabled: {
23-
opacity: 0,
24-
},
28+
/* Pseudo-class applied to the root element if `disabled={true}`. */
29+
disabled: {},
2530
};
2631

2732
const TabScrollButton = React.forwardRef(function TabScrollButton(props, ref) {
28-
const { classes, className: classNameProp, direction, orientation, visible, ...other } = props;
33+
const { classes, className: classNameProp, direction, orientation, disabled, ...other } = props;
2934

3035
return (
3136
<ButtonBase
@@ -34,7 +39,7 @@ const TabScrollButton = React.forwardRef(function TabScrollButton(props, ref) {
3439
classes.root,
3540
{
3641
[classes.vertical]: orientation === 'vertical',
37-
[classes.disabled]: !visible,
42+
[classes.disabled]: disabled,
3843
},
3944
classNameProp,
4045
)}
@@ -53,11 +58,19 @@ const TabScrollButton = React.forwardRef(function TabScrollButton(props, ref) {
5358
});
5459

5560
TabScrollButton.propTypes = {
61+
// ----------------------------- Warning --------------------------------
62+
// | These PropTypes are generated from the TypeScript type definitions |
63+
// | To update them edit the d.ts file and run "yarn proptypes" |
64+
// ----------------------------------------------------------------------
65+
/**
66+
* The content of the component.
67+
*/
68+
children: PropTypes.node,
5669
/**
5770
* Override or extend the styles applied to the component.
5871
* See [CSS API](#css) below for more details.
5972
*/
60-
classes: PropTypes.object.isRequired,
73+
classes: PropTypes.object,
6174
/**
6275
* @ignore
6376
*/
@@ -67,13 +80,13 @@ TabScrollButton.propTypes = {
6780
*/
6881
direction: PropTypes.oneOf(['left', 'right']).isRequired,
6982
/**
70-
* The tabs orientation (layout flow direction).
83+
* If `true`, the element will be disabled.
7184
*/
72-
orientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
85+
disabled: PropTypes.bool,
7386
/**
74-
* Should the button be present or just consume space.
87+
* The tabs orientation (layout flow direction).
7588
*/
76-
visible: PropTypes.bool.isRequired,
89+
orientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
7790
};
7891

7992
export default withStyles(styles, { name: 'MuiTabScrollButton' })(TabScrollButton);

‎packages/material-ui/src/TabScrollButton/TabScrollButton.test.js

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import * as React from 'react';
2+
import { expect } from 'chai';
3+
import { getClasses, createMount } from '@material-ui/core/test-utils';
4+
import { createClientRender } from 'test/utils/createClientRender';
5+
import TabScrollButton from './TabScrollButton';
6+
import describeConformance from '../test-utils/describeConformance';
7+
8+
describe('<TabScrollButton />', () => {
9+
const defaultProps = {
10+
direction: 'left',
11+
orientation: 'horizontal',
12+
};
13+
const render = createClientRender();
14+
let classes;
15+
let mount;
16+
17+
before(() => {
18+
mount = createMount({ strict: true });
19+
classes = getClasses(<TabScrollButton {...defaultProps} />);
20+
});
21+
22+
describeConformance(<TabScrollButton {...defaultProps} />, () => ({
23+
classes,
24+
inheritComponent: 'div',
25+
mount,
26+
refInstanceof: window.HTMLDivElement,
27+
after: () => mount.cleanUp(),
28+
}));
29+
30+
it('should render as a button with the root class', () => {
31+
const { container } = render(<TabScrollButton {...defaultProps} />);
32+
const button = container.firstChild;
33+
expect(button).to.have.class(classes.root);
34+
});
35+
36+
describe('prop: disabled', () => {
37+
it('should render with a opacity of 0', () => {
38+
const { container } = render(<TabScrollButton {...defaultProps} disabled />);
39+
const button = container.firstChild;
40+
expect(button).to.have.class(classes.disabled);
41+
});
42+
});
43+
44+
describe('prop: direction', () => {
45+
it('should render with the left icon', () => {
46+
const { container } = render(
47+
<TabScrollButton {...defaultProps} {...defaultProps} direction="left" disabled />,
48+
);
49+
expect(
50+
container.querySelectorAll('svg[data-mui-test="KeyboardArrowLeftIcon"]').length,
51+
).to.equal(1);
52+
});
53+
54+
it('should render with the right icon', () => {
55+
const { container } = render(
56+
<TabScrollButton {...defaultProps} {...defaultProps} direction="right" disabled />,
57+
);
58+
expect(
59+
container.querySelectorAll('svg[data-mui-test="KeyboardArrowRightIcon"]').length,
60+
).to.equal(1);
61+
});
62+
});
63+
});

‎packages/material-ui/src/TabScrollButton/index.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default } from './TabScrollButton';
2+
export * from './TabScrollButton';

‎packages/material-ui/src/TabScrollButton/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './TabScrollButton';

0 commit comments

Comments
 (0)