Commit 30765e2
fix(tab-button): match height to tab-bar in ionic-md theme (#31209)
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Tab buttons in the ionic-md theme are slightly shorter than the tab bar.
This is inconsistent when dev tools are in use in Firefox, causing
screenshot tests to fail.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Tab buttons completely fill available vertical space by adding a
margin above the button's icon.
## Does this introduce a breaking change?
- [ ] Yes
- [X] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
The tab bar content height is 48px while the buttons are 44px high with
the styles specified. Usually the buttons render 44px high, but
sometimes when the button is focused with Firefox dev tools, they render
48px high. When the buttons are made to be 48px high, matching the
container, we don't see this issue.
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>1 parent 56d3260 commit 30765e2
36 files changed
Lines changed: 26 additions & 0 deletions
File tree
- core/src/components
- badge/test/hint/badge.e2e.ts-snapshots
- tab-bar/test
- basic/tab-bar.e2e.ts-snapshots
- expand/tab-bar.e2e.ts-snapshots
- shape/tab-bar.e2e.ts-snapshots
- tab-button
- test/shape/tab-button.e2e.ts-snapshots
0 commit comments