mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
c78d2e6ec8
Issue number: internal --------- ## What is the current behavior? The `shape` property defaults to `undefined` which evaluates to the "Soft" shape for the `ionic` theme and the "Round" shape for the `ios`/`md` themes. | Property Value | CSS Value (`ionic`) | CSS Value (`ios`) | CSS Value (`md`) | | --------------- | ------ | ----------- | ----------- | | `undefined` | `4px` | `16px` | `16px` | | `"round"` | `999px` | unsupported | unsupported | | `"rectangular"` | `0px` | unsupported | unsupported | ## What is the new behavior? | Property Value | CSS Value (`ionic`) | CSS Value (`ios`) | CSS Value (`md`) | | --------------- | ------- | ------ | -------- | | `"soft"` | `4px` | `10px` | `8px` | | `"round"` | `999px` | `999px` | `999px` | | `"rectangular"` | `0px` | `0px` | `0px` | - Sets the default `shape` property to `"soft"` for `ios` and `md` themes and `"round"` for the ionic theme. - Updates the `border-radius` to apply to the shape classes instead of `:host` - Updates the `ios` theme to use `10px` for `"soft"` as this was taken from the App Store:  - Updates the `md` theme to use `8px` for `"soft"` as this is taken from the [Material Design 3 guidelines](https://m3.material.io/components/chips/specs#590903f7-2bf5-46ab-9810-d052173f41f1) & the previous value of `16px` is the equivalent of the `999px` round shape due to the height being `32px` - Adds support for the `"round"` and `"rectangular"` shapes in `ios` and `md` themes ## Does this introduce a breaking change? - [x] Yes - [ ] No BREAKING CHANGE: The `border-radius` of the `ios` and `md` chip now defaults to `10px` and `8px`, respectively, instead of `16px` in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"round"`, or override the `--border-radius` CSS variable to specify a different value. --------- Co-authored-by: ionitron <hi@ionicframework.com>
83 lines
2.3 KiB
TypeScript
83 lines
2.3 KiB
TypeScript
import type { ComponentInterface } from '@stencil/core';
|
|
import { Component, Host, Prop, h } from '@stencil/core';
|
|
import { createColorClasses } from '@utils/theme';
|
|
|
|
import { getIonTheme } from '../../global/ionic-global';
|
|
import type { Color } from '../../interface';
|
|
|
|
/**
|
|
* @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
|
|
* @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
|
|
*/
|
|
@Component({
|
|
tag: 'ion-chip',
|
|
styleUrls: {
|
|
ios: 'chip.ios.scss',
|
|
md: 'chip.md.scss',
|
|
ionic: 'chip.ionic.scss',
|
|
},
|
|
shadow: true,
|
|
})
|
|
export class Chip 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({ reflect: true }) color?: Color;
|
|
|
|
/**
|
|
* Display an outline style button.
|
|
*/
|
|
@Prop() outline = false;
|
|
|
|
/**
|
|
* If `true`, the user cannot interact with the chip.
|
|
*/
|
|
@Prop() disabled = false;
|
|
|
|
/**
|
|
* Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully
|
|
* rounded corners, or `"rectangular"` for a chip without rounded corners.
|
|
* Defaults to `"round"` for the `"ionic"` theme and `"soft"` for all other themes.
|
|
*/
|
|
@Prop() shape?: 'soft' | 'round' | 'rectangular';
|
|
|
|
/**
|
|
* Set the shape based on the theme
|
|
*/
|
|
private getShape(): string {
|
|
const theme = getIonTheme(this);
|
|
const { shape } = this;
|
|
|
|
if (shape === undefined) {
|
|
return theme === 'ionic' ? 'round' : 'soft';
|
|
}
|
|
|
|
return shape;
|
|
}
|
|
|
|
render() {
|
|
const theme = getIonTheme(this);
|
|
|
|
const shape = this.getShape();
|
|
|
|
return (
|
|
<Host
|
|
aria-disabled={this.disabled ? 'true' : null}
|
|
class={createColorClasses(this.color, {
|
|
[theme]: true,
|
|
[`chip-${shape}`]: true,
|
|
'chip-outline': this.outline,
|
|
'chip-disabled': this.disabled,
|
|
'ion-activatable': true,
|
|
'ion-focusable': !this.disabled,
|
|
})}
|
|
>
|
|
<slot></slot>
|
|
{theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
|
|
</Host>
|
|
);
|
|
}
|
|
}
|