fix(button): size and strong are respected in ion-buttons

[liamdebeasi]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Issue URL: resolves #16289

The size and strong properties on ion-button are not respected when placed inside ion-buttons. This is because Ionic manually sets the font-size/font-weight on all slotted buttons:

ionic-framework/core/src/components/buttons/buttons.ios.scss

Lines 16 to 17 in 9d6ec29

	font-size: #{$toolbar-ios-button-font-size};
	font-weight: 400;

ionic-framework/core/src/components/buttons/buttons.md.scss

Lines 18 to 19 in 9d6ec29

	font-size: #{$toolbar-md-button-font-size};
	font-weight: 500;

This was likely done to ensure buttons in a toolbar have consistent container sizes (since we manually set the height as well). However, this breaks the size/strong functionality on ion-button.

However, default size iOS buttons have a slightly increased font size when used in a toolbar. This difference needs to be preserved while allowing for size functionality:

button in toolbar ("Cancel")	button outside of toolbar ("Continue")

What is the new behavior?

• Removed the font-size and font-weight declarations in ion-buttons in MD mode. These values are used inside the ion-button stylesheets, so this change should not impact buttons that do not make use of size/strong. Default size /weight MD buttons have the same font size and weight regardless of usage.
• Removed the font-size and font-weight declaration in ion-buttons in iOS mode. Instead, I added a .in-buttons selector to the iOS button stylesheet that applies the increased font size/weight. This approach allows the size and strong properties to override the default font size and font weight, respectively. The alternative was to use :not to create a specific selector that excluded larger/smaller size values, but I felt that would make customizing the button hard.
• I also refactored the size and strong tests while I was in this code. These screenshots had quite a bit of whitespace and tested configurations that did not test the actual functionality.

I opted to keep the height property here because this allows the font sizes to increase while keeping the container sizes consistent. If we removed the height, then the container sizes would be different which I think is incorrect:

with height	without height

Does this introduce a breaking change?

• Yes
• No

Other information

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[averyjohnston]

LGTM aside from a few typos.