Skip to content

Commit

Permalink
Add CSS transition
Browse files Browse the repository at this point in the history
  • Loading branch information
noahtallen committed Sep 17, 2020
1 parent 1ed89a1 commit f4927d4
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 16 deletions.
35 changes: 20 additions & 15 deletions packages/edit-site/src/components/header/document-actions/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ function useSecondaryText() {
return select( 'core/block-editor' ).getSelectedBlock();
} );

// TODO: Handle if parent is template part too.
const selectedBlockLabel =
selectedBlock?.name === 'core/template-part'
? getBlockLabel(
Expand All @@ -41,31 +42,35 @@ export default function DocumentActions( { documentTitle } ) {
// item is inactive.
const isTitleActive = ! label?.length || ! isActive;
return (
<div className="edit-site-document-actions">
<div
className={ classnames( 'edit-site-document-actions', {
'has-secondary-label': !! label,
} ) }
>
{ documentTitle ? (
<>
<span
<div
className={ classnames(
'edit-site-document-actions__label',
'edit-site-document-actions__title',
{
'is-active': isTitleActive,
}
) }
>
{ documentTitle }
</span>
{ label && (
<span
className={ classnames(
'edit-site-document-actions__secondary-item',
{
'is-active': isActive,
}
) }
>
{ label }
</span>
) }
</div>
<div
className={ classnames(
'edit-site-document-actions__label',
'edit-site-document-actions__secondary-item',
{
'is-active': isActive,
}
) }
>
{ label ?? '' }
</div>
</>
) : (
__( 'Loading…' )
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,31 @@
align-items: center;
justify-content: space-evenly;

span {
.edit-site-document-actions__label {
color: $gray-700;
display: flex;
justify-content: center;
align-items: center;
transition: height 0.25s;

&.is-active {
color: inherit;
}

&.edit-site-document-actions__title {
height: 100%;
// Otherwise, the secondary item still takes up space with height 0:
flex-grow: 1;
}

&.edit-site-document-actions__secondary-item {
height: 0;
}
}

&.has-secondary-label {
.edit-site-document-actions__label {
height: 50%;
}
}
}

0 comments on commit f4927d4

Please sign in to comment.