Skip to content

Commit

Permalink
refactor(stepper): split body and content animations (#1288)
Browse files Browse the repository at this point in the history
*refactor(stepper): split body and content animations
---------

Co-authored-by: Radoslav Karaivanov <rkaraivanov@infragistics.com>
  • Loading branch information
simeonoff and rkaraivanov authored Jul 3, 2024
1 parent 2b08ef2 commit 5fb5ee2
Show file tree
Hide file tree
Showing 6 changed files with 179 additions and 47 deletions.
12 changes: 12 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,16 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/)
and this project adheres to [Semantic Versioning](http://semver.org/).

## [4.11.1] - 2024-07-03
### Changed
- Stepper Design in vertical mode [#1246](https://github.com/IgniteUI/igniteui-webcomponents/issues/1246)

## [4.11.0] - 2024-07-03
### Changed
- Toast Component Indigo Theme [#1249](https://github.com/IgniteUI/igniteui-webcomponents/pull/1249)
- Rating Component Indigo Theme [#1249](https://github.com/IgniteUI/igniteui-webcomponents/pull/1249)
- Stepper Component Indigo Theme [#1249](https://github.com/IgniteUI/igniteui-webcomponents/pull/1249)

## [4.10.0] - 2024-07-01
### Added
- Banner component [#1174](https://github.com/IgniteUI/igniteui-webcomponents/issues/1174)
Expand Down Expand Up @@ -485,6 +495,8 @@ Initial release of Ignite UI Web Components
- Ripple component
- Switch component

[4.11.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/4.11.0...4.11.1
[4.11.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/4.10.0...4.11.0
[4.10.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/4.9.0...4.10.0
[4.9.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/4.8.2...4.9.0
[4.8.2]: https://github.com/IgniteUI/igniteui-webcomponents/compare/4.8.1...4.8.2
Expand Down
153 changes: 121 additions & 32 deletions src/components/stepper/animations.ts
Original file line number Diff line number Diff line change
@@ -1,38 +1,127 @@
import { fadeIn, fadeOut } from '../../animations/presets/fade/index.js';
import { growVerIn, growVerOut } from '../../animations/presets/grow/index.js';
import { EaseOut } from '../../animations/easings.js';
import {
slideInHor,
slideOutHor,
} from '../../animations/presets/slide/index.js';
import { animation } from '../../animations/types.js';
type AnimationReferenceMetadata,
animation,
} from '../../animations/types.js';

const baseOptions: KeyframeAnimationOptions = {
duration: 320,
easing: EaseOut.Quad,
};

const noopAnimation = () => animation([], {});
export type Animation = 'grow' | 'fade' | 'slide' | 'none';
export const animations = new Map(

export type AnimationOptions = {
keyframe: KeyframeAnimationOptions;
step?: object;
};

const fadeIn = (options: AnimationOptions = { keyframe: baseOptions }) =>
animation([{ opacity: 0 }, { opacity: 1 }], options.keyframe);

const fadeOut = (options: AnimationOptions = { keyframe: baseOptions }) =>
animation([{ opacity: 1 }, { opacity: 0 }], options.keyframe);

const slideInHor = (
options: AnimationOptions = {
keyframe: baseOptions,
}
) =>
animation(
[{ transform: 'translateX(100%)' }, { transform: 'translateX(0)' }],
options.keyframe
);

const slideOutHor = (
options: AnimationOptions = {
keyframe: baseOptions,
}
) =>
animation(
[{ transform: 'translateX(0)' }, { transform: 'translateX(-100%)' }],
options.keyframe
);

const growVerIn = (
options: AnimationOptions = {
keyframe: baseOptions,
step: {},
}
) =>
animation(
[
{ opacity: 1, ...options.step },
{ opacity: 1, height: 'auto' },
],
options.keyframe
);

const growVerOut = (
options: AnimationOptions = {
keyframe: baseOptions,
step: {},
}
) =>
animation(
[
{ opacity: 1, height: 'auto' },
{ opacity: 1, ...options.step },
],
options.keyframe
);

const noopAnimation = () => animation([], {});

const animationPair = (animations: {
in: (options: AnimationOptions) => AnimationReferenceMetadata;
out: (options: AnimationOptions) => AnimationReferenceMetadata;
}) => {
return new Map(
Object.entries({
in: animations.in,
out: animations.out,
})
);
};

export const bodyAnimations = new Map(
Object.entries({
grow: animationPair({
in: growVerIn,
out: growVerOut,
}),
fade: animationPair({
in: noopAnimation,
out: noopAnimation,
}),
slide: animationPair({
in: slideInHor,
out: slideOutHor,
}),
none: animationPair({
in: noopAnimation,
out: noopAnimation,
}),
})
);

export const contentAnimations = new Map(
Object.entries({
grow: new Map(
Object.entries({
in: growVerIn,
out: growVerOut,
})
),
fade: new Map(
Object.entries({
in: fadeIn,
out: fadeOut,
})
),
slide: new Map(
Object.entries({
in: slideInHor,
out: slideOutHor,
})
),
none: new Map(
Object.entries({
in: noopAnimation,
out: noopAnimation,
})
),
grow: animationPair({
in: fadeIn,
out: fadeOut,
}),
fade: animationPair({
in: fadeIn,
out: fadeOut,
}),
slide: animationPair({
in: fadeIn,
out: fadeOut,
}),
none: animationPair({
in: noopAnimation,
out: noopAnimation,
}),
})
);
33 changes: 27 additions & 6 deletions src/components/stepper/step.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,11 @@ import { themes } from '../../theming/theming-decorator.js';
import { watch } from '../common/decorators/watch.js';
import { registerComponent } from '../common/definitions/register.js';
import { partNameMap } from '../common/util.js';
import { type Animation, animations } from './animations.js';
import {
type Animation,
bodyAnimations,
contentAnimations,
} from './animations.js';
import { styles as shared } from './themes/step/shared/step.common.css.js';
import { styles } from './themes/step/step.base.css.js';
import { all } from './themes/step/themes.js';
Expand Down Expand Up @@ -55,8 +59,13 @@ export default class IgcStepComponent extends LitElement {
}

private bodyRef: Ref<HTMLElement> = createRef();
private contentRef: Ref<HTMLElement> = createRef();

private animationPlayer = addAnimationController(this, this.bodyRef);
private bodyAnimationPlayer = addAnimationController(this, this.bodyRef);
private contentAnimationPlayer = addAnimationController(
this,
this.contentRef
);

@queryAssignedElements({ slot: 'title' })
private _titleChildren!: Array<HTMLElement>;
Expand Down Expand Up @@ -146,17 +155,29 @@ export default class IgcStepComponent extends LitElement {
type: 'in' | 'out',
direction: 'normal' | 'reverse' = 'normal'
) {
const animation = animations.get(this.animation)!.get(type)!;
const bodyAnimation = bodyAnimations.get(this.animation)!.get(type)!;
const contentAnimation = contentAnimations.get(this.animation)!.get(type)!;
const bodyHeight = window
.getComputedStyle(this)
.getPropertyValue('--vertical-body-height');

const options: KeyframeAnimationOptions = {
duration: this.animationDuration,
easing: EaseInOut.Quad,
direction,
};

const step = {
height: bodyHeight,
};

const [_, event] = await Promise.all([
this.animationPlayer.stopAll(),
this.animationPlayer.play(animation(options)),
this.bodyAnimationPlayer.stopAll(),
this.bodyAnimationPlayer.play(bodyAnimation({ keyframe: options, step })),
this.contentAnimationPlayer.stopAll(),
this.contentAnimationPlayer.play(
contentAnimation({ keyframe: options, step })
),
]);

return event.type;
Expand Down Expand Up @@ -276,7 +297,7 @@ export default class IgcStepComponent extends LitElement {
role="tabpanel"
aria-labelledby="igc-step-header-${this.index}"
>
<div part="content">
<div part="content" ${ref(this.contentRef)}>
<slot></slot>
</div>
</div>`;
Expand Down
4 changes: 2 additions & 2 deletions src/components/stepper/themes/step/step.base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,6 @@

[part~='body'] {
display: block;
opacity: 0;
grid-row-start: var(--body-top, 2);
grid-column: 1 / span var(--steps-count);
padding-inline-start: calc(var(--body-indent--vertical) / 2);
Expand Down Expand Up @@ -138,6 +137,7 @@
display: block;
height: auto;
overflow: auto;
opacity: 0;

> slot {
display: block;
Expand Down Expand Up @@ -261,7 +261,6 @@
:host([active]) {
[part~='body'] {
height: 100%;
opacity: 1;
}

[part~='body bottom'] {
Expand All @@ -272,6 +271,7 @@

[part='content'] {
pointer-events: all;
opacity: 1;
}
}

Expand Down
3 changes: 2 additions & 1 deletion src/components/stepper/themes/stepper/stepper.base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@
:host(:not([orientation='horizontal'])) {
--vertical-header-z-index: 2;
--vertical-body-disply: block;
--vertical-body-height: 0;
--vertical-body-height: #{rem(24px)};
--header-width-vertical: 100%;
--hide-horizontal-separator: none;

Expand All @@ -137,6 +137,7 @@
}

::slotted(igc-step:last-of-type) {
--vertical-body-height: 0;
--hide-last-separator: none;
}
}
21 changes: 15 additions & 6 deletions stories/stepper.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@ import { html } from 'lit';

import {
IgcButtonComponent,
IgcInputComponent,
IgcStepperComponent,
defineComponents,
} from '../src/index.js';

defineComponents(IgcStepperComponent, IgcButtonComponent);
defineComponents(IgcStepperComponent, IgcButtonComponent, IgcInputComponent);

// region default
const metadata: Meta<IgcStepperComponent> = {
Expand Down Expand Up @@ -148,17 +149,25 @@ const BasicTemplate = ({
<igc-step complete>
<span slot="title">Step1</span>
<span slot="subtitle">(completed)</span>
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="first-name" required />
<igc-input
label="First Name"
id="first-name"
name="first-name"
required
></igc-input>
<br /><br />
<igc-button @click=${next}>Next</igc-button>
</igc-step>
<igc-step>
<igc-step active>
<span slot="title">Step 2</span>
<span slot="subtitle">(default)</span>
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="last-name" required />
<igc-input
label="Last Name"
id="last-name"
name="last-name"
required
></igc-input>
<br /><br />
<igc-button @click=${prev}>Prev</igc-button>
<igc-button @click=${next}>Next</igc-button>
Expand Down

0 comments on commit 5fb5ee2

Please sign in to comment.