Bug: No easy way to set buttons to squared style with the Open edX theme

[yusuf-musleh]

Bugs

In the current Open edX theme, there doesn't seem to be a way to easily set buttons to be "squared". This also affects the focus border styles, as it doesn't match the shape of the buttons. You can see this in the default submit button for the SearchField component.

[bradenmacdonald]

@yusuf-musleh I think you mean "with the Open edX theme"; the edX theme makes all the buttons square.

[yusuf-musleh]

@bradenmacdonald Thanks for catching that! Updated the title.

[adamstankiewicz]

@yusuf-musleh The Open edX theme is supposed to have rounded corners in its current state. That said, the specific component in your screenshot above has a bug where it overrides the default button style to have border-radius: 0 (source), which is causing the discrepancy between the SearchField's non-rounded button and its rounded focus styles. This issue should be resolved, as the button should adhere to the default button styles regarding border-radius.

Regarding theme customization:

If you are developing a custom Paragon theme, you may override the default button styles as needed. Paragon currently relies on SCSS variables to customize styles such as border-radius. For example, your custom Paragon theme could override the $btn-border-radius SCSS variable to remove the rounded corners from buttons throughout the component library (i.e., $btn-border-radius: 0). This is how the edX.org theme (@edx/brand-edx.org) removes the rounded corners on its buttons.

See Paragon's Button SCSS variables related to border-radius here. These SCSS variables are also listed on the Paragon documentation website here.

[bradenmacdonald]

@adamstankiewicz I think the bigger problem is that having a rounded button next to a square search field doesn't look good at all. So simply making the searchfield button follow the theme's "roundedness" is not an ideal fix. I suppose if SearchField were to properly put the submit button and the input field into an input group, which it doesn't seem to be doing currently, then the left borders would at least not be rounded, but it would still look weird with a square input field and a half-rounded button.

I think we just need some direction on whether SearchField is wrong for overriding the radius and/or for not using inputgroup, or whether the open edx theme has deeper issues with having square inputs but rounded buttons. Or both :p