From a998c07951c349e9f87b4c203ea9092442bd4db4 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 18 Jul 2024 17:26:53 -0400 Subject: [PATCH 1/3] docs(select): update icon playgrounds to use addIcons usage --- docs/api/select.md | 2 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 22 +++++++++ .../usage/v7/select/start-end-slots/demo.html | 4 +- .../usage/v7/select/start-end-slots/index.md | 30 ++++++++++-- .../index_html.md} | 0 .../start-end-slots/javascript/index_ts.md | 35 ++++++++++++++ .../angular/example_component_html.md | 15 ++++++ .../angular/example_component_ts.md | 22 +++++++++ .../usage/v8/select/start-end-slots/demo.html | 34 ++++++++++++++ .../usage/v8/select/start-end-slots/index.md | 38 +++++++++++++++ .../start-end-slots/javascript/index_html.md | 15 ++++++ .../start-end-slots/javascript/index_ts.md | 46 +++++++++++++++++++ .../usage/v8/select/start-end-slots/react.md | 24 ++++++++++ static/usage/v8/select/start-end-slots/vue.md | 37 +++++++++++++++ versioned_docs/version-v7/api/select.md | 14 ++++++ 16 files changed, 330 insertions(+), 8 deletions(-) rename static/usage/v7/select/start-end-slots/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/select/start-end-slots/angular/example_component_ts.md rename static/usage/v7/select/start-end-slots/{javascript.md => javascript/index_html.md} (100%) create mode 100644 static/usage/v7/select/start-end-slots/javascript/index_ts.md create mode 100644 static/usage/v8/select/start-end-slots/angular/example_component_html.md create mode 100644 static/usage/v8/select/start-end-slots/angular/example_component_ts.md create mode 100644 static/usage/v8/select/start-end-slots/demo.html create mode 100644 static/usage/v8/select/start-end-slots/index.md create mode 100644 static/usage/v8/select/start-end-slots/javascript/index_html.md create mode 100644 static/usage/v8/select/start-end-slots/javascript/index_ts.md create mode 100644 static/usage/v8/select/start-end-slots/react.md create mode 100644 static/usage/v8/select/start-end-slots/vue.md diff --git a/docs/api/select.md b/docs/api/select.md index 3b52ae2c23a..4f6cd7fa937 100644 --- a/docs/api/select.md +++ b/docs/api/select.md @@ -187,7 +187,7 @@ In most cases, [Icon](./icon.md) components placed in these slots should have `a If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to. ::: -import StartEndSlots from '@site/static/usage/v7/select/start-end-slots/index.md'; +import StartEndSlots from '@site/static/usage/v8/select/start-end-slots/index.md'; diff --git a/static/usage/v7/select/start-end-slots/angular.md b/static/usage/v7/select/start-end-slots/angular/example_component_html.md similarity index 100% rename from static/usage/v7/select/start-end-slots/angular.md rename to static/usage/v7/select/start-end-slots/angular/example_component_html.md diff --git a/static/usage/v7/select/start-end-slots/angular/example_component_ts.md b/static/usage/v7/select/start-end-slots/angular/example_component_ts.md new file mode 100644 index 00000000000..f7717b55dc1 --- /dev/null +++ b/static/usage/v7/select/start-end-slots/angular/example_component_ts.md @@ -0,0 +1,22 @@ +```ts +import { Component } from '@angular/core'; + +import { addIcons } from 'ionicons'; +import { eye, leaf } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ eye, leaf }); + } +} +``` diff --git a/static/usage/v7/select/start-end-slots/demo.html b/static/usage/v7/select/start-end-slots/demo.html index a8a6b13bd9d..fd8ff0133d8 100644 --- a/static/usage/v7/select/start-end-slots/demo.html +++ b/static/usage/v7/select/start-end-slots/demo.html @@ -4,8 +4,8 @@ Select - - + + diff --git a/static/usage/v7/select/start-end-slots/index.md b/static/usage/v7/select/start-end-slots/index.md index 7dea970c230..970141a94af 100644 --- a/static/usage/v7/select/start-end-slots/index.md +++ b/static/usage/v7/select/start-end-slots/index.md @@ -1,18 +1,38 @@ import Playground from '@site/src/components/global/Playground'; -import javascript from './javascript.md'; +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v7/select/start-end-slots/javascript.md b/static/usage/v7/select/start-end-slots/javascript/index_html.md similarity index 100% rename from static/usage/v7/select/start-end-slots/javascript.md rename to static/usage/v7/select/start-end-slots/javascript/index_html.md diff --git a/static/usage/v7/select/start-end-slots/javascript/index_ts.md b/static/usage/v7/select/start-end-slots/javascript/index_ts.md new file mode 100644 index 00000000000..7d95af3a26b --- /dev/null +++ b/static/usage/v7/select/start-end-slots/javascript/index_ts.md @@ -0,0 +1,35 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { eye, leaf } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'eye': eye, 'leaf': leaf }); + */ +addIcons({ eye, leaf }); + +defineCustomElements(); +``` diff --git a/static/usage/v8/select/start-end-slots/angular/example_component_html.md b/static/usage/v8/select/start-end-slots/angular/example_component_html.md new file mode 100644 index 00000000000..e42b896605c --- /dev/null +++ b/static/usage/v8/select/start-end-slots/angular/example_component_html.md @@ -0,0 +1,15 @@ +```html + + + + + Apple + Banana + Orange + + + + + + +``` diff --git a/static/usage/v8/select/start-end-slots/angular/example_component_ts.md b/static/usage/v8/select/start-end-slots/angular/example_component_ts.md new file mode 100644 index 00000000000..f7717b55dc1 --- /dev/null +++ b/static/usage/v8/select/start-end-slots/angular/example_component_ts.md @@ -0,0 +1,22 @@ +```ts +import { Component } from '@angular/core'; + +import { addIcons } from 'ionicons'; +import { eye, leaf } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ eye, leaf }); + } +} +``` diff --git a/static/usage/v8/select/start-end-slots/demo.html b/static/usage/v8/select/start-end-slots/demo.html new file mode 100644 index 00000000000..fd8ff0133d8 --- /dev/null +++ b/static/usage/v8/select/start-end-slots/demo.html @@ -0,0 +1,34 @@ + + + + + + Select + + + + + + + + + +
+ + + + + Apple + Banana + Orange + + + + + + +
+ + + + diff --git a/static/usage/v8/select/start-end-slots/index.md b/static/usage/v8/select/start-end-slots/index.md new file mode 100644 index 00000000000..16512ed3369 --- /dev/null +++ b/static/usage/v8/select/start-end-slots/index.md @@ -0,0 +1,38 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/select/start-end-slots/javascript/index_html.md b/static/usage/v8/select/start-end-slots/javascript/index_html.md new file mode 100644 index 00000000000..78d136d6a6a --- /dev/null +++ b/static/usage/v8/select/start-end-slots/javascript/index_html.md @@ -0,0 +1,15 @@ +```html + + + + + Apple + Banana + Orange + + + + + + +``` diff --git a/static/usage/v8/select/start-end-slots/javascript/index_ts.md b/static/usage/v8/select/start-end-slots/javascript/index_ts.md new file mode 100644 index 00000000000..c478e5fa9b4 --- /dev/null +++ b/static/usage/v8/select/start-end-slots/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { eye, leaf } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Theme + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'eye': eye, 'leaf': leaf }); + */ +addIcons({ eye, leaf }); + +defineCustomElements(); +``` diff --git a/static/usage/v8/select/start-end-slots/react.md b/static/usage/v8/select/start-end-slots/react.md new file mode 100644 index 00000000000..98bbf6208d7 --- /dev/null +++ b/static/usage/v8/select/start-end-slots/react.md @@ -0,0 +1,24 @@ +```tsx +import React from 'react'; +import { IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react'; +import { eye, leaf } from 'ionicons/icons'; + +function Example() { + return ( + + + + + Apple + Banana + Orange + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/select/start-end-slots/vue.md b/static/usage/v8/select/start-end-slots/vue.md new file mode 100644 index 00000000000..37882998e57 --- /dev/null +++ b/static/usage/v8/select/start-end-slots/vue.md @@ -0,0 +1,37 @@ +```html + + + +``` diff --git a/versioned_docs/version-v7/api/select.md b/versioned_docs/version-v7/api/select.md index c583a8a1b7e..b664bec16cd 100644 --- a/versioned_docs/version-v7/api/select.md +++ b/versioned_docs/version-v7/api/select.md @@ -175,6 +175,20 @@ import InterfaceOptionsExample from '@site/static/usage/v7/select/customization/ +## Start and End Slots + +The `start` and `end` slots can be used to place icons, buttons, or prefix/suffix text on either side of the select. If the slot content is clicked, the select will not open. + +:::note +In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information. + +If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to. +::: + +import StartEndSlots from '@site/static/usage/v7/select/start-end-slots/index.md'; + + + ## Customization There are two units that make up the Select component and each need to be styled separately. The `ion-select` element is represented on the view by the selected value(s), or placeholder if there is none, and dropdown icon. The interface, which is defined in the [Interfaces](#interfaces) section above, is the dialog that opens when clicking on the `ion-select`. The interface contains all of the options defined by adding `ion-select-option` elements. The following sections will go over the differences between styling these. From af24a0fdbc0bfe9abe8363041ba62da03342401c Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 18 Jul 2024 17:41:44 -0400 Subject: [PATCH 2/3] docs(select): improve playground demo styles --- static/usage/v7/select/start-end-slots/demo.html | 6 ++++++ static/usage/v8/select/start-end-slots/demo.html | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/static/usage/v7/select/start-end-slots/demo.html b/static/usage/v7/select/start-end-slots/demo.html index fd8ff0133d8..19070edb419 100644 --- a/static/usage/v7/select/start-end-slots/demo.html +++ b/static/usage/v7/select/start-end-slots/demo.html @@ -8,6 +8,12 @@ + + diff --git a/static/usage/v8/select/start-end-slots/demo.html b/static/usage/v8/select/start-end-slots/demo.html index fd8ff0133d8..19070edb419 100644 --- a/static/usage/v8/select/start-end-slots/demo.html +++ b/static/usage/v8/select/start-end-slots/demo.html @@ -8,6 +8,12 @@ + + From 35dc38d527ae98899d0c70910ccc02a956c11ed6 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 18 Jul 2024 17:43:34 -0400 Subject: [PATCH 3/3] docs(select): use proper version for v8 demo --- static/usage/v8/select/start-end-slots/demo.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/usage/v8/select/start-end-slots/demo.html b/static/usage/v8/select/start-end-slots/demo.html index 19070edb419..72885a6b03c 100644 --- a/static/usage/v8/select/start-end-slots/demo.html +++ b/static/usage/v8/select/start-end-slots/demo.html @@ -6,8 +6,8 @@ Select - - + +