Skip to content

Commit

Permalink
[core] feat(MultiStepDialog): improve step styling (#4630)
Browse files Browse the repository at this point in the history 
Co-authored-by: Adi Dahiya <adi.dahiya14@gmail.com>
  • Loading branch information
@kmblake @adidahiya
kmblake and adidahiya authored Apr 15, 2021
1 parent 0b38d7f commit 31d4bf8
Show file tree
Hide file tree
Showing 4 changed files with 40 additions and 21 deletions.
1 change: 1 addition & 0 deletions packages/core/src/common/classes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,7 @@ export const DIALOG_STEP = `${NS}-dialog-step`;
export const DIALOG_STEP_CONTAINER = `${DIALOG_STEP}-container`;
export const DIALOG_STEP_TITLE = `${DIALOG_STEP}-title`;
export const DIALOG_STEP_ICON = `${DIALOG_STEP}-icon`;
export const DIALOG_STEP_VIEWED = `${DIALOG_STEP}-viewed`;

export const DIVIDER = `${NS}-divider`;

Expand Down
30 changes: 22 additions & 8 deletions packages/core/src/components/dialog/_multistep-dialog.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ $step-radius: $pt-border-radius * 2 !default;
background-color: $light-gray5;
border-left: 1px solid $pt-divider-black;
border-radius: 0 0 $dialog-border-radius 0;
flex: 2;
flex: 3;
min-width: 0;

.#{$ns}-dark & {
background-color: $dark-gray3;
Expand Down Expand Up @@ -56,7 +57,7 @@ $step-radius: $pt-border-radius * 2 !default;
border-bottom: 1px solid $pt-dark-divider-black;
}

&.#{$ns}-active {
&.#{$ns}-dialog-step-viewed {
background-color: $white;
.#{$ns}-dark & {
background: $dark-gray4;
Expand All @@ -78,7 +79,7 @@ $step-radius: $pt-border-radius * 2 !default;
}

// by default, steps are inactive until they are visited
.#{$ns}-active & {
.#{$ns}-dialog-step-viewed & {
background-color: $white;
cursor: pointer;

Expand All @@ -98,7 +99,7 @@ $step-radius: $pt-border-radius * 2 !default;

.#{$ns}-dialog-step-icon {
align-items: center;
background-color: $light-gray1;
background-color: $pt-text-color-disabled;
border-radius: 50%;
color: $white;
display: flex;
Expand All @@ -110,21 +111,34 @@ $step-radius: $pt-border-radius * 2 !default;
background-color: $pt-dark-icon-color-disabled;
}

.#{$ns}-active & {
.#{$ns}-active.#{$ns}-dialog-step-viewed & {
background-color: $blue4;
}

.#{$ns}-dialog-step-viewed & {
background-color: $gray3;
}
}

.#{$ns}-dialog-step-title {
color: $gray1;
color: $pt-text-color-disabled;
flex: 1;
padding-left: 10px;

.#{$ns}-dark & {
color: $pt-dark-text-color-disabled;
}

// by default, step title is active only when the step is selected
&.#{$ns}-active {
// step title is active only when the step is selected
.#{$ns}-active.#{$ns}-dialog-step-viewed & {
color: $blue4;
}

.#{$ns}-dialog-step-viewed & {
color: $pt-text-color;

.#{$ns}-dark & {
color: $pt-dark-text-color;
}
}
}
12 changes: 8 additions & 4 deletions packages/core/src/components/dialog/multistepDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,12 +121,16 @@ export class MultistepDialog extends AbstractPureComponent2<IMultistepDialogProp
const hasBeenViewed = this.state.lastViewedIndex >= index;
const currentlySelected = this.state.selectedIndex === index;
return (
<div className={classNames(Classes.DIALOG_STEP_CONTAINER, { [Classes.ACTIVE]: hasBeenViewed })} key={index}>
<div
className={classNames(Classes.DIALOG_STEP_CONTAINER, {
[Classes.ACTIVE]: currentlySelected,
[Classes.DIALOG_STEP_VIEWED]: hasBeenViewed,
})}
key={index}
>
<div className={Classes.DIALOG_STEP} onClick={this.handleClickDialogStep(index)}>
<div className={Classes.DIALOG_STEP_ICON}>{stepNumber}</div>
<div className={classNames(Classes.DIALOG_STEP_TITLE, { [Classes.ACTIVE]: currentlySelected })}>
{step.props.title}
</div>
<div className={Classes.DIALOG_STEP_TITLE}>{step.props.title}</div>
</div>
</div>
);
Expand Down
18 changes: 9 additions & 9 deletions packages/core/test/multistep-dialog/multistepDialogTests.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ describe("<MultistepDialog>", () => {
);
assert.strictEqual(dialog.state("selectedIndex"), 0);
const steps = dialog.find(`.${Classes.DIALOG_STEP_CONTAINER}`);
assert.strictEqual(steps.at(0).find(`.${Classes.ACTIVE}`).length, 2);
assert.strictEqual(steps.at(0).find(`.${Classes.ACTIVE}`).length, 1);
assert.strictEqual(steps.at(1).find(`.${Classes.ACTIVE}`).length, 0);
dialog.unmount();
});
Expand All @@ -72,8 +72,8 @@ describe("<MultistepDialog>", () => {
dialog.find(NEXT_BUTTON).simulate("click");
assert.strictEqual(dialog.state("selectedIndex"), 1);
const steps = dialog.find(`.${Classes.DIALOG_STEP_CONTAINER}`);
assert.strictEqual(steps.at(0).find(`.${Classes.ACTIVE}`).length, 1);
assert.strictEqual(steps.at(1).find(`.${Classes.ACTIVE}`).length, 2);
assert.strictEqual(steps.at(0).find(`.${Classes.DIALOG_STEP_VIEWED}`).length, 1);
assert.strictEqual(steps.at(1).find(`.${Classes.ACTIVE}`).length, 1);
dialog.unmount();
});

Expand All @@ -88,14 +88,14 @@ describe("<MultistepDialog>", () => {
dialog.find(NEXT_BUTTON).simulate("click");
assert.strictEqual(dialog.state("selectedIndex"), 1);
const steps = dialog.find(`.${Classes.DIALOG_STEP_CONTAINER}`);
assert.strictEqual(steps.at(0).find(`.${Classes.ACTIVE}`).length, 1);
assert.strictEqual(steps.at(1).find(`.${Classes.ACTIVE}`).length, 2);
assert.strictEqual(steps.at(0).find(`.${Classes.DIALOG_STEP_VIEWED}`).length, 1);
assert.strictEqual(steps.at(1).find(`.${Classes.ACTIVE}`).length, 1);

dialog.find(BACK_BUTTON).simulate("click");
const newSteps = dialog.find(`.${Classes.DIALOG_STEP_CONTAINER}`);
assert.strictEqual(dialog.state("selectedIndex"), 0);
assert.strictEqual(newSteps.at(0).find(`.${Classes.ACTIVE}`).length, 2);
assert.strictEqual(newSteps.at(1).find(`.${Classes.ACTIVE}`).length, 1);
assert.strictEqual(newSteps.at(0).find(`.${Classes.ACTIVE}`).length, 1);
assert.strictEqual(newSteps.at(1).find(`.${Classes.DIALOG_STEP_VIEWED}`).length, 1);
dialog.unmount();
});

Expand Down Expand Up @@ -157,8 +157,8 @@ describe("<MultistepDialog>", () => {
step.at(0).simulate("click");
const steps = dialog.find(`.${Classes.DIALOG_STEP_CONTAINER}`);
assert.strictEqual(dialog.state("selectedIndex"), 0);
assert.strictEqual(steps.at(0).find(`.${Classes.ACTIVE}`).length, 2);
assert.strictEqual(steps.at(1).find(`.${Classes.ACTIVE}`).length, 1);
assert.strictEqual(steps.at(0).find(`.${Classes.ACTIVE}`).length, 1);
assert.strictEqual(steps.at(1).find(`.${Classes.DIALOG_STEP_VIEWED}`).length, 1);
dialog.unmount();
});

Expand Down

1 comment on commit 31d4bf8

@blueprint-bot
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[core] feat(MultiStepDialog): improve step styling (#4630)

Previews: documentation | landing | table

Please sign in to comment.