Skip to content

Commit

Permalink
fix(action): Ensure action content is correctly spaced (#8184)
Browse files Browse the repository at this point in the history 
**Related Issue:** #6879 

## Summary
Ensures extra space is not added to an action. 

This is solved by:
When an icon is present, the indicator will always be appended to the
bottom right. This ensures it remains in the same place whether a parent
Action Bar is expanded, or not. The indicator moved a couple of px away
- in the future I think we can improve this with a border or clipped
ring around the indicator to prevent overlap.

Also resolves #5860,
for icon-only uses.

When an icon is not present, the indicator will be positioned adjacent
to the text container.


| Before  | After |
| ------------- | ------------- |
| <img width="500" alt="Screenshot 2023-11-15 at 5 00 35 PM"
src="https://github.com/Esri/calcite-design-system/assets/4733155/ae4d202b-260e-411d-b6fc-30fea2c549ea">
| <img width="500" alt="Screenshot 2023-11-15 at 4 58 47 PM"
src="https://github.com/Esri/calcite-design-system/assets/4733155/284119d3-e8c4-40e1-8272-7ee204a36539">
|


| Before  | After |
| ------------- | ------------- |
| <img width="500" alt="Screenshot 2023-11-15 at 5 00 25 PM"
src="https://github.com/Esri/calcite-design-system/assets/4733155/fe845c89-abb6-4416-8013-5e105c0b3ebf">
| <img width="500" alt="Screenshot 2023-11-15 at 4 59 26 PM"
src="https://github.com/Esri/calcite-design-system/assets/4733155/89ef62bf-7a7b-4a1f-ba29-3165df698347">
|

(Note, in this one, the "beaker" image is NOT an `icon` property, it is
just a slotted element - so the indicator is not positioned over it.
This isn't really a documented / expected use case.)


| Before  | After |
| ------------- | ------------- |
| <img width="500" alt="Screenshot 2023-11-15 at 5 00 47 PM"
src="https://github.com/Esri/calcite-design-system/assets/4733155/c8722108-d9df-4540-b268-e7c8e263afdd">
| <img width="500" alt="Screenshot 2023-11-15 at 5 01 02 PM"
src="https://github.com/Esri/calcite-design-system/assets/4733155/d5a06b63-92bc-4e53-a348-505c9d173188">
|


| Before | <img width="1030" alt="Screenshot 2023-11-15 at 6 17 38 PM"
src="https://github.com/Esri/calcite-design-system/assets/4733155/c3ef3696-71bc-4bde-b066-ea56aebd07bd">
|
| ------------- | ------------- |
| After | <img width="1030" alt="Screenshot 2023-11-15 at 6 17 57 PM"
src="https://github.com/Esri/calcite-design-system/assets/4733155/61d91130-a637-4257-84b2-42df18ecb790">
|


| Before | <img width="1313" alt="Screenshot 2023-11-15 at 6 21 22 PM"
src="https://github.com/Esri/calcite-design-system/assets/4733155/26289014-9df0-4e3d-ab2e-491be34cf97b">
|
| ------------- | ------------- |
| After | <img width="1313" alt="Screenshot 2023-11-15 at 6 18 30 PM"
src="https://github.com/Esri/calcite-design-system/assets/4733155/d32c2249-86ac-4a4f-9ac8-a7cbde0c322c">
|
  • Loading branch information
@macandcheese @DitwanP
macandcheese authored and DitwanP committed Nov 16, 2023
1 parent b7d0840 commit a8bdd86
Show file tree
Hide file tree
Showing 5 changed files with 95 additions and 47 deletions.
59 changes: 24 additions & 35 deletions packages/calcite-components/src/components/action/action.scss
View file
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
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
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
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
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

0 comments on commit a8bdd86

Please sign in to comment.