Skip to content

Commit

Permalink
[Slider] Prevent thumb from overflowing the margin, update some tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@mbrookes
mbrookes committed Jul 6, 2018
1 parent 17c0969 commit b0389c0
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 40 deletions.
68 changes: 44 additions & 24 deletions packages/material-ui-lab/src/Slider/Slider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,15 +33,15 @@ export const style = theme => {
root: {
position: 'relative',
width: '100%',
padding: '16px 0',
padding: '16px 8px',
cursor: 'pointer',
WebkitTapHighlightColor: 'transparent',
'&$disabled': {
cursor: 'no-drop',
},
'&$vertical': {
height: '100%',
padding: '0 16px',
padding: '8px 16px',
},
'&$reverse': {
transform: 'scaleX(-1)',
Expand All @@ -50,6 +50,12 @@ export const style = theme => {
transform: 'scaleY(-1)',
},
},
container: {
position: 'relative',
'&$vertical': {
height: '100%',
},
},
/* Tracks styles */
track: {
position: 'absolute',
Expand Down Expand Up @@ -392,12 +398,13 @@ class Slider extends React.Component {
component: Component,
classes,
className: classNameProp,
value,
min,
disabled,
max,
vertical,
min,
reverse,
disabled,
theme,
value,
vertical,
...other
} = this.props;

Expand All @@ -410,12 +417,23 @@ class Slider extends React.Component {
[classes.activated]: !disabled && currentState === 'activated',
};

const rootClasses = classNames(classes.root, {
[classes.vertical]: vertical,
[classes.reverse]: reverse,
[classes.disabled]: disabled,
const rootClasses = classNames(
classes.root,
{
[classes.vertical]: vertical,
[classes.reverse]: reverse,
[classes.disabled]: disabled,
},
classNameProp,
});
);

const containerClasses = classNames(
classes.container,
{
[classes.vertical]: vertical,
},
classNameProp,
);

const trackBeforeClasses = classNames(classes.track, classes.trackBefore, commonClasses, {
[classes.vertical]: vertical,
Expand Down Expand Up @@ -452,19 +470,21 @@ class Slider extends React.Component {
}}
{...other}
>
<div className={trackBeforeClasses} style={inlineTrackBeforeStyles} />
<ButtonBase
className={thumbClasses}
disableRipple
style={inlineThumbStyles}
onBlur={this.handleBlur}
onKeyDown={this.handleKeyDown}
onMouseDown={this.handleMouseDown}
onTouchStartCapture={this.handleTouchStart}
onTouchMove={this.handleMouseMove}
onFocusVisible={this.handleFocus}
/>
<div className={trackAfterClasses} style={inlineTrackAfterStyles} />
<div className={containerClasses}>
<div className={trackBeforeClasses} style={inlineTrackBeforeStyles} />
<ButtonBase
className={thumbClasses}
disableRipple
style={inlineThumbStyles}
onBlur={this.handleBlur}
onKeyDown={this.handleKeyDown}
onMouseDown={this.handleMouseDown}
onTouchStartCapture={this.handleTouchStart}
onTouchMove={this.handleMouseMove}
onFocusVisible={this.handleFocus}
/>
<div className={trackAfterClasses} style={inlineTrackAfterStyles} />
</div>
</Component>
);
}
Expand Down
43 changes: 27 additions & 16 deletions packages/material-ui-lab/src/Slider/Slider.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,24 @@ describe('<Slider />', () => {

before(() => {
shallow = createShallow({ dive: true });
classes = getClasses(<Slider />);
classes = getClasses(<Slider value={0} />);
mount = createMount();
});

it('should render a div', () => {
const wrapper = shallow(<Slider />);
const wrapper = shallow(<Slider value={0} />);
assert.strictEqual(wrapper.name(), 'div');
});

it('should render with the default classes', () => {
const wrapper = shallow(<Slider />);
assert.strictEqual(wrapper.hasClass(classes.container), true);
const wrapper = shallow(<Slider value={0} />);
assert.strictEqual(wrapper.hasClass(classes.root), true);
});

it('should render with the default and user classes', () => {
const wrapper = shallow(<Slider value={0} className="mySliderClass" />);
assert.strictEqual(wrapper.hasClass(classes.root), true);
assert.strictEqual(wrapper.hasClass('mySliderClass'), true);
});

it('should call handlers', () => {
Expand All @@ -31,7 +37,12 @@ describe('<Slider />', () => {
const handleDragEnd = spy();

const wrapper = mount(
<Slider onChange={handleChange} onDragStart={handleDragStart} onDragEnd={handleDragEnd} />,
<Slider
onChange={handleChange}
onDragStart={handleDragStart}
onDragEnd={handleDragEnd}
value={0}
/>,
);
const button = wrapper.find('button');

Expand All @@ -46,24 +57,24 @@ describe('<Slider />', () => {

describe('prop: vertical', () => {
it('should render with the default and vertical classes', () => {
const wrapper = shallow(<Slider vertical />);
assert.strictEqual(wrapper.hasClass(classes.container), true);
const wrapper = shallow(<Slider vertical value={0} />);
assert.strictEqual(wrapper.hasClass(classes.root), true);
assert.strictEqual(wrapper.hasClass(classes.vertical), true);
});
});

describe('prop: reverse', () => {
it('should render with the default and reverse classes', () => {
const wrapper = shallow(<Slider reverse />);
assert.strictEqual(wrapper.hasClass(classes.container), true);
const wrapper = shallow(<Slider reverse value={0} />);
assert.strictEqual(wrapper.hasClass(classes.root), true);
assert.strictEqual(wrapper.hasClass(classes.reverse), true);
});
});

describe('props: vertical & reverse', () => {
it('should render with the default, reverse and vertical classes', () => {
const wrapper = shallow(<Slider reverse vertical />);
assert.strictEqual(wrapper.hasClass(classes.container), true);
const wrapper = shallow(<Slider reverse vertical value={0} />);
assert.strictEqual(wrapper.hasClass(classes.root), true);
assert.strictEqual(wrapper.hasClass(classes.reverse), true);
assert.strictEqual(wrapper.hasClass(classes.vertical), true);
});
Expand All @@ -74,7 +85,7 @@ describe('<Slider />', () => {
let wrapper;

before(() => {
wrapper = mount(<Slider onChange={handleChange} disabled />);
wrapper = mount(<Slider onChange={handleChange} disabled value={0} />);
});

it('should render thumb with the disabled classes', () => {
Expand Down Expand Up @@ -121,12 +132,12 @@ describe('<Slider />', () => {
const trackBefore = tracks.at(0);
const trackAfter = tracks.at(1);

assert.strictEqual(trackBefore.prop('style').width, 'calc(0% - 0px)');
assert.strictEqual(trackBefore.prop('style').width, '0%');
assert.strictEqual(trackAfter.prop('style').width, 'calc(100% - 5px)');
});

it('after change value should change position of thumb', () => {
wrapper.setProps({ value: 0.5 });
wrapper.setProps({ value: 50 });

clock.tick(transitionComplexDuration);

Expand All @@ -139,8 +150,8 @@ describe('<Slider />', () => {
const trackBefore = tracks.at(0);
const trackAfter = tracks.at(1);

assert.strictEqual(trackBefore.prop('style').width, 'calc(50% - 0px)');
assert.strictEqual(trackAfter.prop('style').width, 'calc(50% - 7px)');
assert.strictEqual(trackBefore.prop('style').width, '50%');
assert.strictEqual(trackAfter.prop('style').width, 'calc(100% - 5px)');
});
});
});

0 comments on commit b0389c0

Please sign in to comment.