From 07e99a10f9322099a466e7d599f443a4711cfa4f Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 16 Aug 2018 16:17:03 -0400 Subject: [PATCH] fix(chip): add and document custom properties references #14850 references #14853 references #14808 --- core/src/components.d.ts | 12 +++- .../components/chip-button/chip-button.scss | 53 +++++++++++++---- .../components/chip-button/chip-button.tsx | 5 +- .../chip-button/chip-button.vars.scss | 23 +++++--- core/src/components/chip-button/readme.md | 17 +++++- .../components/chip-button/usage/angular.md | 4 +- .../chip-button/usage/javascript.md | 4 +- core/src/components/chip-icon/chip-icon.scss | 36 +++++++++--- core/src/components/chip-icon/chip-icon.tsx | 11 +++- .../components/chip-icon/chip-icon.vars.scss | 7 +++ core/src/components/chip-icon/readme.md | 21 +++++-- core/src/components/chip/chip.ios.scss | 32 +++++------ core/src/components/chip/chip.ios.vars.scss | 20 ++++--- core/src/components/chip/chip.md.scss | 32 +++++------ core/src/components/chip/chip.md.vars.scss | 20 ++++--- core/src/components/chip/chip.scss | 43 ++++++++++++-- core/src/components/chip/chip.vars.scss | 9 --- core/src/components/chip/readme.md | 18 ++++++ .../src/components/chip/test/basic/index.html | 18 ++++-- .../chip/test/standalone/index.html | 57 +++++++++++++++++++ core/src/components/segment-button/readme.md | 2 +- 21 files changed, 335 insertions(+), 109 deletions(-) create mode 100644 core/src/components/chip-icon/chip-icon.vars.scss diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 52393954b9..c4872eaa30 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -466,7 +466,7 @@ declare global { */ 'disabled': boolean; /** - * Set to `"clear"` for a transparent button style. + * Set to `"clear"` for a transparent button or to `"solid"` for a filled background. Defaults to `"clear"`. */ 'fill': 'clear' | 'solid'; /** @@ -484,6 +484,10 @@ declare global { * 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. Defaults to `"clear"`. + */ + 'fill': 'clear' | 'solid'; /** * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. */ @@ -3977,7 +3981,7 @@ declare global { */ 'disabled'?: boolean; /** - * Set to `"clear"` for a transparent button style. + * Set to `"clear"` for a transparent button or to `"solid"` for a filled background. Defaults to `"clear"`. */ 'fill'?: 'clear' | 'solid'; /** @@ -3995,6 +3999,10 @@ declare global { * 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. Defaults to `"clear"`. + */ + 'fill'?: 'clear' | 'solid'; /** * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. */ diff --git a/core/src/components/chip-button/chip-button.scss b/core/src/components/chip-button/chip-button.scss index 818fbe6781..d09010fcdb 100644 --- a/core/src/components/chip-button/chip-button.scss +++ b/core/src/components/chip-button/chip-button.scss @@ -4,38 +4,67 @@ // -------------------------------------------------- :host { - --ion-color-base: #{ion-color(primary, base)}; - --ion-color-contrast: #{ion-color(primary, contrast)}; - --size: #{$chip-button-size}; -} + /** + * @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}; -:host(.chip-button-clear) { - --background: #{current-color(base)}; + width: var(--width); + height: var(--height); - color: #{current-color(contrast)} + font-size: #{$chip-button-font-size}; } :host(.chip-button-clear) { --background: transparent; + --color: #{$chip-button-clear-color}; +} - color: #{current-color(base)}; +:host(.chip-button-solid) { + --background: #{ion-color(primary, base)}; + --color: #{ion-color(primary, contrast)}; +} + +:host(.chip-button-solid.ion-color) .chip-button-native { + background: current-color(base); + color: current-color(contrast); +} + +:host(.chip-button-clear.ion-color) .chip-button-native { + background: transparent; + color: current-color(base); } .chip-button-native { @include text-inherit(); - @include border-radius($chip-button-border-radius); - @include margin($chip-button-margin-top, $chip-button-margin-end, $chip-button-margin-bottom, $chip-button-margin-start); + @include border-radius(var(--border-radius)); + @include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start)); position: relative; - width: var(--size); - height: var(--size); + width: var(--width); + height: var(--height); border: 0; outline: none; background: var(--background); + color: var(--color); appearance: none; } diff --git a/core/src/components/chip-button/chip-button.tsx b/core/src/components/chip-button/chip-button.tsx index d99932d03a..8d7b1d5d02 100644 --- a/core/src/components/chip-button/chip-button.tsx +++ b/core/src/components/chip-button/chip-button.tsx @@ -30,9 +30,10 @@ export class ChipButton { @Prop() disabled = false; /** - * Set to `"clear"` for a transparent button style. + * Set to `"clear"` for a transparent button or to `"solid"` for a filled background. + * Defaults to `"clear"`. */ - @Prop() fill: 'clear' | 'solid' = 'solid'; + @Prop() fill: 'clear' | 'solid' = 'clear'; /** * Contains a URL or a URL fragment that the hyperlink points to. diff --git a/core/src/components/chip-button/chip-button.vars.scss b/core/src/components/chip-button/chip-button.vars.scss index 3c16b11821..79c7e52ef6 100644 --- a/core/src/components/chip-button/chip-button.vars.scss +++ b/core/src/components/chip-button/chip-button.vars.scss @@ -3,20 +3,29 @@ // Chip Button // -------------------------------------------------- -/// @prop - Border radius of the button in the chip +/// @prop - Border radius of the chip button $chip-button-border-radius: 50% !default; -/// @prop - Margin top of the button in the chip +/// @prop - Margin top of the chip button $chip-button-margin-top: 0 !default; -/// @prop - Margin end of the button in the chip +/// @prop - Margin end of the chip button $chip-button-margin-end: $chip-button-margin-top !default; -/// @prop - Margin bottom of the button in the chip +/// @prop - Margin bottom of the chip button $chip-button-margin-bottom: $chip-button-margin-top !default; -/// @prop - Margin start of the button in the chip +/// @prop - Margin start of the chip button $chip-button-margin-start: $chip-button-margin-end !default; -/// @prop - Width and height of the button in the chip -$chip-button-size: 32px !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 index c49b40f239..a42d4b74f2 100644 --- a/core/src/components/chip-button/readme.md +++ b/core/src/components/chip-button/readme.md @@ -11,11 +11,26 @@ A ChipButton is an inset button that is placed inside of a Chip. For more inform | ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | | `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). | `Color` | | `disabled` | `disabled` | If true, the user cannot interact with the chip button. Defaults to `false`. | `boolean` | -| `fill` | `fill` | Set to `"clear"` for a transparent button style. | `'clear' | 'solid'` | +| `fill` | `fill` | Set to `"clear"` for a transparent button or to `"solid"` for a filled background. Defaults to `"clear"`. | `'clear' | 'solid'` | | `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` | | `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +## 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 index 964ea06b3c..433e5d02d5 100644 --- a/core/src/components/chip-button/usage/angular.md +++ b/core/src/components/chip-button/usage/angular.md @@ -1,7 +1,7 @@ ```html Button Chip - + @@ -19,7 +19,7 @@ Avatar Chip - + diff --git a/core/src/components/chip-button/usage/javascript.md b/core/src/components/chip-button/usage/javascript.md index 964ea06b3c..433e5d02d5 100644 --- a/core/src/components/chip-button/usage/javascript.md +++ b/core/src/components/chip-button/usage/javascript.md @@ -1,7 +1,7 @@ ```html Button Chip - + @@ -19,7 +19,7 @@ Avatar Chip - + diff --git a/core/src/components/chip-icon/chip-icon.scss b/core/src/components/chip-icon/chip-icon.scss index 048b173f57..1c416ba05f 100644 --- a/core/src/components/chip-icon/chip-icon.scss +++ b/core/src/components/chip-icon/chip-icon.scss @@ -1,6 +1,10 @@ -@import "../../themes/ionic.globals"; +@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; @@ -8,17 +12,31 @@ align-items: center; justify-content: center; - width: var(--size, 32px); - height: var(--size, 32px); + width: var(--width, 32px); + height: var(--height, 32px); - - background: #{ion-color(primary, base)}; - color: #{ion-color(primary, contrast)}; + background: var(--background); + color: var(--color); font-size: 18px; } -:host(.ion-color) { - background: #{current-color(base)}; - color: #{current-color(contrast)}; +: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 index d2bfe676cf..841b7c0cf6 100644 --- a/core/src/components/chip-icon/chip-icon.tsx +++ b/core/src/components/chip-icon/chip-icon.tsx @@ -22,6 +22,12 @@ export class ChipIcon { */ @Prop() mode!: Mode; + /** + * Set to `"clear"` for a transparent icon or to `"solid"` for a filled background. + * Defaults to `"clear"`. + */ + @Prop() fill: 'clear' | 'solid' = 'clear'; + /** * The icon to use. * Possible values are the same as `"ion-icon"`. @@ -37,12 +43,13 @@ export class ChipIcon { hostData() { return { class: { - ...createColorClasses(this.color) + ...createColorClasses(this.color), + [`chip-icon-${this.fill}`]: true } }; } render() { - return ; + return ; } } diff --git a/core/src/components/chip-icon/chip-icon.vars.scss b/core/src/components/chip-icon/chip-icon.vars.scss new file mode 100644 index 0000000000..d27a68f2e8 --- /dev/null +++ b/core/src/components/chip-icon/chip-icon.vars.scss @@ -0,0 +1,7 @@ +@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 index 05da26ed0a..ca510962a5 100644 --- a/core/src/components/chip-icon/readme.md +++ b/core/src/components/chip-icon/readme.md @@ -7,12 +7,21 @@ ## Properties -| Property | Attribute | Description | Type | -| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| `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). | `Color` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | -| `name` | `name` | The icon to use. Possible values are the same as `"ion-icon"`. | `string` | -| `src` | `src` | The icon src to use. Possible values are the same as `"ion-icon"`. | `string` | +| Property | Attribute | Description | Type | +| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | +| `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). | `Color` | +| `fill` | `fill` | Set to `"clear"` for a transparent icon or to `"solid"` for a filled background. Defaults to `"clear"`. | `'clear' | 'solid'` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +| `name` | `name` | The icon to use. Possible values are the same as `"ion-icon"`. | `string` | +| `src` | `src` | The icon src to use. Possible values are the same as `"ion-icon"`. | `string` | + + +## CSS Custom Properties + +| Name | Description | +| -------------- | --------------------------- | +| `--background` | Background of the Chip Icon | +| `--color` | Color of the Chip Icon | ---------------------------------------------- diff --git a/core/src/components/chip/chip.ios.scss b/core/src/components/chip/chip.ios.scss index a5a4345cb2..ba3b5d291b 100644 --- a/core/src/components/chip/chip.ios.scss +++ b/core/src/components/chip/chip.ios.scss @@ -5,8 +5,22 @@ // -------------------------------------------------- :host { - --ion-color-base: #{$chip-ios-background-color}; - --ion-color-contrast: #{$chip-ios-text-color}; + --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); @@ -16,17 +30,3 @@ font-family: $chip-ios-font-family; font-size: $chip-ios-font-size; } - -::slotted(*) ion-label { - @include margin($chip-ios-label-margin-top, $chip-ios-label-margin-end, $chip-ios-label-margin-bottom, $chip-ios-label-margin-start); -} - -::slotted(ion-icon) { - background-color: $chip-ios-icon-background-color; - color: $chip-ios-icon-fill-color; -} - -::slotted(*) ion-avatar { - width: $chip-ios-avatar-width; - height: $chip-ios-avatar-height; -} diff --git a/core/src/components/chip/chip.ios.vars.scss b/core/src/components/chip/chip.ios.vars.scss index 767795836d..b38468b006 100644 --- a/core/src/components/chip/chip.ios.vars.scss +++ b/core/src/components/chip/chip.ios.vars.scss @@ -48,14 +48,20 @@ $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 - Background color of the icon in the chip -$chip-ios-icon-background-color: ion-color(primary, base) !default; - -/// @prop - Fill color of the icon in the chip -$chip-ios-icon-fill-color: ion-color(primary, contrast) !default; - /// @prop - Width of the avatar in the chip -$chip-ios-avatar-width: 32px !default; +$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 3be1985011..5ce12f937f 100644 --- a/core/src/components/chip/chip.md.scss +++ b/core/src/components/chip/chip.md.scss @@ -5,8 +5,22 @@ // -------------------------------------------------- :host { - --ion-color-base: #{$chip-md-background-color}; - --ion-color-contrast: #{$chip-md-text-color}; + --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); @@ -16,17 +30,3 @@ font-family: $chip-md-font-family; font-size: $chip-md-font-size; } - -::slotted(*) ion-label { - @include margin($chip-md-label-margin-top, $chip-md-label-margin-end, $chip-md-label-margin-bottom, $chip-md-label-margin-start); -} - -::slotted(ion-icon) { - background-color: $chip-md-icon-background-color; - color: $chip-md-icon-fill-color; -} - -::slotted(*) ion-avatar { - width: $chip-md-avatar-width; - height: $chip-md-avatar-height; -} diff --git a/core/src/components/chip/chip.md.vars.scss b/core/src/components/chip/chip.md.vars.scss index 373abbbd95..86db6d2716 100644 --- a/core/src/components/chip/chip.md.vars.scss +++ b/core/src/components/chip/chip.md.vars.scss @@ -48,14 +48,20 @@ $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 - Background color of the icon in the chip -$chip-md-icon-background-color: ion-color(primary, base) !default; - -/// @prop - Fill color of the icon in the chip -$chip-md-icon-fill-color: ion-color(primary, contrast) !default; - /// @prop - Width of the avatar in the chip -$chip-md-avatar-width: 32px !default; +$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 d288744f67..3f6ef8c1b0 100644 --- a/core/src/components/chip/chip.scss +++ b/core/src/components/chip/chip.scss @@ -4,8 +4,22 @@ // -------------------------------------------------- :host { - --ion-color-base: #{ion-color(primary, base)}; - --ion-color-contrast: #{ion-color(primary, contrast)}; + /** + * @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 + */ @include font-smoothing(); @@ -14,11 +28,32 @@ align-items: center; align-self: center; - background-color: var(--ion-color-base); - color: var(--ion-color-contrast); + background: var(--background); + color: var(--color); font-weight: normal; vertical-align: middle; box-sizing: border-box; } + +:host(.ion-color) { + background: current-color(base); + color: current-color(contrast); +} + +:host(.ion-color)::slotted(*) ion-chip-icon, +:host(.ion-color)::slotted(*) ion-chip-button { + --color: currentColor; +} + +::slotted(*) ion-label { + @include margin(var(--label-margin-top), var(--label-margin-end), var(--label-margin-bottom), var(--label-margin-start)); +} + +::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); +} diff --git a/core/src/components/chip/chip.vars.scss b/core/src/components/chip/chip.vars.scss index 36e782759d..b8577856db 100644 --- a/core/src/components/chip/chip.vars.scss +++ b/core/src/components/chip/chip.vars.scss @@ -2,12 +2,3 @@ // Chip // -------------------------------------------------- - -/// @prop - Border radius of the icon in the chip -$chip-icon-border-radius: 50% !default; - -/// @prop - Size of the icon in the chip -$chip-icon-size: 18px !default; - -/// @prop - Padding of the icon in the chip -$chip-icon-padding: 7px !default; diff --git a/core/src/components/chip/readme.md b/core/src/components/chip/readme.md index c410edb2f1..6dbd07853c 100644 --- a/core/src/components/chip/readme.md +++ b/core/src/components/chip/readme.md @@ -13,6 +13,24 @@ Chips represent complex entities in small blocks, such as a contact. A chip can | `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +## 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 | + + ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/chip/test/basic/index.html b/core/src/components/chip/test/basic/index.html index f7afad2769..f2e414575a 100644 --- a/core/src/components/chip/test/basic/index.html +++ b/core/src/components/chip/test/basic/index.html @@ -36,7 +36,7 @@

Color Chips

- + Primary @@ -60,11 +60,21 @@ + + + Solid Default + + + + Solid Danger + + +

Avatar Chips

- + Default @@ -72,7 +82,7 @@ Right Avatar - + @@ -95,7 +105,7 @@ - + With Avatar diff --git a/core/src/components/chip/test/standalone/index.html b/core/src/components/chip/test/standalone/index.html index f97e6408b3..e0f30e48e8 100644 --- a/core/src/components/chip/test/standalone/index.html +++ b/core/src/components/chip/test/standalone/index.html @@ -30,6 +30,7 @@ + Secondary w/ Dark label @@ -37,6 +38,36 @@ Danger +

Custom Chips

+ + + + Custom Color + + + + + + + Custom Avatar + + + + + + + Custom Height + + + + + + Custom Everything + + + + +

Icon Chips

@@ -117,6 +148,32 @@ padding: 16px; text-align: center; } + + .custom-color { + --background: yellow; + --color: orange; + } + + .custom-avatar { + --avatar-width: 41px; + --avatar-height: 41px; + } + + .custom-height { + margin-top: 10px; + height: 50px; + border-radius: 25px; + } + + .custom-height ion-chip-button { + --width: 50px; + } + + .custom-icon { + width: 50px; + height: 50px; + font-size: 30px; + }