javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(segment): set colors in the parent segment and remove the unused color property (#16590)

Browse Source 
* style(theming): clean up sass TODOs

* fix(item): use proper padding on small buttons in an item

* refactor(components): remove color from unused components

* chore(components): update build files to remove color

* fix(tab-bar): remove unused layout prop

* test(segment): add custom test and update standalone

* docs(segment): update usage examples to remove layout

* test(segment): update tests to remove layout

* test(tab-bar): update tests to remove layout

* fix(segment): set the colors in the parent segment

but use them in the child segment button

This allows the user to customize all of the segment buttons from segment, while still allowing the `color` property to take precedence, and they can also edit the segment button colors directly if desired.

This actually fixes some bugs surrounding colors and allows customization for a segment inside of a toolbar.

references #14853

* style(sass): fix lint errors

* chore(build): build files

* fix(segment-button): use transparent background

* docs(segment-button): add color activated back

* why does the build hate me

* fix(segment): set initial css variables to avoid inheriting

* fix(segment): set initial color activated

also add new line to the nav readme because reasons

* test(segment): parent mode should match children
This commit is contained in:
Brandy Carney
2018-12-05 18:12:14 -05:00
committed by Manu MA
parent 68e26192a5
commit 8029df344a
36 changed files with 432 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
angular/src/directives/proxies.ts
View File

@@ -702,14 +702,14 @@ export class Segment {
}
export declare interface SegmentButton extends StencilComponents<'IonSegmentButton'> {}
@Component({ selector: 'ion-segment-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'checked', 'disabled', 'layout', 'value'] })
@Component({ selector: 'ion-segment-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['mode', 'checked', 'disabled', 'layout', 'value'] })
export class SegmentButton {
ionSelect!: EventEmitter<CustomEvent>;
constructor(c: ChangeDetectorRef, r: ElementRef) {
c.detach();
const el = r.nativeElement;
proxyInputs(this, el, ['color', 'mode', 'checked', 'disabled', 'layout', 'value']);
proxyInputs(this, el, ['mode', 'checked', 'disabled', 'layout', 'value']);
proxyOutputs(this, el, ['ionSelect']);
}
}
@@ -847,27 +847,27 @@ export class Tab {
}
export declare interface TabBar extends StencilComponents<'IonTabBar'> {}
@Component({ selector: 'ion-tab-bar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['mode', 'color', 'layout', 'selectedTab', 'translucent'] })
@Component({ selector: 'ion-tab-bar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['mode', 'color', 'selectedTab', 'translucent'] })
export class TabBar {
ionTabBarChanged!: EventEmitter<CustomEvent>;
constructor(c: ChangeDetectorRef, r: ElementRef) {
c.detach();
const el = r.nativeElement;
proxyInputs(this, el, ['mode', 'color', 'layout', 'selectedTab', 'translucent']);
proxyInputs(this, el, ['mode', 'color', 'selectedTab', 'translucent']);
proxyOutputs(this, el, ['ionTabBarChanged']);
}
}
export declare interface TabButton extends StencilComponents<'IonTabButton'> {}
@Component({ selector: 'ion-tab-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['mode', 'color', 'layout', 'href', 'tab', 'disabled'] })
@Component({ selector: 'ion-tab-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['mode', 'layout', 'href', 'tab', 'disabled'] })
export class TabButton {
ionTabButtonClick!: EventEmitter<CustomEvent>;
constructor(c: ChangeDetectorRef, r: ElementRef) {
c.detach();
const el = r.nativeElement;
proxyInputs(this, el, ['mode', 'color', 'layout', 'href', 'tab', 'disabled']);
proxyInputs(this, el, ['mode', 'layout', 'href', 'tab', 'disabled']);
proxyOutputs(this, el, ['ionTabButtonClick']);
}
}

3
core/api.txt
View File

@@ -875,7 +875,6 @@ ion-searchbar,css-prop,--placeholder-opacity
ion-segment-button
ion-segment-button,prop,checked,boolean,false,false
ion-segment-button,prop,color,string | undefined,undefined,false
ion-segment-button,prop,disabled,boolean,false,false
ion-segment-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,'icon-top',false
ion-segment-button,prop,mode,"ios" | "md",undefined,false
@@ -1010,7 +1009,6 @@ ion-split-pane,css-prop,--border
ion-tab-bar
ion-tab-bar,prop,color,string | undefined,undefined,false
ion-tab-bar,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide",'icon-top',false
ion-tab-bar,prop,mode,"ios" | "md",undefined,false
ion-tab-bar,prop,selectedTab,string | undefined,undefined,false
ion-tab-bar,prop,translucent,boolean,false,false
@@ -1019,7 +1017,6 @@ ion-tab-bar,css-prop,--border
ion-tab-bar,css-prop,--color
ion-tab-button
ion-tab-button,prop,color,string | undefined,undefined,false
ion-tab-button,prop,disabled,boolean,false,false
ion-tab-button,prop,href,string | undefined,undefined,false
ion-tab-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,undefined,false

24
core/src/components.d.ts vendored
View File

@@ -3847,10 +3847,6 @@ export namespace Components {
*/
'checked': boolean;
/**
* 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).
*/
'color'?: Color;
/**
* If `true`, the user cannot interact with the segment button.
*/
'disabled': boolean;
@@ -3873,10 +3869,6 @@ export namespace Components {
*/
'checked'?: boolean;
/**
* 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).
*/
'color'?: Color;
/**
* If `true`, the user cannot interact with the segment button.
*/
'disabled'?: boolean;
@@ -4389,10 +4381,6 @@ export namespace Components {
*/
'color'?: Color;
/**
* Set the layout of the text and icon in the tab bar.
*/
'layout': TabButtonLayout;
/**
* The mode determines which platform styles to use.
*/
'mode': Mode;
@@ -4411,10 +4399,6 @@ export namespace Components {
*/
'color'?: Color;
/**
* Set the layout of the text and icon in the tab bar.
*/
'layout'?: TabButtonLayout;
/**
* The mode determines which platform styles to use.
*/
'mode'?: Mode;
@@ -4430,10 +4414,6 @@ export namespace Components {
}
interface IonTabButton {
/**
* 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).
*/
'color'?: Color;
/**
* The selected tab component
*/
@@ -4456,10 +4436,6 @@ export namespace Components {
'tab': string;
}
interface IonTabButtonAttributes extends StencilHTMLAttributes {
/**
* 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).
*/
'color'?: Color;
/**
* The selected tab component
*/

4
core/src/components/checkbox/checkbox.md.scss
View File

@@ -36,9 +36,7 @@
// Material Design Checkbox: Disabled
// -----------------------------------------
// TODO
// .item-md.item-checkbox-disabled ion-label {
// TODO .item-md.item-checkbox-disabled ion-label
:host(.checkbox-disabled) {
opacity: $checkbox-md-disabled-opacity;
}

9
core/src/components/input/input.ios.scss
View File

@@ -18,12 +18,3 @@
background-size: $input-ios-input-clear-icon-size;
}
// iOS Inset Input
// --------------------------------------------------
// TODO: where is it apply
// :host(.inset-input) {
// @include padding($input-ios-inset-padding-top, $input-ios-inset-padding-end, $input-ios-inset-padding-bottom, $input-ios-inset-padding-start);
// @include margin($input-ios-inset-margin-top, $input-ios-inset-margin-end, $input-ios-inset-margin-bottom, $input-ios-inset-margin-start);
// }

8
core/src/components/input/input.md.scss
View File

@@ -23,11 +23,3 @@
background-size: $input-md-input-clear-icon-size;
}
// Material Design Inset Input
// --------------------------------------------------
// .inset-input {
// @include padding($input-md-inset-padding-top, $input-md-inset-padding-end, $input-md-inset-padding-bottom, $input-md-inset-padding-start);
// @include margin($input-md-inset-margin-top, $input-md-inset-margin-end, $input-md-inset-margin-bottom, $input-md-inset-margin-start);
// }

4
core/src/components/input/input.scss
View File

@@ -35,13 +35,11 @@
width: 100%;
/* stylelint-disable */
/* TODO: find a better solution in padding.css, that does not require !important, */
/* stylelint-disable-next-line all */
padding: 0 !important;
background: var(--background);
color: var(--color);
/* stylelint-enable */
font-family: $font-family-base;

5
core/src/components/item/item.ios.scss
View File

@@ -101,11 +101,6 @@
font-size: 13px;
}
// TODO
// .item-ios .button-small-ios ion-icon[slot="icon-only"] {
// @include padding(0, 1px);
// }
// iOS Item Avatar & Thumbnail
// --------------------------------------------------

10
core/src/components/item/item.md.scss
View File

@@ -73,7 +73,7 @@
// Material Design Multi-line Item
// --------------------------------------------------
// TODO this works if manually adding the class / work with prop?
// TODO this works if manually adding the class / should it work with prop?
// Multi-line items should align the slotted content at the top
:host(.item-multi-line) ::slotted([slot="start"]),
:host(.item-multi-line) ::slotted([slot="end"]) {
@@ -207,7 +207,7 @@
// Material Design Item Button
// --------------------------------------------------
::slotted(.button-small-md) {
::slotted(.button-small) {
--padding-top: 0;
--padding-bottom: 0;
--padding-start: .6em;
@@ -218,12 +218,6 @@
}
// TODO, review
::slotted(.button-small-md) ion-icon[slot="icon-only"] {
@include padding(0);
}
// Material Design Radio Item Label: Checked
// -----------------------------------------

29
core/src/components/segment-button/readme.md
View File

@@ -85,15 +85,15 @@ Segment buttons are groups of related buttons inside of a [Segment](../../segmen
<!-- Icon top -->
<ion-segment>
<ion-segment-button layout="icon-top">
<ion-segment-button>
<ion-label>Item One</ion-label>
<ion-icon name="call"></ion-icon>
</ion-segment-button>
<ion-segment-button checked layout="icon-top">
<ion-segment-button checked>
<ion-label>Item Two</ion-label>
<ion-icon name="heart"></ion-icon>
</ion-segment-button>
<ion-segment-button layout="icon-top">
<ion-segment-button>
<ion-label>Item Three</ion-label>
<ion-icon name="pin"></ion-icon>
</ion-segment-button>
@@ -241,15 +241,15 @@ export class SegmentButtonExample {
<!-- Icon top -->
<ion-segment>
<ion-segment-button layout="icon-top">
<ion-segment-button>
<ion-label>Item One</ion-label>
<ion-icon name="call"></ion-icon>
</ion-segment-button>
<ion-segment-button checked layout="icon-top">
<ion-segment-button checked>
<ion-label>Item Two</ion-label>
<ion-icon name="heart"></ion-icon>
</ion-segment-button>
<ion-segment-button layout="icon-top">
<ion-segment-button>
<ion-label>Item Three</ion-label>
<ion-icon name="pin"></ion-icon>
</ion-segment-button>
@@ -318,14 +318,13 @@ for (let i = 0; i < segmentButtons.length; i++) {
## Properties
| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | --------------------- |
| `checked` | `checked` | If `true`, the segment button is selected. | `boolean` | `false` |
| `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` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the segment button. | `boolean` | `false` |
| `layout` | `layout` | Set the layout of the text and icon in the segment. | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `'icon-top'` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `value` | `value` | The value of the segment button. | `string` | `'ion-sb-' + (ids++)` |
| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | --------------------- |
| `checked` | `checked` | If `true`, the segment button is selected. | `boolean` | `false` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the segment button. | `boolean` | `false` |
| `layout` | `layout` | Set the layout of the text and icon in the segment. | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `'icon-top'` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `value` | `value` | The value of the segment button. | `string` | `'ion-sb-' + (ids++)` |
## Events
@@ -348,7 +347,7 @@ for (let i = 0; i < segmentButtons.length; i++) {
| `--border-style` | Style of the segment button border |
| `--border-width` | Width of the segment button border |
| `--color` | Color of the segment button |
| `--color-activated` | Color of the activated (pressed) segment button |
| `--color-activated` | Color of the activated segment button |
| `--color-checked` | Color of the checked segment button |
| `--color-checked-disabled` | Color of the checked & disabled segment button |
| `--color-disabled` | Color of the disabled segment button |

10
core/src/components/segment-button/segment-button.ios.scss
View File

@@ -5,16 +5,6 @@
// --------------------------------------------------
:host {
--background: #{$segment-button-ios-background-color};
--background-hover: #{$segment-button-ios-background-color-hover};
--background-activated: #{$segment-button-ios-background-color-activated};
--background-checked: #{$segment-button-ios-background-color-checked};
--border-color: #{$segment-button-ios-border-color};
--color: #{$segment-button-ios-text-color};
--color-activated: var(--color);
--color-checked: #{$segment-button-ios-text-color-checked};
--color-disabled: #{ion-color(primary, base, $segment-button-ios-opacity-disabled)};
--color-checked-disabled: #{ion-color(primary, contrast, $segment-button-ios-opacity-disabled)};
--border-radius: #{$segment-button-ios-border-radius};
--border-width: #{$segment-button-ios-border-width};
--border-style: solid;

10
core/src/components/segment-button/segment-button.md.scss
View File

@@ -10,16 +10,6 @@
--padding-bottom: #{$segment-button-md-padding-bottom};
--padding-start: #{$segment-button-md-padding-start};
--transition: #{$segment-button-md-transition};
--background: #{$segment-button-md-background};
--background-hover: #{$segment-button-md-background-hover};
--background-activated: #{$segment-button-md-background-activated};
--color: #{$segment-button-md-text-color};
--color-activated: var(--color);
--color-checked: #{$segment-button-md-text-color-checked};
--color-checked-disabled: var(--color-checked);
--indicator-color: transparent;
--indicator-color-checked: var(--color-checked);
--ripple-color: var(--color-checked);
min-width: $segment-button-md-min-width;

3
core/src/components/segment-button/segment-button.md.vars.scss
View File

@@ -12,6 +12,9 @@ $segment-button-md-text-color: rgba(var(--ion-text-color-
/// @prop - Background of the segment button
$segment-button-md-background: none !default;
/// @prop - Background of the checked segment button
$segment-button-md-background-checked: $segment-button-md-background !default;
/// @prop - Background of the hovered segment button
$segment-button-md-background-hover: ion-color(primary, base, .04) !default;

81
core/src/components/segment-button/segment-button.scss
View File

@@ -11,7 +11,7 @@
* @prop --background-checked: Background of the checked segment button
*
* @prop --color: Color of the segment button
* @prop --color-activated: Color of the activated (pressed) segment button
* @prop --color-activated: Color of the activated segment button
* @prop --color-checked: Color of the checked segment button
* @prop --color-disabled: Color of the disabled segment button
* @prop --color-checked-disabled: Color of the checked & disabled segment button
@@ -41,7 +41,6 @@
--padding-end: 0;
--padding-top: 0;
--padding-bottom: 0;
--indicator-color: transparent;
flex: 1 0 auto;
flex-direction: column;
@@ -52,15 +51,17 @@
border-style: var(--border-style);
border-color: var(--border-color);
background: var(--background);
color: var(--color);
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
font-kerning: none;
overflow: hidden;
font-kerning: none;
}
:host(:first-of-type) {
@@ -103,48 +104,13 @@
outline: none;
background: var(--background);
background: transparent;
contain: content;
cursor: pointer;
}
// Segment Button: Checked
// --------------------------------------------------
:host(.segment-button-checked) {
background: var(--background-checked);
color: var(--color-checked);
}
:host(.segment-button-checked) .segment-button-indicator {
background-color: var(--indicator-color-checked);
}
// Segment Button: Activated
// --------------------------------------------------
:host(.activated) {
color: var(--color-activated);
}
// Segment Button: Disabled
// --------------------------------------------------
:host(.segment-button-disabled) {
color: var(--color-disabled);
}
// Segment Button: Checked & Disabled
// --------------------------------------------------
:host(.segment-button-disabled.segment-button-checked) {
color: var(--color-checked-disabled);
}
// Segment Button: Indicator
// --------------------------------------------------
@@ -161,6 +127,41 @@
}
// Segment Button: Checked
// --------------------------------------------------
:host(.segment-button-checked) {
background: var(--background-checked);
color: var(--color-checked);
}
:host(.segment-button-checked) .segment-button-indicator {
background-color: var(--indicator-color-checked, var(--color-checked));
}
// Segment Button: Activated
// --------------------------------------------------
:host(.activated) {
color: var(--color-activated, var(--color));
}
// Segment Button: Disabled
// --------------------------------------------------
:host(.segment-button-disabled) {
color: var(--color-disabled);
}
// Segment Button: Checked & Disabled
// --------------------------------------------------
:host(.segment-button-disabled.segment-button-checked) {
color: var(--color-checked-disabled);
}
// Segment Button Icon
// --------------------------------------------------
@@ -219,5 +220,5 @@
// --------------------------------------------------
ion-ripple-effect {
color: var(--ripple-color);
color: var(--ripple-color, var(--color-checked));
}

13
core/src/components/segment-button/segment-button.tsx
View File

@@ -1,7 +1,6 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, Watch } from '@stencil/core';
import { Color, Mode, SegmentButtonLayout } from '../../interface';
import { createColorClasses } from '../../utils/theme';
import { Mode, SegmentButtonLayout } from '../../interface';
let ids = 0;
@@ -17,13 +16,6 @@ export class SegmentButton implements ComponentInterface {
@Element() el!: HTMLElement;
/**
* 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).
*/
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.
*/
@@ -74,12 +66,11 @@ export class SegmentButton implements ComponentInterface {
}
hostData() {
const { disabled, checked, color, layout, hasIcon, hasLabel } = this;
const { checked, disabled, hasIcon, hasLabel, layout } = this;
return {
'ion-activatable': 'instant',
'aria-disabled': disabled ? 'true' : null,
class: {
...createColorClasses(color),
'segment-button-has-label': hasLabel,
'segment-button-has-icon': hasIcon,
'segment-button-has-label-only': hasLabel && !hasIcon,

6
core/src/components/segment-button/usage/angular.md
View File

@@ -73,15 +73,15 @@
<!-- Icon top -->
<ion-segment>
<ion-segment-button layout="icon-top">
<ion-segment-button>
<ion-label>Item One</ion-label>
<ion-icon name="call"></ion-icon>
</ion-segment-button>
<ion-segment-button checked layout="icon-top">
<ion-segment-button checked>
<ion-label>Item Two</ion-label>
<ion-icon name="heart"></ion-icon>
</ion-segment-button>
<ion-segment-button layout="icon-top">
<ion-segment-button>
<ion-label>Item Three</ion-label>
<ion-icon name="pin"></ion-icon>
</ion-segment-button>

6
core/src/components/segment-button/usage/javascript.md
View File

@@ -73,15 +73,15 @@
<!-- Icon top -->
<ion-segment>
<ion-segment-button layout="icon-top">
<ion-segment-button>
<ion-label>Item One</ion-label>
<ion-icon name="call"></ion-icon>
</ion-segment-button>
<ion-segment-button checked layout="icon-top">
<ion-segment-button checked>
<ion-label>Item Two</ion-label>
<ion-icon name="heart"></ion-icon>
</ion-segment-button>
<ion-segment-button layout="icon-top">
<ion-segment-button>
<ion-label>Item Three</ion-label>
<ion-icon name="pin"></ion-icon>
</ion-segment-button>

23
core/src/components/segment/segment.ios.scss
View File

@@ -4,6 +4,19 @@
// iOS Segment
// --------------------------------------------------
:host {
--background: #{$segment-button-ios-background-color};
--background-hover: #{$segment-button-ios-background-color-hover};
--background-activated: #{$segment-button-ios-background-color-activated};
--background-checked: #{$segment-button-ios-background-color-checked};
--color: #{$segment-button-ios-text-color};
--color-checked: #{$segment-button-ios-text-color-checked};
--color-disabled: #{ion-color(primary, base, $segment-button-ios-opacity-disabled)};
--color-checked-disabled: #{ion-color(primary, contrast, $segment-button-ios-opacity-disabled)};
--border-color: #{$segment-button-ios-border-color};
--indicator-color: transparent;
}
:host(.segment-disabled) {
opacity: $segment-ios-opacity-disabled;
}
@@ -16,6 +29,7 @@
--border-color: #{current-color(base)};
--background-hover: #{current-color(base, .04)};
background: transparent;
color: #{current-color(base)};
}
@@ -51,10 +65,11 @@
}
:host-context(ion-toolbar):not(.ion-color)::slotted(ion-segment-button) {
--background-checked: var(--color);
--border-color: var(--color);
--color: #{var(--ion-toolbar-color-unchecked, $segment-button-ios-text-color)};
--color-checked: #{var(--ion-toolbar-color-checked, $segment-button-ios-text-color-checked)};
color: #{var(--ion-toolbar-color-unchecked, var(--color))};
}
:host-context(ion-toolbar):not(.ion-color)::slotted(.segment-button-checked) {
color: #{var(--ion-toolbar-color-checked, var(--color-checked))};
}
// Segment: Color Toolbar

21
core/src/components/segment/segment.md.scss
View File

@@ -4,6 +4,17 @@
// Material Design Segment
// --------------------------------------------------
:host {
--background: #{$segment-button-md-background};
--background-checked: #{$segment-button-md-background-checked};
--background-hover: #{$segment-button-md-background-hover};
--background-activated: #{$segment-button-md-background-activated};
--color: #{$segment-button-md-text-color};
--color-checked: #{$segment-button-md-text-color-checked};
--color-checked-disabled: var(--color-checked);
--indicator-color: transparent;
}
:host(.segment-disabled) {
opacity: $segment-md-opacity-disabled;
}
@@ -15,6 +26,9 @@
--background-hover: #{current-color(base, .04)};
--background-activated: #{current-color(base, .16)};
--ripple-color: #{current-color(base)};
background: transparent;
color: $segment-button-md-text-color;
}
:host(.ion-color)::slotted(.segment-button-checked) {
@@ -31,8 +45,11 @@
// --------------------------------------------------
:host-context(ion-toolbar):not(.ion-color)::slotted(ion-segment-button) {
--color: #{var(--ion-toolbar-color-unchecked, $segment-button-md-text-color)};
--color-checked: #{var(--ion-toolbar-color-checked, $segment-button-md-text-color-checked)};
color: #{var(--ion-toolbar-color-unchecked, var(--color))};
}
:host-context(ion-toolbar):not(.ion-color)::slotted(.segment-button-checked) {
color: #{var(--ion-toolbar-color-checked, var(--color-checked))};
}

4
core/src/components/segment/segment.scss
View File

@@ -4,6 +4,10 @@
// --------------------------------------------------
:host {
--indicator-color-checked: initial;
--ripple-color: initial;
--color-activated: initial;
@include font-smoothing();
display: flex;

12
core/src/components/segment/test/custom/e2e.ts Normal file
View File

@@ -0,0 +1,12 @@
import { newE2EPage } from '@stencil/core/testing';
test('segment: custom', async () => {
const page = await newE2EPage({
url: '/src/components/segment/test/custom?ionic:_testing=true'
});
await page.waitFor(250);
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

261
core/src/components/segment/test/custom/index.html Normal file
View File

@@ -0,0 +1,261 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Segment - Custom</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../dist/ionic.js"></script>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-segment value="Free">
<ion-segment-button value="Paid">
<ion-label>Paid</ion-label>
</ion-segment-button>
<ion-segment-button value="Free">
<ion-label>Free</ion-label>
</ion-segment-button>
<ion-segment-button value="Top">
<ion-label>Top</ion-label>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar>
<ion-segment class="custom-icon" value="instagram">
<ion-segment-button class="segment-facebook" value="facebook">
<ion-label>Facebook</ion-label>
<ion-icon name="logo-facebook"></ion-icon>
</ion-segment-button>
<ion-segment-button class="segment-instagram" value="instagram">
<ion-label>Instagram</ion-label>
<ion-icon name="logo-instagram"></ion-icon>
</ion-segment-button>
<ion-segment-button class="segment-slack" value="slack">
<ion-label>Slack</ion-label>
<ion-icon name="logo-slack"></ion-icon>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-segment class="custom" value="active">
<ion-segment-button value="active">
<ion-label>Active</ion-label>
</ion-segment-button>
<ion-segment-button value="disabled" disabled="true">
<ion-label>Disabled</ion-label>
</ion-segment-button>
<ion-segment-button value="inactive" disabled="false">
<ion-label>Inactive</ion-label>
</ion-segment-button>
</ion-segment>
<ion-segment class="custom-icon" value="instagram">
<ion-segment-button class="segment-facebook" value="facebook">
<ion-label>Facebook</ion-label>
<ion-icon name="logo-facebook"></ion-icon>
</ion-segment-button>
<ion-segment-button class="segment-instagram" value="instagram">
<ion-label>Instagram</ion-label>
<ion-icon name="logo-instagram"></ion-icon>
</ion-segment-button>
<ion-segment-button class="segment-slack" value="slack">
<ion-label>Slack</ion-label>
<ion-icon name="logo-slack"></ion-icon>
</ion-segment-button>
</ion-segment>
<ion-segment class="custom-color" color="danger" value="dining">
<ion-segment-button value="dining">
<ion-label>Dining</ion-label>
<ion-icon name="cafe"></ion-icon>
</ion-segment-button>
<ion-segment-button value="travel">
<ion-label>Travel</ion-label>
<ion-icon name="airplane"></ion-icon>
</ion-segment-button>
<ion-segment-button value="entertainment">
<ion-label>Entertainment</ion-label>
<ion-icon name="radio"></ion-icon>
</ion-segment-button>
</ion-segment>
<h2>Activated</h2>
<ion-segment>
<ion-segment-button class="activated" value="Paid">
<ion-label>Paid</ion-label>
</ion-segment-button>
<ion-segment-button class="activated" value="Free">
<ion-label>Free</ion-label>
</ion-segment-button>
<ion-segment-button class="activated" value="Top">
<ion-label>Top</ion-label>
</ion-segment-button>
</ion-segment>
<ion-segment class="custom-icon">
<ion-segment-button class="activated segment-facebook" value="facebook">
<ion-label>Facebook</ion-label>
<ion-icon name="logo-facebook"></ion-icon>
</ion-segment-button>
<ion-segment-button class="activated segment-instagram" value="instagram">
<ion-label>Instagram</ion-label>
<ion-icon name="logo-instagram"></ion-icon>
</ion-segment-button>
<ion-segment-button class="activated segment-slack" value="slack">
<ion-label>Slack</ion-label>
<ion-icon name="logo-slack"></ion-icon>
</ion-segment-button>
</ion-segment>
</ion-content>
</ion-app>
</body>
<script>
var segment = document.getElementById('browserSegment');
var results = document.getElementById('browserResults');
checkUrl();
segment.addEventListener('ionChange', function () {
checkUrl();
});
function checkUrl() {
var url = window.location.href;
if (url.search('#bookmarks') > -1) {
setResults('bookmarks');
} else if (url.search('#reading') > -1) {
setResults('reading');
} else if (url.search('#links') > -1) {
setResults('links');
}
}
function setResults(value) {
results.innerHTML = value.charAt(0).toUpperCase() + value.slice(1);
segment.value = value;
}
</script>
<style>
body {
margin: 0;
}
ion-segment {
margin-bottom: 10px;
}
ion-toolbar ion-segment {
margin-bottom: 0;
}
pre {
border: 1px solid #e6e9ee;
background: white;
margin: 10px;
padding: 4px;
line-height: 24px;
}
code {
display: block;
padding: 0.5em;
background: #ffffff;
word-wrap: normal;
white-space: pre;
color: #314361;
}
.custom {
--background: papayawhip;
--background-checked: navy;
--border-color: navy;
--border-color-checked: navy;
--border-color-disabled: navy;
--color: navy;
--color-activated: purple;
--color-checked: papayawhip;
--color-disabled: rgba(0, 0, 0, 0.3);
}
/* Custom Icon Segment MD */
.md .custom-icon {
--indicator-color: lightgray;
}
.md .segment-facebook {
--background-hover: rgba(59, 89, 153, .04);
--color-activated: #3b5999;
--color-checked: #3b5999;
}
.md .segment-instagram {
--background-hover: rgba(228, 64, 95, .04);
--color-activated: #e4405f;
--color-checked: #e4405f;
}
.md .segment-slack {
--background-hover: rgba(58, 175, 133, .04);
--color-activated: #3aaf85;
--color-checked: #3aaf85;
}
/* Custom Icon Segment iOS */
.ios .custom-icon ion-segment-button {
--border-width: 0;
}
.ios .segment-facebook {
--color: #3b5999;
--color-checked: #ffffff;
--background-hover: rgba(59, 89, 153, .1);
--background-activated: rgba(59, 89, 153, .16);
--background-checked: #3b5999;
}
.ios .segment-instagram {
--color: #e4405f;
--color-checked: #ffffff;
--background-hover: rgba(228, 64, 95, .1);
--background-activated: rgba(228, 64, 95, .16);
--background-checked: #e4405f;
}
.ios .segment-slack {
--color: #3aaf85;
--color-checked: #ffffff;
--background-hover: rgba(58, 175, 133, .1);
--background-activated: rgba(58, 175, 133, .16);
--background-checked: #3aaf85;
}
.custom-icon ion-icon {
font-size: 44px;
}
/* This CSS should not apply */
.custom-color {
--background: purple;
--color: blue;
}
</style>
</html>

4
core/src/components/segment/test/modes/index.html
View File

@@ -21,7 +21,7 @@
<ion-content>
<h2>Mode: ios</h2>
<ion-segment id="modeSegment" name="iosMode" value="kittens">
<ion-segment mode="ios" id="modeSegment" name="iosMode" value="kittens">
<ion-segment-button mode="ios" value="puppies">
<ion-label>Puppies</ion-label>
</ion-segment-button>
@@ -36,7 +36,7 @@
<hr>
<h2>Mode: md</h2>
<ion-segment name="mdMode" value="kittens">
<ion-segment mode="md" name="mdMode" value="kittens">
<ion-segment-button mode="md" value="puppies">
<ion-label>Puppies</ion-label>
</ion-segment-button>

6
core/src/components/segment/test/preview/index.html
View File

@@ -72,15 +72,15 @@
<!-- Icon top -->
<ion-segment>
<ion-segment-button layout="icon-top">
<ion-segment-button>
<ion-label>Item One</ion-label>
<ion-icon name="call"></ion-icon>
</ion-segment-button>
<ion-segment-button checked layout="icon-top">
<ion-segment-button checked>
<ion-label>Item Two</ion-label>
<ion-icon name="heart"></ion-icon>
</ion-segment-button>
<ion-segment-button layout="icon-top">
<ion-segment-button>
<ion-label>Item Three</ion-label>
<ion-icon name="pin"></ion-icon>
</ion-segment-button>

19
core/src/components/segment/test/standalone/index.html
View File

@@ -53,7 +53,7 @@
<ion-segment color="secondary" value="active">
<ion-segment-button value="active">
<ion-label>Active</ion-label>
<ion-label>Active</ion-label>
</ion-segment-button>
<ion-segment-button value="disabled" disabled="true">
<ion-label>Disabled</ion-label>
@@ -76,20 +76,19 @@
</ion-segment>
<ion-segment class="custom-icon" value="instagram">
<ion-segment-button layout="icon-top" class="segment-facebook" value="facebook">
<ion-segment-button class="segment-facebook" value="facebook">
<ion-label>Facebook</ion-label>
<ion-icon name="logo-facebook"></ion-icon>
</ion-segment-button>
<ion-segment-button layout="icon-top" class="segment-instagram" value="instagram">
<ion-segment-button class="segment-instagram" value="instagram">
<ion-label>Instagram</ion-label>
<ion-icon name="logo-instagram"></ion-icon>
</ion-segment-button>
<ion-segment-button layout="icon-top" class="segment-slack" value="slack">
<ion-segment-button class="segment-slack" value="slack">
<ion-label>Slack</ion-label>
<ion-icon name="logo-slack"></ion-icon>
</ion-segment-button>
</ion-segment>
</body>
<script>
@@ -98,7 +97,7 @@
checkUrl();
segment.addEventListener('ionChange', function() {
segment.addEventListener('ionChange', function () {
checkUrl();
});
@@ -157,10 +156,14 @@
--border-color-disabled: navy;
--border-color: navy;
--color-checked: papayawhip;
--color-disabled: rgba(0,0,0,0.3);
--color-disabled: rgba(0, 0, 0, 0.3);
--color: navy;
}
.custom-icon {
--indicator-color: lightgray;
}
.segment-facebook {
--background-hover: rgba(59, 89, 153, .04);
--color-checked: #3b5999;
@@ -179,5 +182,7 @@
.custom-icon ion-icon {
font-size: 44px;
}
</style>
</html>

6
core/src/components/segment/test/toolbar/index.html
View File

@@ -146,15 +146,15 @@
<!-- Icon top -->
<ion-toolbar color="danger">
<ion-segment>
<ion-segment-button layout="icon-top">
<ion-segment-button>
<ion-label>Item One</ion-label>
<ion-icon name="call"></ion-icon>
</ion-segment-button>
<ion-segment-button checked layout="icon-top">
<ion-segment-button checked>
<ion-label>Item Two</ion-label>
<ion-icon name="heart"></ion-icon>
</ion-segment-button>
<ion-segment-button layout="icon-top">
<ion-segment-button>
<ion-label>Item Three</ion-label>
<ion-icon name="pin"></ion-icon>
</ion-segment-button>

13
core/src/components/tab-bar/readme.md
View File

@@ -36,13 +36,12 @@ The tab bar is a UI component that contains a set of [tab buttons](../tab-button
## 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` |
| `layout` | `layout` | Set the layout of the text and icon in the tab bar. | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide"` | `'icon-top'` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `selectedTab` | `selected-tab` | The selected tab component | `string \| undefined` | `undefined` |
| `translucent` | `translucent` | If `true`, the tab bar will be translucent. | `boolean` | `false` |
| 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` |
| `selectedTab` | `selected-tab` | The selected tab component | `string \| undefined` | `undefined` |
| `translucent` | `translucent` | If `true`, the tab bar will be translucent. | `boolean` | `false` |
## CSS Custom Properties

7
core/src/components/tab-bar/tab-bar.tsx
View File

@@ -1,6 +1,6 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch } from '@stencil/core';
import { Color, Mode, TabBarChangedDetail, TabButtonLayout } from '../../interface';
import { Color, Mode, TabBarChangedDetail } from '../../interface';
import { createColorClasses } from '../../utils/theme';
@Component({
@@ -32,11 +32,6 @@ export class TabBar implements ComponentInterface {
*/
@Prop() color?: Color;
/**
* Set the layout of the text and icon in the tab bar.
*/
@Prop() layout: TabButtonLayout = 'icon-top';
/**
* The selected tab component
*/

4
core/src/components/tab-bar/test/preview/index.html
View File

@@ -31,7 +31,7 @@
<!-- Badges -->
<ion-tab-bar selected-tab="1">
<ion-tab-button tab="1" layout="icon-top">
<ion-tab-button tab="1">
<ion-icon name="heart"></ion-icon>
<ion-label>Favorites</ion-label>
<ion-badge color="danger"></ion-badge>
@@ -113,7 +113,7 @@
<ion-icon name="call"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="2" layout="icon-top">
<ion-tab-button tab="2">
<ion-badge>16</ion-badge>
<ion-label>Favorites</ion-label>
<ion-icon name="heart"></ion-icon>

2
core/src/components/tab-bar/test/scenarios/index.html
View File

@@ -73,7 +73,7 @@
<ion-icon name="call"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="2" layout="icon-top">
<ion-tab-button tab="2">
<ion-badge>6</ion-badge>
<ion-label>hi</ion-label>
<ion-icon name="heart"></ion-icon>

2
core/src/components/tab-bar/test/spec/index.html
View File

@@ -31,7 +31,7 @@
<!-- Badges -->
<ion-tab-bar selected-tab="1">
<ion-tab-button tab="1" layout="icon-top">
<ion-tab-button tab="1">
<ion-icon name="heart"></ion-icon>
<ion-label>Item One Max</ion-label>
<ion-badge color="danger"></ion-badge>

15
core/src/components/tab-button/readme.md
View File

@@ -60,14 +60,13 @@ See the [tabs documentation](../tabs) for more details on configuring tabs.
## 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` |
| `disabled` | `disabled` | The selected tab component | `boolean` | `false` |
| `href` | `href` | The URL which will be used as the `href` within this tab's button anchor. | `string \| undefined` | `undefined` |
| `layout` | `layout` | Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`. | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `tab` | `tab` | A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them. | `string` | `undefined` |
| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ----------- |
| `disabled` | `disabled` | The selected tab component | `boolean` | `false` |
| `href` | `href` | The URL which will be used as the `href` within this tab's button anchor. | `string \| undefined` | `undefined` |
| `layout` | `layout` | Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`. | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `tab` | `tab` | A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them. | `string` | `undefined` |
## CSS Custom Properties

14
core/src/components/tab-button/tab-button.tsx
View File

@@ -1,7 +1,6 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, State } from '@stencil/core';
import { Color, Config, Mode, TabBarChangedDetail, TabButtonClickDetail, TabButtonLayout } from '../../interface';
import { createColorClasses } from '../../utils/theme';
import { Config, Mode, TabBarChangedDetail, TabButtonClickDetail, TabButtonLayout } from '../../interface';
@Component({
tag: 'ion-tab-button',
@@ -29,13 +28,6 @@ export class TabButton implements ComponentInterface {
*/
@Prop() mode!: Mode;
/**
* 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).
*/
@Prop() color?: Color;
/**
* Set the layout of the text and icon in the tab bar.
* It defaults to `'icon-top'`.
@@ -96,7 +88,7 @@ export class TabButton implements ComponentInterface {
}
hostData() {
const { color, tab, selected, layout, disabled, hasLabel, hasIcon } = this;
const { disabled, hasIcon, hasLabel, layout, selected, tab } = this;
return {
'role': 'tab',
'ion-activatable': true,
@@ -104,8 +96,6 @@ export class TabButton implements ComponentInterface {
'id': `tab-button-${tab}`,
'aria-controls': `tab-view-${tab}`,
class: {
...createColorClasses(color),
'tab-selected': selected,
'tab-disabled': disabled,
'tab-has-label': hasLabel,

1
core/src/components/toggle/toggle.scss
View File

@@ -11,7 +11,6 @@
* @prop --handle-background-checked: Background of the toggle handle when checked
*/
// TODO can we remove important here
/* stylelint-disable-next-line declaration-no-important */
box-sizing: content-box !important;

2
core/src/css/core.scss
View File

@@ -105,7 +105,7 @@ html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa {
}
}
// TODO: remove once Safari 11.2 dies
// TODO: remove once Safari 11.2 is no longer supported
@supports (padding-top: constant(safe-area-inset-top)) {
html {
--ion-safe-area-top: constant(safe-area-inset-top);

1
core/src/themes/ionic.theme.default.scss
View File

@@ -82,7 +82,6 @@ $colors: (
// Default Foreground and Background Colors
// -------------------------------------------------------------------------------------------
// Used internally to calculate the default steps
// TODO: @color-mod will remove all of this
$background-color-value: #fff !default;
$background-color-rgb: 255, 255, 255 !default;