mirrors/wagtail
mirrors/wagtail
0
0
Fork 0
mirror of https://github.com/wagtail/wagtail.git synced 2024-11-25 05:02:57 +01:00
Code Issues Releases Wiki Activity

Drop c- prefix for transition group

Browse Source
This commit is contained in:
Thibaud Colas 2023-12-12 17:55:23 +00:00
parent 02b4444369
commit 294040dc82
6 changed files with 28 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/PageExplorer/PageExplorer.scss
View File

@ -24,7 +24,7 @@ $menu-footer-height: 50px;
}
}
.c-page-explorer > .c-transition-group {
.c-page-explorer > .w-transition-group {
display: flex;
flex-direction: column;
height: 100%;

2
client/src/components/PageExplorer/PageExplorerPanel.tsx
View File

@ -131,7 +131,7 @@ class PageExplorerPanel extends React.Component<
>
<div role="dialog" aria-label={gettext('Page explorer')}>
<Transition name={transition} className="c-page-explorer">
<div key={depth} className="c-transition-group">
<div key={depth} className="w-transition-group">
<PageExplorerHeader
depth={depth}
page={page}

10
client/src/components/PageExplorer/__snapshots__/PageExplorerPanel.test.js.snap
View File

@ -24,7 +24,7 @@ exports[`PageExplorerPanel general rendering #isError 1`] = `
name="push"
>
<div
className="c-transition-group"
className="w-transition-group"
key="1"
>
<PageExplorerHeader
@ -99,7 +99,7 @@ exports[`PageExplorerPanel general rendering #isFetching 1`] = `
name="push"
>
<div
className="c-transition-group"
className="w-transition-group"
key="1"
>
<PageExplorerHeader
@ -155,7 +155,7 @@ exports[`PageExplorerPanel general rendering #items 1`] = `
name="push"
>
<div
className="c-transition-group"
className="w-transition-group"
key="1"
>
<PageExplorerHeader
@ -239,7 +239,7 @@ exports[`PageExplorerPanel general rendering no children 1`] = `
name="push"
>
<div
className="c-transition-group"
className="w-transition-group"
key="1"
>
<PageExplorerHeader
@ -292,7 +292,7 @@ exports[`PageExplorerPanel general rendering renders 1`] = `
name="push"
>
<div
className="c-transition-group"
className="w-transition-group"
key="1"
>
<PageExplorerHeader

36
client/src/components/Transition/Transition.scss
View File

@ -2,36 +2,36 @@
// Transitions
// =============================================================================
$c-transition-duration: 200ms;
$w-transition-duration: 200ms;
.c-transition-group {
.w-transition-group {
position: absolute;
width: 100%;
top: 0;
}
.c-transition-push-enter {
.w-transition-push-enter {
transform: translateX(calc(var(--w-direction-factor) * 100%));
transition:
transform $c-transition-duration ease,
opacity $c-transition-duration linear;
transform $w-transition-duration ease,
opacity $w-transition-duration linear;
opacity: 0;
}
.c-transition-push-enter-active {
.w-transition-push-enter-active {
transform: translateX(0);
opacity: 1;
}
.c-transition-push-leave {
.w-transition-push-leave {
transform: translateX(0);
transition:
transform $c-transition-duration ease,
opacity $c-transition-duration linear;
transform $w-transition-duration ease,
opacity $w-transition-duration linear;
opacity: 1;
}
.c-transition-push-leave-active {
.w-transition-push-leave-active {
transform: translateX(calc(var(--w-direction-factor) * -100%));
opacity: 0;
}
@ -39,28 +39,28 @@ $c-transition-duration: 200ms;
// =============================================================================
// Pop transition
// =============================================================================
.c-transition-pop-enter {
.w-transition-pop-enter {
transform: translateX(calc(var(--w-direction-factor) * -100%));
transition:
transform $c-transition-duration ease,
opacity $c-transition-duration linear;
transform $w-transition-duration ease,
opacity $w-transition-duration linear;
opacity: 0;
}
.c-transition-pop-enter-active {
.w-transition-pop-enter-active {
transform: translateX(0);
opacity: 1;
}
.c-transition-pop-leave {
.w-transition-pop-leave {
transform: translateX(0);
transition:
transform $c-transition-duration ease,
opacity $c-transition-duration linear;
transform $w-transition-duration ease,
opacity $w-transition-duration linear;
opacity: 1;
}
.c-transition-pop-leave-active {
.w-transition-pop-leave-active {
transform: translateX(calc(var(--w-direction-factor) * 100%));
opacity: 0;
}

2
client/src/components/Transition/Transition.tsx
View File

@ -17,7 +17,7 @@ const Transition = ({ name, component, className, duration, children }) => (
component={component}
transitionEnterTimeout={duration}
transitionLeaveTimeout={duration}
transitionName={`c-transition-${name}`}
transitionName={`w-transition-${name}`}
className={className}
>
{children}

4
client/src/components/Transition/__snapshots__/Transition.test.js.snap
View File

@ -9,7 +9,7 @@ exports[`Transition basic 1`] = `
transitionEnterTimeout={210}
transitionLeave={true}
transitionLeaveTimeout={210}
transitionName="c-transition-push"
transitionName="w-transition-push"
/>
`;
@ -22,6 +22,6 @@ exports[`Transition label 1`] = `
transitionEnterTimeout={210}
transitionLeave={true}
transitionLeaveTimeout={210}
transitionName="c-transition-push"
transitionName="w-transition-push"
/>
`;