diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index d8d7947529..bd46019582 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -442,7 +442,7 @@ proxyMethods(IonList, ['closeSlidingItems']); proxyInputs(IonList, ['inset', 'lines', 'mode']); export declare interface IonListHeader extends Components.IonListHeader {} -@Component({ selector: 'ion-list-header', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['color', 'mode'] }) +@Component({ selector: 'ion-list-header', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['color', 'lines', 'mode'] }) export class IonListHeader { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -450,7 +450,7 @@ export class IonListHeader { this.el = r.nativeElement; } } -proxyInputs(IonListHeader, ['color', 'mode']); +proxyInputs(IonListHeader, ['color', 'lines', 'mode']); export declare interface IonMenu extends Components.IonMenu {} @Component({ selector: 'ion-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['contentId', 'disabled', 'maxEdgeStart', 'menuId', 'side', 'swipeGesture', 'type'] }) diff --git a/core/api.txt b/core/api.txt index a43cfaf73f..eb5e5a7824 100644 --- a/core/api.txt +++ b/core/api.txt @@ -566,9 +566,14 @@ ion-list,method,closeSlidingItems,closeSlidingItems() => Promise ion-list-header,shadow ion-list-header,prop,color,string | undefined,undefined,false,false +ion-list-header,prop,lines,"full" | "inset" | "none" | undefined,undefined,false,false ion-list-header,prop,mode,"ios" | "md",undefined,false,false ion-list-header,css-prop,--background +ion-list-header,css-prop,--border-color +ion-list-header,css-prop,--border-style +ion-list-header,css-prop,--border-width ion-list-header,css-prop,--color +ion-list-header,css-prop,--inner-border-width ion-loading,scoped ion-loading,prop,animated,boolean,true,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index dc86f3e4c0..0df2050ff4 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -1199,6 +1199,10 @@ export namespace Components { */ 'color'?: Color; /** + * How the bottom border should be displayed on the list header. + */ + 'lines'?: 'full' | 'inset' | 'none'; + /** * The mode determines which platform styles to use. */ 'mode'?: "ios" | "md"; @@ -4641,6 +4645,10 @@ declare namespace LocalJSX { */ 'color'?: Color; /** + * How the bottom border should be displayed on the list header. + */ + 'lines'?: 'full' | 'inset' | 'none'; + /** * The mode determines which platform styles to use. */ 'mode'?: "ios" | "md"; diff --git a/core/src/components/badge/test/basic/index.html b/core/src/components/badge/test/basic/index.html index 498b68b173..1d1b246127 100644 --- a/core/src/components/badge/test/basic/index.html +++ b/core/src/components/badge/test/basic/index.html @@ -22,7 +22,11 @@ - Badges Right + + + Badges Right + + Default Badge 00 @@ -70,7 +74,11 @@ - Badges Left + + + Badges Left + + Default Badge 00 diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss index d735e11215..2c507bd643 100644 --- a/core/src/components/button/button.ios.scss +++ b/core/src/components/button/button.ios.scss @@ -68,6 +68,11 @@ --background-focused: #{ion-color(primary, base, .1)}; --color-activated: #{ion-color(primary, base)}; --color-focused: #{ion-color(primary, base)}; + + font-size: #{$button-ios-clear-font-size}; + font-weight: #{$button-ios-clear-font-weight}; + + letter-spacing: #{$button-ios-clear-letter-spacing}; } diff --git a/core/src/components/button/button.ios.vars.scss b/core/src/components/button/button.ios.vars.scss index 9ed8c2cc8b..31d47e41a6 100644 --- a/core/src/components/button/button.ios.vars.scss +++ b/core/src/components/button/button.ios.vars.scss @@ -153,6 +153,15 @@ $button-ios-outline-background-color-focused: ion-color(primary, base, $ // iOS Clear Button // -------------------------------------------------- +/// @prop - Font size of the clear button +$button-ios-clear-font-size: 17px !default; + +/// @prop - Font weight of the clear button +$button-ios-clear-font-weight: normal !default; + +/// @prop - Letter spacing of the clear button +$button-ios-clear-letter-spacing: 0 !default; + /// @prop - Border color of the clear button $button-ios-clear-border-color: transparent !default; diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx index 3bfaac269c..140b6b4e39 100644 --- a/core/src/components/button/button.tsx +++ b/core/src/components/button/button.tsx @@ -23,9 +23,9 @@ import { createColorClasses, openURL } from '../../utils/theme'; shadow: true, }) export class Button implements ComponentInterface, AnchorInterface, ButtonInterface { - - private inToolbar = false; private inItem = false; + private inListHeader = false; + private inToolbar = false; @Element() el!: HTMLElement; @@ -124,6 +124,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf componentWillLoad() { this.inToolbar = !!this.el.closest('ion-buttons'); + this.inListHeader = !!this.el.closest('ion-list-header'); this.inItem = !!this.el.closest('ion-item') || !!this.el.closest('ion-item-divider'); } @@ -189,7 +190,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf let fill = this.fill; if (fill === undefined) { - fill = this.inToolbar ? 'clear' : 'solid'; + fill = this.inToolbar || this.inListHeader ? 'clear' : 'solid'; } return ( - Native + + Native +
@@ -49,7 +51,9 @@
- Ionic + + Ionic + Unchecked @@ -72,7 +76,9 @@ - Colors + + Colors +
@@ -87,7 +93,9 @@
- Parent + + Parent +
    diff --git a/core/src/components/item-sliding/test/lines/index.html b/core/src/components/item-sliding/test/lines/index.html index dbfc7f8d7e..8bd003becc 100644 --- a/core/src/components/item-sliding/test/lines/index.html +++ b/core/src/components/item-sliding/test/lines/index.html @@ -22,22 +22,38 @@ - Default List + + + Default List + + - Full List + + + Full List + + - Inset List + + + Inset List + + - No Lines List + + + No Lines List + + diff --git a/core/src/components/item/item.ios.vars.scss b/core/src/components/item/item.ios.vars.scss index 08fbfcc00c..d8a8fb053a 100644 --- a/core/src/components/item/item.ios.vars.scss +++ b/core/src/components/item/item.ios.vars.scss @@ -46,13 +46,13 @@ $item-ios-detail-icon-color: $item-ios-border-color !default; $item-ios-padding-top: 10px !default; /// @prop - Padding end for the item content -$item-ios-padding-end: 16px !default; +$item-ios-padding-end: 20px !default; /// @prop - Padding bottom for the item content $item-ios-padding-bottom: 10px !default; /// @prop - Padding start for the item content -$item-ios-padding-start: 16px !default; +$item-ios-padding-start: 20px !default; /// @prop - Border bottom width for the item when lines are displayed $item-ios-border-bottom-width: $hairlines-width !default; diff --git a/core/src/components/item/test/inputs/index.html b/core/src/components/item/test/inputs/index.html index c0c4504667..c0a50d0e71 100644 --- a/core/src/components/item/test/inputs/index.html +++ b/core/src/components/item/test/inputs/index.html @@ -80,7 +80,11 @@ - Controls + + + Controls + + Value Controls @@ -113,7 +117,11 @@ - Multiple inputs/clickables + + + Multiple inputs/clickables + + diff --git a/core/src/components/item/test/lines/index.html b/core/src/components/item/test/lines/index.html index 2f21718858..4eb2b12406 100644 --- a/core/src/components/item/test/lines/index.html +++ b/core/src/components/item/test/lines/index.html @@ -70,7 +70,11 @@ - List Full Lines + + + List Full Lines + + Item @@ -84,7 +88,9 @@ - List Inset Lines + + List Inset Lines + Item @@ -99,7 +105,9 @@ - List No Lines + + List No Lines + Item @@ -165,7 +173,11 @@ - List Full Lines + + + List Full Lines + + Item @@ -179,7 +191,9 @@ - List Inset Lines + + List Inset Lines + Item @@ -194,7 +208,9 @@ - List No Lines + + List No Lines + Item diff --git a/core/src/components/item/test/reorder/index.html b/core/src/components/item/test/reorder/index.html index 3595514a03..b3841129f1 100644 --- a/core/src/components/item/test/reorder/index.html +++ b/core/src/components/item/test/reorder/index.html @@ -28,12 +28,20 @@ - start + + + Start + + - end + + + End + + diff --git a/core/src/components/label/label.ios.scss b/core/src/components/label/label.ios.scss index 3fe36683b7..8269e8d42d 100644 --- a/core/src/components/label/label.ios.scss +++ b/core/src/components/label/label.ios.scss @@ -45,9 +45,9 @@ // -------------------------------------------------- ::slotted(*) h1 { - @include margin(0, 0, 2px); + @include margin(3px, 0, 2px); - font-size: 24px; + font-size: 22px; font-weight: normal; } diff --git a/core/src/components/list-header/list-header.ios.scss b/core/src/components/list-header/list-header.ios.scss index 834d67767b..87fbc73ab2 100644 --- a/core/src/components/list-header/list-header.ios.scss +++ b/core/src/components/list-header/list-header.ios.scss @@ -5,17 +5,46 @@ // -------------------------------------------------- :host { - --background: #{$list-ios-header-background-color}; - --color: #{$list-ios-header-color}; + --background: #{$list-header-ios-background-color}; + --color: #{$list-header-ios-color}; + --border-color: #{$item-ios-border-bottom-color}; - @include padding-horizontal(calc(var(--ion-safe-area-left, 0px) + #{$list-ios-header-padding-start}), null); + @include padding-horizontal(calc(var(--ion-safe-area-left, 0px) + #{$list-header-ios-padding-start}), null); position: relative; - font-size: $list-ios-header-font-size; - font-weight: $list-ios-header-font-weight; + align-items: flex-end; - letter-spacing: $list-ios-header-letter-spacing; + font-size: $list-header-ios-font-size; + font-weight: $list-header-ios-font-weight; - text-transform: $list-ios-header-text-transform; + letter-spacing: $list-header-ios-letter-spacing; +} + +// List Header: Slotted Components +// -------------------------------------------------- + +::slotted(ion-button), +::slotted(ion-label) { + @include margin(29px, null, 6px); +} + +::slotted(ion-button) { + @include margin(null, 3px); + + height: 1.4em; +} + + +// List Header Lines +// -------------------------------------------------- + +// Full lines - apply the border to the list header +// Inset lines - apply the border to the list header inner +:host(.list-header-lines-full) { + --border-width: #{0 0 $item-ios-border-bottom-width 0}; +} + +:host(.list-header-lines-inset) { + --inner-border-width: #{0 0 $item-ios-border-bottom-width 0}; } diff --git a/core/src/components/list-header/list-header.ios.vars.scss b/core/src/components/list-header/list-header.ios.vars.scss index 12fa3c6516..148228cc88 100644 --- a/core/src/components/list-header/list-header.ios.vars.scss +++ b/core/src/components/list-header/list-header.ios.vars.scss @@ -4,23 +4,20 @@ // iOS List Header // -------------------------------------------------- -/// @prop - Padding start of the header in a list -$list-ios-header-padding-start: $item-ios-padding-start !default; +/// @prop - Padding start of the list header +$list-header-ios-padding-start: $item-ios-padding-start !default; -/// @prop - Font size of the header in a list -$list-ios-header-font-size: 12px !default; +/// @prop - Font size of the list header +$list-header-ios-font-size: 22px !default; -/// @prop - Font weight of the header in a list -$list-ios-header-font-weight: 500 !default; +/// @prop - Font weight of the list header +$list-header-ios-font-weight: 700 !default; -/// @prop - Letter spacing of the header in a list -$list-ios-header-letter-spacing: 1px !default; +/// @prop - Letter spacing of the list header +$list-header-ios-letter-spacing: 0 !default; -/// @prop - Text transform of the header in a list -$list-ios-header-text-transform: uppercase !default; +/// @prop - Text color of the list header +$list-header-ios-color: $text-color-step-150 !default; -/// @prop - Text color of the header in a list -$list-ios-header-color: $text-color-step-150 !default; - -/// @prop - Background color of the header in a list -$list-ios-header-background-color: transparent !default; +/// @prop - Background color of the list header +$list-header-ios-background-color: transparent !default; diff --git a/core/src/components/list-header/list-header.md.scss b/core/src/components/list-header/list-header.md.scss index b66b9fd2b4..6f1f7d92c5 100644 --- a/core/src/components/list-header/list-header.md.scss +++ b/core/src/components/list-header/list-header.md.scss @@ -6,11 +6,25 @@ :host { --background: transparent; - --color: #{$list-md-header-color}; + --color: #{$list-header-md-color}; + --border-color: #{$item-md-border-bottom-color}; - @include padding-horizontal(calc(var(--ion-safe-area-left, 0px) + #{$list-md-header-padding-start}), null); + @include padding-horizontal(calc(var(--ion-safe-area-left, 0) + #{$list-header-md-padding-start}), null); - min-height: $list-md-header-min-height; + min-height: $list-header-md-min-height; - font-size: $list-md-header-font-size; + font-size: $list-header-md-font-size; +} + +// List Header Lines +// -------------------------------------------------- + +// Full lines - apply the border to the list header +// Inset lines - apply the border to the list header inner +:host(.list-header-lines-full) { + --border-width: #{0 0 $item-md-border-bottom-width 0}; +} + +:host(.list-header-lines-inset) { + --inner-border-width: #{0 0 $item-md-border-bottom-width 0}; } diff --git a/core/src/components/list-header/list-header.md.vars.scss b/core/src/components/list-header/list-header.md.vars.scss index b7c3ed7f08..6a34cc4575 100644 --- a/core/src/components/list-header/list-header.md.vars.scss +++ b/core/src/components/list-header/list-header.md.vars.scss @@ -4,14 +4,14 @@ // Material Design List Header // -------------------------------------------------- -/// @prop - Padding start of the header in a list -$list-md-header-padding-start: $item-md-padding-start !default; +/// @prop - Padding start of the list header +$list-header-md-padding-start: $item-md-padding-start !default; -/// @prop - Minimum height of the header in a list -$list-md-header-min-height: 45px !default; +/// @prop - Minimum height of the list header +$list-header-md-min-height: 45px !default; -/// @prop - Font size of the header in a list -$list-md-header-font-size: 14px !default; +/// @prop - Font size of the list header +$list-header-md-font-size: 14px !default; -/// @prop - Text color of the header in a list -$list-md-header-color: $text-color !default; +/// @prop - Text color of the list header +$list-header-md-color: $text-color !default; diff --git a/core/src/components/list-header/list-header.scss b/core/src/components/list-header/list-header.scss index c0299fae97..9021f794d8 100644 --- a/core/src/components/list-header/list-header.scss +++ b/core/src/components/list-header/list-header.scss @@ -8,7 +8,16 @@ /** * @prop --background: Background of the list header * @prop --color: Color of the list header text + * + * @prop --border-color: Color of the list header border + * @prop --border-width: Width of the list header border + * @prop --border-style: Style of the list header border + * + * @prop --inner-border-width: Width of the inner list header border */ + --border-style: solid; + --border-width: 0; + --inner-border-width: 0; @include font-smoothing(); @include margin(0); @@ -22,6 +31,10 @@ width: 100%; min-height: 40px; + border-width: var(--border-width); + border-style: var(--border-style); + border-color: var(--border-color); + background: var(--background); color: var(--color); @@ -32,3 +45,47 @@ background: current-color(base); color: current-color(contrast); } + +// Inner List Header +// -------------------------------------------------- + +.list-header-inner { + display: flex; + + // This is required to work with an inset highlight + position: relative; + + flex: 1; + flex-direction: inherit; + align-items: inherit; + align-self: stretch; + + min-height: inherit; + + border-width: var(--inner-border-width); + border-style: var(--border-style); + border-color: var(--border-color); + + overflow: inherit; + box-sizing: border-box; +} + +::slotted(ion-label) { + flex: 1 1 auto; +} + +// List Header Lines +// -------------------------------------------------- + +// Full lines - remove the border from the item inner (inset list items) +// Inset lines - remove the border on the item (full list items) +// No lines - remove the border on both (full / inset list items) +:host(.list-header-lines-inset), +:host(.list-header-lines-none) { + --border-width: 0; +} + +:host(.list-header-lines-full), +:host(.list-header-lines-none) { + --inner-border-width: 0; +} diff --git a/core/src/components/list-header/list-header.tsx b/core/src/components/list-header/list-header.tsx index 805158e5ce..3e084218a3 100644 --- a/core/src/components/list-header/list-header.tsx +++ b/core/src/components/list-header/list-header.tsx @@ -24,16 +24,26 @@ export class ListHeader implements ComponentInterface { */ @Prop() color?: Color; + /** + * How the bottom border should be displayed on the list header. + */ + @Prop() lines?: 'full' | 'inset' | 'none'; + render() { + const { lines } = this; const mode = getIonMode(this); + return ( - +
    + +
    ); } diff --git a/core/src/components/list-header/readme.md b/core/src/components/list-header/readme.md index be80522f49..5cb28c018f 100644 --- a/core/src/components/list-header/readme.md +++ b/core/src/components/list-header/readme.md @@ -51,18 +51,23 @@ export const ListHeaderExample: React.FC = () => ( ## Properties -| Property | Attribute | Description | Type | Default | -| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | -| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ----------- | +| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` | +| `lines` | `lines` | How the bottom border should be displayed on the list header. | `"full" \| "inset" \| "none" \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | ## CSS Custom Properties -| Name | Description | -| -------------- | ----------------------------- | -| `--background` | Background of the list header | -| `--color` | Color of the list header text | +| Name | Description | +| ---------------------- | ------------------------------------- | +| `--background` | Background of the list header | +| `--border-color` | Color of the list header border | +| `--border-style` | Style of the list header border | +| `--border-width` | Width of the list header border | +| `--color` | Color of the list header text | +| `--inner-border-width` | Width of the inner list header border | ## Dependencies diff --git a/core/src/components/list-header/test/spec/e2e.ts b/core/src/components/list-header/test/spec/e2e.ts new file mode 100644 index 0000000000..0a92bcf559 --- /dev/null +++ b/core/src/components/list-header/test/spec/e2e.ts @@ -0,0 +1,10 @@ +import { newE2EPage } from '@stencil/core/testing'; + +test('list-header: spec', async () => { + const page = await newE2EPage({ + url: '/src/components/list-header/test/spec?ionic:_testing=true' + }); + + const compare = await page.compareScreenshot(); + expect(compare).toMatchScreenshot(); +}); diff --git a/core/src/components/list-header/test/spec/index.html b/core/src/components/list-header/test/spec/index.html new file mode 100644 index 0000000000..4ea709a66b --- /dev/null +++ b/core/src/components/list-header/test/spec/index.html @@ -0,0 +1,80 @@ + + + + + + List Header - Spec + + + + + + + + + + + + + + List Header - Spec + + + + + + + Recent + Clear + + + +

    I got you babe

    +     +     +     + + + Trending + + + +

    harry styles

    +     +     + + +

    christmas

    +     +     + + +

    falling

    +     +     +     + + + New This Week + See All + + + New This Week + See All + + + New This Week + See All + + +     +     + + + + + + diff --git a/core/src/components/list/list.ios.vars.scss b/core/src/components/list/list.ios.vars.scss index 3d85bcf920..6aabd7ad48 100644 --- a/core/src/components/list/list.ios.vars.scss +++ b/core/src/components/list/list.ios.vars.scss @@ -11,7 +11,7 @@ $list-ios-margin-top: 10px !default; $list-ios-margin-end: 0 !default; /// @prop - Margin bottom of the list -$list-ios-margin-bottom: 32px !default; +$list-ios-margin-bottom: 0 !default; /// @prop - Margin start of the list $list-ios-margin-start: 0 !default; diff --git a/core/src/components/list/test/lines/index.html b/core/src/components/list/test/lines/index.html index 45b031641b..bad4984794 100644 --- a/core/src/components/list/test/lines/index.html +++ b/core/src/components/list/test/lines/index.html @@ -22,64 +22,92 @@ - Lines: full - Pokémon Yellow - Super Metroid - Mega Man X - The Legend of Zelda - Pac-Man + + + Lines: full + + + Pokémon Yellow + Super Metroid + Mega Man X + The Legend of Zelda + Pac-Man - Lines: inset - Super Mario World - Street Fighter II - Half Life - Portal + + + Lines: inset + + + Super Mario World + Street Fighter II + Half Life + Portal - Lines: none - Star Fox - Tetris - Donkey Kong III - Goldeneye 007 + + + Lines: none + + + Star Fox + Tetris + Donkey Kong III + Goldeneye 007 - Lines: Default - Fallout - GTA - Halo - Doom - Final Fantasy VII + + + Lines: Default + + + Fallout + GTA + Halo + Doom + Final Fantasy VII - Wrapper item: default -
    Pokémon Yellow
    -
    Super Metroid
    -
    Mega Man X
    -
    The Legend of Zelda
    -
    Pac-Man
    + + + Wrapper item: default + + +
    Pokémon Yellow
    +
    Super Metroid
    +
    Mega Man X
    +
    The Legend of Zelda
    +
    Pac-Man
     - Wrapper list lines: none -
    Pokémon Yellow
    -
    Super Metroid
    -
    Mega Man X
    -
    The Legend of Zelda
    -
    Pac-Man
    + + + Wrapper list lines: none + + +
    Pokémon Yellow
    +
    Super Metroid
    +
    Mega Man X
    +
    The Legend of Zelda
    +
    Pac-Man
     - Wrapper w/ item lines: none -
    Pokémon Yellow
    -
    Super Metroid
    -
    Mega Man X
    -
    The Legend of Zelda
    -
    Pac-Man
    + + + Wrapper w/ item lines: none + + +
    Pokémon Yellow
    +
    Super Metroid
    +
    Mega Man X
    +
    The Legend of Zelda
    +
    Pac-Man
         diff --git a/core/src/components/note/test/basic/index.html b/core/src/components/note/test/basic/index.html index b995d8dbcd..8ac76810cf 100644 --- a/core/src/components/note/test/basic/index.html +++ b/core/src/components/note/test/basic/index.html @@ -22,7 +22,11 @@ - Notes Right + + + Notes Right + + Default Note 99 @@ -80,7 +84,11 @@ - Notes Left + + + Notes Left + + Default Note 99 diff --git a/core/src/components/popover/test/basic/index.html b/core/src/components/popover/test/basic/index.html index eeb9f35dc2..4493d2410d 100644 --- a/core/src/components/popover/test/basic/index.html +++ b/core/src/components/popover/test/basic/index.html @@ -74,7 +74,7 @@ this.innerHTML = ` - Ionic + Ionic Item 0 Item 1 Item 2 @@ -101,7 +101,7 @@ this.innerHTML = ` - Ionic + Ionic ` + items + ` diff --git a/core/src/components/popover/test/standalone/index.html b/core/src/components/popover/test/standalone/index.html index fd88b4ed3d..180d08f575 100644 --- a/core/src/components/popover/test/standalone/index.html +++ b/core/src/components/popover/test/standalone/index.html @@ -49,7 +49,7 @@ this.innerHTML = ` - Ionic + Ionic Item 0 Item 1 Item 2 @@ -76,7 +76,7 @@ this.innerHTML = ` - Ionic + Ionic ` + items + ` diff --git a/core/src/components/radio-group/readme.md b/core/src/components/radio-group/readme.md index 635d58d2eb..fa2ba72fef 100644 --- a/core/src/components/radio-group/readme.md +++ b/core/src/components/radio-group/readme.md @@ -19,7 +19,9 @@ radio button within the same group. - Auto Manufacturers + + Auto Manufacturers + @@ -61,7 +63,11 @@ export const RadioGroupExample: React.FC = () => ( - Auto Manufacturers + + + Auto Manufacturers + + Cord @@ -101,7 +107,9 @@ export const RadioGroupExample: React.FC = () => ( - Auto Manufacturers + + Auto Manufacturers + diff --git a/core/src/components/radio-group/usage/angular.md b/core/src/components/radio-group/usage/angular.md index cfb5a15277..83fb5551cb 100644 --- a/core/src/components/radio-group/usage/angular.md +++ b/core/src/components/radio-group/usage/angular.md @@ -2,7 +2,9 @@ - Auto Manufacturers + + Auto Manufacturers + diff --git a/core/src/components/radio-group/usage/javascript.md b/core/src/components/radio-group/usage/javascript.md index cfb5a15277..83fb5551cb 100644 --- a/core/src/components/radio-group/usage/javascript.md +++ b/core/src/components/radio-group/usage/javascript.md @@ -2,7 +2,9 @@ - Auto Manufacturers + + Auto Manufacturers + diff --git a/core/src/components/radio-group/usage/react.md b/core/src/components/radio-group/usage/react.md index 36f55fcf9e..5538988a67 100644 --- a/core/src/components/radio-group/usage/react.md +++ b/core/src/components/radio-group/usage/react.md @@ -6,7 +6,11 @@ export const RadioGroupExample: React.FC = () => ( - Auto Manufacturers + + + Auto Manufacturers + + Cord diff --git a/core/src/components/radio-group/usage/vue.md b/core/src/components/radio-group/usage/vue.md index ec9200a27a..3333e6c28c 100644 --- a/core/src/components/radio-group/usage/vue.md +++ b/core/src/components/radio-group/usage/vue.md @@ -3,7 +3,9 @@ - Auto Manufacturers + + Auto Manufacturers + diff --git a/core/src/components/radio/test/basic/index.html b/core/src/components/radio/test/basic/index.html index 053a122110..539c9b6b29 100644 --- a/core/src/components/radio/test/basic/index.html +++ b/core/src/components/radio/test/basic/index.html @@ -89,7 +89,9 @@ - No Radio Group + + No Radio Group + Kiwi, (ionChange) Secondary color diff --git a/core/src/components/range/test/basic/index.html b/core/src/components/range/test/basic/index.html index 050088575c..67532b5ff2 100644 --- a/core/src/components/range/test/basic/index.html +++ b/core/src/components/range/test/basic/index.html @@ -23,7 +23,9 @@ - Range color + + Range color + @@ -54,7 +56,9 @@ - Dynamic Value + + Dynamic Value + @@ -75,7 +79,9 @@ - Mode + + Mode + @@ -87,7 +93,9 @@ - Options + + Options + @@ -113,7 +121,9 @@ - Coupled sliders + + Coupled sliders + diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md index 947a5374aa..b75f9b5e62 100644 --- a/core/src/components/select/readme.md +++ b/core/src/components/select/readme.md @@ -55,7 +55,11 @@ Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert ```html - Single Selection + + + Single Selection + + Gender @@ -82,7 +86,11 @@ Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert ```html - Multiple Selection + + + Multiple Selection + + Toppings @@ -116,8 +124,12 @@ Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert ```html - Objects as Values (compareWith) - + + + Objects as Values (compareWith) + + + Users @@ -166,7 +178,11 @@ export class SelectExample { ```html - Interface Options + + + Interface Options + + Alert @@ -244,7 +260,11 @@ export class SelectExample { ```html - Single Selection + + + Single Selection + + Gender @@ -271,7 +291,11 @@ export class SelectExample { ```html - Multiple Selection + + + Multiple Selection + + Toppings @@ -305,7 +329,11 @@ export class SelectExample { ```html - Objects as Values (compareWith) + + + Objects as Values (compareWith) + + Users @@ -339,13 +367,13 @@ export class SelectExample { let objectSelectElement = document.getElementById('objectSelectCompareWith'); objectSelectElement.compareWith = compareWithFn; - + objectOptions.forEach((option, i) => { let selectOption = document.createElement('ion-select-option'); selectOption.value = option; selectOption.textContent = option.first + ' ' + option.last; selectOption.selected = (i === 0); - + objectSelectElement.appendChild(selectOption) }); } @@ -355,7 +383,11 @@ export class SelectExample { ```html - Interface Options + + + Interface Options + + Alert @@ -482,7 +514,11 @@ export const SelectExample: React.FC = () => ( ## Single Selection - Single Selection + + + Single Selection + + Gender @@ -504,7 +540,11 @@ export const SelectExample: React.FC = () => ( ## Multiple Selection - Multiple Selection + + + Multiple Selection + + Toppings @@ -538,7 +578,11 @@ export const SelectExample: React.FC = () => ( ## Objects as Values - Objects as Values (compareWith) + + + Objects as Values (compareWith) + + Users @@ -554,7 +598,11 @@ export const SelectExample: React.FC = () => ( ## Interface Options - Interface Options + + + Interface Options + + Alert @@ -614,7 +662,11 @@ export const SelectExample: React.FC = () => ( ```html