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.

Buttons will render as plain even if explicit told to not be plain

See original GitHub issue

Expected Behavior

If I use the Button element like: <Button plain={ false } primary onClick={ func }>Text</Button> I expect that the button is told to be not plain.

Actual Behavior

Actually the button gets rendered with the grommetux-button–plain css class.

URL, screen shot, or Codepen exhibiting the issue

http://codepen.io/anon/pen/pNorYo?&editors=0010 The plain attribute seems to have no impact when using it with children (as it stands in the code).

Steps to Reproduce

  1. Button with plain attribute
  2. Button without plain attribute

Your Environment

  • Grommet version: 1.0.1
  • Browser Name and version: Chrome 54.0.2840.71 m
  • Operating System and version (desktop or mobile): Windows 7

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:2
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
ericsoderberghpcommented, Nov 4, 2016

My inclination is to deprecate the plain property all together. The Button controls styling if icon or label are set and doesn’t touch the styling if there are child components.

0reactions
ibiBgORcommented, Nov 10, 2016

I think you guys are right. Deprecating the plain property sounds pretty logical. If the Button component takes all the style work from me I will not moan. 😄 Thank you for your help

Read more comments on GitHub >

github_iconTop Results From Across the Web

React - How to force a function component to render?
Updating the value by its setter will force your function component to re-render, just like forceUpdate does: import React, { useState } from...
Read more >
Using Forms in React - Dave Ceddia
Uncontrolled inputs manage their own value. Just like with a plain HTML form, the value is kept in the input's DOM node.
Read more >
When <button> isn't the best choice (it's slow to create and ...
The <button> element is considerably slower to create in JavaScript, slower to render by the browser and notoriously difficult to style ...
Read more >
Forms in HTML documents - W3C
Authors may create controls that are not rendered but whose values are submitted with a form. Authors generally use this control type to...
Read more >
<input>: The Input (Form Input) element - HTML
A Boolean attribute which, if present, indicates that the user should not be able to edit the value of the input. The readonly...
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