javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(button): fix tokens usage on ionic theme (#30442)

Browse Source 
Issue number: internal

---------

<!-- 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 new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Review button min-width and size of icons inside.
- Fixed test for ionic theme, with the correct medium size.

## 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. -->

[Button Ionic
theme](https://ionic-framework-git-rou-11968-button-v2-ionic1.vercel.app/src/components/button/test/theme-ionic)

---------

Co-authored-by: ionitron <hi@ionicframework.com>
This commit is contained in:
Bernardo Cardoso
2025-05-29 18:36:28 +01:00
committed by GitHub
parent a0d5ad7b8d
commit 8e8e8f90cd
53 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
core/src/components/button/button.ionic.scss
View File

@ -102,6 +102,7 @@
--padding-end: #{globals.$ion-space-400};
@include globals.typography(globals.$ion-body-action-sm);
min-width: globals.$ion-scale-1600;
min-height: #{globals.$ion-scale-1000};
}
@ -111,6 +112,7 @@
--padding-end: #{globals.$ion-space-500};
@include globals.typography(globals.$ion-body-action-md);
min-width: globals.$ion-scale-1800;
min-height: #{globals.$ion-scale-1200};
}
@ -120,6 +122,7 @@
--padding-end: #{globals.$ion-space-700};
@include globals.typography(globals.$ion-body-action-lg);
min-width: globals.$ion-scale-2000;
min-height: #{globals.$ion-scale-1400};
}
@ -128,22 +131,28 @@
// -------------------------------------------------------------------------------
/* Button containing only an icon */
::slotted(ion-icon[slot="start"]),
::slotted(ion-icon[slot="end"]),
::slotted(ion-icon[slot="icon-only"]) {
font-size: globals.$ion-font-size-500;
:host(.button-small),
:host(.button-medium) {
::slotted(ion-icon[slot="start"]),
::slotted(ion-icon[slot="end"]),
::slotted(ion-icon[slot="icon-only"]) {
width: globals.$ion-scale-500;
height: globals.$ion-scale-500;
}
}
:host(.button-large) {
::slotted(ion-icon[slot="start"]),
::slotted(ion-icon[slot="end"]),
::slotted(ion-icon[slot="icon-only"]) {
font-size: globals.$ion-font-size-600;
width: globals.$ion-scale-600;
height: globals.$ion-scale-600;
}
}
:host(.button-has-icon-only) {
--padding-end: var(--padding-top);
min-width: unset;
aspect-ratio: 1 / 1;
}
@ -158,8 +167,8 @@
::slotted(ion-spinner[slot="start"]),
::slotted(ion-spinner[slot="end"]),
::slotted(ion-spinner[slot="icon-only"]) {
width: globals.$ion-space-500;
height: globals.$ion-space-500;
width: globals.$ion-scale-500;
height: globals.$ion-scale-500;
}
// Button Shapes