Button component has a different set of styles with prop display="inline"

[lindapaiste]

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 prop display which supports values "block" and "inline". I would expect that a <Button/> with display="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

	let StyledComponent = StyledButton;
	if (display === displays.inline) {
	StyledComponent = StyledInlineButton;
	}

p5.js-web-editor/client/common/Button.jsx

Lines 83 to 108 in e77bc6a

	const StyledInlineButton = styled.button`
	&&& {
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	color: ${prop('primaryTextColor')};
	cursor: pointer;
	border: none;
	line-height: 1;
	svg * {
	fill: ${prop('primaryTextColor')};
	}
	&:disabled {
	cursor: not-allowed;
	}
	> * + * {
	margin-left: ${remSize(8)};
	}
	}
	`;

The inline version is always the same color regardless of the kind="primary" and kind="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 of display: inline-flex.

p5.js-web-editor/client/common/Button.jsx

Line 85 in e77bc6a

display: flex;

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 existing StyledButton to change its display property based on the display prop. This ensures that all other styling is consistent regardless of the display prop.

[skushagra9]

Can I work on this issue @lindapaiste

[lindapaiste]

Can I work on this issue @lindapaiste

It's already done in #2822 (pending review).