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, stepper-item): add component tokens #8906

Merged
merged 18 commits into from
Mar 19, 2024
Merged

feat(stepper, stepper-item): add component tokens #8906

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
2f06497
feat(stepper,stepper-item): add component tokens
anveshmekala Mar 8, 2024
ffe83ec
Merge branch 'epic/7180-component-tokens' into anveshmekala/7180-step…
anveshmekala Mar 8, 2024
457b4f5
add step-bar fill color token
anveshmekala Mar 8, 2024
c817c85
add tokens for stepper-item
anveshmekala Mar 11, 2024
96badf4
update jsdoc
anveshmekala Mar 12, 2024
58e4488
fix icon colors
anveshmekala Mar 12, 2024
b1b0d23
add storybook tests
anveshmekala Mar 12, 2024
2db6551
fix regression
anveshmekala Mar 12, 2024
3c0e657
fix typo
anveshmekala Mar 12, 2024
4f1447c
fix line height
anveshmekala Mar 12, 2024
ceca6cd
refactor
anveshmekala Mar 15, 2024
a4ccd73
fix regression
anveshmekala Mar 15, 2024
8b0a648
refactor and remove
anveshmekala Mar 15, 2024
d9dc14c
fix regressions
anveshmekala Mar 16, 2024
f7ee2ee
clean up
anveshmekala Mar 18, 2024
3b090f1
restore rem values in stepper
anveshmekala Mar 18, 2024
6872d42
change spacing to space
anveshmekala Mar 18, 2024
f6db1ad
Merge branch 'epic/7180-component-tokens' into anveshmekala/7180-step…
anveshmekala Mar 18, 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
37 changes: 17 additions & 20 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 @@ -242,10 +242,7 @@
border-t-0
border-solid
py-0;
border-color: var(
--calcite-stepper-item-border-color,
var(--calcite-internal-stepper-item-border-color, var(--calcite-color-border-3))
);
border-color: var(--calcite-internal-stepper-item-border-color, var(--calcite-color-border-3));
border-inline-start-width: theme("borderWidth.2");
padding-inline-start: var(--calcite-stepper-item-spacing-unit-l);

Expand All @@ -263,29 +260,29 @@
}

:host([layout="vertical"][complete]) .container {
--calcite-internal-stepper-item-border-color: #007ac280;
border-color: var(--calcite-internal-stepper-item-complete-border-color, #007ac280);
}
:host([layout="vertical"][complete]:hover:not([disabled]):not([selected])) .container,
:host([layout="vertical"][complete]:focus:not([disabled]):not([selected])) .container {
--calcite-internal-stepper-item-border-color: var(--calcite-color-brand);
border-color: var(--calcite-internal-stepper-item-complete-border-color-hover, var(--calcite-color-brand));
}
:host([layout="vertical"][error]) .container {
--calcite-internal-stepper-item-border-color: var(--calcite-color-status-danger);
border-color: var(--calcite-internal-stepper-item-error-border-color, var(--calcite-color-status-danger));
}
:host([layout="vertical"][selected]) .container {
--calcite-internal-stepper-item-border-color: var(--calcite-color-brand);
border-color: var(--calcite-internal-stepper-item-selected-border-color, var(--calcite-color-brand));

& .stepper-item-content:not(:empty) {
margin-block-end: var(--calcite-stepper-item-spacing-unit-l);
}
}
:host([layout="vertical"]:hover:not([disabled]):not([selected])) .container,
:host([layout="vertical"]:focus:not([disabled]):not([selected])) .container {
--calcite-internal-stepper-item-border-color: #007ac280;
border-color: var(--calcite-internal-stepper-item-border-color-hover, #007ac280);
}
:host([layout="vertical"][error]:hover:not([disabled]):not([selected])) .container,
:host([layout="vertical"][error]:focus:not([disabled]):not([selected])) .container {
--calcite-internal-stepper-item-border-color: var(--calcite-color-status-danger-hover);
border-color: var(--calcite-internal-stepper-item-error-border-color-hover, var(--calcite-color-status-danger-hover));
}

:host([layout="horizontal"]),
Expand Down Expand Up @@ -339,17 +336,14 @@
:host([layout="horizontal"]),
:host([layout="horizontal-single"]) {
.stepper-item-header {
border-color: var(
--calcite-stepper-item-border-color,
var(--calcite-internal-stepper-item-border-color, var(--calcite-color-border-3))
);
border-color: var(--calcite-internal-stepper-item-border-color, var(--calcite-color-border-3));
}
}

:host([layout="horizontal"][complete]),
:host([layout="horizontal-single"][complete]) {
.stepper-item-header {
--calcite-internal-stepper-item-border-color: #007ac280;
border-color: var(--calcite-internal-stepper-item-complete-border-color, #007ac280);
}
}

Expand All @@ -358,21 +352,21 @@
:host([layout="horizontal-single"][complete]:hover:not([disabled]):not([selected])),
:host([layout="horizontal-single"][complete]:focus:not([disabled]):not([selected])) {
.stepper-item-header {
--calcite-internal-stepper-item-border-color: var(--calcite-color-brand);
border-color: var(--calcite-internal-stepper-item-complete-border-color-hover, var(--calcite-color-brand));
}
}

:host([layout="horizontal"][error]),
:host([layout="horizontal-single"][error]) {
.stepper-item-header {
--calcite-internal-stepper-item-border-color: var(--calcite-color-status-danger);
border-color: var(--calcite-internal-stepper-item-error-border-color, var(--calcite-color-status-danger));
}
}

:host([layout="horizontal"][selected]),
:host([layout="horizontal-single"][selected]) {
.stepper-item-header {
--calcite-internal-stepper-item-border-color: var(--calcite-color-brand);
border-color: var(--calcite-internal-stepper-item-selected-border-color, var(--calcite-color-brand));
}
}

Expand All @@ -381,7 +375,7 @@
:host([layout="horizontal-single"]:hover:not([disabled]):not([selected])),
:host([layout="horizontal-single"]:focus:not([disabled]):not([selected])) {
.stepper-item-header {
--calcite-internal-stepper-item-border-color: #007ac280;
border-color: var(--calcite-internal-stepper-item-border-color-hover, #007ac280);
}
}

Expand All @@ -390,7 +384,10 @@
:host([layout="horizontal-single"][error]:hover:not([disabled]):not([selected])),
:host([layout="horizontal-single"][error]:focus:not([disabled]):not([selected])) {
.stepper-item-header {
--calcite-internal-stepper-item-border-color: var(--calcite-color-status-danger-hover);
border-color: var(
--calcite-internal-stepper-item-error-border-color-hover,
var(--calcite-color-status-danger-hover)
);
}
}

Expand Down
25 changes: 20 additions & 5 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 @@ -8,10 +8,13 @@
* @prop --calcite-stepper-action-background-color: defines the background color of an action sub-component inside the component.
* @prop --calcite-stepper-action-background-color-hover: defines the background color of an action sub-component when hovered or focused.
* @prop --calcite-stepper-action-background-color-active: defines the background color of an action sub-component when active.
* @prop --calcite-stepper-step-bar-fill-color : Specifies fill color for step-bar when `layout="horizontal-single"`.
* @prop --calcite-stepper-step-bar-active-fill-color : Specifies fill color for active step-bar when `layout="horizontal-single"`.
* @prop --calcite-stepper-step-bar-complete-fill-color : Specifies fill color for completed step-bar when `layout="horizontal-single"`.
* @prop --calcite-stepper-step-bar-error-fill-color : Specifies fill color for error step-bar when `layout="horizontal-single"`.
* @prop --calcite-stepper-step-bar-fill-color : Specifies fill color for step-bar.
* @prop --calcite-stepper-step-bar-fill-color-hover : Specifies fill color for step-bar when hovered.
* @prop --calcite-stepper-step-bar-selected-fill-color : Specifies fill color for selected step-bar.
* @prop --calcite-stepper-step-bar-complete-fill-color : Specifies fill color for completed step-bar.
* @prop --calcite-stepper-step-bar-completed-fill-color-hover : Specifies fill color for completed step-bar when hovered.
* @prop --calcite-stepper-step-bar-error-fill-color : Specifies fill color for error step-bar.
* @prop --calcite-stepper-step-bar-error-fill-color-hover : Specifies fill color for error step-bar when hovered.
anveshmekala marked this conversation as resolved.
Show resolved Hide resolved
*
*/

Expand Down Expand Up @@ -118,7 +121,7 @@
}

.step-bar--active {
fill: var(--calcite-stepper-step-bar-active-fill-color, var(--calcite-color-brand));
fill: var(--calcite-stepper-step-bar-selected-fill-color, var(--calcite-color-brand));
anveshmekala marked this conversation as resolved.
Show resolved Hide resolved
}

.step-bar--complete {
Expand Down Expand Up @@ -147,5 +150,17 @@ calcite-action {
}
}

calcite-stepper-item {
anveshmekala marked this conversation as resolved.
Show resolved Hide resolved
--calcite-internal-stepper-item-border-color: var(--calcite-stepper-step-bar-fill-color);
--calcite-internal-stepper-item-complete-border-color: var(--calcite-stepper-step-bar-complete-fill-color);
--calcite-internal-stepper-item-complete-border-color-hover: var(
--calcite-stepper-step-bar-complete-fill-color-hover
);
--calcite-internal-stepper-item-error-border-color: var(--calcite-stepper-step-bar-error-fill-color);
--calcite-internal-stepper-item-selected-border-color: var(--calcite-stepper-step-bar-active-fill-color);
--calcite-internal-stepper-item-border-color-hover: var(--calcite-stepper-step-bar-fill-color-hover);
--calcite-internal-stepper-item-error-border-color-hover: var(--calcite-stepper-step-bar-error-fill-color-hover);
}

@include stepBar();
@include base-component();
Loading