javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 19:57:22 +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

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>