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

feat(Chip): Add styles for icons inside Chip Ionic Theme (#29295)

Browse Source 
Issue number: resolves #ROU-4838

---------

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

- Added styles for icons inside Chip (Ionic Theme)
- Fixed an issue related to hover status, after tokens integration

## 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/.github/CONTRIBUTING.md#footer
for more information.
-->
This commit is contained in:
Bernardo Cardoso
2024-04-08 14:26:24 +01:00
committed by GitHub
parent 77c67f2362
commit 7ce115993a
2 changed files with 26 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
core/src/components/chip/chip.ionic.scss
View File

@ -4,7 +4,9 @@
// Chip // Chip
// -------------------------------------------------- // --------------------------------------------------
$ionic-states-focus-primary: #9ec4fd; // TODO(ROU-4870): there is no token yet for this one, but it should be created in the future, once UX team has figma tokens done // TODO(ROU-4870): there is no token yet for these ones, but it should be created in the future, once UX team has figma tokens done
$ionic-states-focus-primary: #9ec4fd;
$ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make this in the future, as we are setting scss variables with a var() and fallback, and it doesn't work inside a rgba().
:host { :host {
--background: #{tokens.$ionic-color-neutral-10}; --background: #{tokens.$ionic-color-neutral-10};
@ -23,6 +25,8 @@ $ionic-states-focus-primary: #9ec4fd; // TODO(ROU-4870): there is no token yet f
align-items: center; align-items: center;
gap: tokens.$ionic-space-xxxs;
min-height: 32px; min-height: 32px;
border-width: tokens.$ionic-border-size-small; border-width: tokens.$ionic-border-size-small;
@ -41,6 +45,8 @@ $ionic-states-focus-primary: #9ec4fd; // TODO(ROU-4870): there is no token yet f
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
vertical-align: middle;
} }
// Outline Chip // Outline Chip
@ -64,7 +70,7 @@ $ionic-states-focus-primary: #9ec4fd; // TODO(ROU-4870): there is no token yet f
@media (any-hover: hover) { @media (any-hover: hover) {
:host(:hover) { :host(:hover) {
--background: #{rgba(tokens.$ionic-color-neutral-900, 0.16)}; --background: #{$ionic-states-hover};
} }
} }
@ -75,3 +81,9 @@ $ionic-states-focus-primary: #9ec4fd; // TODO(ROU-4870): there is no token yet f
opacity: 0.6; opacity: 0.6;
pointer-events: none; pointer-events: none;
} }
// Chip Icon
// ---------------------------------------------
::slotted(ion-icon) {
font-size: tokens.$ionic-font-size-l;
}

12
core/src/components/chip/test/theme-ionic/index.html
View File

@ -50,6 +50,18 @@
<ion-label>Focus</ion-label> <ion-label>Focus</ion-label>
</ion-chip> </ion-chip>
</p> </p>
<h3>With Icon</h3>
<p>
<ion-chip>
<ion-icon icon="calendar"></ion-icon>
<ion-label>Icon</ion-label>
</ion-chip>
<ion-chip>
<ion-label>Icon</ion-label>
<ion-icon icon="calendar"></ion-icon>
</ion-chip>
</p>
</ion-content> </ion-content>
</ion-app> </ion-app>