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.

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

[blog] Add post about upcoming plans for Base UI #40882

Merged
merged 41 commits into from
Feb 12, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
41 commits
Select commit Hold shift + click to select a range
81c7662
add post draft and structure
danilo-leal Jan 31, 2024
f5a6a55
add open graph card
danilo-leal Feb 1, 2024
efbf435
add proper tags
danilo-leal Feb 1, 2024
11f830e
simplify a couple of blog-related styles
danilo-leal Feb 1, 2024
88177aa
remove misleading hover states on featured blog posts
danilo-leal Feb 1, 2024
fb25e5b
stray blog-related style adjustments
danilo-leal Feb 1, 2024
6b4977c
experiment with a table for listing the to-be-added components
danilo-leal Feb 1, 2024
e380cbc
show demo and src component as an examples in blog
siriwatknp Feb 1, 2024
5228dea
add a demo for the animation paragraph
danilo-leal Feb 1, 2024
f02d84d
rename the demo component; fix lint
danilo-leal Feb 1, 2024
b794450
fix links and demo lint
danilo-leal Feb 1, 2024
2b8ac1d
add new paragraph about customization API
danilo-leal Feb 5, 2024
3060340
add links and small tweaks
danilo-leal Feb 5, 2024
eb9bd74
add one more link
danilo-leal Feb 5, 2024
c287381
add small description on the animation demo
danilo-leal Feb 5, 2024
2dcabff
small fix
danilo-leal Feb 5, 2024
4259bee
add missing issues
danilo-leal Feb 5, 2024
1d5d251
add images and beef up the post a bit more
danilo-leal Feb 5, 2024
b2ff1d8
add one more link and formatting
danilo-leal Feb 6, 2024
c48810e
run: pnpm docs:link-check
danilo-leal Feb 6, 2024
7271a7b
remove numbers for the table to not imply order
danilo-leal Feb 6, 2024
1793959
simplify copy
danilo-leal Feb 6, 2024
23284f9
specify calendar year
danilo-leal Feb 6, 2024
6ed4962
fix broken link
danilo-leal Feb 6, 2024
21314e3
Michal's suggestions
danilo-leal Feb 6, 2024
cd4f79c
Sam's review
danilo-leal Feb 6, 2024
80d4af1
updates and adjustments to the intro to Base UI old post
danilo-leal Feb 6, 2024
8e0b8aa
update tags there as well
danilo-leal Feb 6, 2024
1de2e76
little writing fix
danilo-leal Feb 6, 2024
d9248ed
standardize component name
danilo-leal Feb 7, 2024
43ddea8
update publishing date
danilo-leal Feb 7, 2024
facbb26
update the description
danilo-leal Feb 7, 2024
652c45e
update milestone image
danilo-leal Feb 7, 2024
bd4fef6
Olivier's review
danilo-leal Feb 8, 2024
ed962b6
docs:typescript:formatted
danilo-leal Feb 8, 2024
b358286
rephrase the paragraph about independent component versioning
danilo-leal Feb 8, 2024
89e0f7b
add note about other future components
danilo-leal Feb 8, 2024
4a7f689
more slight edits and fine-tunes
danilo-leal Feb 8, 2024
a25923a
update publishing date
danilo-leal Feb 8, 2024
5863369
Matt's review
danilo-leal Feb 8, 2024
eec727e
fine-tune edits to get this out the door
danilo-leal Feb 9, 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
216 changes: 216 additions & 0 deletions docs/data/base/components/transitions/AllTransitionsDemo.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,216 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { styled } from '@mui/system';
import { Unstable_Popup as PopupBase } from '@mui/base/Unstable_Popup';
import { Button as ButtonBase } from '@mui/base/Button';
import { CssAnimation, CssTransition } from '@mui/base/Transitions';

const styles = `
@keyframes open-animation {
0% {
opacity: 0;
transform: translateY(-8px) scale(0.95);
}

50% {
opacity: 1;
transform: translateY(4px) scale(1.05);
}

100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}

@keyframes close-animation {
0% {
opacity: 1;
transform: scale(1) rotate(0deg);
filter: blur(0);
}

100% {
opacity: 0;
transform: scale(1.5) rotate(8deg);
filter: blur(4px);
}
}

.anim-open {
animation: open-animation 1s ease-out both;
}

.anim-close {
animation: close-animation 1s ease-out forwards;
}

.open {
opacity: 1;
transform: translateY(0) scale(1)
filter: blur(0);
transition: transform 0.2s cubic-bezier(0.345, 0.275, 0.505, 1.625), opacity 0.2s ease-out;
}

.close {
opacity: 0;
transform: translateY(-8px) scale(0.95);
filter: blur(3px);
transition: transform 0.4s ease-out, opacity 0.4s ease-out, filter 0.2s ease-out;
}
`;

const grey = {
200: '#DAE2ED',
700: '#434D5B',
900: '#1C2025',
};

const blue = {
200: '#99CCFF',
300: '#66B2FF',
400: '#3399FF',
500: '#007FFF',
600: '#0072E5',
700: '#0066CC',
};

const Button = styled(ButtonBase)(
({ theme }) => `
min-width: 175px;
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 600;
font-size: 0.875rem;
line-height: 1.5;
background-color: ${blue[500]};
padding: 8px 16px;
border-radius: 8px;
color: white;
transition: background-color, box-shadow, 120ms ease;
cursor: pointer;
border: 1px solid ${blue[500]};
box-shadow: 0 1px 1px ${
theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.1)'
}, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};

&:hover {
background-color: ${blue[600]};
}

&:active {
background-color: ${blue[700]};
box-shadow: none;
}

&:focus-visible {
box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
outline: none;
}
`,
);

const Popup = styled(PopupBase)`
width: max-content;
`;

const PopupBody = styled('div')(
({ theme }) => `
width: max-content;
padding: 12px 16px;
margin: 8px;
border-radius: 8px;
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
box-shadow: ${
theme.palette.mode === 'dark'
? `0px 4px 8px rgb(0 0 0 / 0.7)`
: `0px 4px 8px rgb(0 0 0 / 0.1)`
};
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.875rem;
z-index: 1;
`,
);

const Section = styled('div')`
display: flex;
gap: 12px;
padding: 8px;

@media (max-width: 700px) {
flex-direction: column;
}
`;

export default function AllTransitionsDemo() {
return (
<div>
<style>{styles}</style>
<Section>
<PopupWithTrigger>
<CssTransition
enterClassName="open"
exitClassName="close"
lastTransitionedPropertyOnExit="transform"
>
<PopupBody>Animated with the CSS Transition component.</PopupBody>
</CssTransition>
</PopupWithTrigger>
<PopupWithTrigger2>
<CssAnimation
enterClassName="anim-open"
exitClassName="anim-close"
enterAnimationName="open-animation"
exitAnimationName="close-animation"
>
<PopupBody>Animated with the CSS Animation component.</PopupBody>
</CssAnimation>
</PopupWithTrigger2>
</Section>
</div>
);
}

function PopupWithTrigger(props) {
const [anchor, setAnchor] = React.useState(null);
const [open, setOpen] = React.useState(false);

const { children, ...other } = props;

return (
<React.Fragment>
<Button ref={setAnchor} onClick={() => setOpen((o) => !o)}>
{open ? 'Hide popup' : 'Open CSS Transition'}
</Button>
<Popup anchor={anchor} open={open} {...other}>
{children}
</Popup>
</React.Fragment>
);
}

PopupWithTrigger.propTypes = {
children: PropTypes.node,
};

function PopupWithTrigger2(props) {
const [anchor, setAnchor] = React.useState(null);
const [open, setOpen] = React.useState(false);

const { children, ...other } = props;

return (
<React.Fragment>
<Button ref={setAnchor} onClick={() => setOpen((o) => !o)}>
{open ? 'Hide popup' : 'Open CSS Animation'}
</Button>
<Popup anchor={anchor} open={open} {...other}>
{children}
</Popup>
</React.Fragment>
);
}

PopupWithTrigger2.propTypes = {
children: PropTypes.node,
};
Loading
Loading