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

feat(stepper): add horizontal-single layout #8742

Merged
merged 13 commits into from
Feb 14, 2024
Merged

feat(stepper): add horizontal-single layout #8742

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
7055501
first commit adding new layout type definition and demos
eriklharper Feb 9, 2024
a2385ff
determining multipleViewMode in stepper based on layout instead of el…
eriklharper Feb 12, 2024
2c021e9
another step in the right direction
eriklharper Feb 13, 2024
df2e69f
getting stepper-item styles working to achieve the single view, addin…
eriklharper Feb 13, 2024
9be9d6c
Merge branch 'main' into eriklharper/8461-stepper-single-layout-mode
eriklharper Feb 13, 2024
cf022d0
renaming to horizontal-single
eriklharper Feb 13, 2024
0ee29db
adding new layout mode to story knobs, and a testonly story
eriklharper Feb 13, 2024
237495b
removing duplicate scale knob declarations
eriklharper Feb 13, 2024
b013d20
repurposing responsive test
eriklharper Feb 14, 2024
a3d865c
fixing other former responsive tests
eriklharper Feb 14, 2024
986f705
removing responsive stories
eriklharper Feb 14, 2024
f0411aa
Merge branch 'main' into eriklharper/8461-stepper-single-layout-mode
eriklharper Feb 14, 2024
82acf8f
fixing rules that tell stepper-item header and content divs to stretc…
eriklharper Feb 14, 2024
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
12 changes: 6 additions & 6 deletions packages/calcite-components/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,8 @@ import { DisplayMode } from "./components/sheet/interfaces";
import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
import { DragDetail } from "./utils/sortableComponent";
import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
import { StepperMessages } from "./components/stepper/assets/stepper/t9n";
import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail } from "./components/stepper/interfaces";
import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
Expand Down Expand Up @@ -159,8 +159,8 @@ export { DisplayMode } from "./components/sheet/interfaces";
export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
export { DragDetail } from "./utils/sortableComponent";
export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
export { StepperMessages } from "./components/stepper/assets/stepper/t9n";
export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail } from "./components/stepper/interfaces";
export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
Expand Down Expand Up @@ -4382,7 +4382,7 @@ export namespace Components {
/**
* Defines the layout of the component.
*/
"layout": Extract<"horizontal" | "vertical", Layout>;
"layout": StepperLayout;
/**
* Use this property to override individual strings used by the component.
*/
Expand Down Expand Up @@ -4453,7 +4453,7 @@ export namespace Components {
/**
* Specifies the layout of the `calcite-stepper-item` inherited from parent `calcite-stepper`, defaults to `horizontal`.
*/
"layout": Extract<"horizontal" | "vertical", Layout>;
"layout": StepperLayout;
/**
* Use this property to override individual strings used by the component.
*/
Expand Down Expand Up @@ -11882,7 +11882,7 @@ declare namespace LocalJSX {
/**
* Defines the layout of the component.
*/
"layout"?: Extract<"horizontal" | "vertical", Layout>;
"layout"?: StepperLayout;
/**
* Use this property to override individual strings used by the component.
*/
Expand Down Expand Up @@ -11949,7 +11949,7 @@ declare namespace LocalJSX {
/**
* Specifies the layout of the `calcite-stepper-item` inherited from parent `calcite-stepper`, defaults to `horizontal`.
*/
"layout"?: Extract<"horizontal" | "vertical", Layout>;
"layout"?: StepperLayout;
/**
* Use this property to override individual strings used by the component.
*/
Expand Down
20 changes: 10 additions & 10 deletions packages/calcite-components/src/components/stepper-item/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,16 @@ individual `calcite-stepper-item` item

## Properties

| Property | Attribute | Description | Type | Default |
| ------------------ | ------------------- | -------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `complete` | `complete` | When `true`, the step has been completed. | `boolean` | `false` |
| `description` | `description` | A description for the component. Displays below the header text. | `string` | `undefined` |
| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
| `error` | `error` | When `true`, the component contains an error that requires resolution from the user. | `boolean` | `false` |
| `heading` | `heading` | The component header text. | `string` | `undefined` |
| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` |
| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `StepperItemMessages` | `undefined` |
| `selected` | `selected` | When `true`, the component is selected. | `boolean` | `false` |
| Property | Attribute | Description | Type | Default |
| ------------------ | --------------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ----------- |
| `complete` | `complete` | When `true`, the step has been completed. | `boolean` | `false` |
| `description` | `description` | A description for the component. Displays below the header text. | `string` | `undefined` |
| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
| `error` | `error` | When `true`, the component contains an error that requires resolution from the user. | `boolean` | `false` |
| `heading` | `heading` | The component header text. | `string` | `undefined` |
| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` |
| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ complete?: string; previousStep?: string; nextStep?: string; }` | `undefined` |
| `selected` | `selected` | When `true`, the component is selected. | `boolean` | `false` |

## Methods

Expand Down
78 changes: 54 additions & 24 deletions packages/calcite-components/src/components/stepper-item/stepper-item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,8 @@
@apply border-color-danger-hover;
}

:host([layout="horizontal"]) {
:host([layout="horizontal"]),
:host([layout="horizontal-single"]) {
display: contents;

.container {
Expand Down Expand Up @@ -275,38 +276,67 @@
}
}

:host([layout="horizontal"][disabled]) {
:host([layout="horizontal"][disabled]),
:host([layout="horizontal-single"][disabled]) {
.stepper-item-header {
@extend %disabled-host-only;
}
}

:host([layout="horizontal"][selected]) {
:host([layout="horizontal-single"]) {
.stepper-item-header {
grid-area: 1 / 1 / 1 / -1;
}
}

:host([layout="horizontal"]),
:host([layout="horizontal-single"]) {
.stepper-item-content {
grid-area: 2 / 1 / 2 / -1;
}
}

:host([layout="horizontal"][complete]) .stepper-item-header {
border-color: rgba($h-bb-060, 0.5);
:host([layout="horizontal"][complete]),
:host([layout="horizontal-single"][complete]) {
.stepper-item-header {
border-color: rgba($h-bb-060, 0.5);
}
}
:host([layout="horizontal"][complete]:hover:not([disabled]):not([selected])) .stepper-item-header,
:host([layout="horizontal"][complete]:focus:not([disabled]):not([selected])) .stepper-item-header {
@apply border-color-brand;
:host([layout="horizontal"][complete]:hover:not([disabled]):not([selected])),
:host([layout="horizontal"][complete]:focus:not([disabled]):not([selected])),
:host([layout="horizontal-single"][complete]:hover:not([disabled]):not([selected])),
:host([layout="horizontal-single"][complete]:focus:not([disabled]):not([selected])) {
.stepper-item-header {
@apply border-color-brand;
}
}
:host([layout="horizontal"][error]) .stepper-item-header {
@apply border-color-danger;
:host([layout="horizontal"][error]),
:host([layout="horizontal-single"][error]) {
.stepper-item-header {
@apply border-color-danger;
}
}
:host([layout="horizontal"][selected][multiple-view-mode]) .stepper-item-header {
@apply border-color-brand;
:host([layout="horizontal"][selected][multiple-view-mode]),
:host([layout="horizontal-single"][selected][multiple-view-mode]) {
.stepper-item-header {
@apply border-color-brand;
}
}
:host([layout="horizontal"]:hover:not([disabled]):not([selected])) .stepper-item-header,
:host([layout="horizontal"]:focus:not([disabled]):not([selected])) .stepper-item-header {
border-color: rgba($h-bb-060, 0.5);
:host([layout="horizontal"]:hover:not([disabled]):not([selected])),
:host([layout="horizontal"]:focus:not([disabled]):not([selected])),
:host([layout="horizontal-single"]:hover:not([disabled]):not([selected])),
:host([layout="horizontal-single"]:focus:not([disabled]):not([selected])) {
.stepper-item-header {
border-color: rgba($h-bb-060, 0.5);
}
}
:host([layout="horizontal"][error]:hover:not([disabled]):not([selected])) .stepper-item-header,
:host([layout="horizontal"][error]:focus:not([disabled]):not([selected])) .stepper-item-header {
@apply border-color-danger-hover;
:host([layout="horizontal"][error]:hover:not([disabled]):not([selected])),
:host([layout="horizontal"][error]:focus:not([disabled]):not([selected])),
:host([layout="horizontal-single"][error]:hover:not([disabled]):not([selected])),
:host([layout="horizontal-single"][error]:focus:not([disabled]):not([selected])) {
.stepper-item-header {
@apply border-color-danger-hover;
}
}

@media (forced-colors: active) {
Expand Down Expand Up @@ -335,14 +365,14 @@
}
}

:host([layout="horizontal"]:not([multiple-view-mode])) .stepper-item-header {
@apply border-none
:host([layout="horizontal-single"]) .stepper-item-header {
@apply border-none box-border
me-0;
inline-size: 100%;
padding-inline: calc(var(--calcite-internal-stepper-action-inline-size) + 0.5rem);
}

:host([layout="horizontal"][error]:not([multiple-view-mode])) .container {
:host([layout="horizontal-single"][error]) .container {
& .stepper-item-number {
color: theme("backgroundColor.danger");
}
Expand All @@ -352,15 +382,15 @@
}
}

:host([layout="horizontal"][error][selected]:not([multiple-view-mode])),
:host([layout="horizontal"][complete][selected]:not([multiple-view-mode])) .container {
:host([layout="horizontal-single"][error][selected]),
:host([layout="horizontal-single"][complete][selected]) .container {
@apply text-color-3;
& .stepper-item-heading {
@apply text-color-2;
}
}

:host([layout="horizontal"][complete][selected]:not([multiple-view-mode])) .container {
:host([layout="horizontal-single"][complete][selected]) .container {
& .stepper-item-icon {
@apply opacity-disabled;
}
Expand Down
5 changes: 3 additions & 2 deletions packages/calcite-components/src/components/stepper-item/stepper-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
VNode,
Watch,
} from "@stencil/core";
import { Layout, Scale } from "../interfaces";
import { Scale } from "../interfaces";
import {
connectInteractive,
disconnectInteractive,
Expand All @@ -24,6 +24,7 @@ import {
StepperItemChangeEventDetail,
StepperItemEventDetail,
StepperItemKeyEventDetail,
StepperLayout,
} from "../stepper/interfaces";
import {
numberStringFormatter,
Expand Down Expand Up @@ -119,7 +120,7 @@ export class StepperItem
*
* @internal
*/
@Prop({ reflect: true }) layout: Extract<"horizontal" | "vertical", Layout>;
@Prop({ reflect: true }) layout: StepperLayout;

/**
* Made into a prop for testing purposes only
Expand Down
2 changes: 2 additions & 0 deletions packages/calcite-components/src/components/stepper/interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,5 @@ export interface StepperItemKeyEventDetail {
export interface StepperItemChangeEventDetail {
position: number;
}

export type StepperLayout = "horizontal" | "vertical" | "horizontal-single";
18 changes: 9 additions & 9 deletions packages/calcite-components/src/components/stepper/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,15 +45,15 @@ Calcite stepper can be used to present a stepper workflow to a user. It has conf

## Properties

| Property | Attribute | Description | Type | Default |
| ------------------ | ------------------- | ---------------------------------------------------------------------------- | ------------------------------- | -------------- |
| `icon` | `icon` | When `true`, displays a status icon in the `calcite-stepper-item` heading. | `boolean` | `false` |
| `layout` | `layout` | Defines the layout of the component. | `"horizontal" \| "vertical"` | `"horizontal"` |
| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `StepperMessages` | `undefined` |
| `numbered` | `numbered` | When `true`, displays the step number in the `calcite-stepper-item` heading. | `boolean` | `false` |
| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` |
| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` |
| `selectedItem` | -- | Specifies the component's selected item. | `HTMLCalciteStepperItemElement` | `null` |
| Property | Attribute | Description | Type | Default |
| ------------------ | ------------------ | ---------------------------------------------------------------------------- | --------------------------------------------------------------- | -------------- |
| `icon` | `icon` | When `true`, displays a status icon in the `calcite-stepper-item` heading. | `boolean` | `false` |
| `layout` | `layout` | Defines the layout of the component. | `"horizontal" \| "horizontal-single" \| "vertical"` | `"horizontal"` |
| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ label?: string; previousStep?: string; nextStep?: string; }` | `undefined` |
| `numbered` | `numbered` | When `true`, displays the step number in the `calcite-stepper-item` heading. | `boolean` | `false` |
| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` |
| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` |
| `selectedItem` | -- | Specifies the component's selected item. | `HTMLCalciteStepperItemElement` | `null` |

## Events

Expand Down
10 changes: 5 additions & 5 deletions packages/calcite-components/src/components/stepper/stepper.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -743,11 +743,11 @@ describe("calcite-stepper", () => {
expect(await stepperItem2.getProperty("selected")).toBe(true);
});

describe("responsive layout", () => {
it("should display action buttons when width is smaller", async () => {
describe("horizontal-single layout", () => {
it("should display action buttons when layout is horizontal-single.", async () => {
const page = await newE2EPage();
await page.setContent(
html`<calcite-stepper style="width: 100px">
html`<calcite-stepper layout="horizontal-single">
<calcite-stepper-item heading="Step 1" id="step-1">
<div>Step 1 content</div>
</calcite-stepper-item>
Expand Down Expand Up @@ -775,7 +775,7 @@ describe("calcite-stepper", () => {
it("focus order", async () => {
const page = await newE2EPage();
await page.setContent(
html`<calcite-stepper style="width: 100px">
html`<calcite-stepper layout="horizontal-single">
<calcite-stepper-item heading="Step 1" id="step-1">
<calcite-button id="button1">Click</calcite-button>
</calcite-stepper-item>
Expand Down Expand Up @@ -822,7 +822,7 @@ describe("calcite-stepper", () => {
it("should emit calciteStepperItemChange on user interaction", async () => {
const page = await newE2EPage();
await page.setContent(
html`<calcite-stepper style="width: 100px">
html`<calcite-stepper layout="horizontal-single">
<calcite-stepper-item heading="Step 1" id="step-1">
<div>Step 1 content</div>
</calcite-stepper-item>
Expand Down
33 changes: 21 additions & 12 deletions packages/calcite-components/src/components/stepper/stepper.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,22 +37,31 @@
@apply flex-auto flex-col;
}

:host([layout="horizontal"]) .container {
display: grid;
// grid-templates-columns are dynamically generated
// grid-templates-rows are dynamically generated
grid-template-areas:
"items"
"content";
gap: theme("spacing.2") var(--calcite-internal-stepper-item-spacing-unit-s);
:host([layout="horizontal"]),
:host([layout="horizontal-single"]) {
.container {
display: grid;
// grid-templates-columns are dynamically generated
// grid-templates-rows are dynamically generated
grid-template-areas:
"items"
"content";
gap: theme("spacing.2") var(--calcite-internal-stepper-item-spacing-unit-s);
}
}

:host([layout="horizontal"][scale="s"]) .container {
gap: theme("spacing.1") var(--calcite-internal-stepper-item-spacing-unit-s);
:host([layout="horizontal"][scale="s"]),
:host([layout="horizontal-single"][scale="s"]) {
.container {
gap: theme("spacing.1") var(--calcite-internal-stepper-item-spacing-unit-s);
}
}

:host([layout="horizontal"][scale="l"]) .container {
gap: theme("spacing.3") var(--calcite-internal-stepper-item-spacing-unit-s);
:host([layout="horizontal"][scale="l"]),
:host([layout="horizontal-single"][scale="l"]) {
.container {
gap: theme("spacing.3") var(--calcite-internal-stepper-item-spacing-unit-s);
}
}

:host([layout="horizontal"]) .container.single-view {
Expand Down
Loading
Loading