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

(chore): implement motion system #4779

Draft
wants to merge 8 commits into
base: develop
Choose a base branch
from
Draft

(chore): implement motion system #4779

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5b02a94
chore(core): implement motion system
epetrow Nov 7, 2023
fcb2218
feat(default): integrate motion system
epetrow Nov 17, 2023
c78b5d6
feat(bootstrap): integrate motion system
epetrow Nov 17, 2023
7c80362
feat(classic): integrate motion system
epetrow Nov 17, 2023
9e690a0
feat(material): integrate motion system
epetrow Nov 17, 2023
d589348
feat(fluent): integrate motion system
epetrow Nov 17, 2023
e719f28
feat(utils): integrate motion system
epetrow Nov 23, 2023
6d772f7
chore: regen docs
epetrow Jan 16, 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
2 changes: 1 addition & 1 deletion packages/bootstrap/docs/customization-button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -633,7 +633,7 @@ The following table lists the available variables for customization.
<td>$kendo-button-transition</td>
<td>List</td>
<td><code>$kendo-transition</code></td>
<td><code>color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out</code></td>
<td><code>color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), background-color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), border-color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), box-shadow var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1))</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The color transition of the Button.</div></div>
Expand Down
60 changes: 60 additions & 0 deletions packages/bootstrap/docs/customization-common.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,66 @@ The following table lists the available variables for customization.
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Text color of disabled items.</div></div>
</td>
</tr>
<tr>
<td>$kendo-transition</td>
<td>List</td>
<td><code>k-motion(short-4, ease-in-out, color, background-color, border-color, box-shadow)</code></td>
<td><code>color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), background-color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), border-color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), box-shadow var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1))</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Transition used across all components.</div></div>
</td>
</tr>
<tr>
<td>$kendo-scrollview-transition-duration</td>
<td>Number</td>
<td><code>.3s</code></td>
<td><code>0.3s</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Deprecated</b><div class="theme-variables-description">Use `$kendo-scrollview-transition` instead.</div></div>
</td>
</tr>
<tr>
<td>$kendo-scrollview-transition-timing-function</td>
<td>String</td>
<td><code>ease-in-out</code></td>
<td><code>ease-in-out</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Deprecated</b><div class="theme-variables-description">Use `$kendo-scrollview-transition` instead.</div></div>
</td>
</tr>
<tr>
<td>$kendo-stepper-content-transition-property</td>
<td>String</td>
<td><code>height</code></td>
<td><code>height</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Deprecated</b><div class="theme-variables-description">Use `$kendo-stepper-content-transition` instead.</div></div>
</td>
</tr>
<tr>
<td>$kendo-stepper-content-transition-duration</td>
<td>Number</td>
<td><code>300ms</code></td>
<td><code>300ms</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Deprecated</b><div class="theme-variables-description">Use `$kendo-stepper-content-transition` instead.</div></div>
</td>
</tr>
<tr>
<td>$kendo-stepper-content-transition-timing-function</td>
<td>List</td>
<td><code>cubic-bezier(.4, 0, .2, 1) 0ms</code></td>
<td><code>cubic-bezier(0.4, 0, 0.2, 1) 0ms</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Deprecated</b><div class="theme-variables-description">Use `$kendo-stepper-content-transition` instead.</div></div>
</td>
</tr>
</tbody>
</table>

Expand Down
4 changes: 2 additions & 2 deletions packages/bootstrap/docs/customization-floating-label.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,8 +130,8 @@ The following table lists the available variables for customization.
<tr>
<td>$kendo-floating-label-transition</td>
<td>List</td>
<td><code>.2s ease-out</code></td>
<td><code>0.2s ease-out</code></td>
<td><code>k-motion(short-4, ease-out, transform, color, top, inset-inline-start)</code></td>
<td><code>transform var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1)), color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1)), top var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1)), inset-inline-start var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1))</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The transition of the Floating Label.</div></div>
Expand Down
20 changes: 5 additions & 15 deletions packages/bootstrap/docs/customization-scrollview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -288,23 +288,13 @@ The following table lists the available variables for customization.
</td>
</tr>
<tr>
<td>$kendo-scrollview-transition-duration</td>
<td>Number</td>
<td><code>.3s</code></td>
<td><code>0.3s</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The duration of the ScrollView transition.</div></div>
</td>
</tr>
<tr>
<td>$kendo-scrollview-transition-timing-function</td>
<td>String</td>
<td><code>ease-in-out</code></td>
<td><code>ease-in-out</code></td>
<td>$kendo-scrollview-transition</td>
<td>List</td>
<td><code>k-motion(medium-2, ease-in-out, all)</code></td>
<td><code>(all var(--kendo-global-duration, var(--kendo-motion-medium-2, 0.3s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)),)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The timing function of the ScrollView transition.</div></div>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The transition of the ScrollView.</div></div>
</td>
</tr>
</tbody>
Expand Down
86 changes: 68 additions & 18 deletions packages/bootstrap/docs/customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,66 @@ The following table lists the available variables for customizing the Bootstrap
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Text color of disabled items.</div></div>
</td>
</tr>
<tr>
<td>$kendo-transition</td>
<td>List</td>
<td><code>k-motion(short-4, ease-in-out, color, background-color, border-color, box-shadow)</code></td>
<td><code>color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), background-color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), border-color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), box-shadow var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1))</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Transition used across all components.</div></div>
</td>
</tr>
<tr>
<td>$kendo-scrollview-transition-duration</td>
<td>Number</td>
<td><code>.3s</code></td>
<td><code>0.3s</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Deprecated</b><div class="theme-variables-description">Use `$kendo-scrollview-transition` instead.</div></div>
</td>
</tr>
<tr>
<td>$kendo-scrollview-transition-timing-function</td>
<td>String</td>
<td><code>ease-in-out</code></td>
<td><code>ease-in-out</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Deprecated</b><div class="theme-variables-description">Use `$kendo-scrollview-transition` instead.</div></div>
</td>
</tr>
<tr>
<td>$kendo-stepper-content-transition-property</td>
<td>String</td>
<td><code>height</code></td>
<td><code>height</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Deprecated</b><div class="theme-variables-description">Use `$kendo-stepper-content-transition` instead.</div></div>
</td>
</tr>
<tr>
<td>$kendo-stepper-content-transition-duration</td>
<td>Number</td>
<td><code>300ms</code></td>
<td><code>300ms</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Deprecated</b><div class="theme-variables-description">Use `$kendo-stepper-content-transition` instead.</div></div>
</td>
</tr>
<tr>
<td>$kendo-stepper-content-transition-timing-function</td>
<td>List</td>
<td><code>cubic-bezier(.4, 0, .2, 1) 0ms</code></td>
<td><code>cubic-bezier(0.4, 0, 0.2, 1) 0ms</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Deprecated</b><div class="theme-variables-description">Use `$kendo-stepper-content-transition` instead.</div></div>
</td>
</tr>
</tbody>
</table>

Expand Down Expand Up @@ -2208,7 +2268,7 @@ The following table lists the available variables for customizing the Bootstrap
<td>$kendo-button-transition</td>
<td>List</td>
<td><code>$kendo-transition</code></td>
<td><code>color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out</code></td>
<td><code>color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), background-color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), border-color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), box-shadow var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1))</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The color transition of the Button.</div></div>
Expand Down Expand Up @@ -7513,8 +7573,8 @@ The following table lists the available variables for customizing the Bootstrap
<tr>
<td>$kendo-floating-label-transition</td>
<td>List</td>
<td><code>.2s ease-out</code></td>
<td><code>0.2s ease-out</code></td>
<td><code>k-motion(short-4, ease-out, transform, color, top, inset-inline-start)</code></td>
<td><code>transform var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1)), color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1)), top var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1)), inset-inline-start var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1))</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The transition of the Floating Label.</div></div>
Expand Down Expand Up @@ -14223,23 +14283,13 @@ The following table lists the available variables for customizing the Bootstrap
</td>
</tr>
<tr>
<td>$kendo-scrollview-transition-duration</td>
<td>Number</td>
<td><code>.3s</code></td>
<td><code>0.3s</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The duration of the ScrollView transition.</div></div>
</td>
</tr>
<tr>
<td>$kendo-scrollview-transition-timing-function</td>
<td>String</td>
<td><code>ease-in-out</code></td>
<td><code>ease-in-out</code></td>
<td>$kendo-scrollview-transition</td>
<td>List</td>
<td><code>k-motion(medium-2, ease-in-out, all)</code></td>
<td><code>(all var(--kendo-global-duration, var(--kendo-motion-medium-2, 0.3s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)),)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The timing function of the ScrollView transition.</div></div>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The transition of the ScrollView.</div></div>
</td>
</tr>
</tbody>
Expand Down
1 change: 0 additions & 1 deletion packages/bootstrap/scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,6 @@ $kendo-letter-spacing: null !default;
// TODO: refactor
$kendo-focus-shadow: null !default;

$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default;


// Disabled mixin variables
Expand Down
4 changes: 4 additions & 0 deletions packages/bootstrap/scss/core/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,15 @@ $wcag-min-contrast-ratio: 4.5 !default;

// Backward compatibility
@import "./color-system/_swatch-legacy.scss";
// Backwards compatibility
@import "./motion/_motion-legacy.scss";

// Expose
@include exports("kendo-core-styles") {
@include kendo-core--styles();

// Elevation System
@include kendo-elevation--styles();
// Motion System
@include kendo-motion--styles();
}
2 changes: 2 additions & 0 deletions packages/bootstrap/scss/core/motion/_motion-legacy.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
/// Transition used across all components.
$kendo-transition: k-motion(short-4, ease-in-out, color, background-color, border-color, box-shadow) !default;
1 change: 1 addition & 0 deletions packages/bootstrap/scss/core/motion/index.import.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import "@progress/kendo-theme-core/scss/motion/index.import.scss";
2 changes: 1 addition & 1 deletion packages/bootstrap/scss/dataviz/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ $kendo-chart-area-opacity: .6 !default;
$kendo-chart-area-inactive-opacity: .1 !default;
$kendo-chart-line-inactive-opacity: .3 !default;

$kendo-chart-tooltip-transition: left 300ms cubic-bezier(0, .33, .19, 1), top 300ms cubic-bezier(0, .33, .19, 1) !default;
$kendo-chart-tooltip-transition: k-motion(medium-2, linear, left, top) !default;

$kendo-chart-bg: $kendo-component-bg !default;
$kendo-chart-text: $kendo-component-text !default;
Expand Down
2 changes: 1 addition & 1 deletion packages/bootstrap/scss/floating-label/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ $kendo-floating-label-focus-offset-y: 0 !default;

/// The transition of the Floating Label.
/// @group floating-label
$kendo-floating-label-transition: .2s ease-out !default;
$kendo-floating-label-transition: k-motion(short-4, ease-out, transform, color, top, inset-inline-start) !default;
epetrow marked this conversation as resolved.
Show resolved Hide resolved

/// The background color of the Floating Label.
/// @group floating-label
Expand Down
10 changes: 6 additions & 4 deletions packages/bootstrap/scss/scrollview/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,9 +84,11 @@ $kendo-scrollview-light-bg: rgba( white, .4 ) !default;
/// @group scrollview
$kendo-scrollview-dark-bg: rgba( black, .4 ) !default;

/// The duration of the ScrollView transition.
/// @group scrollview
/// @deprecated Use `$kendo-scrollview-transition` instead.
$kendo-scrollview-transition-duration: .3s !default;
epetrow marked this conversation as resolved.
Show resolved Hide resolved
/// The timing function of the ScrollView transition.
/// @group scrollview
/// @deprecated Use `$kendo-scrollview-transition` instead.
$kendo-scrollview-transition-timing-function: ease-in-out !default;

/// The transition of the ScrollView.
/// @group scrollview
$kendo-scrollview-transition: k-motion(medium-2, ease-in-out, all) !default;
6 changes: 3 additions & 3 deletions packages/bootstrap/scss/slider/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,9 @@ $kendo-slider-draghandle-pressed-gradient: null !default;

$kendo-slider-draghandle-focus-shadow: 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( primary, true ), .5 ), rgba( $kendo-color-primary, .5 )) !default;

$kendo-slider-transition-speed: .3s !default;
$kendo-slider-transition-function: ease-out !default;
$kendo-slider-draghandle-transition-speed: .4s !default;
$kendo-slider-transition-speed: var(--kendo-motion-medium-2, .3s) !default;
$kendo-slider-transition-function: var(--kendo-motion-ease-out, ease-out) !default;
$kendo-slider-draghandle-transition-speed: var(--kendo-motion-medium-4, .4s) !default;
$kendo-slider-draghandle-transition-function: cubic-bezier(.25, .8, .25, 1) !default;

$kendo-slider-track-bg: $gray-200 !default;
Expand Down
5 changes: 5 additions & 0 deletions packages/bootstrap/scss/stepper/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,11 @@ $kendo-stepper-progressbar-text: null !default;
$kendo-stepper-progressbar-fill-bg: null !default;
$kendo-stepper-progressbar-fill-text: null !default;

/// @deprecated Use `$kendo-stepper-content-transition` instead.
$kendo-stepper-content-transition-property: height !default;
/// @deprecated Use `$kendo-stepper-content-transition` instead.
epetrow marked this conversation as resolved.
Show resolved Hide resolved
$kendo-stepper-content-transition-duration: 300ms !default;
/// @deprecated Use `$kendo-stepper-content-transition` instead.
$kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !default;
epetrow marked this conversation as resolved.
Show resolved Hide resolved

$kendo-stepper-content-transition: k-motion(medium-2, ease-in-out, height) !default;
4 changes: 2 additions & 2 deletions packages/classic/docs/customization-button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -632,8 +632,8 @@ The following table lists the available variables for customization.
<tr>
<td>$kendo-button-transition</td>
<td>List</td>
<td><code>color .2s ease-in-out</code></td>
<td><code>color 0.2s ease-in-out</code></td>
<td><code>k-motion(short-4, ease-in-out, color)</code></td>
<td><code>(color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)),)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The color transition of the flat Button.</div></div>
Expand Down
Loading
Loading