From 08fc0b9160d4dfebd00f9383564b0d38a83beeae Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 27 Jun 2024 17:53:51 -0400 Subject: [PATCH] feat(many): default components to Phosphor Icons for ionic theme (#29617) Issue number: internal --------- ## What is the current behavior? Icons in the Ionic theme default to Ionicons. ## What is the new behavior? - Renames the following config properties: - `datetimeShowMonthYearIcon` to `datetimeExpandedIcon` - `datetimeHideMonthYearIcon` to `datetimeCollapsedIcon` - `selectExpandIcon` to `selectExpandedIcon` - Updates the icons for the `ionic` theme to the following Phosphor Icons: | Component | Config | Phosphor Icon | Font Weight | | ------------------------ | --------------------------- | ----------------- | ----------- | | Accordion | `accordionToggleIcon` | `CaretDown` | `regular` | | Back Button | `backButtonIcon` | `CaretLeft` | `regular` | | Breadcrumb | `breadcrumbSeparatorIcon` | `CaretRight` | `regular` | | Breadcrumb | `breadcrumbCollapsedIcon` | `DotsThree` | `regular` | | Checkbox | N/A | `Check` | `bold` | | Checkbox (indeterminate) | N/A | `Minus` | `bold` | | Datetime | `datetimeNextIcon` | `CaretRight` | `regular` | | Datetime | `datetimePreviousIcon` | `CaretLeft` | `regular` | | Datetime | `datetimeCollapsedIcon` | `CaretDown` | `regular` | | Datetime | `datetimeExpandedIcon` | `CaretUp` | `regular` | | Fab Button | `fabButtonCloseIcon` | `X` | `regular` | | Input | `inputClearIcon` | `X` | `regular` | | Input Password Toggle | `inputPasswordShowIcon` | `Eye` | `regular` | | Input Password Toggle | `inputPasswordHideIcon` | `EyeSlash` | `regular` | | Item | `itemDetailIcon` | `CaretRight` | `regular` | | Menu Button | `menuIcon` | `List` | `regular` | | Reorder | `reorderHandleIcon` | `List` | `regular` | | Refresher | `refreshingIcon` | :x: | | | Refresher (arrow icon) | N/A | `CaretLeft` | `fill` | | Searchbar | `searchbarCancelIcon` | `ArrowLeft` | `regular` | | Searchbar | `searchbarClearIcon` | `X` | `regular` | | Searchbar | `searchbarSearchIcon` | `MagnifyingGlass` | `regular` | | Select | `selectExpandedIcon` | `CaretDown` | `regular` | | Select | `selectCollapsedIcon` | `CaretDown` | `regular` | | Toggle | `toggleCheckedIcon` | `LineVertical` | `regular` | | Toggle | `toggleUncheckedIcon` | `Circle` | `regular` | ## Does this introduce a breaking change? - [ ] Yes - [x] No --- core/package-lock.json | 11 +++ core/package.json | 1 + core/src/components/accordion/accordion.tsx | 25 ++++- .../components/back-button/back-button.tsx | 26 +++-- core/src/components/breadcrumb/breadcrumb.tsx | 41 +++++++- .../components/checkbox/checkbox.ionic.scss | 4 +- core/src/components/checkbox/checkbox.tsx | 9 +- ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 2684 -> 2414 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 3683 -> 3691 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 2410 -> 2418 bytes ...ionic-md-rtl-light-Mobile-Chrome-linux.png | Bin 2706 -> 2431 bytes ...onic-md-rtl-light-Mobile-Firefox-linux.png | Bin 3459 -> 3478 bytes ...ionic-md-rtl-light-Mobile-Safari-linux.png | Bin 2440 -> 2432 bytes ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 3082 -> 2715 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 2881 -> 2788 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 2739 -> 2668 bytes ...ionic-md-rtl-light-Mobile-Chrome-linux.png | Bin 3102 -> 2726 bytes ...onic-md-rtl-light-Mobile-Firefox-linux.png | Bin 2929 -> 2851 bytes ...ionic-md-rtl-light-Mobile-Safari-linux.png | Bin 2763 -> 2684 bytes ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 2279 -> 2067 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 2486 -> 2370 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 2148 -> 2110 bytes ...ionic-md-rtl-light-Mobile-Chrome-linux.png | Bin 2290 -> 2064 bytes ...onic-md-rtl-light-Mobile-Firefox-linux.png | Bin 2582 -> 2451 bytes ...ionic-md-rtl-light-Mobile-Safari-linux.png | Bin 2134 -> 2083 bytes ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 2886 -> 2586 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 2937 -> 2934 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 2492 -> 2505 bytes ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 1995 -> 1823 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 2641 -> 2651 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 1827 -> 1837 bytes ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 1148 -> 1197 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 1231 -> 1247 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 1168 -> 1229 bytes ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 1417 -> 1283 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 1248 -> 1270 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 1313 -> 1319 bytes ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 2542 -> 2308 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 3195 -> 3219 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 2288 -> 2299 bytes ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 1893 -> 1736 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 2617 -> 2628 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 1790 -> 1800 bytes core/src/components/datetime/datetime.tsx | 89 ++++++++++++++--- core/src/components/fab-button/fab-button.tsx | 26 ++++- .../input-password-toggle.tsx | 50 +++++++++- core/src/components/input/input.tsx | 26 +++-- .../components/input/test/basic/index.html | 4 + ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 2524 -> 2476 bytes ...onic-md-rtl-light-Mobile-Firefox-linux.png | Bin 2539 -> 2497 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 1981 -> 1934 bytes ...onic-md-rtl-light-Mobile-Firefox-linux.png | Bin 1976 -> 1941 bytes core/src/components/item/item.tsx | 24 ++++- .../components/menu-button/menu-button.tsx | 20 +++- .../refresher-content/refresher-content.scss | 1 + .../refresher-content/refresher-content.tsx | 11 ++- core/src/components/reorder/reorder.tsx | 16 ++- core/src/components/searchbar/searchbar.tsx | 92 ++++++++++++------ core/src/components/select/select.tsx | 61 +++++++----- core/src/components/toggle/toggle.tsx | 33 +++++-- core/src/utils/config.ts | 10 +- core/stencil.config.ts | 1 + core/svgTransform.js | 13 +++ 63 files changed, 465 insertions(+), 129 deletions(-) create mode 100644 core/src/components/refresher-content/refresher-content.scss create mode 100644 core/svgTransform.js diff --git a/core/package-lock.json b/core/package-lock.json index c5fbc031e4..fef0128c08 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -9,6 +9,7 @@ "version": "8.2.2", "license": "MIT", "dependencies": { + "@phosphor-icons/core": "^2.1.1", "@stencil/core": "^4.17.2", "ionicons": "^7.2.2", "tslib": "^2.1.0" @@ -1791,6 +1792,11 @@ "node": ">= 8" } }, + "node_modules/@phosphor-icons/core": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@phosphor-icons/core/-/core-2.1.1.tgz", + "integrity": "sha512-v4ARvrip4qBCImOE5rmPUylOEK4iiED9ZyKjcvzuezqMaiRASCHKcRIuvvxL/twvLpkfnEODCOJp5dM4eZilxQ==" + }, "node_modules/@pkgjs/parseargs": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", @@ -12073,6 +12079,11 @@ "fastq": "^1.6.0" } }, + "@phosphor-icons/core": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@phosphor-icons/core/-/core-2.1.1.tgz", + "integrity": "sha512-v4ARvrip4qBCImOE5rmPUylOEK4iiED9ZyKjcvzuezqMaiRASCHKcRIuvvxL/twvLpkfnEODCOJp5dM4eZilxQ==" + }, "@pkgjs/parseargs": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", diff --git a/core/package.json b/core/package.json index 5a6912c75e..c4351366d0 100644 --- a/core/package.json +++ b/core/package.json @@ -31,6 +31,7 @@ "loader/" ], "dependencies": { + "@phosphor-icons/core": "^2.1.1", "@stencil/core": "^4.17.2", "ionicons": "^7.2.2", "tslib": "^2.1.0" diff --git a/core/src/components/accordion/accordion.tsx b/core/src/components/accordion/accordion.tsx index 891c7aafd4..604399e395 100644 --- a/core/src/components/accordion/accordion.tsx +++ b/core/src/components/accordion/accordion.tsx @@ -1,3 +1,4 @@ +import caretDownRegular from '@phosphor-icons/core/assets/regular/caret-down.svg'; import type { ComponentInterface } from '@stencil/core'; import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core'; import { addEventListener, getElementRoot, raf, removeEventListener, transitionEndAsync } from '@utils/helpers'; @@ -187,14 +188,34 @@ export class Accordion implements ComponentInterface { button.setAttribute('aria-expanded', `${expanded}`); }; + get accordionToggleIcon() { + // Return the icon if it is explicitly set + if (this.toggleIcon != null) { + return this.toggleIcon; + } + + // Determine the theme and map to default icons + const theme = getIonTheme(this); + const defaultIcons = { + ios: chevronDown, + ionic: caretDownRegular, + md: chevronDown, + }; + + // Get the default icon based on the theme, falling back to 'md' icon if necessary + const defaultIcon = defaultIcons[theme] || defaultIcons.md; + + // Return the configured accordion toggle icon or the default icon + return config.get('accordionToggleIcon', defaultIcon); + } + private slotToggleIcon = () => { const ionItem = this.getSlottedHeaderIonItem(); if (!ionItem) { return; } - const { toggleIconSlot } = this; - const accordionToggleIcon = this.toggleIcon ?? config.get('accordionToggleIcon', chevronDown); + const { accordionToggleIcon, toggleIconSlot } = this; /** * Check if there already is a toggle icon. diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx index f2e1c0731f..4c4d738fb7 100644 --- a/core/src/components/back-button/back-button.tsx +++ b/core/src/components/back-button/back-button.tsx @@ -1,3 +1,4 @@ +import caretLeftRegular from '@phosphor-icons/core/assets/regular/caret-left.svg'; import type { ComponentInterface } from '@stencil/core'; import { Component, Element, Host, Prop, h } from '@stencil/core'; import type { ButtonInterface } from '@utils/element-interface'; @@ -80,19 +81,24 @@ export class BackButton implements ComponentInterface, ButtonInterface { } get backButtonIcon() { - const icon = this.icon; - if (icon != null) { - // Icon is set on the component or by the config. - return icon; + // Return the icon if it is explicitly set + if (this.icon != null) { + return this.icon; } - if (getIonTheme(this) === 'ios') { - // default ios back button icon - return config.get('backButtonIcon', chevronBack); - } + // Determine the theme and map to default icons + const theme = getIonTheme(this); + const defaultIcons = { + ios: chevronBack, + ionic: caretLeftRegular, + md: arrowBackSharp, + }; - // default md back button icon - return config.get('backButtonIcon', arrowBackSharp); + // Get the default icon based on the theme, falling back to 'md' icon if necessary + const defaultIcon = defaultIcons[theme] || defaultIcons.md; + + // Return the configured back button icon or the default icon + return config.get('backButtonIcon', defaultIcon); } get backButtonText() { diff --git a/core/src/components/breadcrumb/breadcrumb.tsx b/core/src/components/breadcrumb/breadcrumb.tsx index 1f396314c0..248b2e3f22 100644 --- a/core/src/components/breadcrumb/breadcrumb.tsx +++ b/core/src/components/breadcrumb/breadcrumb.tsx @@ -1,3 +1,5 @@ +import caretRightRegular from '@phosphor-icons/core/assets/regular/caret-right.svg'; +import dotsThreeRegular from '@phosphor-icons/core/assets/regular/dots-three.svg'; import type { ComponentInterface, EventEmitter } from '@stencil/core'; import { Component, Element, Event, Host, Prop, h } from '@stencil/core'; import type { Attributes } from '@utils/helpers'; @@ -133,6 +135,38 @@ export class Breadcrumb implements ComponentInterface { this.inheritedAttributes = inheritAriaAttributes(this.el); } + get breadcrumbCollapsedIcon() { + // Determine the theme and map to default icons + const theme = getIonTheme(this); + const defaultIcons = { + ios: ellipsisHorizontal, + ionic: dotsThreeRegular, + md: ellipsisHorizontal, + }; + + // Get the default icon based on the theme, falling back to 'md' icon if necessary + const defaultIcon = defaultIcons[theme] || defaultIcons.md; + + // Return the configured breadcrumb collapsed icon or the default icon + return config.get('breadcrumbCollapsedIcon', defaultIcon); + } + + get breadcrumbSeparatorIcon() { + // Determine the theme and map to default icons + const theme = getIonTheme(this); + const defaultIcons = { + ios: chevronForwardOutline, + ionic: caretRightRegular, + md: chevronForwardOutline, + }; + + // Get the default icon based on the theme, falling back to 'md' icon if necessary + const defaultIcon = defaultIcons[theme] || defaultIcons.md; + + // Return the configured breadcrumb separator icon or the default icon + return config.get('breadcrumbSeparatorIcon', defaultIcon); + } + private isClickable(): boolean { return this.href !== undefined; } @@ -153,6 +187,8 @@ export class Breadcrumb implements ComponentInterface { const { color, active, + breadcrumbCollapsedIcon, + breadcrumbSeparatorIcon, collapsed, disabled, download, @@ -168,9 +204,6 @@ export class Breadcrumb implements ComponentInterface { const clickable = this.isClickable(); const TagType = this.href === undefined ? 'span' : ('a' as any); - const breadcrumbSeparatorIcon = config.get('breadcrumbSeparatorIcon', chevronForwardOutline); - const breadcrumbCollapsedIcon = config.get('breadcrumbCollapsedIcon', ellipsisHorizontal); - // Links can still be tabbed to when set to disabled if they have an href // in order to truly disable them we can keep it as an anchor but remove the href const href = disabled ? undefined : this.href; @@ -239,7 +272,7 @@ export class Breadcrumb implements ComponentInterface { */