plain is true on button when label prop has no value
See original GitHub issueI apply extended styling on a Button
component via the theme. Hereby I make use of extend
accepting a function as value. One of the arguments of this function is plain
. I think this prop has some unexpected behavior when no value is given to the label
prop on the Button
component.
Expected Behavior
When a Button
component has no plain
prop and no value for the label
prop the plain
value should be false
.
Actual Behavior
The plain
value is true
.
URL, screen shot, or Codepen exhibiting the issue
https://codesandbox.io/s/grommet-v2-template-yv28m
Steps to Reproduce
- Add
Button
component - Add icon to
Button
- Make sure to use no value for
label
and do not addplain
Your Environment
- Grommet version: 2.11.0
Issue Analytics
- State:
- Created 4 years ago
- Comments:15 (4 by maintainers)
Top Results From Across the Web
How to pass props without value to component - Stack Overflow
Any attribute with an empty string will render into the DOM without a value. Just the attribute name. The value is implicitly the...
Read more >The Button element - HTML: HyperText Markup Language
Possible values are: submit : The button submits the form data to the server. This is the default if the attribute is not...
Read more >How to use Props in React - Robin Wieruch
As you have seen, props enable you to pass values from one component to another component down the component tree. In the previous...
Read more >Button - Grommet
This prop is meant to be used only with plain Buttons. boolean. true false.
Read more >Button has non-empty accessible name | ACT Rule | WAI - W3C
This button element has no accessible name. The value attribute does not provide an accessible name for button elements, only when an input...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Would a partial solution to the latter part of this issue be treating a
label === children
? I just spent 2-3hrs debugging why styling was not working when I excluded plain(plain === undefined) and had children and no label.<Button>Submit</Button>
should inherit default styles, unless it is an intentional design system decision. I am willing to help just need some help to know which direction to take this issue.If
label
is not specified I think the expectation is that the button will have either anicon
orchildren
, in both of these cases the Button will beplain
. I believe this is the intended and documented behavior. I’m going to mark this issue as closed but feel free to re-open and comment if more discussion on this is desired or if there are any suggestions on improving the documentation for this.