diff --git a/.size-limit.js b/.size-limit.js
index 31ac96345df8f3..0fd6f2e7ad947a 100644
--- a/.size-limit.js
+++ b/.size-limit.js
@@ -22,7 +22,7 @@ module.exports = [
name: 'The size of the @material-ui/core modules',
webpack: true,
path: 'packages/material-ui/build/index.js',
- limit: '95 KB',
+ limit: '94.9 KB',
},
{
name: 'The size of the @material-ui/styles modules',
diff --git a/packages/material-ui/src/Tabs/ScrollbarSize.js b/packages/material-ui/src/Tabs/ScrollbarSize.js
index 1d74aba5efef7a..a9c845d6b186e7 100644
--- a/packages/material-ui/src/Tabs/ScrollbarSize.js
+++ b/packages/material-ui/src/Tabs/ScrollbarSize.js
@@ -4,11 +4,12 @@ import EventListener from 'react-event-listener';
import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb.
const styles = {
- width: 100,
- height: 100,
+ width: 90,
+ height: 90,
position: 'absolute',
- top: -10000,
+ top: -9000,
overflow: 'scroll',
+ // Support IE 11
msOverflowStyle: 'scrollbar',
};
@@ -23,13 +24,11 @@ class ScrollbarSize extends React.Component {
if (typeof window !== 'undefined') {
this.handleResize = debounce(() => {
- const { onChange } = this.props;
-
const prevHeight = this.scrollbarHeight;
- const prevWidth = this.scrollbarWidth;
this.setMeasurements();
- if (prevHeight !== this.scrollbarHeight || prevWidth !== this.scrollbarWidth) {
- onChange({ scrollbarHeight: this.scrollbarHeight, scrollbarWidth: this.scrollbarWidth });
+
+ if (prevHeight !== this.scrollbarHeight) {
+ this.props.onChange(this.scrollbarHeight);
}
}, 166); // Corresponds to 10 frames at 60 Hz.
}
@@ -37,16 +36,17 @@ class ScrollbarSize extends React.Component {
componentDidMount() {
this.setMeasurements();
- this.props.onLoad({
- scrollbarHeight: this.scrollbarHeight,
- scrollbarWidth: this.scrollbarWidth,
- });
+ this.props.onChange(this.scrollbarHeight);
}
componentWillUnmount() {
this.handleResize.clear();
}
+ handleRef = ref => {
+ this.nodeRef = ref;
+ };
+
setMeasurements = () => {
const nodeRef = this.nodeRef;
@@ -55,29 +55,20 @@ class ScrollbarSize extends React.Component {
}
this.scrollbarHeight = nodeRef.offsetHeight - nodeRef.clientHeight;
- this.scrollbarWidth = nodeRef.offsetWidth - nodeRef.clientWidth;
};
render() {
- const { onChange } = this.props;
-
return (
-
- {onChange ?
: null}
-
{
- this.nodeRef = ref;
- }}
- />
-
+
+
+
+
);
}
}
ScrollbarSize.propTypes = {
onChange: PropTypes.func.isRequired,
- onLoad: PropTypes.func.isRequired,
};
export default ScrollbarSize;
diff --git a/packages/material-ui/src/Tabs/ScrollbarSize.test.js b/packages/material-ui/src/Tabs/ScrollbarSize.test.js
index b7f0df0c35e6eb..b306c43de79dce 100644
--- a/packages/material-ui/src/Tabs/ScrollbarSize.test.js
+++ b/packages/material-ui/src/Tabs/ScrollbarSize.test.js
@@ -7,7 +7,6 @@ import ScrollbarSize from './ScrollbarSize';
describe('
', () => {
const defaultProps = {
- onLoad: () => {},
onChange: () => {},
};
let clock;
@@ -20,7 +19,7 @@ describe('
', () => {
clock.restore();
});
- describe('prop: onLoad', () => {
+ describe('mount', () => {
let wrapper;
afterEach(() => {
@@ -28,20 +27,16 @@ describe('
', () => {
});
it('should not call on initial load', () => {
- const onLoad = spy();
+ const onChange = spy();
wrapper = mount(
);
- assert.strictEqual(onLoad.callCount, 0, 'should not have been called');
+ assert.strictEqual(onChange.callCount, 0);
});
it('should call on initial load', () => {
- const onLoad = spy();
- wrapper = mount(
);
- assert.strictEqual(onLoad.callCount, 1, 'should have been called once');
- assert.strictEqual(
- onLoad.calledWith({ scrollbarHeight: 0, scrollbarWidth: 0 }),
- true,
- 'should have been called with expected sizes',
- );
+ const onChange = spy();
+ wrapper = mount(
);
+ assert.strictEqual(onChange.callCount, 1);
+ assert.strictEqual(onChange.calledWith(0), true);
});
});
@@ -56,26 +51,22 @@ describe('
', () => {
instance.nodeRef = {
offsetHeight: 17,
clientHeight: 0,
- offsetWidth: 17,
- clientWidth: 0,
};
});
it('should call on first resize event', () => {
+ assert.strictEqual(onChange.callCount, 1);
wrapper.find(EventListener).simulate('resize');
clock.tick(166);
- assert.strictEqual(onChange.callCount, 1, 'should have been called once');
- assert.strictEqual(
- onChange.calledWith({ scrollbarHeight: 17, scrollbarWidth: 17 }),
- true,
- 'should have been called with expected sizes',
- );
+ assert.strictEqual(onChange.callCount, 2);
+ assert.strictEqual(onChange.calledWith(17), true);
});
it('should not call on second resize event', () => {
+ assert.strictEqual(onChange.callCount, 1);
wrapper.find(EventListener).simulate('resize');
clock.tick(166);
- assert.strictEqual(onChange.callCount, 1, 'should only have been called once');
+ assert.strictEqual(onChange.callCount, 2);
});
});
});
diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js
index ef9198a3c1ce01..5b6f18160a00bc 100644
--- a/packages/material-ui/src/Tabs/Tabs.js
+++ b/packages/material-ui/src/Tabs/Tabs.js
@@ -114,10 +114,7 @@ class Tabs extends React.Component {
const { classes, scrollable, ScrollButtonComponent, scrollButtons, theme } = this.props;
const conditionalElements = {};
conditionalElements.scrollbarSizeListener = scrollable ? (
-
+
) : null;
const showScrollButtons = scrollable && (scrollButtons === 'auto' || scrollButtons === 'on');
@@ -194,7 +191,7 @@ class Tabs extends React.Component {
this.moveTabsScroll(this.tabsRef.clientWidth);
};
- handleScrollbarSizeChange = ({ scrollbarHeight }) => {
+ handleScrollbarSizeChange = scrollbarHeight => {
this.setState({
scrollerStyle: {
marginBottom: -scrollbarHeight,