Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(core/pill): migrate to shadow dom #664

Merged
merged 3 commits into from
Aug 2, 2023
Merged

feat(core/pill): migrate to shadow dom #664

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3212fb3
feat(core/pill): migrate to shadow dom
danielleroux Aug 1, 2023
964ce87
fix: alignment of pill
danielleroux Aug 2, 2023
b68fd66
Merge remote-tracking branch 'origin/main' into feat/pill-shadow-dom
danielleroux Aug 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions BREAKING_CHANGES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

## v2.0.0

### `ix-counter-pill` removed

Replaced with `ix-pill`

### `ix-toggle` changed host styling

`ix-toggle` is now `display: inline-flex` instead of `display: flex`
Expand Down
67 changes: 0 additions & 67 deletions packages/core/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -406,35 +406,6 @@ export namespace Components {
*/
"variant": ContentHeaderVariant;
}
interface IxCounterPill {
/**
* Align pill content left
*/
"alignLeft": boolean;
/**
* Custom color for pill. Only working for `variant='custom'`
*/
"background": string | undefined;
/**
* Custom font color for pill. Only working for `variant='custom'`
*/
"color": string | undefined;
/**
* Show pill as outline
*/
"outline": boolean;
/**
* Pill variant
*/
"variant": | 'primary'
| 'alarm'
| 'critical'
| 'warning'
| 'info'
| 'neutral'
| 'success'
| 'custom';
}
interface IxCssGrid {
/**
* Define css grid template
Expand Down Expand Up @@ -2287,12 +2258,6 @@ declare global {
prototype: HTMLIxContentHeaderElement;
new (): HTMLIxContentHeaderElement;
};
interface HTMLIxCounterPillElement extends Components.IxCounterPill, HTMLStencilElement {
}
var HTMLIxCounterPillElement: {
prototype: HTMLIxCounterPillElement;
new (): HTMLIxCounterPillElement;
};
interface HTMLIxCssGridElement extends Components.IxCssGrid, HTMLStencilElement {
}
var HTMLIxCssGridElement: {
Expand Down Expand Up @@ -2790,7 +2755,6 @@ declare global {
"ix-category-filter": HTMLIxCategoryFilterElement;
"ix-chip": HTMLIxChipElement;
"ix-content-header": HTMLIxContentHeaderElement;
"ix-counter-pill": HTMLIxCounterPillElement;
"ix-css-grid": HTMLIxCssGridElement;
"ix-css-grid-item": HTMLIxCssGridItemElement;
"ix-date-picker": HTMLIxDatePickerElement;
Expand Down Expand Up @@ -3261,35 +3225,6 @@ declare namespace LocalJSX {
*/
"variant"?: ContentHeaderVariant;
}
interface IxCounterPill {
/**
* Align pill content left
*/
"alignLeft"?: boolean;
/**
* Custom color for pill. Only working for `variant='custom'`
*/
"background"?: string | undefined;
/**
* Custom font color for pill. Only working for `variant='custom'`
*/
"color"?: string | undefined;
/**
* Show pill as outline
*/
"outline"?: boolean;
/**
* Pill variant
*/
"variant"?: | 'primary'
| 'alarm'
| 'critical'
| 'warning'
| 'info'
| 'neutral'
| 'success'
| 'custom';
}
interface IxCssGrid {
/**
* Define css grid template
Expand Down Expand Up @@ -5003,7 +4938,6 @@ declare namespace LocalJSX {
"ix-category-filter": IxCategoryFilter;
"ix-chip": IxChip;
"ix-content-header": IxContentHeader;
"ix-counter-pill": IxCounterPill;
"ix-css-grid": IxCssGrid;
"ix-css-grid-item": IxCssGridItem;
"ix-date-picker": IxDatePicker;
Expand Down Expand Up @@ -5122,7 +5056,6 @@ declare module "@stencil/core" {
"ix-category-filter": LocalJSX.IxCategoryFilter & JSXBase.HTMLAttributes<HTMLIxCategoryFilterElement>;
"ix-chip": LocalJSX.IxChip & JSXBase.HTMLAttributes<HTMLIxChipElement>;
"ix-content-header": LocalJSX.IxContentHeader & JSXBase.HTMLAttributes<HTMLIxContentHeaderElement>;
"ix-counter-pill": LocalJSX.IxCounterPill & JSXBase.HTMLAttributes<HTMLIxCounterPillElement>;
"ix-css-grid": LocalJSX.IxCssGrid & JSXBase.HTMLAttributes<HTMLIxCssGridElement>;
"ix-css-grid-item": LocalJSX.IxCssGridItem & JSXBase.HTMLAttributes<HTMLIxCssGridItemElement>;
"ix-date-picker": LocalJSX.IxDatePicker & JSXBase.HTMLAttributes<HTMLIxDatePickerElement>;
Expand Down
183 changes: 183 additions & 0 deletions packages/core/src/components/chip/chip-mixin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,3 +141,186 @@ $border-radius: 100px;

@include chip-variant($interaction: $interaction);
}

@mixin chip-container($interaction: true) {
.container {
display: inline-flex;
width: inherit;
box-sizing: border-box;
position: relative;
align-items: center;
border-radius: $border-radius;
padding: 0.5rem;

height: $default-control-height;
max-height: $default-control-height;

@if $interaction {
cursor: pointer;
} @else {
cursor: default;
}

.with-icon {
margin-right: $tiny-space;
}

.hidden {
width: 0px;
margin-right: 0px;
}

.close-button-container {
display: inline-flex;
margin-left: $medium-space;
}

.slot-container {
flex-grow: 1;

@include ellipsis;
}
}

.container.icon {
padding-left: 0.75rem;
padding-right: 0.75rem;
}

.container.closable {
padding-right: 0.25rem;
}

.container.primary {
background-color: var(--theme-color-primary);
color: var(--theme-chip-primary--color);

.close-button {
color: var(--theme-chip-primary--color);
--ix-icon-button-color: var(--theme-chip-primary--color);
pointer-events: auto;
}

@if $interaction {
&:hover {
background-color: var(--theme-chip-primary--background--hover);
}

&:active {
background-color: var(--theme-chip-primary--background--active);
}

&:focus-visible {
outline: 1px solid #199fff;
outline-offset: var(--theme-btn--focus--outline-offset);
}
}
}

.container.primary.outline {
color: var(--theme-chip-primary-outline--color);
background-color: transparent;
border: solid 1px var(--theme-chip-primary-outline--border-color);

.close-button {
color: var(--theme-chip-primary-outline--color);
--ix-icon-button-color: var(--theme-chip-primary-outline--color);
}

@if $interaction {
&:hover {
background-color: var(--theme-chip-primary-outline--background--hover);
}

&:active {
background-color: var(--theme-chip-primary-outline--background--active);
}
}
}

@each $color in $predefined-chips {
.container.#{$color} {
color: var(--theme-color-#{$color}--contrast);

@if $interaction {
&:hover::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.05);
left: 0;
border-radius: $border-radius;
pointer-events: none;
}

&.active::after,
&:active::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
left: 0;
border-radius: $border-radius;
pointer-events: none;
}
}

&:not(.outline) {
background-color: var(--theme-color-#{$color});

.close-button {
color: var(--theme-color-#{$color}--contrast);
--ix-icon-button-color: var(--theme-color-#{$color}--contrast);
}

@if $interaction {
&:hover::after {
content: '';
background-color: rgba(0, 0, 0, 0.05);
}

&.active::after,
&:active::after {
background-color: rgba(0, 0, 0, 0.1);
}
}
}

&.outline {
color: var(--theme-chip-outline--color);
border: solid 1px var(--theme-color-#{$color});

@if $interaction {
&:hover::after {
display: none;
}

&:hover {
background-color: var(--theme-chip-outline--background--hover);
}

&.active::after,
&:active::after {
display: none;
}

&.active,
&:active {
background-color: var(--theme-chip-outline--background--active);
}
}
}

@if $interaction {
&:focus-visible {
outline: 1px solid #199fff;
outline-offset: var(--theme-btn--focus--outline-offset);
}
}
}
}
}
Loading
Loading