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.

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

feat(action-bar): add "actions-end" slot (deprecates "bottom-actions") #7435

Merged
merged 6 commits into from
Aug 8, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ describe("calcite-action-bar", () => {

const bar = await page.find("calcite-action-bar");

const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupBottom}`);
const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupEnd}`);

const button = await buttonGroup.find("calcite-action");

Expand Down Expand Up @@ -152,7 +152,7 @@ describe("calcite-action-bar", () => {

await page.setContent("<calcite-action-bar expanded></calcite-action-bar>");

const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupBottom}`);
const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupEnd}`);

const button = await buttonGroup.find("calcite-action");

Expand All @@ -166,7 +166,7 @@ describe("calcite-action-bar", () => {

await page.setContent(html`<calcite-action-bar expand-disabled></calcite-action-bar>`);

const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupBottom}`);
const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupEnd}`);

expect(buttonGroup).toBeNull();
});
Expand Down Expand Up @@ -315,7 +315,7 @@ describe("calcite-action-bar", () => {
it("should honor scale of expand icon", async () => {
const page = await newE2EPage({ html: html`<calcite-action-bar scale="l"></calcite-action-bar>` });

const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupBottom}`);
const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupEnd}`);

const button = await buttonGroup.find("calcite-action");

Expand All @@ -338,7 +338,7 @@ describe("calcite-action-bar", () => {
<calcite-action text="Save" icon="save" disabled></calcite-action>
<calcite-action icon="layers" text="Layers"></calcite-action>
</calcite-action-group>
<calcite-action-group slot="bottom-actions">
<calcite-action-group slot="actions-end">
<calcite-action text="Tips" icon="lightbulb"></calcite-action>
</calcite-action-group>
</calcite-action-bar>
Expand Down Expand Up @@ -386,7 +386,7 @@ describe("calcite-action-bar", () => {
<calcite-action text="Save" icon="save" disabled></calcite-action>
<calcite-action icon="layers" text="Layers"></calcite-action>
</calcite-action-group>
<calcite-action-group slot="bottom-actions">
<calcite-action-group slot="actions-end">
<calcite-action text="Tips" icon="lightbulb"></calcite-action>
</calcite-action-group>
</calcite-action-bar>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@

:host([layout="vertical"]) {
@apply flex-col;
.action-group--bottom {
.action-group--end {
margin-block-start: auto;
}
}

:host([layout="horizontal"]) {
@apply flex-row;
.action-group--bottom {
.action-group--end {
@apply ms-auto;
}
}
Expand Down Expand Up @@ -58,7 +58,7 @@
border-inline-end: 0;
}

.action-group--bottom {
.action-group--end {
@apply justify-end;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export const horizontal = (): string => html`
<calcite-action text="Save" active icon="save"> </calcite-action>
<calcite-action text="Layers" icon="layers"> </calcite-action>
</calcite-action-group>
<calcite-action slot="bottom-actions" text="hello world" icon="layers"> </calcite-action>
<calcite-action slot="actions-end" text="hello world" icon="layers"> </calcite-action>
</calcite-action-bar>
</div>
`;
Expand All @@ -99,7 +99,7 @@ export const horizontalSmall = (): string => html`
<calcite-action text="Save" active icon="save"> </calcite-action>
<calcite-action text="Layers" icon="layers"> </calcite-action>
</calcite-action-group>
<calcite-action slot="bottom-actions" text="hello world" icon="layers"> </calcite-action>
<calcite-action slot="actions-end" text="hello world" icon="layers"> </calcite-action>
</calcite-action-bar>
</div>
`;
Expand Down Expand Up @@ -172,7 +172,7 @@ export const adjacentTooltipsOpenQuickly = (): string => html`<div style="displa
><calcite-tooltip placement="right" slot="tooltip">Layers</calcite-tooltip></calcite-action
>
</calcite-action-group>
<calcite-action slot="bottom-actions" text="hello world" icon="layers"
<calcite-action slot="actions-end" text="hello world" icon="layers"
><calcite-tooltip placement="right" slot="tooltip">hello world</calcite-tooltip></calcite-action
>
</calcite-action-bar>
Expand All @@ -194,30 +194,30 @@ withTooltip_NoTest.parameters = {

export const hebrewLocale_TestOnly = (): string => `<calcite-action-bar expanded lang="he">
<calcite-action text="Information" icon="information"></calcite-action>
<calcite-action text="Feedback" slot="bottom-actions" icon="mega-phone"></calcite-action>
<calcite-action text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
</calcite-action-bar>`;

export const norwegianLocale_TestOnly = (): string => `<calcite-action-bar expanded lang="nb">
<calcite-action text="Information" icon="information"></calcite-action>
<calcite-action text="Feedback" slot="bottom-actions" icon="mega-phone"></calcite-action>
<calcite-action text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
</calcite-action-bar>`;

export const FrenchLocale_TestOnly = (): string => `<calcite-action-bar expanded lang="fr">
<calcite-action text="Information" icon="information"></calcite-action>
<calcite-action text="Feedback" slot="bottom-actions" icon="mega-phone"></calcite-action>
<calcite-action text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
</calcite-action-bar>`;

export const hongKongLocale_TestOnly = (): string => `<calcite-action-bar expanded lang="zh-HK">
<calcite-action text="Information" icon="information"></calcite-action>
<calcite-action text="Feedback" slot="bottom-actions" icon="mega-phone"></calcite-action>
<calcite-action text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
</calcite-action-bar>`;

export const ukranianLocale_TestOnly = (): string => `<calcite-action-bar expanded lang="uk">
<calcite-action text="Information" icon="information"></calcite-action>
<calcite-action text="Feedback" slot="bottom-actions" icon="mega-phone"></calcite-action>
<calcite-action text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
</calcite-action-bar>`;

export const bosnianLocale_TestOnly = (): string => `<calcite-action-bar expanded lang="bs">
<calcite-action text="Information" icon="information"></calcite-action>
<calcite-action text="Feedback" slot="bottom-actions" icon="mega-phone"></calcite-action>
<calcite-action text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
</calcite-action-bar>`;
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,8 @@ import {

/**
* @slot - A slot for adding `calcite-action`s that will appear at the top of the component.
* @slot bottom-actions - A slot for adding `calcite-action`s that will appear at the bottom of the component, above the collapse/expand button.
* @slot bottom-actions - [Deprecated] Use the `"actions-end"` slot instead. A slot for adding `calcite-action`s that will appear at the bottom of the component, above the collapse/expand button.
* @slot actions-end - A slot for adding `calcite-action`s that will appear at the end of the component, prior to the collapse/expand button.
* @slot expand-tooltip - A slot to set the `calcite-tooltip` for the expand toggle.
*/
@Component({
Expand Down Expand Up @@ -296,7 +297,7 @@ export class ActionBar
this.setGroupLayout(actionGroups);

const groupCount =
getSlotted(el, SLOTS.bottomActions) || !expandDisabled
getSlotted(el, SLOTS.actionsEnd) || getSlotted(el, SLOTS.bottomActions) || !expandDisabled
? actionGroups.length + 1
: actionGroups.length;

Expand Down Expand Up @@ -370,8 +371,11 @@ export class ActionBar
/>
) : null;

return getSlotted(el, SLOTS.bottomActions) || expandToggleNode ? (
<calcite-action-group class={CSS.actionGroupBottom} layout={layout} scale={scale}>
return getSlotted(el, SLOTS.actionsEnd) ||
getSlotted(el, SLOTS.bottomActions) ||
expandToggleNode ? (
<calcite-action-group class={CSS.actionGroupEnd} layout={layout} scale={scale}>
<slot name={SLOTS.actionsEnd} />
<slot name={SLOTS.bottomActions} />
<slot name={SLOTS.expandTooltip} />
{expandToggleNode}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,14 @@ Renders `calcite-action`s that stick to the top of the bar.
</calcite-action-bar>
```

### Bottom-actions
### Actions-end

The bottom-actions slot renders `calcite-action`s that stick to the bottom of the bar above the expand/collapse icon.
The actions-end slot renders `calcite-action`s that stick to the end of the bar prior to the expand/collapse icon.

```html
<calcite-action-bar>
<calcite-action text="Information" icon="information"></calcite-action>
<calcite-action text="Feedback" slot="bottom-actions" icon="mega-phone"></calcite-action>
<calcite-action text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
</calcite-action-bar>
```

Expand Down Expand Up @@ -92,7 +92,7 @@ Type: `Promise<void>`
| Slot | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------- |
| | A slot for adding `calcite-action`s that will appear at the top of the component. |
| `"bottom-actions"` | A slot for adding `calcite-action`s that will appear at the bottom of the component, above the collapse/expand button. |
| `"actions-end"` | A slot for adding `calcite-action`s that will appear at the bottom of the component, above the collapse/expand button. |
| `"expand-tooltip"` | A slot to set the `calcite-tooltip` for the expand toggle. |

## CSS Custom Properties
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
export const CSS = {
actionGroupBottom: "action-group--bottom",
actionGroupEnd: "action-group--end",
};

export const SLOTS = {
bottomActions: "bottom-actions",
actionsEnd: "actions-end",
bottomActions: "actions-end",
expandTooltip: "expand-tooltip",
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
The actions-end slot renders `calcite-action`s that stick to the end of the bar prior to the expand/collapse icon.

```html
<calcite-action-bar>
<calcite-action text="Information" icon="information"></calcite-action>
<calcite-action text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
</calcite-action-bar>
```

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ describe("calcite-action-pad", () => {

const pad = await page.find("calcite-action-pad");

const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupBottom}`);
const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupEnd}`);

const button = await buttonGroup.find(`calcite-action`);

Expand Down Expand Up @@ -129,7 +129,7 @@ describe("calcite-action-pad", () => {

await page.setContent("<calcite-action-pad expanded></calcite-action-pad>");

const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupBottom}`);
const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupEnd}`);

const button = await buttonGroup.find("calcite-action");

Expand All @@ -144,7 +144,7 @@ describe("calcite-action-pad", () => {

await page.setContent(`<calcite-action-pad expand-disabled></calcite-action-pad>`);

const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupBottom}`);
const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupEnd}`);

expect(buttonGroup).toBeNull();
});
Expand Down Expand Up @@ -255,7 +255,7 @@ describe("calcite-action-pad", () => {
it("should honor scale of expand icon", async () => {
const page = await newE2EPage({ html: `<calcite-action-pad scale="l"></calcite-action-pad>` });

const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupBottom}`);
const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupEnd}`);

const button = await buttonGroup.find("calcite-action");

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -260,7 +260,7 @@ export class ActionPad
) : null;

return expandToggleNode ? (
<calcite-action-group class={CSS.actionGroupBottom} layout={layout} scale={scale}>
<calcite-action-group class={CSS.actionGroupEnd} layout={layout} scale={scale}>
<slot name={SLOTS.expandTooltip} />
{expandToggleNode}
</calcite-action-group>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export const CSS = {
actionGroupBottom: "action-group--bottom",
actionGroupEnd: "action-group--end",
container: "container",
};

Expand Down
2 changes: 1 addition & 1 deletion packages/calcite-components/src/components/shell/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ Renders a shell with leading and trailing floating panels, action bar/pad, block
<calcite-action text="Save" disabled icon="save"></calcite-action>
<calcite-action text="Layers" icon="layers"></calcite-action>
</calcite-action-group>
<calcite-action slot="bottom-actions" text="Tips" icon="lightbulb"></calcite-action>
<calcite-action slot="actions-end" text="Tips" icon="lightbulb"></calcite-action>
</calcite-action-bar>
<calcite-flow>
<calcite-flow-item heading="Layer settings">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ const centerRowWithActionBarHTML = html`
<calcite-action text="Share" icon="share"></calcite-action>
<calcite-action text="Print" icon="print"></calcite-action>
</calcite-action-group>
<calcite-action-group slot="bottom-actions">
<calcite-action-group slot="actions-end">
<calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
<calcite-action text="What's next" icon="mega-phone"></calcite-action>
</calcite-action-group>
Expand Down Expand Up @@ -799,7 +799,7 @@ position:relative;
<calcite-action text="Share" icon="share"></calcite-action>
<calcite-action text="Print" icon="print"></calcite-action>
</calcite-action-group>
<calcite-action-group slot="bottom-actions">
<calcite-action-group slot="actions-end">
<calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
<calcite-action text="What's next" icon="mega-phone"></calcite-action>
</calcite-action-group>
Expand All @@ -826,7 +826,7 @@ position:relative;
<calcite-action text-enabled icon="pencil-square" text="Edit" disabled slot="menu-actions"> </calcite-action>
<calcite-action text-enabled icon="clock" text="Time" disabled slot="menu-actions"></calcite-action>
</calcite-action-group>
<calcite-action-group slot="bottom-actions">
<calcite-action-group slot="actions-end">
<calcite-action text="Tips" id="tip-manager-button">
<calcite-icon icon="lightbulb" scale="s"></calcite-icon>
</calcite-action>
Expand Down Expand Up @@ -869,7 +869,7 @@ position:relative;
<calcite-action text="Share" icon="share"></calcite-action>
<calcite-action text="Print" icon="print"></calcite-action>
</calcite-action-group>
<calcite-action-group slot="bottom-actions">
<calcite-action-group slot="actions-end">
<calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
<calcite-action text="What's next" icon="mega-phone"></calcite-action>
</calcite-action-group>
Expand All @@ -893,7 +893,7 @@ position:relative;
<calcite-action text="Share" icon="share"></calcite-action>
<calcite-action text="Print" icon="print"></calcite-action>
</calcite-action-group>
<calcite-action-group slot="bottom-actions">
<calcite-action-group slot="actions-end">
<calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
<calcite-action text="What's next" icon="mega-phone"></calcite-action>
</calcite-action-group>
Expand Down Expand Up @@ -926,7 +926,7 @@ position:relative;
<calcite-action text="Share" icon="share"></calcite-action>
<calcite-action text="Print" icon="print"></calcite-action>
</calcite-action-group>
<calcite-action-group slot="bottom-actions">
<calcite-action-group slot="actions-end">
<calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
<calcite-action text="What's next" icon="mega-phone"></calcite-action>
</calcite-action-group>
Expand Down Expand Up @@ -956,7 +956,7 @@ position:relative;
<calcite-action text-enabled icon="pencil-square" text="Edit" disabled slot="menu-actions"> </calcite-action>
<calcite-action text-enabled icon="clock" text="Time" disabled slot="menu-actions"></calcite-action>
</calcite-action-group>
<calcite-action-group slot="bottom-actions">
<calcite-action-group slot="actions-end">
<calcite-action text="Tips" id="tip-manager-button">
<calcite-icon icon="lightbulb" scale="s"></calcite-icon>
</calcite-action>
Expand Down Expand Up @@ -1091,7 +1091,7 @@ position:relative;
<calcite-action text="Share" icon="share"></calcite-action>
<calcite-action text="Print" icon="print"></calcite-action>
</calcite-action-group>
<calcite-action-group slot="bottom-actions">
<calcite-action-group slot="actions-end">
<calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
<calcite-action text="What's next" icon="mega-phone"></calcite-action>
</calcite-action-group>
Expand Down Expand Up @@ -1122,7 +1122,7 @@ position:relative;
<calcite-action text="Share" icon="share"></calcite-action>
<calcite-action text="Print" icon="print"></calcite-action>
</calcite-action-group>
<calcite-action-group slot="bottom-actions">
<calcite-action-group slot="actions-end">
<calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
<calcite-action text="What's next" icon="mega-phone"></calcite-action>
</calcite-action-group>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ Renders a shell with leading and trailing floating panels, action bar/pad, block
<calcite-action text="Save" disabled icon="save"></calcite-action>
<calcite-action text="Layers" icon="layers"></calcite-action>
</calcite-action-group>
<calcite-action slot="bottom-actions" text="Tips" icon="lightbulb"></calcite-action>
<calcite-action slot="actions-end" text="Tips" icon="lightbulb"></calcite-action>
</calcite-action-bar>
<calcite-flow>
<calcite-flow-item heading="Layer settings">
Expand Down
Loading