ion-button element has no left and right border when using fill=outline and expand=full

[itsdarja]

Ionic version:
[x] 4.11.5

I'm submitting a ...
[x] bug report
[ ] feature request

Current behavior:
When I use ion-button with the combination of attributes expand with value full and fill with value outline it results in a button with the left and right border of width 0 due to this CSS lines that apply to the ion-button shadow element:

:host(.button-full:not(.button-round)) .button-native { border-right-width: 0px; border-left-width: 0px; border-radius: 0px; }
The button-outline class should also be excluded from this selection.

Expected behaviour:
The outlined button should have the left and right border.

Steps to reproduce:
Use the code:
<ion-button expand="full" fill="outline">The sad button</ion-button>

[brandyscarney]

Thanks for the issue! Setting expand to "full" removing the borders is the desired behavior. There is some more documentation on this here: https://ionicframework.com/docs/api/button#expand

Full-width button with square corners and no border on the left or right.

If you would like to have a button that takes up the entire width without removing the borders, you can set expand to "block".

Here's a Codepen example: https://codepen.io/brandyscarney/pen/abbXKYg?editors=1100

Button 2 uses full and Button 3 uses block which I believe is what you're looking for:

[adonig]

@itsdarja: You can set the following css on your ion-button to make it look as expected.

    border-left: solid 1px black;  /* Or whatever color your button has. */
    border-right: solid 1px black;
    margin-left: 0;
    margin-right: 0;

I would prefer not to have to do it that way. @brandyscarney: What's the reasoning behind explicitly removing the vertical borders? :-)

https://github.com/ionic-team/ionic/blob/master/core/src/components/button/button.scss#L197

[brandyscarney]

@adonig Please read my previous comment. You can use block instead of expand to keep the borders. The property itself is defined as removing the borders. The only reason round is excluded is because it modifies the shape of the button, and if you remove the left and right borders for a round button it no longer appears rounded.

[adonig]

@brandyscarney I got you. It just is how the Material and iOS button styles are defined.

I think people like @itsdarja and me actually wanted to have a squared full-width button. That's why it wasn't sufficient to use block (i.e. it looks kind of round on iOS).

That why I went for the other solution manually adding borders and removing the margin.

[brandyscarney]

@adonig If you don't want any border radius you can style the button to remove it:

ion-button {
  --border-radius: 0;
}

Our designs are styled to match the spec for Material Design (https://material.io/components/buttons/#specs) and iOS. Both of these add a border-radius to their buttons. We've offered the full button to remove borders on the left/right and give the illusion that it takes up the full width of the screen since v1: https://ionicframework.com/docs/v1/components/#full-buttons

Removing the margin left/right from the block/full buttons could be discussed, since they weren't there in v1. For the border radius though I would suggest using CSS as we try to match the spec as much as possible & any customization away from the spec should use CSS. 🙂

[adonig]

@brandyscarney Thank you! I didn't know about --border-radius. I tried to set border-radius: 0, realized that I'm dealing with a web component's shadow DOM and went with the other solution 🙂

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.