From 1c4b6bd8f24caed18e20b551ba497a5653c6854c Mon Sep 17 00:00:00 2001
From: Bernardo Cardoso <32780808+BenOsodrac@users.noreply.github.com>
Date: Thu, 4 Apr 2024 17:23:47 +0100
Subject: [PATCH] feat(chip): add ionic theme and visual states (#29273)
Issue number: ROU-4840
---------
## What is the new behavior?
- Added a new Ionic Theme partial, with no dependencies to current
`ios/md` architecture. This is to avoid bleeding of the current Design
System into the work we are doing for the new Ionic Design System and
Theme. For that reason I duplicated part of the basic styles for the
Chip (display, box-sizing, etc) and created provisional scss variables,
that should be replaced later on with the correct global ones from the
new Design System.
- Added styles for info chip type states (default, hover, focus and
disabled)
- No new tests were done on this scope, as there're still other Chip
tasks being developed that would override any baselines defined now for
this theme. Once the initial basic work for the Chip is complete, tests
for the Ionic Theme should be implemented, under the task ROU-4837.
- A new page was created - `chip/tests/theme-ionic` - to check styles
for current implementation. This will also be used and improved in
future Chip Ionic Theme tasks.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
---
core/src/components/chip/chip.ionic.scss | 81 +++++++++++++++++++
core/src/components/chip/chip.tsx | 3 +-
.../chip/test/theme-ionic/index.html | 56 +++++++++++++
3 files changed, 139 insertions(+), 1 deletion(-)
create mode 100644 core/src/components/chip/chip.ionic.scss
create mode 100644 core/src/components/chip/test/theme-ionic/index.html
diff --git a/core/src/components/chip/chip.ionic.scss b/core/src/components/chip/chip.ionic.scss
new file mode 100644
index 0000000000..b3d61c5408
--- /dev/null
+++ b/core/src/components/chip/chip.ionic.scss
@@ -0,0 +1,81 @@
+@use "../../themes/ionic.mixins" as mixins;
+
+// Chip
+// --------------------------------------------------
+
+// TODO: These variables below are not definitive! Should be replaced by the real global variables once the Design System work is done and merged!
+// That work should be done once the PR #29245 is merged and FW-5964-migration is complete
+$ionic-color-neutral-10: #f5f5f5;
+$ionic-color-neutral-100: #dadada;
+$ionic-color-neutral-900: #05080f;
+$ionic-border-size-small: 1px;
+$ionic-border-size-medium: 2px;
+$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
+$ionic-font-family: "Inter", sans-serif; // TODO(ROU-4837): this will be replaced by the real variables once the Typography task is merged - ROU-4810 - on the final Chip task
+$ionic-font-size-s: 14px;
+$ionic-border-radius-rounded-large: 16px;
+$ionic-space-xxs: 6px;
+$ionic-space-xs: 8px;
+
+:host {
+ --background: #{$ionic-color-neutral-10};
+ --border-color: transparent;
+ --color: #{$ionic-color-neutral-900};
+ --focus-ring-color: #{$ionic-states-focus-primary};
+ --focus-ring-width: #{$ionic-border-size-medium};
+
+ @include mixins.font-smoothing;
+ @include mixins.padding($ionic-space-xs, $ionic-space-xxs);
+ @include mixins.border-radius($ionic-border-radius-rounded-large);
+
+ display: inline-flex;
+
+ position: relative;
+
+ align-items: center;
+
+ min-height: 32px;
+
+ border-width: $ionic-border-size-small;
+ border-style: solid;
+
+ border-color: var(--border-color);
+
+ background: var(--background);
+ color: var(--color);
+
+ font-family: $ionic-font-family;
+ font-size: $ionic-font-size-s;
+
+ cursor: pointer;
+
+ overflow: hidden;
+
+ vertical-align: middle;
+ box-sizing: border-box;
+}
+
+// Chip: Focus
+// ---------------------------------------------
+
+:host(.ion-focused) {
+ outline: var(--focus-ring-width) solid var(--focus-ring-color);
+ outline-offset: var(--focus-ring-width);
+}
+
+// Chip: Hover
+// ---------------------------------------------
+
+@media (any-hover: hover) {
+ :host(:hover) {
+ --background: #{rgba($ionic-color-neutral-900, 0.16)};
+ }
+}
+
+// Chip: Disabled
+// ---------------------------------------------
+
+:host(.chip-disabled) {
+ opacity: 0.6;
+ pointer-events: none;
+}
diff --git a/core/src/components/chip/chip.tsx b/core/src/components/chip/chip.tsx
index 500e5c56af..a85333512d 100644
--- a/core/src/components/chip/chip.tsx
+++ b/core/src/components/chip/chip.tsx
@@ -14,7 +14,7 @@ import type { Color } from '../../interface';
styleUrls: {
ios: 'chip.ios.scss',
md: 'chip.md.scss',
- ionic: 'chip.md.scss',
+ ionic: 'chip.ionic.scss',
},
shadow: true,
})
@@ -47,6 +47,7 @@ export class Chip implements ComponentInterface {
'chip-outline': this.outline,
'chip-disabled': this.disabled,
'ion-activatable': true,
+ 'ion-focusable': true,
})}
>
diff --git a/core/src/components/chip/test/theme-ionic/index.html b/core/src/components/chip/test/theme-ionic/index.html
new file mode 100644
index 0000000000..bb850b2c25
--- /dev/null
+++ b/core/src/components/chip/test/theme-ionic/index.html
@@ -0,0 +1,56 @@
+
+
+
+
+ Chip - Ionic States
+
+
+
+
+
+
+
+
+
+
+
+