Button
component has a different set of styles with prop display="inline"
#2821
Labels
Area: Code Quality
For refactoring, cleanup, or improvements to maintainability
Enhancement
Improvement to an existing feature
Increasing Access
We want to have a useful set of basic UI components that we can use throughout the app. They should be customizable via props but the output should be predictable.
We are not using the inline version anywhere because it is not useful in it's current state. If we fix it up then it can be used for issues like #2734.
Feature enhancement details
Our
Button
UI component has a propdisplay
which supports values"block"
and"inline"
. I would expect that a<Button/>
withdisplay="inline"
would look the same as the normal button, with the only difference being that it is on the same line instead of a new line. In reality it uses a completely different styled component.p5.js-web-editor/client/common/Button.jsx
Lines 185 to 189 in e77bc6a
p5.js-web-editor/client/common/Button.jsx
Lines 83 to 108 in e77bc6a
The inline version is always the same color regardless of the
kind="primary"
andkind="secondary"
props, as the color is hard-coded.This is what I get when using

inline
buttons:The wildest part is that it's not even inline! It has
display: flex
instead ofdisplay: inline-flex
.p5.js-web-editor/client/common/Button.jsx
Line 85 in e77bc6a
I would expect something more like this, which is the

block
style button but displayed inline:My proposal is that we should delete the
StyledInlineButton
styled component. Instead, we should adjust the existingStyledButton
to change itsdisplay
property based on thedisplay
prop. This ensures that all other styling is consistent regardless of thedisplay
prop.The text was updated successfully, but these errors were encountered: