diff --git a/angular/BREAKING.md b/angular/BREAKING.md index 9053ad905b..232d321f4b 100644 --- a/angular/BREAKING.md +++ b/angular/BREAKING.md @@ -20,7 +20,6 @@ A list of the breaking changes introduced to each component in Ionic Angular v4. - [Alert](#alert) - [Back Button](#back-button) - [Button](#button) -- [Chip](#chip) - [Colors](#colors) - [Content](#content) - [Datetime](#datetime) @@ -250,34 +249,6 @@ The `small` and `large` attributes are now combined under the `size` attribute. ``` -## Chip - -### Markup Changed - -Buttons inside of an `` container should now be written as an `` element. Ionic will determine when to render an anchor tag based on the presence of an `href` attribute. - -**Old Usage Example:** - -```html - - Default - - - - -``` - -**New Usage Example:** - -```html - - Default - - - - -``` - ## Colors diff --git a/angular/src/directives/proxies-list.txt b/angular/src/directives/proxies-list.txt index 7d1d1a34bb..0ce937a23d 100644 --- a/angular/src/directives/proxies-list.txt +++ b/angular/src/directives/proxies-list.txt @@ -16,8 +16,6 @@ export const DIRECTIVES = [ d.CardTitle, d.Checkbox, d.Chip, - d.ChipButton, - d.ChipIcon, d.Col, d.Content, d.Datetime, diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index 2da8c0fd5e..4ddad2feb0 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -168,35 +168,13 @@ export class Checkbox { } export declare interface Chip extends StencilComponents<'IonChip'> {} -@Component({ selector: 'ion-chip', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode'] }) +@Component({ selector: 'ion-chip', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode', 'outline'] }) export class Chip { constructor(c: ChangeDetectorRef, r: ElementRef) { c.detach(); const el = r.nativeElement; - proxyInputs(this, el, ['color', 'mode']); - } -} - -export declare interface ChipButton extends StencilComponents<'IonChipButton'> {} -@Component({ selector: 'ion-chip-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode', 'disabled', 'fill', 'href'] }) -export class ChipButton { - - constructor(c: ChangeDetectorRef, r: ElementRef) { - c.detach(); - const el = r.nativeElement; - proxyInputs(this, el, ['color', 'mode', 'disabled', 'fill', 'href']); - } -} - -export declare interface ChipIcon extends StencilComponents<'IonChipIcon'> {} -@Component({ selector: 'ion-chip-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode', 'fill', 'name', 'src'] }) -export class ChipIcon { - - constructor(c: ChangeDetectorRef, r: ElementRef) { - c.detach(); - const el = r.nativeElement; - proxyInputs(this, el, ['color', 'mode', 'fill', 'name', 'src']); + proxyInputs(this, el, ['color', 'mode', 'outline']); } } diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 2f31b036cd..d7fae821df 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -819,96 +819,6 @@ export namespace Components { 'value'?: string; } - interface IonChipButton { - /** - * 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 chip button. - */ - 'disabled': boolean; - /** - * Set to `"clear"` for a transparent button or to `"solid"` for a filled background. - */ - 'fill': 'clear' | 'solid'; - /** - * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. - */ - 'href'?: string; - /** - * The mode determines which platform styles to use. - */ - 'mode': Mode; - } - interface IonChipButtonAttributes 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; - /** - * If `true`, the user cannot interact with the chip button. - */ - 'disabled'?: boolean; - /** - * Set to `"clear"` for a transparent button or to `"solid"` for a filled background. - */ - 'fill'?: 'clear' | 'solid'; - /** - * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. - */ - 'href'?: string; - /** - * The mode determines which platform styles to use. - */ - 'mode'?: Mode; - } - - interface IonChipIcon { - /** - * 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; - /** - * Set to `"clear"` for a transparent icon or to `"solid"` for a filled background. - */ - 'fill': 'clear' | 'solid'; - /** - * The mode determines which platform styles to use. - */ - 'mode': Mode; - /** - * The icon to use. Possible values are the same as `"ion-icon"`. - */ - 'name'?: string; - /** - * The icon src to use. Possible values are the same as `"ion-icon"`. - */ - 'src'?: string; - } - interface IonChipIconAttributes 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; - /** - * Set to `"clear"` for a transparent icon or to `"solid"` for a filled background. - */ - 'fill'?: 'clear' | 'solid'; - /** - * The mode determines which platform styles to use. - */ - 'mode'?: Mode; - /** - * The icon to use. Possible values are the same as `"ion-icon"`. - */ - 'name'?: string; - /** - * The icon src to use. Possible values are the same as `"ion-icon"`. - */ - 'src'?: string; - } - interface IonChip { /** * 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). @@ -918,6 +828,10 @@ export namespace Components { * The mode determines which platform styles to use. */ 'mode': Mode; + /** + * Display an outline style button. + */ + 'outline': boolean; } interface IonChipAttributes extends StencilHTMLAttributes { /** @@ -928,6 +842,10 @@ export namespace Components { * The mode determines which platform styles to use. */ 'mode'?: Mode; + /** + * Display an outline style button. + */ + 'outline'?: boolean; } interface IonCol { @@ -5197,8 +5115,6 @@ declare global { 'IonCardTitle': Components.IonCardTitle; 'IonCard': Components.IonCard; 'IonCheckbox': Components.IonCheckbox; - 'IonChipButton': Components.IonChipButton; - 'IonChipIcon': Components.IonChipIcon; 'IonChip': Components.IonChip; 'IonCol': Components.IonCol; 'IonContent': Components.IonContent; @@ -5299,8 +5215,6 @@ declare global { 'ion-card-title': Components.IonCardTitleAttributes; 'ion-card': Components.IonCardAttributes; 'ion-checkbox': Components.IonCheckboxAttributes; - 'ion-chip-button': Components.IonChipButtonAttributes; - 'ion-chip-icon': Components.IonChipIconAttributes; 'ion-chip': Components.IonChipAttributes; 'ion-col': Components.IonColAttributes; 'ion-content': Components.IonContentAttributes; @@ -5496,18 +5410,6 @@ declare global { new (): HTMLIonCheckboxElement; }; - interface HTMLIonChipButtonElement extends Components.IonChipButton, HTMLStencilElement {} - var HTMLIonChipButtonElement: { - prototype: HTMLIonChipButtonElement; - new (): HTMLIonChipButtonElement; - }; - - interface HTMLIonChipIconElement extends Components.IonChipIcon, HTMLStencilElement {} - var HTMLIonChipIconElement: { - prototype: HTMLIonChipIconElement; - new (): HTMLIonChipIconElement; - }; - interface HTMLIonChipElement extends Components.IonChip, HTMLStencilElement {} var HTMLIonChipElement: { prototype: HTMLIonChipElement; @@ -5996,8 +5898,6 @@ declare global { 'ion-card-title': HTMLIonCardTitleElement 'ion-card': HTMLIonCardElement 'ion-checkbox': HTMLIonCheckboxElement - 'ion-chip-button': HTMLIonChipButtonElement - 'ion-chip-icon': HTMLIonChipIconElement 'ion-chip': HTMLIonChipElement 'ion-col': HTMLIonColElement 'ion-content': HTMLIonContentElement @@ -6098,8 +5998,6 @@ declare global { 'ion-card-title': HTMLIonCardTitleElement; 'ion-card': HTMLIonCardElement; 'ion-checkbox': HTMLIonCheckboxElement; - 'ion-chip-button': HTMLIonChipButtonElement; - 'ion-chip-icon': HTMLIonChipIconElement; 'ion-chip': HTMLIonChipElement; 'ion-col': HTMLIonColElement; 'ion-content': HTMLIonContentElement; diff --git a/core/src/components/chip-button/chip-button.scss b/core/src/components/chip-button/chip-button.scss deleted file mode 100644 index 8e03b9a37b..0000000000 --- a/core/src/components/chip-button/chip-button.scss +++ /dev/null @@ -1,81 +0,0 @@ -@import "./chip-button.vars"; - -// Chip Button -// -------------------------------------------------- - -:host { - /** - * @prop --background: Background of the Chip Button - * @prop --color: Color of the Chip Button - * @prop --border-radius: Border radius of the Chip Button - * @prop --margin-top: Margin top of the Chip Button - * @prop --margin-end: Margin end of the Chip Button - * @prop --margin-bottom: Margin bottom of the Chip Button - * @prop --margin-start: Margin start of the Chip Button - * @prop --width: Width of the Chip Button - * @prop --height: Height of the Chip Button - */ - --border-radius: #{$chip-button-border-radius}; - --margin-top: #{$chip-button-margin-top}; - --margin-end: #{$chip-button-margin-end}; - --margin-bottom: #{$chip-button-margin-bottom}; - --margin-start: #{$chip-button-margin-start}; - --width: #{$chip-button-width}; - --height: #{$chip-button-height}; - - width: var(--width); - height: var(--height); - - font-size: #{$chip-button-font-size}; -} - -:host(.chip-button-clear) { - --background: transparent; - --color: #{$chip-button-clear-color}; -} - -:host(.chip-button-solid) { - --background: #{ion-color(primary, base)}; - --color: #{ion-color(primary, contrast)}; -} - -:host(.chip-button-solid.ion-color) .button-native { - background: current-color(base); - color: current-color(contrast); -} - -:host(.chip-button-clear.ion-color) .button-native { - background: transparent; - color: current-color(base); -} - -.button-native { - @include text-inherit(); - @include border-radius(var(--border-radius)); - @include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start)); - - position: relative; - - width: var(--width); - height: var(--height); - - border: 0; - - outline: none; - - background: var(--background); - color: var(--color); - appearance: none; -} - -.button-inner { - display: flex; - - flex-flow: row nowrap; - flex-shrink: 0; - align-items: center; - justify-content: center; - - width: 100%; - height: 100%; -} diff --git a/core/src/components/chip-button/chip-button.tsx b/core/src/components/chip-button/chip-button.tsx deleted file mode 100644 index 28f3e17603..0000000000 --- a/core/src/components/chip-button/chip-button.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { Component, ComponentInterface, Element, Prop } from '@stencil/core'; - -import { Color, Mode } from '../../interface'; -import { createColorClasses } from '../../utils/theme'; - -@Component({ - tag: 'ion-chip-button', - styleUrl: 'chip-button.scss', - shadow: true -}) -export class ChipButton 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. - */ - @Prop() mode!: Mode; - - /** - * If `true`, the user cannot interact with the chip button. - */ - @Prop() disabled = false; - - /** - * Set to `"clear"` for a transparent button or to `"solid"` for a filled background. - */ - @Prop() fill: 'clear' | 'solid' = 'clear'; - - /** - * Contains a URL or a URL fragment that the hyperlink points to. - * If this property is set, an anchor tag will be rendered. - */ - @Prop() href?: string; - - hostData() { - return { - class: { - ...createColorClasses(this.color), - [`chip-button-${this.fill}`]: true - } - }; - } - - render() { - const TagType = this.href === undefined ? 'button' : 'a'; - - return ( - - - - - {this.mode === 'md' && } - - ); - } -} diff --git a/core/src/components/chip-button/chip-button.vars.scss b/core/src/components/chip-button/chip-button.vars.scss deleted file mode 100644 index 79c7e52ef6..0000000000 --- a/core/src/components/chip-button/chip-button.vars.scss +++ /dev/null @@ -1,31 +0,0 @@ -@import "../../themes/ionic.globals"; - -// Chip Button -// -------------------------------------------------- - -/// @prop - Border radius of the chip button -$chip-button-border-radius: 50% !default; - -/// @prop - Margin top of the chip button -$chip-button-margin-top: 0 !default; - -/// @prop - Margin end of the chip button -$chip-button-margin-end: $chip-button-margin-top !default; - -/// @prop - Margin bottom of the chip button -$chip-button-margin-bottom: $chip-button-margin-top !default; - -/// @prop - Margin start of the chip button -$chip-button-margin-start: $chip-button-margin-end !default; - -/// @prop - Font size of the chip button -$chip-button-font-size: 32px !default; - -/// @prop - Width of the chip button -$chip-button-width: 32px !default; - -/// @prop - Width of the chip button -$chip-button-height: 100% !default; - -/// @prop - Color of the text in the clear chip button -$chip-button-clear-color: $text-color-step-400 !default; diff --git a/core/src/components/chip-button/readme.md b/core/src/components/chip-button/readme.md deleted file mode 100644 index 8971d787ac..0000000000 --- a/core/src/components/chip-button/readme.md +++ /dev/null @@ -1,36 +0,0 @@ -# ion-chip-button - -A ChipButton is an inset button that is placed inside of a Chip. For more information, see the [Chip Docs](../chip) - - - - -## 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` | If `true`, the user cannot interact with the chip button. | `boolean` | `false` | -| `fill` | `fill` | Set to `"clear"` for a transparent button or to `"solid"` for a filled background. | `"clear" \| "solid"` | `'clear'` | -| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | - - -## CSS Custom Properties - -| Name | Description | -| ----------------- | -------------------------------- | -| `--background` | Background of the Chip Button | -| `--border-radius` | Border radius of the Chip Button | -| `--color` | Color of the Chip Button | -| `--height` | Height of the Chip Button | -| `--margin-bottom` | Margin bottom of the Chip Button | -| `--margin-end` | Margin end of the Chip Button | -| `--margin-start` | Margin start of the Chip Button | -| `--margin-top` | Margin top of the Chip Button | -| `--width` | Width of the Chip Button | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/chip-button/usage/angular.md b/core/src/components/chip-button/usage/angular.md deleted file mode 100644 index 433e5d02d5..0000000000 --- a/core/src/components/chip-button/usage/angular.md +++ /dev/null @@ -1,26 +0,0 @@ -```html - - Button Chip - - - - - - - - Icon Chip - - - - - - - - - - Avatar Chip - - - - -``` diff --git a/core/src/components/chip-button/usage/javascript.md b/core/src/components/chip-button/usage/javascript.md deleted file mode 100644 index 433e5d02d5..0000000000 --- a/core/src/components/chip-button/usage/javascript.md +++ /dev/null @@ -1,26 +0,0 @@ -```html - - Button Chip - - - - - - - - Icon Chip - - - - - - - - - - Avatar Chip - - - - -``` diff --git a/core/src/components/chip-icon/chip-icon.scss b/core/src/components/chip-icon/chip-icon.scss deleted file mode 100644 index 1c416ba05f..0000000000 --- a/core/src/components/chip-icon/chip-icon.scss +++ /dev/null @@ -1,42 +0,0 @@ -@import "./chip-icon.vars"; - -:host { - /** - * @prop --background: Background of the Chip Icon - * @prop --color: Color of the Chip Icon - */ - @include border-radius(50%); - - display: inline-flex; - - align-items: center; - justify-content: center; - - width: var(--width, 32px); - height: var(--height, 32px); - - background: var(--background); - color: var(--color); - - font-size: 18px; -} - -:host(.chip-icon-clear) { - --background: transparent; - --color: #{$chip-icon-clear-color}; -} - -:host(.chip-icon-solid) { - --background: #{ion-color(primary, base)}; - --color: #{ion-color(primary, contrast)}; -} - -:host(.chip-icon-solid.ion-color) { - background: current-color(base); - color: current-color(contrast); -} - -:host(.chip-icon-clear.ion-color) { - background: transparent; - color: current-color(base); -} \ No newline at end of file diff --git a/core/src/components/chip-icon/chip-icon.tsx b/core/src/components/chip-icon/chip-icon.tsx deleted file mode 100644 index 3d05e6db21..0000000000 --- a/core/src/components/chip-icon/chip-icon.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { Component, ComponentInterface, Prop } from '@stencil/core'; - -import { Color, Mode } from '../../interface'; -import { createColorClasses } from '../../utils/theme'; - -@Component({ - tag: 'ion-chip-icon', - styleUrl: 'chip-icon.scss', - shadow: true -}) -export class ChipIcon implements ComponentInterface { - /** - * 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. - */ - @Prop() mode!: Mode; - - /** - * Set to `"clear"` for a transparent icon or to `"solid"` for a filled background. - */ - @Prop() fill: 'clear' | 'solid' = 'clear'; - - /** - * The icon to use. - * Possible values are the same as `"ion-icon"`. - */ - @Prop() name?: string; - - /** - * The icon src to use. - * Possible values are the same as `"ion-icon"`. - */ - @Prop() src?: string; - - hostData() { - return { - class: { - ...createColorClasses(this.color), - [`chip-icon-${this.fill}`]: true - } - }; - } - - render() { - return ; - } -} diff --git a/core/src/components/chip-icon/chip-icon.vars.scss b/core/src/components/chip-icon/chip-icon.vars.scss deleted file mode 100644 index d27a68f2e8..0000000000 --- a/core/src/components/chip-icon/chip-icon.vars.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import "../../themes/ionic.globals"; - -// Chip Button -// -------------------------------------------------- - -/// @prop - Color of the text in the clear chip icon -$chip-icon-clear-color: $text-color-step-400 !default; \ No newline at end of file diff --git a/core/src/components/chip-icon/readme.md b/core/src/components/chip-icon/readme.md deleted file mode 100644 index 3521bc34a5..0000000000 --- a/core/src/components/chip-icon/readme.md +++ /dev/null @@ -1,29 +0,0 @@ -# ion-chip-icon - - - - - - -## 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` | -| `fill` | `fill` | Set to `"clear"` for a transparent icon or to `"solid"` for a filled background. | `"clear" \| "solid"` | `'clear'` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `name` | `name` | The icon to use. Possible values are the same as `"ion-icon"`. | `string \| undefined` | `undefined` | -| `src` | `src` | The icon src to use. Possible values are the same as `"ion-icon"`. | `string \| undefined` | `undefined` | - - -## CSS Custom Properties - -| Name | Description | -| -------------- | --------------------------- | -| `--background` | Background of the Chip Icon | -| `--color` | Color of the Chip Icon | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/chip/chip.ios.scss b/core/src/components/chip/chip.ios.scss index e7fcfaf50b..b2189a0bab 100644 --- a/core/src/components/chip/chip.ios.scss +++ b/core/src/components/chip/chip.ios.scss @@ -1,31 +1 @@ @import "./chip"; -@import "./chip.ios.vars"; - -// iOS Chip -// -------------------------------------------------- - -:host { - --background: #{$chip-ios-background-color}; - --color: #{$chip-ios-text-color}; - - // Chip label - --label-margin-top: #{$chip-ios-label-margin-top}; - --label-margin-end: #{$chip-ios-label-margin-end}; - --label-margin-bottom: #{$chip-ios-label-margin-bottom}; - --label-margin-start: #{$chip-ios-label-margin-start}; - - // Chip avatar - --avatar-width: #{$chip-ios-avatar-width}; - --avatar-height: #{$chip-ios-avatar-height}; - --avatar-margin-top: #{$chip-ios-avatar-margin-top}; - --avatar-margin-end: #{$chip-ios-avatar-margin-end}; - --avatar-margin-bottom: #{$chip-ios-avatar-margin-bottom}; - --avatar-margin-start: #{$chip-ios-avatar-margin-start}; - - @include border-radius($chip-ios-border-radius); - @include margin($chip-ios-margin-top, $chip-ios-margin-end, $chip-ios-margin-bottom, $chip-ios-margin-start); - - height: $chip-ios-height; - - font-size: $chip-ios-font-size; -} diff --git a/core/src/components/chip/chip.ios.vars.scss b/core/src/components/chip/chip.ios.vars.scss deleted file mode 100644 index add99e9470..0000000000 --- a/core/src/components/chip/chip.ios.vars.scss +++ /dev/null @@ -1,64 +0,0 @@ -@import "../../themes/ionic.globals.ios"; - -// iOS Chip -// -------------------------------------------------- - -/// @prop - Margin top of the chip -$chip-ios-margin-top: 2px !default; - -/// @prop - Margin end of the chip -$chip-ios-margin-end: 0 !default; - -/// @prop - Margin bottom of the chip -$chip-ios-margin-bottom: $chip-ios-margin-top !default; - -/// @prop - Margin start of the chip -$chip-ios-margin-start: $chip-ios-margin-end !default; - -/// @prop - Height of the chip -$chip-ios-height: 32px !default; - -/// @prop - Border radius of the chip -$chip-ios-border-radius: 16px !default; - -/// @prop - Font size of the chip -$chip-ios-font-size: 13px !default; - -/// @prop - Text color of the chip -$chip-ios-text-color: $text-color-step-150 !default; - -/// @prop - Background color alpha of the chip -$chip-ios-background-color-alpha: .1 !default; - -/// @prop - Background color of the chip -$chip-ios-background-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), $chip-ios-background-color-alpha) !default; - -/// @prop - Margin top of the label in the chip -$chip-ios-label-margin-top: 0 !default; - -/// @prop - Margin end of the label in the chip -$chip-ios-label-margin-end: 10px !default; - -/// @prop - Margin bottom of the label in the chip -$chip-ios-label-margin-bottom: $chip-ios-label-margin-top !default; - -/// @prop - Margin start of the label in the chip -$chip-ios-label-margin-start: $chip-ios-label-margin-end !default; - -/// @prop - Width of the avatar in the chip -$chip-ios-avatar-width: 24px !default; - -/// @prop - Height of the avatar in the chip -$chip-ios-avatar-height: $chip-ios-avatar-width !default; - -/// @prop - Margin top of the avatar in the chip -$chip-ios-avatar-margin-top: 0 !default; - -/// @prop - Margin end of the avatar in the chip -$chip-ios-avatar-margin-end: 4px !default; - -/// @prop - Margin bottom of the avatar in the chip -$chip-ios-avatar-margin-bottom: $chip-ios-avatar-margin-top !default; - -/// @prop - Margin start of the avatar in the chip -$chip-ios-avatar-margin-start: $chip-ios-avatar-margin-end !default; diff --git a/core/src/components/chip/chip.md.scss b/core/src/components/chip/chip.md.scss index 5587b7ad87..b2189a0bab 100644 --- a/core/src/components/chip/chip.md.scss +++ b/core/src/components/chip/chip.md.scss @@ -1,31 +1 @@ @import "./chip"; -@import "./chip.md.vars"; - -// Material Design Chip -// -------------------------------------------------- - -:host { - --background: #{$chip-md-background-color}; - --color: #{$chip-md-text-color}; - - // Chip label - --label-margin-top: #{$chip-md-label-margin-top}; - --label-margin-end: #{$chip-md-label-margin-end}; - --label-margin-bottom: #{$chip-md-label-margin-bottom}; - --label-margin-start: #{$chip-md-label-margin-start}; - - // Chip avatar - --avatar-width: #{$chip-md-avatar-width}; - --avatar-height: #{$chip-md-avatar-height}; - --avatar-margin-top: #{$chip-md-avatar-margin-top}; - --avatar-margin-end: #{$chip-md-avatar-margin-end}; - --avatar-margin-bottom: #{$chip-md-avatar-margin-bottom}; - --avatar-margin-start: #{$chip-md-avatar-margin-start}; - - @include border-radius($chip-md-border-radius); - @include margin($chip-md-margin-top, $chip-md-margin-end, $chip-md-margin-bottom, $chip-md-margin-start); - - height: $chip-md-height; - - font-size: $chip-md-font-size; -} diff --git a/core/src/components/chip/chip.md.vars.scss b/core/src/components/chip/chip.md.vars.scss deleted file mode 100644 index 7195385525..0000000000 --- a/core/src/components/chip/chip.md.vars.scss +++ /dev/null @@ -1,64 +0,0 @@ -@import "../../themes/ionic.globals.md"; - -// Material Design Chip -// -------------------------------------------------- - -/// @prop - Margin top of the chip -$chip-md-margin-top: 2px !default; - -/// @prop - Margin end of the chip -$chip-md-margin-end: 0 !default; - -/// @prop - Margin bottom of the chip -$chip-md-margin-bottom: $chip-md-margin-top !default; - -/// @prop - Margin start of the chip -$chip-md-margin-start: $chip-md-margin-end !default; - -/// @prop - Height of the chip -$chip-md-height: 32px !default; - -/// @prop - Border radius of the chip -$chip-md-border-radius: 16px !default; - -/// @prop - Font size of the chip -$chip-md-font-size: 13px !default; - -/// @prop - Text color of the chip -$chip-md-text-color: $text-color-step-150 !default; - -/// @prop - Background color alpha of the chip -$chip-md-background-color-alpha: .1 !default; - -/// @prop - Background color of the chip -$chip-md-background-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), $chip-md-background-color-alpha) !default; - -/// @prop - Margin top of the label in the chip -$chip-md-label-margin-top: 0 !default; - -/// @prop - Margin end of the label in the chip -$chip-md-label-margin-end: 10px !default; - -/// @prop - Margin bottom of the label in the chip -$chip-md-label-margin-bottom: $chip-md-label-margin-top !default; - -/// @prop - Margin start of the label in the chip -$chip-md-label-margin-start: $chip-md-label-margin-end !default; - -/// @prop - Width of the avatar in the chip -$chip-md-avatar-width: 24px !default; - -/// @prop - Height of the avatar in the chip -$chip-md-avatar-height: $chip-md-avatar-width !default; - -/// @prop - Margin top of the avatar in the chip -$chip-md-avatar-margin-top: 0 !default; - -/// @prop - Margin end of the avatar in the chip -$chip-md-avatar-margin-end: 4px !default; - -/// @prop - Margin bottom of the avatar in the chip -$chip-md-avatar-margin-bottom: $chip-md-avatar-margin-top !default; - -/// @prop - Margin start of the avatar in the chip -$chip-md-avatar-margin-start: $chip-md-avatar-margin-end !default; diff --git a/core/src/components/chip/chip.scss b/core/src/components/chip/chip.scss index e961fed9b1..805ac98796 100644 --- a/core/src/components/chip/chip.scss +++ b/core/src/components/chip/chip.scss @@ -1,60 +1,130 @@ -@import "./chip.vars"; - -// Chip -// -------------------------------------------------- +@import "../../themes/ionic.globals"; :host { /** * @prop --background: Background of the chip * @prop --color: Color of the chip - * - * @prop --label-margin-top: Margin top of the chip label - * @prop --label-margin-end: Margin end of the chip label - * @prop --label-margin-bottom: Margin bottom of the chip label - * @prop --label-margin-start: Margin start of the chip label - * - * @prop --avatar-width: Width of the chip avatar - * @prop --avatar-height: Height of the chip avatar - * @prop --avatar-margin-top: Margin top of the chip avatar - * @prop --avatar-margin-end: Margin end of the chip avatar - * @prop --avatar-margin-bottom: Margin bottom of the chip avatar - * @prop --avatar-margin-start: Margin start of the chip avatar */ + --background: rgba(0, 0, 0, .12); + --color: rgba(0, 0, 0, .87); + @include border-radius(16px); @include font-smoothing(); + @include margin(4px); + @include padding(7px, 12px); display: inline-flex; + position: relative; + align-items: center; - align-self: center; + + height: 32px; background: var(--background); color: var(--color); font-family: $font-family-base; - font-weight: normal; + font-size: 14px; + + line-height: 1; + + cursor: pointer; + + overflow: hidden; vertical-align: middle; box-sizing: border-box; } +:host(:focus) { + outline: none; +} + +:host(:hover), +:host(:focus) { + --background: rgba(0, 0, 0, .16); +} + +:host(.activated) { + --background: rgba(0, 0, 0, .20); +} + + +// Colors + :host(.ion-color) { - background: current-color(base); - color: current-color(contrast); + background: current-color(base, .08); + color: current-color(shade); } -:host(.ion-color)::slotted(*) ion-chip-icon, -:host(.ion-color)::slotted(*) ion-chip-button { - --color: initial; +:host(.ion-color:hover), +:host(.ion-color:focus) { + background: current-color(base, .12); } -::slotted(*) ion-label { - @include margin(var(--label-margin-top), var(--label-margin-end), var(--label-margin-bottom), var(--label-margin-start)); +:host(.ion-color.activated) { + background: current-color(base, .16); } -::slotted(*) ion-avatar { - @include margin(var(--avatar-margin-top), var(--avatar-margin-end), var(--avatar-margin-bottom), var(--avatar-margin-start)); - width: var(--avatar-width); - height: var(--avatar-height); +// Outline + +:host(.chip-outline) { + border-width: 1px; + border-style: solid; +} + +:host(.chip-outline:not(.ion-color)) { + border-color: rgba(0, 0, 0, .32); + + background: transparent; +} + +:host(.chip-outline.ion-color) { + border-color: current-color(base, .32); +} + +:host(.chip-outline:not(.ion-color):hover), +:host(.chip-outline:not(.ion-color):focus) { + background: rgba(0, 0, 0, .04); +} + +:host(.chip-outline.activated:not(.ion-color)) { + background: rgba(0, 0, 0, .08); +} + + +// Icon + +::slotted(ion-icon) { + font-size: 20px; +} + +:host(:not(.ion-color)) ::slotted(ion-icon) { + color: rgba(0, 0, 0, .54); +} + +::slotted(ion-icon:first-child) { + @include margin(-4px, 8px, -4px, -4px); +} + +::slotted(ion-icon:last-child) { + @include margin(-4px, -4px, -4px, 8px); +} + + +// Avatar + +::slotted(ion-avatar) { + width: 24px; + height: 24px; +} + +::slotted(ion-avatar:first-child) { + @include margin(-4px, 8px, -4px, -8px); +} + +::slotted(ion-avatar:last-child) { + @include margin(-4px, -8px, -4px, 8px); } diff --git a/core/src/components/chip/chip.tsx b/core/src/components/chip/chip.tsx index 929b5437d7..9059e3af9a 100644 --- a/core/src/components/chip/chip.tsx +++ b/core/src/components/chip/chip.tsx @@ -9,7 +9,7 @@ import { createColorClasses } from '../../utils/theme'; ios: 'chip.ios.scss', md: 'chip.md.scss' }, - scoped: true + shadow: true }) export class Chip implements ComponentInterface { /** @@ -24,9 +24,25 @@ export class Chip implements ComponentInterface { */ @Prop() mode!: Mode; + /** + * Display an outline style button. + */ + @Prop() outline = false; + hostData() { return { - class: createColorClasses(this.color), + 'ion-activatable': true, + class: { + ...createColorClasses(this.color), + 'chip-outline': this.outline + } }; } + + render() { + return [ + , + this.mode === 'md' ? : null + ]; + } } diff --git a/core/src/components/chip/chip.vars.scss b/core/src/components/chip/chip.vars.scss deleted file mode 100644 index b8577856db..0000000000 --- a/core/src/components/chip/chip.vars.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import "../../themes/ionic.globals"; - -// Chip -// -------------------------------------------------- diff --git a/core/src/components/chip/readme.md b/core/src/components/chip/readme.md index 6b27cd7c45..33af572488 100644 --- a/core/src/components/chip/readme.md +++ b/core/src/components/chip/readme.md @@ -1,34 +1,25 @@ # ion-chip -Chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as avatars, text, buttons, and icons. +Chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as avatars, text, and icons. ## 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` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `outline` | `outline` | Display an outline style button. | `boolean` | `false` | ## CSS Custom Properties -| Name | Description | -| ------------------------ | -------------------------------- | -| `--avatar-height` | Height of the chip avatar | -| `--avatar-margin-bottom` | Margin bottom of the chip avatar | -| `--avatar-margin-end` | Margin end of the chip avatar | -| `--avatar-margin-start` | Margin start of the chip avatar | -| `--avatar-margin-top` | Margin top of the chip avatar | -| `--avatar-width` | Width of the chip avatar | -| `--background` | Background of the chip | -| `--color` | Color of the chip | -| `--label-margin-bottom` | Margin bottom of the chip label | -| `--label-margin-end` | Margin end of the chip label | -| `--label-margin-start` | Margin start of the chip label | -| `--label-margin-top` | Margin top of the chip label | +| Name | Description | +| -------------- | ---------------------- | +| `--background` | Background of the chip | +| `--color` | Color of the chip | ---------------------------------------------- diff --git a/core/src/components/chip/test/basic/index.html b/core/src/components/chip/test/basic/index.html index fdab8383af..cd3d13a6fc 100644 --- a/core/src/components/chip/test/basic/index.html +++ b/core/src/components/chip/test/basic/index.html @@ -20,127 +20,78 @@ -

Text Chips

- - Default - - - - Secondary Label - - - - Another With Longer Text - - -

Color Chips

- - - - Primary - - - - Secondary w/ Dark label - - - - Danger - - -

Icon Chips

- - - - Default - - - - Secondary - - - - - - Solid Default - - - - Solid Danger - - - -

Avatar Chips

- - - - - - Default - - - - Right Avatar - - - - - -

Delete Chips

- - - Default - - - - - - - - With Icon - - - - - - - - - - With Avatar - - - - - - - - Primary - - - - - - - Chip Item - - +

Basic Chips

+ Default - - - - - + + Border Radius + + + + With Icon + + + + + + With Avatar + + + + + + With Icon and Avatar + + - +

Color Chips

+ + Primary + + + Danger + + + + Tertiary with Icon + + + + + + Primary with Avatar + + + Success with Icon + + + +

Outline Chips

+ + Outline + + + Danger Outline + + + + Secondary Outline with Icon + + + Primary Outline with Avatar + + + + + + + Outline with Icon and Avatar + + + + diff --git a/core/src/components/chip/test/preview/index.html b/core/src/components/chip/test/preview/index.html index 821f59f496..d3f0b5aff7 100644 --- a/core/src/components/chip/test/preview/index.html +++ b/core/src/components/chip/test/preview/index.html @@ -20,108 +20,77 @@ -

Text Chips

+

Basic Chips

Default - - - Secondary Label + + Border Radius - - Another With Longer Text + + With Icon + + + + + + With Avatar + + + + + + With Icon and Avatar +

Color Chips

- - Primary - - - Secondary w/ Dark label - - Danger - -

Icon Chips

- - - - Default + + + Tertiary with Icon - - - Secondary - - - -

Avatar Chips

- - + - + - Default + Primary with Avatar + + + Success with Icon + - - Right Avatar +

Outline Chips

+ + Outline + + + Danger Outline + + + + Secondary Outline with Icon + + + Primary Outline with Avatar - + - -

Delete Chips

- - - Default - - - + + + Outline with Icon and Avatar + - - - With Icon - - - - - - - - - - With Avatar - - - - - - - - Primary - - - - - - - Chip Item - - - Default - - - - - - - diff --git a/core/src/components/chip/test/standalone/index.html b/core/src/components/chip/test/standalone/index.html index 6380458054..9d164c0121 100644 --- a/core/src/components/chip/test/standalone/index.html +++ b/core/src/components/chip/test/standalone/index.html @@ -9,180 +9,76 @@ -

Text Chips

+

Basic Chips

Default - - - Secondary Label + + Border Radius - - Another With Longer Text + + With Icon + + + + + + With Avatar + + + + + + With Icon and Avatar +

Color Chips

- - Primary - - - - Secondary w/ Dark label - - Danger - -

Custom Chips

- - - - Custom Color + + + Tertiary with Icon - - + - + - Custom Avatar + Primary with Avatar + + + Success with Icon + - +

Outline Chips

+ + Outline + + + Danger Outline + + + + Secondary Outline with Icon + + + Primary Outline with Avatar - - - Custom Height - - - - - - Custom Everything - - - - - -

Icon Chips

- - - - Default - - - - Secondary - - - -

Avatar Chips

- - - - - - Default - - - - Right Avatar - - + - -

Delete Chips

- - - Default - - - + + + Outline with Icon and Avatar + - - - With Icon - - - - - - - - - - With Avatar - - - - - - - - Primary - - - - - - - Chip Item - - - Default - - - - - - - - - diff --git a/core/src/components/chip/usage/angular.md b/core/src/components/chip/usage/angular.md index 7eaabb19bd..361eda3f72 100644 --- a/core/src/components/chip/usage/angular.md +++ b/core/src/components/chip/usage/angular.md @@ -23,17 +23,13 @@ Button Chip - - - + Icon Chip - - - + @@ -41,8 +37,6 @@ Avatar Chip - - - + ``` diff --git a/core/src/components/chip/usage/javascript.md b/core/src/components/chip/usage/javascript.md index 7eaabb19bd..361eda3f72 100644 --- a/core/src/components/chip/usage/javascript.md +++ b/core/src/components/chip/usage/javascript.md @@ -23,17 +23,13 @@ Button Chip - - - + Icon Chip - - - + @@ -41,8 +37,6 @@ Avatar Chip - - - + ``` diff --git a/core/stencil.config.ts b/core/stencil.config.ts index 4139e90fca..15f1f77500 100644 --- a/core/stencil.config.ts +++ b/core/stencil.config.ts @@ -14,7 +14,7 @@ export const config: Config = { { components: ['ion-button', 'ion-icon'] }, { components: ['ion-card', 'ion-card-content', 'ion-card-header', 'ion-card-title', 'ion-card-subtitle'] }, { components: ['ion-checkbox'] }, - { components: ['ion-chip', 'ion-chip-button', 'ion-chip-icon'] }, + { components: ['ion-chip'] }, { components: ['ion-datetime', 'ion-picker', 'ion-picker-column', 'ion-picker-controller'] }, { components: ['ion-fab', 'ion-fab-button', 'ion-fab-list'] }, { components: ['ion-grid', 'ion-row', 'ion-col'] },