diff --git a/core/src/components/chip/chip.ios.scss b/core/src/components/chip/chip.ios.scss index a6d23fc169..581488cf6a 100644 --- a/core/src/components/chip/chip.ios.scss +++ b/core/src/components/chip/chip.ios.scss @@ -1,6 +1,8 @@ -@import "./chip"; +@use "./chip" as b; @import "./chip.vars"; +@include b.base; + :host { /** * Main content should be prioritized on iOS, diff --git a/core/src/components/chip/chip.md.scss b/core/src/components/chip/chip.md.scss index 03ea30d5ae..fb067f922f 100644 --- a/core/src/components/chip/chip.md.scss +++ b/core/src/components/chip/chip.md.scss @@ -1,13 +1,7 @@ -@import "./chip"; @import "./chip.vars"; -@import 'chip.md2.scss'; -@import 'chip.md3.scss'; - -$useMD3: true; - -@if $useMD3 { - @include chipMD3; -} @else { - @include chipMD2; +@mixin md2 { + :host { + font-size: $chip-base-font-size-rem; + } } diff --git a/core/src/components/chip/chip.md2.flag.scss b/core/src/components/chip/chip.md2.flag.scss new file mode 100644 index 0000000000..d38d350d64 --- /dev/null +++ b/core/src/components/chip/chip.md2.flag.scss @@ -0,0 +1,9 @@ +@use 'chip.md.scss' as c; +@use 'chip.scss' as b; + +@use '../../utils/md-controller/index.scss' as controller; + +@if controller.$md2 { + @include b.base; + @include c.md2; +} diff --git a/core/src/components/chip/chip.md2.scss b/core/src/components/chip/chip.md2.scss deleted file mode 100644 index 4cebd8f8df..0000000000 --- a/core/src/components/chip/chip.md2.scss +++ /dev/null @@ -1,5 +0,0 @@ -@mixin chipMD2 { - :host { - font-size: $chip-base-font-size-rem; - } -} diff --git a/core/src/components/chip/chip.md3.flag.scss b/core/src/components/chip/chip.md3.flag.scss new file mode 100644 index 0000000000..c574add7bf --- /dev/null +++ b/core/src/components/chip/chip.md3.flag.scss @@ -0,0 +1,9 @@ +@use 'chip.md3.scss' as c; +@use 'chip.scss' as b; + +@use '../../utils/md-controller/index.scss' as controller; + +@if controller.$md3 { + @include b.base; + @include c.md3; +} diff --git a/core/src/components/chip/chip.md3.scss b/core/src/components/chip/chip.md3.scss index 21b5378038..ec9c9e12d9 100644 --- a/core/src/components/chip/chip.md3.scss +++ b/core/src/components/chip/chip.md3.scss @@ -1,4 +1,6 @@ -@mixin chipMD3 { +@import "./chip.vars"; + +@mixin md3 { :host { background: green; } diff --git a/core/src/components/chip/chip.scss b/core/src/components/chip/chip.scss index 37a3f700f1..a35b8bb7f3 100644 --- a/core/src/components/chip/chip.scss +++ b/core/src/components/chip/chip.scss @@ -1,156 +1,158 @@ @import "../../themes/ionic.globals"; @import "./chip.vars"; -:host { - /** - * @prop --background: Background of the chip - * @prop --color: Color of the chip - */ - --background: #{rgba($text-color-rgb, 0.12)}; - --color: #{rgba($text-color-rgb, 0.87)}; +@mixin base { + :host { + /** + * @prop --background: Background of the chip + * @prop --color: Color of the chip + */ + --background: #{rgba($text-color-rgb, 0.12)}; + --color: #{rgba($text-color-rgb, 0.87)}; - @include border-radius(16px); - @include font-smoothing(); - @include margin(4px); - @include padding(6px, 12px); + @include border-radius(16px); + @include font-smoothing(); + @include margin(4px); + @include padding(6px, 12px); - display: inline-flex; + display: inline-flex; - position: relative; + position: relative; - align-items: center; + align-items: center; - min-height: 32px; + min-height: 32px; - background: var(--background); - color: var(--color); + background: var(--background); + color: var(--color); - font-family: $font-family-base; + font-family: $font-family-base; - cursor: pointer; + cursor: pointer; - overflow: hidden; + overflow: hidden; - vertical-align: middle; - box-sizing: border-box; -} - -:host(.chip-disabled) { - cursor: default; - opacity: 0.4; - pointer-events: none; -} - -// Chip Colors -// --------------------------------------------- - -:host(.ion-color) { - background: current-color(base, 0.08); - color: current-color(shade); -} - -:host(.ion-color:focus) { - background: current-color(base, 0.12); -} - -:host(.ion-color.ion-activated) { - background: current-color(base, 0.16); -} - -// Outline Chip -// --------------------------------------------- - -:host(.chip-outline) { - border-width: 1px; - border-style: solid; -} - -:host(.chip-outline) { - border-color: rgba($text-color-rgb, 0.32); - - background: transparent; -} - -:host(.chip-outline.ion-color) { - border-color: current-color(base, 0.32); -} - -:host(.chip-outline:not(.ion-color):focus) { - background: rgba($text-color-rgb, 0.04); -} - -:host(.chip-outline.ion-activated:not(.ion-color)) { - background: rgba($text-color-rgb, 0.08); -} - -// Chip Icon -// --------------------------------------------- - -::slotted(ion-icon) { - font-size: $chip-icon-size; -} - -:host(:not(.ion-color)) ::slotted(ion-icon) { - color: rgba($text-color-rgb, 0.54); -} - -::slotted(ion-icon:first-child) { - @include margin(-4px, 8px, -4px, -4px); -} - -::slotted(ion-icon:last-child) { - @include margin(-4px, -4px, -4px, 8px); -} - -// Chip Avatar -// --------------------------------------------- - -::slotted(ion-avatar) { - flex-shrink: 0; - - width: $chip-avatar-size; - height: $chip-avatar-size; -} - -::slotted(ion-avatar:first-child) { - @include margin(-4px, 8px, -4px, -8px); -} - -::slotted(ion-avatar:last-child) { - @include margin(-4px, -8px, -4px, 8px); -} - -// Chip: Focus -// --------------------------------------------- - -:host(:focus) { - outline: none; -} - -:host(:focus) { - --background: #{rgba($text-color-rgb, 0.16)}; -} - -// Chip: Activated -// --------------------------------------------- - -:host(.ion-activated) { - --background: #{rgba($text-color-rgb, 0.2)}; -} - -// Chip: Hover -// --------------------------------------------- - -@media (any-hover: hover) { - :host(:hover) { - --background: #{rgba($text-color-rgb, 0.16)}; + vertical-align: middle; + box-sizing: border-box; } - :host(.ion-color:hover) { + :host(.chip-disabled) { + cursor: default; + opacity: 0.4; + pointer-events: none; + } + + // Chip Colors + // --------------------------------------------- + + :host(.ion-color) { + background: current-color(base, 0.08); + color: current-color(shade); + } + + :host(.ion-color:focus) { background: current-color(base, 0.12); } - :host(.chip-outline:not(.ion-color):hover) { + :host(.ion-color.ion-activated) { + background: current-color(base, 0.16); + } + + // Outline Chip + // --------------------------------------------- + + :host(.chip-outline) { + border-width: 1px; + border-style: solid; + } + + :host(.chip-outline) { + border-color: rgba($text-color-rgb, 0.32); + + background: transparent; + } + + :host(.chip-outline.ion-color) { + border-color: current-color(base, 0.32); + } + + :host(.chip-outline:not(.ion-color):focus) { background: rgba($text-color-rgb, 0.04); } + + :host(.chip-outline.ion-activated:not(.ion-color)) { + background: rgba($text-color-rgb, 0.08); + } + + // Chip Icon + // --------------------------------------------- + + ::slotted(ion-icon) { + font-size: $chip-icon-size; + } + + :host(:not(.ion-color)) ::slotted(ion-icon) { + color: rgba($text-color-rgb, 0.54); + } + + ::slotted(ion-icon:first-child) { + @include margin(-4px, 8px, -4px, -4px); + } + + ::slotted(ion-icon:last-child) { + @include margin(-4px, -4px, -4px, 8px); + } + + // Chip Avatar + // --------------------------------------------- + + ::slotted(ion-avatar) { + flex-shrink: 0; + + width: $chip-avatar-size; + height: $chip-avatar-size; + } + + ::slotted(ion-avatar:first-child) { + @include margin(-4px, 8px, -4px, -8px); + } + + ::slotted(ion-avatar:last-child) { + @include margin(-4px, -8px, -4px, 8px); + } + + // Chip: Focus + // --------------------------------------------- + + :host(:focus) { + outline: none; + } + + :host(:focus) { + --background: #{rgba($text-color-rgb, 0.16)}; + } + + // Chip: Activated + // --------------------------------------------- + + :host(.ion-activated) { + --background: #{rgba($text-color-rgb, 0.2)}; + } + + // Chip: Hover + // --------------------------------------------- + + @media (any-hover: hover) { + :host(:hover) { + --background: #{rgba($text-color-rgb, 0.16)}; + } + + :host(.ion-color:hover) { + background: current-color(base, 0.12); + } + + :host(.chip-outline:not(.ion-color):hover) { + background: rgba($text-color-rgb, 0.04); + } + } } diff --git a/core/src/components/chip/chip.tsx b/core/src/components/chip/chip.tsx index 2b7c7f0b98..4b2ed26b87 100644 --- a/core/src/components/chip/chip.tsx +++ b/core/src/components/chip/chip.tsx @@ -5,6 +5,14 @@ import { createColorClasses } from '@utils/theme'; import { getIonMode } from '../../global/ionic-global'; import type { Color } from '../../interface'; +/** +styleUrls: { + ios: 'chip.ios.scss', + md: 'chip.md2.scss', + md3: Build.isDev ? 'chip.md3.scss' : undefined +}, +*/ + /** * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use. */ @@ -12,7 +20,8 @@ import type { Color } from '../../interface'; tag: 'ion-chip', styleUrls: { ios: 'chip.ios.scss', - md: 'chip.md.scss', + md: 'chip.md2.flag.scss', + md3: 'chip.md3.flag.scss' }, shadow: true, }) diff --git a/core/src/components/chip/test.ts b/core/src/components/chip/test.ts deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/core/src/components/chip/test/basic/index.html b/core/src/components/chip/test/basic/index.html index 4b79e66177..2e4a16e003 100644 --- a/core/src/components/chip/test/basic/index.html +++ b/core/src/components/chip/test/basic/index.html @@ -23,82 +23,19 @@ -

Basic Chips

+

Default Chip

Default - - Border Radius - - - - With Icon - - - - - - With Avatar - - - - - - With Icon and Avatar - + +

MD2 Chip

+ + MD2 -

Color Chips

- - Primary - - - Danger - - - - Tertiary with Icon - - - - - - Primary with Avatar - - - Success with Icon - - - -

Outline Chips

- - Outline - - - Danger Outline - - - - Secondary Outline with Icon - - - Primary Outline with Avatar - - - - - - - Outline with Icon and Avatar - +

MD3 Chip

+ + MD3 diff --git a/core/src/global/ionic-global.ts b/core/src/global/ionic-global.ts index 955b3a6cb7..ce48409c68 100644 --- a/core/src/global/ionic-global.ts +++ b/core/src/global/ionic-global.ts @@ -70,7 +70,7 @@ export const initialize = (userConfig: IonicConfig = {}) => { const isIonicElement = (elm: any) => elm.tagName?.startsWith('ION-'); - const isAllowedIonicModeValue = (elmMode: string) => ['ios', 'md'].includes(elmMode); + const isAllowedIonicModeValue = (elmMode: string) => ['ios', 'md', 'md3'].includes(elmMode); setMode((elm: any) => { while (elm) { diff --git a/core/src/utils/md-controller/index.scss b/core/src/utils/md-controller/index.scss new file mode 100644 index 0000000000..f9d24c73f2 --- /dev/null +++ b/core/src/utils/md-controller/index.scss @@ -0,0 +1,2 @@ +$md2: true; +$md3: false;