diff --git a/core/src/components.d.ts b/core/src/components.d.ts index eec75790d3..5acff1a427 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -750,6 +750,10 @@ export namespace Components { * Display an outline style button. */ "outline": boolean; + /** + * Set to 'rectangular' for a chip with sharp corners. + */ + "shape"?: 'soft' | 'round' | 'rectangular'; /** * The theme determines the visual appearance of the component. */ @@ -5978,6 +5982,10 @@ declare namespace LocalJSX { * Display an outline style button. */ "outline"?: boolean; + /** + * Set to 'rectangular' for a chip with sharp corners. + */ + "shape"?: 'soft' | 'round' | 'rectangular'; /** * The theme determines the visual appearance of the component. */ diff --git a/core/src/components/chip/chip.ionic.scss b/core/src/components/chip/chip.ionic.scss index 1cad0a811e..258f3789bf 100644 --- a/core/src/components/chip/chip.ionic.scss +++ b/core/src/components/chip/chip.ionic.scss @@ -9,13 +9,14 @@ $ionic-states-focus-primary: #9ec4fd; // TODO(ROU-4870): there is no token yet f :host { --background: #{tokens.$ionic-color-neutral-10}; --border-color: transparent; + --border-radius: #{tokens.$ionic-border-radius-rounded-large}; --color: #{tokens.$ionic-color-neutral-900}; --focus-ring-color: #{$ionic-states-focus-primary}; --focus-ring-width: #{tokens.$ionic-border-size-medium}; @include mixins.font-smoothing; @include mixins.padding(tokens.$ionic-space-xs, tokens.$ionic-space-xxs); - @include mixins.border-radius(tokens.$ionic-border-radius-rounded-large); + @include mixins.border-radius(var(--border-radius)); display: inline-flex; @@ -75,3 +76,16 @@ $ionic-states-focus-primary: #9ec4fd; // TODO(ROU-4870): there is no token yet f opacity: 0.6; pointer-events: none; } + +// Chip Shapes +// --------------------------------------------- + +:host(.chip-soft) { + --border-radius: #{tokens.$ionic-border-radius-rounded-small}; +} +:host(.chip-round) { + --border-radius: #{tokens.$ionic-border-radius-rounded-large}; +} +:host(.chip-rectangular) { + --border-radius: #{tokens.$ionic-border-radius-square}; +} diff --git a/core/src/components/chip/chip.tsx b/core/src/components/chip/chip.tsx index a85333512d..b3e946f842 100644 --- a/core/src/components/chip/chip.tsx +++ b/core/src/components/chip/chip.tsx @@ -36,7 +36,13 @@ export class Chip implements ComponentInterface { */ @Prop() disabled = false; + /** + * Set to 'rectangular' for a chip with sharp corners. + */ + @Prop({ reflect: true }) shape?: 'soft' | 'round' | 'rectangular'; + render() { + const { shape } = this; const theme = getIonTheme(this); return ( @@ -44,6 +50,7 @@ export class Chip implements ComponentInterface { aria-disabled={this.disabled ? 'true' : null} class={createColorClasses(this.color, { [theme]: true, + [`chip-${shape}`]: shape !== undefined, 'chip-outline': this.outline, 'chip-disabled': this.disabled, 'ion-activatable': true, diff --git a/core/src/components/chip/test/theme-ionic/index.html b/core/src/components/chip/test/theme-ionic/index.html index 05f944345e..c0f6b7b65b 100644 --- a/core/src/components/chip/test/theme-ionic/index.html +++ b/core/src/components/chip/test/theme-ionic/index.html @@ -50,6 +50,19 @@ Focus

+ +

Shapes

+

+ + Soft + + + Round + + + Rectangular + +