Skip to content

Commit

Permalink
feat(SelectBox): Add default white background 📝 (#980)
Browse files Browse the repository at this point in the history 
feat(SelectBox): Add default white background 📝
  • Loading branch information
@gregorylegarec
gregorylegarec authored May 14, 2019
2 parents 8c09a97 + ce85ec9 commit c7e8213
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 29 deletions.
7 changes: 6 additions & 1 deletion react/SelectBox/Readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,12 @@ const options = [
{ value: 'long', label: 'Salt and vinegar crisps with vegamite and brussel sprouts, double chai latte sauce' },
];
<SelectBox options={options} />
/**
* Setting a background color let us ensure that the selectbox has a background.
*/
<div style={{ background:'whitesmoke', padding: '.5em' }}>
<SelectBox options={options} />
</div>
```

For example if you want to force the menu to be open:
Expand Down
2 changes: 2 additions & 0 deletions react/SelectBox/SelectBox.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -302,6 +302,8 @@ class SelectBox extends Component {
{...props}
isDisabled={disabled}
className={classNames(
// Ensure the selectbox has white background
'u-bg-white',
{
[styles['select__overlay']]: showOverlay,
[styles['select--autowidth']]: !fullwidth,
Expand Down
58 changes: 30 additions & 28 deletions react/__snapshots__/examples.spec.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -362,7 +362,7 @@ exports[`Field should render examples: Field 5`] = `
"<div>
<form>
<div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">I'am a SelectBox</label>
<div class=\\"css-10nd86i styles__select--autowidth___16AEp\\" id=\\"\\">
<div class=\\"css-10nd86i u-bg-white styles__select--autowidth___16AEp\\" id=\\"\\">
<div class=\\"css-19fknmj\\">
<div class=\\"css-1phseng\\">
<div class=\\"css-1492t68\\">Select ...</div>
Expand All @@ -381,7 +381,7 @@ exports[`Field should render examples: Field 5`] = `
</div>
</div>
<div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">I'am a SelectBox with a value</label>
<div class=\\"css-10nd86i styles__select--autowidth___16AEp\\" id=\\"\\">
<div class=\\"css-10nd86i u-bg-white styles__select--autowidth___16AEp\\" id=\\"\\">
<div class=\\"css-19fknmj\\">
<div class=\\"css-1phseng\\">
<div class=\\"css-xp4uvy\\">Choice 2</div>
Expand Down Expand Up @@ -1305,20 +1305,22 @@ exports[`Radio should render examples: Radio 3`] = `
exports[`SelectBox should render examples: SelectBox 1`] = `
"<div>
<div class=\\"css-10nd86i styles__select--autowidth___16AEp\\">
<div class=\\"css-19fknmj\\">
<div class=\\"css-1phseng\\">
<div class=\\"css-1492t68\\">Select...</div>
<div class=\\"css-1g6gooi\\">
<div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-4-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; font-size: inherit; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
<div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: inherit; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
<div style=\\"background: whitesmoke; padding: .5em;\\">
<div class=\\"css-10nd86i u-bg-white styles__select--autowidth___16AEp\\">
<div class=\\"css-19fknmj\\">
<div class=\\"css-1phseng\\">
<div class=\\"css-1492t68\\">Select...</div>
<div class=\\"css-1g6gooi\\">
<div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-4-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; font-size: inherit; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
<div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: inherit; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
</div>
</div>
</div>
</div>
<div class=\\"css-1wy0on6\\"><span class=\\"css-1hyfx7x\\"></span>
<div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
<use xlink:href=\\"#bottom\\"></use>
</svg></div>
<div class=\\"css-1wy0on6\\"><span class=\\"css-1hyfx7x\\"></span>
<div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
<use xlink:href=\\"#bottom\\"></use>
</svg></div>
</div>
</div>
</div>
</div>
Expand All @@ -1327,7 +1329,7 @@ exports[`SelectBox should render examples: SelectBox 1`] = `
exports[`SelectBox should render examples: SelectBox 2`] = `
"<div>
<div class=\\"css-10nd86i styles__select--autowidth___16AEp\\">
<div class=\\"css-10nd86i u-bg-white styles__select--autowidth___16AEp\\">
<div class=\\"css-19fknmj\\">
<div class=\\"css-1phseng\\">
<div class=\\"css-1492t68\\">Select...</div>
Expand Down Expand Up @@ -1355,7 +1357,7 @@ exports[`SelectBox should render examples: SelectBox 2`] = `
exports[`SelectBox should render examples: SelectBox 3`] = `
"<div>
<div style=\\"height: 12rem; padding: .5rem; overflow: auto;\\">Container height: 12rem. <button>Change container height</button>
<div class=\\"css-10nd86i styles__select--autowidth___16AEp\\">
<div class=\\"css-10nd86i u-bg-white styles__select--autowidth___16AEp\\">
<div class=\\"css-19fknmj\\">
<div class=\\"css-1phseng\\">
<div class=\\"css-1492t68\\">Select...</div>
Expand All @@ -1378,7 +1380,7 @@ exports[`SelectBox should render examples: SelectBox 3`] = `
exports[`SelectBox should render examples: SelectBox 4`] = `
"<div>
<div class=\\"css-1sontr1 styles__select--autowidth___16AEp styles__select--disabled___1W3en\\">
<div class=\\"css-1sontr1 u-bg-white styles__select--autowidth___16AEp styles__select--disabled___1W3en\\">
<div class=\\"css-adwy96\\">
<div class=\\"css-1phseng\\">
<div class=\\"css-1492t68\\">Select...</div>
Expand All @@ -1400,7 +1402,7 @@ exports[`SelectBox should render examples: SelectBox 4`] = `
exports[`SelectBox should render examples: SelectBox 5`] = `
"<div>
<div class=\\"css-10nd86i styles__select--fullwidth___2l_xM\\">
<div class=\\"css-10nd86i u-bg-white styles__select--fullwidth___2l_xM\\">
<div class=\\"css-19fknmj\\">
<div class=\\"css-1phseng\\">
<div class=\\"css-1492t68\\">Select...</div>
Expand All @@ -1423,7 +1425,7 @@ exports[`SelectBox should render examples: SelectBox 5`] = `
exports[`SelectBox should render examples: SelectBox 6`] = `
"<div>
<div>
<div class=\\"css-1sontr1 styles__select--autowidth___16AEp styles__select--disabled___1W3en\\">
<div class=\\"css-1sontr1 u-bg-white styles__select--autowidth___16AEp styles__select--disabled___1W3en\\">
<div class=\\"css-adwy96\\">
<div class=\\"css-1phseng\\">
<div class=\\"css-1492t68\\">Select...</div>
Expand All @@ -1448,7 +1450,7 @@ exports[`SelectBox should render examples: SelectBox 7`] = `
"<div>
<div>
<div class=\\"u-mb-1\\">
<div class=\\"css-10nd86i styles__select--autowidth___16AEp\\">
<div class=\\"css-10nd86i u-bg-white styles__select--autowidth___16AEp\\">
<div class=\\"css-1472sn5\\">
<div class=\\"css-1phseng\\">
<div class=\\"css-xp4uvy\\">I am a tiny SelectBox</div>
Expand All @@ -1467,7 +1469,7 @@ exports[`SelectBox should render examples: SelectBox 7`] = `
</div>
</div>
<div class=\\"u-mb-1\\">
<div class=\\"css-10nd86i styles__select--autowidth___16AEp\\">
<div class=\\"css-10nd86i u-bg-white styles__select--autowidth___16AEp\\">
<div class=\\"css-4oellt\\">
<div class=\\"css-1phseng\\">
<div class=\\"css-xp4uvy\\">I am a medium SelectBox</div>
Expand All @@ -1486,7 +1488,7 @@ exports[`SelectBox should render examples: SelectBox 7`] = `
</div>
</div>
<div class=\\"u-mb-1\\">
<div class=\\"css-10nd86i styles__select--autowidth___16AEp\\">
<div class=\\"css-10nd86i u-bg-white styles__select--autowidth___16AEp\\">
<div class=\\"css-19fknmj\\">
<div class=\\"css-1phseng\\">
<div class=\\"css-xp4uvy\\">I am a large SelectBox</div>
Expand All @@ -1510,7 +1512,7 @@ exports[`SelectBox should render examples: SelectBox 7`] = `
exports[`SelectBox should render examples: SelectBox 8`] = `
"<div>
<div class=\\"css-10nd86i styles__select--autowidth___16AEp\\">
<div class=\\"css-10nd86i u-bg-white styles__select--autowidth___16AEp\\">
<div><button>toggle options</button>
<div class=\\"styles__select-control__input___1xDlj\\">
<div class=\\"css-1phseng\\">
Expand All @@ -1534,7 +1536,7 @@ exports[`SelectBox should render examples: SelectBox 8`] = `
exports[`SelectBox should render examples: SelectBox 9`] = `
"<div>
<div class=\\"css-10nd86i styles__select--autowidth___16AEp\\">
<div class=\\"css-10nd86i u-bg-white styles__select--autowidth___16AEp\\">
<div class=\\"css-19fknmj\\">
<div class=\\"css-1phseng\\">
<div class=\\"css-1492t68\\">Select...</div>
Expand All @@ -1556,7 +1558,7 @@ exports[`SelectBox should render examples: SelectBox 9`] = `
exports[`SelectBox should render examples: SelectBox 10`] = `
"<div>
<div class=\\"css-10nd86i styles__select--autowidth___16AEp\\">
<div class=\\"css-10nd86i u-bg-white styles__select--autowidth___16AEp\\">
<div class=\\"css-19fknmj\\">
<div class=\\"css-1phseng\\">
<div class=\\"css-1492t68\\">Select...</div>
Expand All @@ -1578,7 +1580,7 @@ exports[`SelectBox should render examples: SelectBox 10`] = `
exports[`SelectBox should render examples: SelectBox 11`] = `
"<div>
<div class=\\"css-10nd86i styles__select--autowidth___16AEp\\">
<div class=\\"css-10nd86i u-bg-white styles__select--autowidth___16AEp\\">
<div class=\\"css-19fknmj\\">
<div class=\\"css-1phseng\\">
<div class=\\"css-1492t68\\">Select...</div>
Expand Down Expand Up @@ -1638,7 +1640,7 @@ exports[`SelectBox should render examples: SelectBox 11`] = `
exports[`SelectBox should render examples: SelectBox 12`] = `
"<div>
<div class=\\"css-10nd86i styles__select--autowidth___16AEp\\">
<div class=\\"css-10nd86i u-bg-white styles__select--autowidth___16AEp\\">
<div class=\\"css-19fknmj\\">
<div class=\\"css-1phseng needsclick\\">
<div class=\\"css-1492t68\\">Select...</div>
Expand All @@ -1660,7 +1662,7 @@ exports[`SelectBox should render examples: SelectBox 12`] = `
exports[`SelectBox should render examples: SelectBox 13`] = `
"<div>
<div class=\\"css-10nd86i styles__select--autowidth___16AEp\\">
<div class=\\"css-10nd86i u-bg-white styles__select--autowidth___16AEp\\">
<div class=\\"css-19fknmj needsclick cz__control\\">
<div class=\\"css-1phseng needsclick cz__value-container\\">
<div class=\\"css-1492t68 needsclick cz__placeholder\\">Select...</div>
Expand Down

0 comments on commit c7e8213

Please sign in to comment.