diff --git a/examples/src/components/Multiselect.js b/examples/src/components/Multiselect.js
index 1290e60071..c7288716e5 100644
--- a/examples/src/components/Multiselect.js
+++ b/examples/src/components/Multiselect.js
@@ -27,6 +27,7 @@ var MultiSelectField = createClass({
crazy: false,
stayOpen: false,
value: [],
+ rtl: false,
};
},
handleSelectChange (value) {
@@ -38,6 +39,11 @@ var MultiSelectField = createClass({
[e.target.name]: e.target.checked,
});
},
+ toggleRtl (e) {
+ let rtl = e.target.checked;
+ this.setState({ rtl });
+ },
+
render () {
const { crazy, disabled, stayOpen, value } = this.state;
const options = crazy ? WHY_WOULD_YOU : FLAVOURS;
@@ -51,6 +57,7 @@ var MultiSelectField = createClass({
onChange={this.handleSelectChange}
options={options}
placeholder="Select your favourite(s)"
+ rtl={this.state.rtl}
simpleValue
value={value}
/>
@@ -68,6 +75,10 @@ var MultiSelectField = createClass({
Stay open when an Option is selected
+
);
diff --git a/examples/src/components/States.js b/examples/src/components/States.js
index b733fab4e7..377366c797 100644
--- a/examples/src/components/States.js
+++ b/examples/src/components/States.js
@@ -24,18 +24,17 @@ var StatesField = createClass({
searchable: this.props.searchable,
selectValue: 'new-south-wales',
clearable: true,
+ rtl: false,
};
},
switchCountry (e) {
var newCountry = e.target.value;
- console.log('Country changed to ' + newCountry);
this.setState({
country: newCountry,
selectValue: null,
});
},
updateValue (newValue) {
- console.log('State changed to ' + newValue);
this.setState({
selectValue: newValue,
});
@@ -53,22 +52,39 @@ var StatesField = createClass({
return (
{this.props.label} (Source)
-
+
+
+
-
-
-
diff --git a/less/control.less b/less/control.less
index eaf5106410..9301698a7d 100644
--- a/less/control.less
+++ b/less/control.less
@@ -112,6 +112,10 @@
.Select-arrow-zone:hover > .Select-arrow {
border-top-color: @select-arrow-color-hover;
}
+ &.Select--rtl {
+ direction: rtl;
+ text-align: right;
+ }
}
// base
@@ -255,6 +259,12 @@
text-align: center;
vertical-align: middle;
width: (@select-arrow-width * 5);
+ padding-right: @select-arrow-width;
+
+ .Select--rtl & {
+ padding-right: 0;
+ padding-left: @select-arrow-width;
+ }
}
.Select-arrow {
diff --git a/less/multi.less b/less/multi.less
index ee5449fe4e..f238947ff2 100644
--- a/less/multi.less
+++ b/less/multi.less
@@ -14,6 +14,10 @@
margin-left: @select-padding-horizontal;
padding: 0;
}
+ &.Select--rtl .Select-input {
+ margin-left: 0;
+ margin-right: @select-padding-horizontal;
+ }
// reduce margin once there is value
&.has-value .Select-input {
@@ -80,7 +84,17 @@
background-color: @select-item-border-color;
}
}
-
+ &.Select--rtl {
+ .Select-value {
+ margin-left: 0;
+ margin-right: @select-item-gutter;
+ }
+ .Select-value-icon {
+ border-right: none;
+ border-left: 1px solid @select-item-border-color-fb; /* Fallback color for IE 8 */
+ border-left: 1px solid @select-item-border-color;
+ }
+ }
}
.Select--multi.is-disabled {
diff --git a/scss/control.scss b/scss/control.scss
index 08435e1aaf..5595632629 100644
--- a/scss/control.scss
+++ b/scss/control.scss
@@ -99,6 +99,10 @@
.Select-arrow-zone:hover > .Select-arrow {
border-top-color: $select-arrow-color-hover;
}
+ &.Select--rtl {
+ direction: rtl;
+ text-align: right;
+ }
}
// base
@@ -251,6 +255,11 @@
vertical-align: middle;
width: ($select-arrow-width * 5);
padding-right: $select-arrow-width;
+
+ .Select--rtl & {
+ padding-right: 0;
+ padding-left: $select-arrow-width;
+ }
}
.Select-arrow {
diff --git a/scss/multi.scss b/scss/multi.scss
index fce8369012..e00d7fc5f4 100644
--- a/scss/multi.scss
+++ b/scss/multi.scss
@@ -14,6 +14,10 @@
margin-left: $select-padding-horizontal;
padding: 0;
}
+ &.Select--rtl .Select-input {
+ margin-left: 0;
+ margin-right: $select-padding-horizontal;
+ }
// reduce margin once there is value
&.has-value .Select-input {
@@ -75,6 +79,16 @@
}
}
+ &.Select--rtl {
+ .Select-value {
+ margin-left: 0;
+ margin-right: $select-item-gutter;
+ }
+ .Select-value-icon {
+ border-right: none;
+ border-left: 1px solid $select-item-border-color;
+ }
+ }
}
.Select--multi.is-disabled {
diff --git a/src/Select.js b/src/Select.js
index cf1cc06cd1..f62b5353c9 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -781,7 +781,7 @@ class Select extends React.Component {
[this._instancePrefix + '-list']: isOpen,
});
return (
-
+
{
expect(warn, 'was called once');
});
});
+ describe('rtl', () => {
+ describe('className', () => {
+ it('assigns the className Select--rtl to the outer-most element', () => {
+ var instance = createControl({ rtl: true });
+ expect(ReactDOM.findDOMNode(instance), 'to have attributes', {
+ class: 'Select--rtl'
+ });
+ });
+ });
+ });
});