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

fix(action): Ensure action content is correctly spaced #8184

Merged
merged 2 commits into from
Nov 16, 2023
Merged

fix(action): Ensure action content is correctly spaced #8184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2eaaf50
fix(action): Ensure action content is correctly spaced
macandcheese Nov 16, 2023
d18b4d8
Merge branch 'main' into macandcheese/6879-action-indicator-fix
macandcheese Nov 16, 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
59 changes: 24 additions & 35 deletions packages/calcite-components/src/components/action/action.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,20 @@
--calcite-action-indicator-color: theme("colors.brand");
}

@mixin action-indicator() {
position: relative;
&::after {
content: "";
@apply absolute
h-2
w-2
rounded-full;
inset-block-end: calc(-0.275rem);
inset-inline-end: calc(-0.275rem);
background-color: var(--calcite-action-indicator-color);
}
}

@include disabled();

.button {
Expand Down Expand Up @@ -70,7 +84,6 @@

.text-container--visible {
@apply w-auto flex-auto opacity-100;
margin-inline-end: theme("spacing.4");
}
}

Expand Down Expand Up @@ -196,44 +209,20 @@
@apply opacity-disabled bg-foreground-3;
}

:host([indicator]) {
.button::after {
content: "";
@apply absolute
h-2
w-2
rounded-full
border-2;

background-color: var(--calcite-action-indicator-color);
border-color: theme("colors.background.foreground.1");
inset-block-end: theme("spacing.3");
inset-inline-end: theme("spacing.3");
}
.button--text-visible {
&::after {
inset-block-end: auto;
}
}
.button:hover::after,
.button:focus::after {
border-color: theme("colors.background.foreground.1");
}
:host([appearance="transparent"]) .button {
@apply bg-transparent
transition-shadow
duration-150
ease-in-out;
}

:host([indicator][scale="s"]) {
.button::after {
inset-block-end: theme("spacing.1");
inset-inline-end: theme("spacing.1");
}
.button--text-visible::after {
inset-block-end: auto;
inset-inline-end: theme("spacing.2");
}
.indicator-with-icon {
@include action-indicator();
}

:host([indicator][active]) .button::after {
border-color: theme("colors.background.foreground.3");
.indicator-without-icon {
@apply w-4 mx-1;
@include action-indicator();
}

.indicator-text {
Expand Down
8 changes: 8 additions & 0 deletions packages/calcite-components/src/components/action/action.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,6 +202,14 @@ export const indicatorTextEnabled_TestOnly = (): string => html`
<calcite-action indicator active text="click-me" text-enabled icon="gear"></calcite-action>
`;

export const indicatorTextEnabledNoIcon_TestOnly = (): string => html`
<calcite-action indicator active text="click-me" text-enabled></calcite-action>
`;

export const indicatorNoTextEnabledNoIcon_TestOnly = (): string => html`
<calcite-action indicator active text="click-me"></calcite-action>
`;

export const arabicLocale_TestOnly = (): string => html`
<calcite-action
dir="rtl"
Expand Down
11 changes: 9 additions & 2 deletions packages/calcite-components/src/components/action/action.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,13 +248,18 @@ export class Action
}

renderIconContainer(): VNode {
const { loading, icon, scale, el, iconFlipRtl } = this;
const { loading, icon, scale, el, iconFlipRtl, indicator } = this;
const loaderScale = scale === "l" ? "l" : "m";
const calciteLoaderNode = loading ? (
<calcite-loader inline label={this.messages.loading} scale={loaderScale} />
) : null;
const calciteIconNode = icon ? (
<calcite-icon flipRtl={iconFlipRtl} icon={icon} scale={getIconScale(this.scale)} />
<calcite-icon
class={{ [CSS.indicatorWithIcon]: indicator }}
flipRtl={iconFlipRtl}
icon={icon}
scale={getIconScale(this.scale)}
/>
) : null;
const iconNode = calciteLoaderNode || calciteIconNode;
const hasIconToDisplay = iconNode || el.children?.length;
Expand Down Expand Up @@ -283,6 +288,7 @@ export class Action
active,
compact,
disabled,
icon,
loading,
textEnabled,
label,
Expand Down Expand Up @@ -316,6 +322,7 @@ export class Action
>
{this.renderIconContainer()}
{this.renderTextContainer()}
{!icon && indicator && <div class={CSS.indicatorWithoutIcon} key="indicator-no-icon" />}
</button>
<slot name={SLOTS.tooltip} onSlotchange={this.handleTooltipSlotChange} />
{this.renderIndicatorText()}
Expand Down
2 changes: 2 additions & 0 deletions packages/calcite-components/src/components/action/resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ export const CSS = {
slotContainerHidden: "slot-container--hidden",
textContainer: "text-container",
textContainerVisible: "text-container--visible",
indicatorWithIcon: "indicator-with-icon",
indicatorWithoutIcon: "indicator-without-icon",
};

export const SLOTS = {
Expand Down
62 changes: 52 additions & 10 deletions packages/calcite-components/src/demos/action.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,7 @@

<calcite-action
active
indicator
scale="s"
text="Transparent + active"
text-enabled
Expand All @@ -193,6 +194,7 @@

<calcite-action
active
indicator
scale="m"
text="Transparent + active"
text-enabled
Expand All @@ -203,7 +205,14 @@
</div>

<div class="child">
<calcite-action scale="l" text="Transparent" text-enabled appearance="transparent" icon="configure-popup">
<calcite-action
scale="l"
indicator
text="Transparent"
text-enabled
appearance="transparent"
icon="configure-popup"
>
</calcite-action>

<calcite-action
Expand Down Expand Up @@ -331,6 +340,32 @@
</calcite-action>
</calcite-action-group>
</div>
<div class="child">
<calcite-action-group layout="grid" label="Shapes">
<calcite-action alignment="center" scale="s" appearance="solid" icon="polygon" text="polygon" text-enabled>
</calcite-action>
<calcite-action
indicator
alignment="center"
scale="s"
appearance="solid"
icon="rectangle"
text="rectangle"
text-enabled
>
</calcite-action>
<calcite-action
indicator
alignment="center"
scale="s"
appearance="solid"
icon="trash"
text="trash"
text-enabled
>
</calcite-action>
</calcite-action-group>
</div>
</div>
<!-- alignment center when enclosed within group (grid layout, no text) -->
<div class="parent">
Expand All @@ -342,6 +377,13 @@
<calcite-action alignment="center" scale="s" appearance="solid" icon="trash"></calcite-action>
</calcite-action-group>
</div>
<div class="child">
<calcite-action-group layout="grid" label="More shapes">
<calcite-action alignment="center" scale="s" appearance="solid" icon="polygon"></calcite-action>
<calcite-action indicator alignment="center" scale="s" appearance="solid" icon="rectangle"></calcite-action>
<calcite-action alignment="center" scale="s" appearance="solid" icon="trash"></calcite-action>
</calcite-action-group>
</div>
</div>

<!-- alignment end -->
Expand Down Expand Up @@ -430,7 +472,7 @@
<calcite-action-bar>
<calcite-action-group label="Item things">
<calcite-action text="Add" icon="plus"> </calcite-action>
<calcite-action text="Save" icon="save"> </calcite-action>
<calcite-action indicator text="Save" icon="save"> </calcite-action>
</calcite-action-group>
<calcite-action-group label="Layer things">
<calcite-action text="Layers" icon="layers"> </calcite-action>
Expand All @@ -442,7 +484,7 @@
<div>bottom actions</div>
<calcite-action-bar>
<calcite-action text="Add" icon="plus"> </calcite-action>
<calcite-action text="Save" icon="save"> </calcite-action>
<calcite-action indicator text="Save" icon="save"> </calcite-action>
<calcite-action slot="actions-end" text="hello world" icon="layers"> </calcite-action>
</calcite-action-bar>
</div>
Expand All @@ -451,14 +493,14 @@
<div>tall container</div>
<calcite-action-bar>
<calcite-action-group label="Manage">
<calcite-action text="Add" icon="plus"> </calcite-action>
<calcite-action text="Save" icon="save"> </calcite-action>
<calcite-action text="Layers" icon="layers"> </calcite-action>
<calcite-action indicator text="Add" icon="plus"> </calcite-action>
<calcite-action indicator text="Save" icon="save"> </calcite-action>
<calcite-action indicator text="Layers" icon="layers"> </calcite-action>
</calcite-action-group>
<calcite-action-group label="Tinker">
<calcite-action text="Add" icon="plus"> </calcite-action>
<calcite-action text="Save" active icon="save"> </calcite-action>
<calcite-action text="Layers" icon="layers"> </calcite-action>
<calcite-action indicator text="Save" active icon="save"> </calcite-action>
<calcite-action indicator text="Layers" icon="layers"> </calcite-action>
</calcite-action-group>
<calcite-action slot="actions-end" text="hello world" icon="layers"> </calcite-action>
</calcite-action-bar>
Expand Down Expand Up @@ -582,12 +624,12 @@
<calcite-action-bar layout="horizontal" style="width: 100%">
<calcite-action-group label="Poke around">
<calcite-action text="Add" icon="plus"> </calcite-action>
<calcite-action text="Save" icon="save"> </calcite-action>
<calcite-action indicator text="Save" icon="save"> </calcite-action>
<calcite-action text="Layers" icon="layers"> </calcite-action>
</calcite-action-group>
<calcite-action-group label="Mess with">
<calcite-action text="Add" icon="plus"> </calcite-action>
<calcite-action text="Save" active icon="save"> </calcite-action>
<calcite-action indicator text="Save" active icon="save"> </calcite-action>
<calcite-action text="Layers" icon="layers"> </calcite-action>
</calcite-action-group>
<calcite-action slot="actions-end" text="hello world" icon="layers"> </calcite-action>
Expand Down