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

Jump to bottom

[docs] Add introduction Base component demos & general uplift #33896

Merged
merged 40 commits into from Aug 29, 2022
Merged

[docs] Add introduction Base component demos & general uplift #33896

Show file tree
Hide file tree
Changes from 35 commits
Commits
Show all changes
40 commits
Select commit Hold shift + click to select a range
a62e6be
first iteration on gradient demo container above the fold
danilo-leal Aug 12, 2022
4a176be
add input exercise as well
danilo-leal Aug 12, 2022
81758c3
add tiles pattern to the gradient image
danilo-leal Aug 17, 2022
e08756a
tweak input color
danilo-leal Aug 17, 2022
bc995b0
add slider demo
danilo-leal Aug 17, 2022
37e24ef
add slider
danilo-leal Aug 17, 2022
4f0795b
add switch demo
danilo-leal Aug 17, 2022
e0bfea7
add badge demo
danilo-leal Aug 17, 2022
37404eb
add menu demo
danilo-leal Aug 17, 2022
41df13e
add tabs demo
danilo-leal Aug 17, 2022
d09b128
add demo pagination demo
danilo-leal Aug 17, 2022
97272a7
fix lint errors
danilo-leal Aug 17, 2022
dce8317
fix tiny stuff
danilo-leal Aug 17, 2022
6bf8f66
fix lint again
danilo-leal Aug 17, 2022
8901063
adjusting some stuff
danilo-leal Aug 17, 2022
c6af0b6
iterate more on the Demo gradient
danilo-leal Aug 18, 2022
04504f8
make the rest of Button's demos consistent
danilo-leal Aug 18, 2022
4ff74f9
make the rest of Input's demos consistent
danilo-leal Aug 18, 2022
0c54503
make the rest of Select's demos consistent
danilo-leal Aug 18, 2022
28cace4
make the rest of Slider's demo consistent
danilo-leal Aug 18, 2022
6891e1b
make the rest of Switches demos consistent
danilo-leal Aug 18, 2022
82d8e2f
make the Badge demos consistent
danilo-leal Aug 18, 2022
4f4da07
make the rest of Menu's demos consistent
danilo-leal Aug 18, 2022
80641e7
make the rest of Tabs demos consistent
danilo-leal Aug 18, 2022
9978a13
fix lint
danilo-leal Aug 18, 2022
20232b7
docs formatted
danilo-leal Aug 18, 2022
4669dc2
stylelint
danilo-leal Aug 18, 2022
e98bad4
turn introduction demos to TypeScript
danilo-leal Aug 26, 2022
10448eb
iterate a bit more over the gradient background
danilo-leal Aug 26, 2022
07c4b96
bit of iteration on the tab demo styles
danilo-leal Aug 26, 2022
1efeef1
yarn docs:typescript:formatted
danilo-leal Aug 26, 2022
ec0d1f0
small adjustment to the button's demo
danilo-leal Aug 26, 2022
9601831
button: parity between tsx and js files
danilo-leal Aug 26, 2022
a9e918d
use real icon in the select demo
danilo-leal Aug 26, 2022
5f3554d
Fix TS errors
michaldudak Aug 26, 2022
5f05c07
fix build
oliviertassinari Aug 26, 2022
2a21c7e
Apply suggestions from code review
michaldudak Aug 29, 2022
50614cc
docs:typescript:formatted
michaldudak Aug 29, 2022
bdc63e1
Merge branch 'master' into base-demos-uplift
michaldudak Aug 29, 2022
af1b4f0
docs:typescript:formatted
michaldudak Aug 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
37 changes: 24 additions & 13 deletions docs/data/base/components/badge/AccessibleBadges.js
View file
Open in desktop
Expand Up @@ -3,7 +3,17 @@ import { styled } from '@mui/system';
import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
import MailIcon from '@mui/icons-material/Mail';

const StyledBadge = styled(BadgeUnstyled)`
const blue = {
500: '#007FFF',
};

const grey = {
300: '#afb8c1',
900: '#24292f',
};

const StyledBadge = styled(BadgeUnstyled)(
({ theme }) => `
box-sizing: border-box;
margin: 0;
padding: 0;
Expand All @@ -16,25 +26,26 @@ const StyledBadge = styled(BadgeUnstyled)`

& .${badgeUnstyledClasses.badge} {
z-index: auto;
min-width: 20px;
height: 20px;
position: absolute;
top: 0;
right: 0;
min-width: 22px;
height: 22px;
padding: 0 6px;
color: #fff;
font-weight: 400;
font-weight: 600;
font-size: 12px;
line-height: 20px;
line-height: 22px;
white-space: nowrap;
text-align: center;
background: #07f;
border-radius: 10px;
box-shadow: 0 0 0 1px #fff;
position: absolute;
top: 0;
right: 0;
border-radius: 12px;
background: ${blue[500]};
box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};
transform: translate(50%, -50%);
transform-origin: 100% 0;
transform-origin: 100% 0;
}
`;
`,
);

function notificationsLabel(count) {
if (count === 0) {
Expand Down
37 changes: 24 additions & 13 deletions docs/data/base/components/badge/AccessibleBadges.tsx
View file
Open in desktop
Expand Up @@ -3,7 +3,17 @@ import { styled } from '@mui/system';
import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
import MailIcon from '@mui/icons-material/Mail';

const StyledBadge = styled(BadgeUnstyled)`
const blue = {
500: '#007FFF',
};

const grey = {
300: '#afb8c1',
900: '#24292f',
};

const StyledBadge = styled(BadgeUnstyled)(
({ theme }) => `
box-sizing: border-box;
margin: 0;
padding: 0;
Expand All @@ -16,25 +26,26 @@ const StyledBadge = styled(BadgeUnstyled)`

& .${badgeUnstyledClasses.badge} {
z-index: auto;
min-width: 20px;
height: 20px;
position: absolute;
top: 0;
right: 0;
min-width: 22px;
height: 22px;
padding: 0 6px;
color: #fff;
font-weight: 400;
font-weight: 600;
font-size: 12px;
line-height: 20px;
line-height: 22px;
white-space: nowrap;
text-align: center;
background: #07f;
border-radius: 10px;
box-shadow: 0 0 0 1px #fff;
position: absolute;
top: 0;
right: 0;
border-radius: 12px;
background: ${blue[500]};
box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};
transform: translate(50%, -50%);
transform-origin: 100% 0;
transform-origin: 100% 0;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
transform-origin: 100% 0;
transform-origin: 100% 0;

}
`;
`,
);

function notificationsLabel(count: number) {
if (count === 0) {
Expand Down
37 changes: 24 additions & 13 deletions docs/data/base/components/badge/BadgeMax.js
View file
Open in desktop
Expand Up @@ -4,7 +4,17 @@ import { styled } from '@mui/system';
import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
import MailIcon from '@mui/icons-material/Mail';

const StyledBadge = styled(BadgeUnstyled)`
const blue = {
500: '#007FFF',
};

const grey = {
300: '#afb8c1',
900: '#24292f',
};

const StyledBadge = styled(BadgeUnstyled)(
({ theme }) => `
box-sizing: border-box;
margin: 0;
padding: 0;
Expand All @@ -17,25 +27,26 @@ const StyledBadge = styled(BadgeUnstyled)`

& .${badgeUnstyledClasses.badge} {
z-index: auto;
min-width: 20px;
height: 20px;
position: absolute;
top: 0;
right: 0;
min-width: 22px;
height: 22px;
padding: 0 6px;
color: #fff;
font-weight: 400;
font-weight: 600;
font-size: 12px;
line-height: 20px;
line-height: 22px;
white-space: nowrap;
text-align: center;
background: #07f;
border-radius: 10px;
box-shadow: 0 0 0 1px #fff;
position: absolute;
top: 0;
right: 0;
border-radius: 12px;
background: ${blue[500]};
box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};
transform: translate(50%, -50%);
transform-origin: 100% 0;
transform-origin: 100% 0;
}
`;
`,
);

export default function BadgeMax() {
return (
Expand Down
37 changes: 24 additions & 13 deletions docs/data/base/components/badge/BadgeMax.tsx
View file
Open in desktop
Expand Up @@ -4,7 +4,17 @@ import { styled } from '@mui/system';
import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
import MailIcon from '@mui/icons-material/Mail';

const StyledBadge = styled(BadgeUnstyled)`
const blue = {
500: '#007FFF',
};

const grey = {
300: '#afb8c1',
900: '#24292f',
};

const StyledBadge = styled(BadgeUnstyled)(
({ theme }) => `
box-sizing: border-box;
margin: 0;
padding: 0;
Expand All @@ -17,25 +27,26 @@ const StyledBadge = styled(BadgeUnstyled)`

& .${badgeUnstyledClasses.badge} {
z-index: auto;
min-width: 20px;
height: 20px;
position: absolute;
top: 0;
right: 0;
min-width: 22px;
height: 22px;
padding: 0 6px;
color: #fff;
font-weight: 400;
font-weight: 600;
font-size: 12px;
line-height: 20px;
line-height: 22px;
white-space: nowrap;
text-align: center;
background: #07f;
border-radius: 10px;
box-shadow: 0 0 0 1px #fff;
position: absolute;
top: 0;
right: 0;
border-radius: 12px;
background: ${blue[500]};
box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};
transform: translate(50%, -50%);
transform-origin: 100% 0;
transform-origin: 100% 0;
michaldudak marked this conversation as resolved.
Show resolved Hide resolved
}
`;
`,
);

export default function BadgeMax() {
return (
Expand Down
39 changes: 24 additions & 15 deletions docs/data/base/components/badge/BadgeVisibility.js
View file
Open in desktop
Expand Up @@ -10,7 +10,17 @@ import MailIcon from '@mui/icons-material/Mail';
import Switch from '@mui/material/Switch';
import FormControlLabel from '@mui/material/FormControlLabel';

const StyledBadge = styled(BadgeUnstyled)`
const blue = {
500: '#007FFF',
};

const grey = {
300: '#afb8c1',
900: '#24292f',
};

const StyledBadge = styled(BadgeUnstyled)(
({ theme }) => `
box-sizing: border-box;
margin: 0;
padding: 0;
Expand All @@ -23,32 +33,31 @@ const StyledBadge = styled(BadgeUnstyled)`

& .${badgeUnstyledClasses.badge} {
z-index: auto;
min-width: 20px;
height: 20px;
position: absolute;
top: 0;
right: 0;
min-width: 22px;
height: 22px;
padding: 0 6px;
color: #fff;
font-weight: 400;
font-weight: 600;
font-size: 12px;
line-height: 20px;
line-height: 22px;
white-space: nowrap;
text-align: center;
background: #07f;
border-radius: 10px;
box-shadow: 0 0 0 1px #fff;
position: absolute;
top: 0;
right: 0;
border-radius: 12px;
background: ${blue[500]};
box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};
transform: translate(50%, -50%);
transform-origin: 100% 0;
opacity: 1;
transition: opacity 0.2s ease-in-out;
transform-origin: 100% 0;
}

& .${badgeUnstyledClasses.invisible} {
opacity: 0;
pointer-events: none;
}
`;
`,
);

export default function BadgeVisibility() {
const [count, setCount] = React.useState(1);
Expand Down
39 changes: 24 additions & 15 deletions docs/data/base/components/badge/BadgeVisibility.tsx
View file
Open in desktop
Expand Up @@ -10,7 +10,17 @@ import MailIcon from '@mui/icons-material/Mail';
import Switch from '@mui/material/Switch';
import FormControlLabel from '@mui/material/FormControlLabel';

const StyledBadge = styled(BadgeUnstyled)`
const blue = {
500: '#007FFF',
};

const grey = {
300: '#afb8c1',
900: '#24292f',
};

const StyledBadge = styled(BadgeUnstyled)(
({ theme }) => `
box-sizing: border-box;
margin: 0;
padding: 0;
Expand All @@ -23,32 +33,31 @@ const StyledBadge = styled(BadgeUnstyled)`

& .${badgeUnstyledClasses.badge} {
z-index: auto;
min-width: 20px;
height: 20px;
position: absolute;
top: 0;
right: 0;
min-width: 22px;
height: 22px;
padding: 0 6px;
color: #fff;
font-weight: 400;
font-weight: 600;
font-size: 12px;
line-height: 20px;
line-height: 22px;
white-space: nowrap;
text-align: center;
background: #07f;
border-radius: 10px;
box-shadow: 0 0 0 1px #fff;
position: absolute;
top: 0;
right: 0;
border-radius: 12px;
background: ${blue[500]};
box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};
transform: translate(50%, -50%);
transform-origin: 100% 0;
opacity: 1;
transition: opacity 0.2s ease-in-out;
transform-origin: 100% 0;
}

& .${badgeUnstyledClasses.invisible} {
opacity: 0;
pointer-events: none;
}
`;
`,
);

export default function BadgeVisibility() {
const [count, setCount] = React.useState(1);
Expand Down