salesforce / salesforce/design-system-react
The 'responsive' prop on the Button component has no effect
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 982
- Forks
- 440
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 4
Description
The Button component has the following prop:
/**
* If true, button scales to 100% width on small form factors.
*/
responsive: PropTypes.bool,
https://github.com/salesforce/design-system-react/blob/master/components/button/index.jsx#L177
This prop does not appear to have any effect when set to true (or false naturally).
This issue is demonstrated on the storybook example:
http://design-system-react-components.herokuapp.com/iframe.html?id=sldsbutton--doc-site-base-neutral&args=&viewMode=story
Looks like at some point the code conditionally adding the class was accidentally left out.
It should probably add the class slds-max-small-size--1-of-1 or some conditional variant of slds-button_stretch. In the past it was slds-max-small-button--stretch - this was removed in this commit https://github.com/salesforce/design-system-react/commit/a796c5b1fe1a967f1427a4fbd3ec4c9710d7592d on 22 Jul 2016:
https://github.com/salesforce/design-system-react/commit/a796c5b1fe1a967f1427a4fbd3ec4c9710d7592d#diff-1beac10e4cb18d36a1e2e3de7103d0f359da4b9b5748c851ce1c8061f1a803aeL143
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in components/button/index.jsx at the responsive prop and compare the current class handling with the referenced commit. Reproduce the issue in the Storybook Button example, then verify that setting responsive changes the small-form-factor width behavior and that leaving it false has no effect.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100