Add Framer X wrapper components #17797

mbrookes · 2019-10-08T23:25:49Z

I have followed (at least) the PR section of the contributing guide.

Known issues:

Tabs only display correctly when the preview is zoomed to 100% (Framer issue)
ListItem icon / action alignment
Nested component function props aren't currently exposed (for code overrides)
Chip Avatar size wrong after upgrade to 4.5.0.
Some TS wobblies (non-existant props in shared controls)

Todo:

Marketing image, icon & docs
More components

mui-pr-bot · 2019-10-08T23:36:12Z

@material-ui/core: parsed: +0.09% , gzip: +0.07%

Details of bundle changes.

Comparing: 7f09ea4...4a887b6

bundle	Size Change	Size	Gzip Change	Gzip
@material-ui/core	▲ +302 B (+0.09% )	349 kB	▲ +70 B (+0.07% )	95.6 kB
@material-ui/core[umd]	▲ +296 B (+0.10% )	309 kB	▲ +60 B (+0.07% )	88.9 kB
docs.main	▲ +219 B (+0.04% )	603 kB	▲ +84 B (+0.04% )	192 kB
TextField	▲ +133 B (+0.11% )	121 kB	▲ +7 B (+0.02% )	35.4 kB
Checkbox	▲ +51 B (+0.06% )	80.1 kB	▲ +24 B (+0.10% )	25.1 kB
Radio	▲ +51 B (+0.06% )	80.9 kB	▲ +18 B (+0.07% )	25.4 kB
Switch	▲ +51 B (+0.06% )	79.4 kB	▲ +15 B (+0.06% )	24.7 kB
ListItem	▲ +16 B (+0.02% )	75.4 kB	▲ +8 B (+0.03% )	23.5 kB
TablePagination	▲ +16 B (+0.01% )	139 kB	▼ -8 B (-0.02% )	40.5 kB
MenuItem	▲ +16 B (+0.02% )	76.4 kB	▲ +7 B (+0.03% )	23.8 kB
@material-ui/lab	--	169 kB	--	50.9 kB
@material-ui/styles	--	50.8 kB	--	15.4 kB
@material-ui/system	--	14.8 kB	--	4.06 kB
AppBar	--	62.2 kB	--	19.5 kB
Autocomplete	--	125 kB	--	39.6 kB
Avatar	--	61.2 kB	--	19.2 kB
Backdrop	--	66.2 kB	--	20.4 kB
Badge	--	63.8 kB	--	19.7 kB
BottomNavigation	--	60.8 kB	--	19 kB
BottomNavigationAction	--	73.8 kB	--	23.3 kB
Box	--	69.2 kB	--	20.9 kB
Breadcrumbs	--	66.4 kB	--	20.8 kB
Button	--	77.8 kB	--	24.1 kB
ButtonBase	--	72.3 kB	--	22.6 kB
ButtonGroup	--	62.7 kB	--	19.5 kB
Card	--	61.2 kB	--	19.1 kB
CardActionArea	--	73.3 kB	--	23.1 kB
CardActions	--	60.5 kB	--	18.9 kB
CardContent	--	60.4 kB	--	18.9 kB
CardHeader	--	63.5 kB	--	20 kB
CardMedia	--	60.8 kB	--	19.1 kB
Chip	--	81 kB	--	24.7 kB
CircularProgress	--	62.5 kB	--	19.7 kB
ClickAwayListener	--	3.85 kB	--	1.55 kB
Collapse	--	66.3 kB	--	20.5 kB
colorManipulator	--	3.83 kB	--	1.52 kB
Container	--	61.6 kB	--	19.2 kB
CssBaseline	--	56 kB	--	17.5 kB
Dialog	--	80.9 kB	--	25.1 kB
DialogActions	--	60.5 kB	--	18.9 kB
DialogContent	--	60.7 kB	--	19 kB
DialogContentText	--	62.5 kB	--	19.6 kB
DialogTitle	--	62.7 kB	--	19.7 kB
Divider	--	61 kB	--	19.1 kB
docs.landing	--	55.6 kB	--	14.6 kB
Drawer	--	82.7 kB	--	25.6 kB
ExpansionPanel	--	69.7 kB	--	21.7 kB
ExpansionPanelActions	--	60.5 kB	--	18.9 kB
ExpansionPanelDetails	--	60.4 kB	--	18.9 kB
ExpansionPanelSummary	--	76.4 kB	--	24.1 kB
Fab	--	75.1 kB	--	23.3 kB
Fade	--	22 kB	--	7.6 kB
FilledInput	--	72 kB	--	22.3 kB
FormControl	--	62.8 kB	--	19.5 kB
FormControlLabel	--	64 kB	--	20.1 kB
FormGroup	--	60.5 kB	--	18.9 kB
FormHelperText	--	61.7 kB	--	19.3 kB
FormLabel	--	61.9 kB	--	19.1 kB
Grid	--	63.5 kB	--	19.9 kB
GridList	--	60.9 kB	--	19.1 kB
GridListTile	--	62.2 kB	--	19.5 kB
GridListTileBar	--	61.7 kB	--	19.3 kB
Grow	--	22.6 kB	--	7.72 kB
Hidden	--	64.5 kB	--	20.2 kB
Icon	--	61.2 kB	--	19.2 kB
IconButton	--	74.4 kB	--	23.2 kB
Input	--	70.9 kB	--	22.1 kB
InputAdornment	--	63.5 kB	--	20 kB
InputBase	--	69.1 kB	--	21.6 kB
InputLabel	--	63.8 kB	--	19.8 kB
LinearProgress	--	63.8 kB	--	19.9 kB
Link	--	65 kB	--	20.6 kB
List	--	60.8 kB	--	18.9 kB
ListItemAvatar	--	60.6 kB	--	18.9 kB
ListItemIcon	--	60.6 kB	--	19 kB
ListItemSecondaryAction	--	60.5 kB	--	18.9 kB
ListItemText	--	63.4 kB	--	19.9 kB
ListSubheader	--	61.2 kB	--	19.2 kB
Menu	--	86.6 kB	--	27.2 kB
MenuList	--	64.4 kB	--	20.1 kB
MobileStepper	--	66.2 kB	--	20.6 kB
Modal	--	14.2 kB	--	4.96 kB
NativeSelect	--	75.2 kB	--	23.7 kB
NoSsr	--	2.19 kB	--	1.04 kB
OutlinedInput	--	72.5 kB	--	22.5 kB
Paper	--	60.7 kB	--	18.9 kB
Popover	--	81 kB	--	25 kB
Popper	--	28.5 kB	--	10.2 kB
Portal	--	2.87 kB	--	1.29 kB
RadioGroup	--	61.7 kB	--	19.3 kB
Rating	--	68.3 kB	--	21.8 kB
RootRef	--	4.43 kB	--	1.67 kB
Select	--	112 kB	--	33.4 kB
Skeleton	--	60.9 kB	--	19.1 kB
Slide	--	24.1 kB	--	8.21 kB
Slider	--	73.9 kB	--	23.3 kB
Snackbar	--	75.6 kB	--	23.5 kB
SnackbarContent	--	64.1 kB	--	20.1 kB
SpeedDial	--	84.3 kB	--	26.5 kB
SpeedDialAction	--	114 kB	--	36 kB
SpeedDialIcon	--	63 kB	--	19.8 kB
Step	--	61.1 kB	--	19.1 kB
StepButton	--	80.6 kB	--	25.3 kB
StepConnector	--	61.2 kB	--	19.2 kB
StepContent	--	67.4 kB	--	21 kB
StepIcon	--	63.1 kB	--	19.6 kB
StepLabel	--	67 kB	--	21 kB
Stepper	--	63.2 kB	--	19.9 kB
styles/createMuiTheme	--	15.2 kB	--	5.36 kB
SvgIcon	--	61.5 kB	--	19.1 kB
SwipeableDrawer	--	90.1 kB	--	27.9 kB
Tab	--	74.6 kB	--	23.6 kB
Table	--	61 kB	--	19.1 kB
TableBody	--	60.5 kB	--	18.9 kB
TableCell	--	62.5 kB	--	19.6 kB
TableFooter	--	60.6 kB	--	18.9 kB
TableHead	--	60.6 kB	--	18.9 kB
TableRow	--	61 kB	--	19.1 kB
TableSortLabel	--	75.6 kB	--	23.9 kB
Tabs	--	83.7 kB	--	26.6 kB
TextareaAutosize	--	5.06 kB	--	2.11 kB
ToggleButton	--	74.4 kB	--	23.5 kB
ToggleButtonGroup	--	61.6 kB	--	19.4 kB
Toolbar	--	60.8 kB	--	19 kB
Tooltip	--	97.7 kB	--	30.9 kB
TreeItem	--	71.9 kB	--	22.6 kB
TreeView	--	64.8 kB	--	20.2 kB
Typography	--	62.1 kB	--	19.3 kB
useAutocomplete	--	11.7 kB	--	4.32 kB
useMediaQuery	--	2.49 kB	--	1.05 kB
Zoom	--	22.1 kB	--	7.6 kB

Generated by 🚫 dangerJS against 4a887b6

eps1lon

Time to try framer I guess. Great job 👍

We should connect the framer worktree with the root worktree. framer worktree has an implicit dependency on /docs and scripts concerning framer are placed in the root. In it's current state it's unclear which dependencies are used.

package.json

yarn.lock

framer/Material-UI.framerfx/package.json

oliviertassinari · 2019-10-09T09:05:59Z

packages/material-ui/src/ListItem/ListItem.js

@@ -99,7 +99,7 @@ const ListItem = React.forwardRef(function ListItem(props, ref) {
    component: componentProp,
    ContainerComponent = 'li',
    ContainerProps: { className: ContainerClassName, ...ContainerProps } = {},
-    dense,
+    dense = false,


The state can come from the parent list too, it would override it.

Suggested change

dense = false,

dense,

How would a default value override it?

Oh ok, my bad, it won't. I have assumed we were using dense !== undefined.

But shouldn't we change the merge dense check logic? If the list can be not dense and the list item dense, why prevent the opposite (list dense and list item not dense)?

packages/material-ui/src/Radio/Radio.js

.prettierignore

oliviertassinari · 2019-11-01T01:06:51Z

framer/Material-UI.framerfx/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "material-ui-framer",


Should we name it @material-ui/framer?

I don't know how namespaces work in Framer, but I suspect they're used for Team (private) packages. Not sure it really matters though, as the name isn't visible.

Ok, do we control the name the package is published on npm with?

mbrookes · 2019-11-01T18:06:10Z

do we control the name the package is published (with)

oliviertassinari · 2019-11-06T13:11:51Z

🥁

mbrookes · 2019-11-06T13:12:29Z

https://packages.framer.com/package/material-ui/material-ui

oliviertassinari · 2019-11-06T13:37:59Z

Well done! For the MUI icon, did you use https://github.com/mui-org/material-ui/blob/master/docs/static/brand.png?

mbrookes · 2019-11-06T13:46:17Z

No, https://github.com/mui-org/material-ui/blob/master/docs/static/brand.png (since the example icon had a transparent background), with some extra padding. It could perhaps have used a bit more - just didn't want to make the logo too small. Next release...

mbrookes force-pushed the framer branch 2 times, most recently from 91e7929 to 79bbe00 Compare October 9, 2019 00:35

Add Framer X wrapper components

5e8f2de

mbrookes force-pushed the framer branch from 79bbe00 to 5e8f2de Compare October 9, 2019 00:46

eps1lon requested changes Oct 9, 2019

View reviewed changes

package.json Outdated Show resolved Hide resolved

yarn.lock Outdated Show resolved Hide resolved

framer/Material-UI.framerfx/package.json Outdated Show resolved Hide resolved

framer/Material-UI.framerfx/package.json Outdated Show resolved Hide resolved

oliviertassinari reviewed Oct 9, 2019

View reviewed changes

tidy up env

8db91c6

mbrookes requested a review from eps1lon October 10, 2019 10:55

'Correct' ListItem (makes it worse)

461baf8

mbrookes force-pushed the framer branch from 24adfbc to 461baf8 Compare October 10, 2019 13:28

Misc framer fixes (#1)

086711a

eps1lon approved these changes Oct 11, 2019

View reviewed changes

oliviertassinari approved these changes Oct 18, 2019

View reviewed changes

mbrookes added 3 commits October 22, 2019 03:05

Slider - no padding

1f385f8

random prettier issue

51dc003

Add README, artwork and icon

ffca721

mbrookes force-pushed the framer branch from fbd167e to ffca721 Compare October 31, 2019 23:36

oliviertassinari reviewed Nov 1, 2019

View reviewed changes

mbrookes added 5 commits November 1, 2019 12:53

Update artwork

36d3887

[ListItem] Remove secondary icon

31450c1

[TextField] Add missing boolean defaults

c4a7758

[List] Add default for dense

a698e51

[MediaCard] Swap picsum for unsplash

0cd4422

mbrookes added 5 commits November 1, 2019 18:08

ImageOptim

fb9894b

Merge branch 'master' into framer

998020c

yarn after marging master

4ab3d04

prettier

9daf3d5

Update ThemeProvider

ba75430

mbrookes added 3 commits November 2, 2019 20:53

Update Slider to add

76d0aa8

Pre-publish

1910b2d

Publish

4a887b6

mbrookes added the framer label Nov 6, 2019

mbrookes merged commit 6f7318c into mui:master Nov 6, 2019

snyk-bot mentioned this pull request Jan 7, 2020

[Snyk] Upgrade @material-ui/core from 4.4.0 to 4.8.2 srdjan-19/rent-a-car-service#3

Open

rostislavbobo mentioned this pull request Jan 18, 2020

[SwitchBase] Ignores FormControl disabled state #19288

Closed

2 tasks

snyk-bot mentioned this pull request Feb 15, 2020

[Snyk] Upgrade @material-ui/core from 4.3.1 to 4.9.0 aubreyyan/1f5374286c#17

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Framer X wrapper components #17797

Add Framer X wrapper components #17797

mbrookes commented Oct 8, 2019

mui-pr-bot commented Oct 8, 2019 •

edited

Loading

eps1lon left a comment

oliviertassinari Oct 9, 2019

eps1lon Oct 9, 2019

oliviertassinari Oct 9, 2019 •

edited

Loading

oliviertassinari Nov 1, 2019

mbrookes Nov 1, 2019 •

edited

Loading

oliviertassinari Nov 1, 2019

mbrookes Nov 1, 2019

mbrookes commented Nov 1, 2019 •

edited

Loading

oliviertassinari commented Nov 6, 2019

mbrookes commented Nov 6, 2019

oliviertassinari commented Nov 6, 2019

mbrookes commented Nov 6, 2019

Add Framer X wrapper components #17797

Add Framer X wrapper components #17797

Conversation

mbrookes commented Oct 8, 2019

mui-pr-bot commented Oct 8, 2019 • edited Loading

eps1lon left a comment

Choose a reason for hiding this comment

oliviertassinari Oct 9, 2019

Choose a reason for hiding this comment

eps1lon Oct 9, 2019

Choose a reason for hiding this comment

oliviertassinari Oct 9, 2019 • edited Loading

Choose a reason for hiding this comment

oliviertassinari Nov 1, 2019

Choose a reason for hiding this comment

mbrookes Nov 1, 2019 • edited Loading

Choose a reason for hiding this comment

oliviertassinari Nov 1, 2019

Choose a reason for hiding this comment

mbrookes Nov 1, 2019

Choose a reason for hiding this comment

mbrookes commented Nov 1, 2019 • edited Loading

oliviertassinari commented Nov 6, 2019

mbrookes commented Nov 6, 2019

oliviertassinari commented Nov 6, 2019

mbrookes commented Nov 6, 2019

mui-pr-bot commented Oct 8, 2019 •

edited

Loading

oliviertassinari Oct 9, 2019 •

edited

Loading

mbrookes Nov 1, 2019 •

edited

Loading

mbrookes commented Nov 1, 2019 •

edited

Loading