Update disabled Select style #337
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ents This is to match the disabled styles for other input types when the prop is passed to the component
almgong
force-pushed
the
cldUpdateDisabledSelectStyle
branch
from
9e64f5a to
54ace57
Compare
gthomas-appfolio
suggested changes
Nov 22, 2017
stories/Select.js
Outdated
| @@ -10,6 +10,7 @@ storiesOf('Select', module) | |||
| <div> | |||
| <Select | |||
| className="w-100" | |||
| disabled={boolean('Disabled', false)} | |||
There was a problem hiding this comment.
We have the knob name match the name/case of the prop it controls, so we should use "disabled"
| @@ -4,7 +4,7 @@ | |||
| $select-input-internal-height: 2.25rem !default; | |||
|
|
|||
| // Override react-select styles to match Saffron (TODO move to theme?) | |||
| $select-input-bg-disabled: inherit; | |||
| $select-input-bg-disabled: #eceeef; | |||
There was a problem hiding this comment.
We try to avoid hard-coding colors, but I think it's fine in this case given the limitations of react-select and because #eceeef matches the saffron and MyCase themes.
almgong
force-pushed
the
cldUpdateDisabledSelectStyle
branch
from
54ace57 to
36dfc9a
Compare
gthomas-appfolio
approved these changes
Nov 22, 2017
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The styles applied to disabled Select components did not match the appearance of other disabled inputs. This is because Select is built on top of react-select, which has its own defined styles. This PR updates the background color and cursor style for Select, in an effort to make the different disabled components look more consistent.
See: https://www.pivotaltracker.com/story/show/152485476