question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

plain is true on button when label prop has no value

See original GitHub issue

I 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

  1. Add Button component
  2. Add icon to Button
  3. Make sure to use no value for label and do not add plain

Your Environment

  • Grommet version: 2.11.0

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:15 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
bcbriancommented, Mar 28, 2021

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.

0reactions
jcfilbencommented, Sep 26, 2022

If label is not specified I think the expectation is that the button will have either an icon or children, in both of these cases the Button will be plain. 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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found