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

[Skeleton] Use span element for text variant #19241

Closed
wants to merge 4 commits into from
Closed

[Skeleton] Use span element for text variant #19241

wants to merge 4 commits into from

Conversation

ximex
Copy link

@ximex ximex commented Jan 15, 2020 •
edited by oliviertassinari
Loading

fix #19210

use as default tag to prevent error log if Skeleto text is used in inline html tags like

@ximex
fix #19210 use <span> as default tag to prevent error log if Skeleton…
8e406e7 
… text is used in inline html tags like <p>
@oliviertassinari oliviertassinari added the component: skeleton This is the name of the generic UI component, not the React module! label Jan 15, 2020
@oliviertassinari oliviertassinari changed the title use <span> for Skeleton text [Skeleton] Use span element for text variant Jan 15, 2020
@mui-pr-bot
Copy link

mui-pr-bot commented Jan 15, 2020 •
edited
Loading

Details of bundle changes.

Comparing: 341d0f3...c4547fd

bundle Size Change Size Gzip Change Gzip
@material-ui/lab ▲ +47 B (+0.03% ) 184 kB ▲ +27 B (+0.05% ) 55.1 kB
Skeleton ▲ +47 B (+0.07% ) 63.1 kB ▲ +23 B (+0.12% ) 20 kB
@material-ui/core -- 361 kB -- 98.7 kB
@material-ui/core[umd] -- 317 kB -- 91.9 kB
@material-ui/styles -- 51.2 kB -- 15.4 kB
@material-ui/system -- 14.8 kB -- 4.07 kB
Alert -- 83.9 kB -- 26.3 kB
AlertTitle -- 64.3 kB -- 20.2 kB
AppBar -- 64.1 kB -- 20.1 kB
Autocomplete -- 131 kB -- 41.2 kB
Avatar -- 65.4 kB -- 20.6 kB
AvatarGroup -- 62.4 kB -- 19.6 kB
Backdrop -- 68 kB -- 21 kB
Badge -- 65.4 kB -- 20.4 kB
BottomNavigation -- 62.5 kB -- 19.6 kB
BottomNavigationAction -- 75.7 kB -- 23.9 kB
Box -- 71 kB -- 21.7 kB
Breadcrumbs -- 68.1 kB -- 21.4 kB
Button -- 79.9 kB -- 24.5 kB
ButtonBase -- 74.2 kB -- 23.3 kB
ButtonGroup -- 83.4 kB -- 25.5 kB
Card -- 63 kB -- 19.7 kB
CardActionArea -- 75.3 kB -- 23.7 kB
CardActions -- 62.2 kB -- 19.5 kB
CardContent -- 62.1 kB -- 19.4 kB
CardHeader -- 65.2 kB -- 20.5 kB
CardMedia -- 62.5 kB -- 19.7 kB
Checkbox -- 83.2 kB -- 26.3 kB
Chip -- 82.8 kB -- 25.4 kB
CircularProgress -- 64.2 kB -- 20.3 kB
ClickAwayListener -- 3.91 kB -- 1.55 kB
Collapse -- 68.2 kB -- 21.1 kB
colorManipulator -- 3.88 kB -- 1.52 kB
Container -- 63.4 kB -- 19.8 kB
CssBaseline -- 57.7 kB -- 18.1 kB
Dialog -- 83.2 kB -- 25.9 kB
DialogActions -- 62.2 kB -- 19.5 kB
DialogContent -- 62.3 kB -- 19.5 kB
DialogContentText -- 64.2 kB -- 20.2 kB
DialogTitle -- 64.4 kB -- 20.2 kB
Divider -- 62.7 kB -- 19.7 kB
docs.landing -- 51 kB -- 13.5 kB
docs.main -- 617 kB -- 196 kB
Drawer -- 85 kB -- 25.8 kB
ExpansionPanel -- 72.5 kB -- 22.7 kB
ExpansionPanelActions -- 62.2 kB -- 19.5 kB
ExpansionPanelDetails -- 62.1 kB -- 19.4 kB
ExpansionPanelSummary -- 78.3 kB -- 24.7 kB
Fab -- 77 kB -- 24 kB
Fade -- 23.6 kB -- 8 kB
FilledInput -- 73.7 kB -- 22.9 kB
FormControl -- 64.5 kB -- 20.1 kB
FormControlLabel -- 65.6 kB -- 20.6 kB
FormGroup -- 62.1 kB -- 19.5 kB
FormHelperText -- 63.5 kB -- 20 kB
FormLabel -- 63.6 kB -- 19.7 kB
Grid -- 65.2 kB -- 20.4 kB
GridList -- 62.6 kB -- 19.7 kB
GridListTile -- 63.9 kB -- 20 kB
GridListTileBar -- 63.3 kB -- 19.9 kB
Grow -- 24.2 kB -- 8.21 kB
Hidden -- 66.1 kB -- 20.7 kB
Icon -- 62.9 kB -- 19.7 kB
IconButton -- 76.3 kB -- 23.8 kB
Input -- 72.6 kB -- 22.7 kB
InputAdornment -- 65.2 kB -- 20.5 kB
InputBase -- 70.8 kB -- 22.2 kB
InputLabel -- 65.5 kB -- 20.2 kB
LinearProgress -- 65.4 kB -- 20.5 kB
Link -- 66.7 kB -- 21.1 kB
List -- 62.5 kB -- 19.5 kB
ListItem -- 77.3 kB -- 24.2 kB
ListItemAvatar -- 62.2 kB -- 19.5 kB
ListItemIcon -- 62.3 kB -- 19.5 kB
ListItemSecondaryAction -- 62.1 kB -- 19.5 kB
ListItemText -- 65.1 kB -- 20.4 kB
ListSubheader -- 62.9 kB -- 19.8 kB
Menu -- 88.9 kB -- 27.4 kB
MenuItem -- 78.4 kB -- 24.5 kB
MenuList -- 66.2 kB -- 20.7 kB
MobileStepper -- 68 kB -- 21.3 kB
Modal -- 14.5 kB -- 5.05 kB
NativeSelect -- 77 kB -- 24.3 kB
NoSsr -- 2.19 kB -- 1.04 kB
OutlinedInput -- 74.1 kB -- 23.1 kB
Paper -- 62.5 kB -- 19.5 kB
Popover -- 83.3 kB -- 25.8 kB
Popper -- 28.8 kB -- 10.3 kB
Portal -- 2.92 kB -- 1.3 kB
Radio -- 84.3 kB -- 26.6 kB
RadioGroup -- 64.6 kB -- 20 kB
Rating -- 70.6 kB -- 22.7 kB
RootRef -- 4.24 kB -- 1.64 kB
Select -- 116 kB -- 34.4 kB
Slide -- 25.6 kB -- 8.73 kB
Slider -- 76.8 kB -- 24.3 kB
Snackbar -- 75.5 kB -- 23.6 kB
SnackbarContent -- 63.7 kB -- 20.1 kB
SpeedDial -- 86.4 kB -- 27.2 kB
SpeedDialAction -- 118 kB -- 37.5 kB
SpeedDialIcon -- 64.7 kB -- 20.3 kB
Step -- 62.8 kB -- 19.7 kB
StepButton -- 82.5 kB -- 26.1 kB
StepConnector -- 62.8 kB -- 19.8 kB
StepContent -- 69.3 kB -- 21.7 kB
StepIcon -- 64.8 kB -- 20.2 kB
StepLabel -- 68.7 kB -- 21.7 kB
Stepper -- 65 kB -- 20.5 kB
styles/createMuiTheme -- 16.6 kB -- 5.83 kB
SvgIcon -- 63.2 kB -- 19.8 kB
SwipeableDrawer -- 92.4 kB -- 28.9 kB
Switch -- 82.4 kB -- 26 kB
Tab -- 76.5 kB -- 24.2 kB
Table -- 62.7 kB -- 19.7 kB
TableBody -- 62.2 kB -- 19.5 kB
TableCell -- 64.2 kB -- 20.2 kB
TableContainer -- 62.1 kB -- 19.4 kB
TableFooter -- 62.2 kB -- 19.5 kB
TableHead -- 62.2 kB -- 19.5 kB
TablePagination -- 143 kB -- 41.8 kB
TableRow -- 62.6 kB -- 19.6 kB
TableSortLabel -- 77.6 kB -- 24.4 kB
Tabs -- 85.8 kB -- 27.2 kB
TextareaAutosize -- 5.12 kB -- 2.14 kB
TextField -- 125 kB -- 36.5 kB
ToggleButton -- 76.3 kB -- 24.2 kB
ToggleButtonGroup -- 63.3 kB -- 19.9 kB
Toolbar -- 62.5 kB -- 19.6 kB
Tooltip -- 102 kB -- 32.3 kB
TreeItem -- 74.1 kB -- 23.5 kB
TreeView -- 66.8 kB -- 21 kB
Typography -- 63.8 kB -- 20 kB
useAutocomplete -- 14.4 kB -- 5.24 kB
useMediaQuery -- 2.51 kB -- 1.06 kB
Zoom -- 23.6 kB -- 8.12 kB

Generated by 🚫 dangerJS against c4547fd

oliviertassinari
oliviertassinari reviewed Jan 15, 2020
View reviewed changes
packages/material-ui-lab/src/Skeleton/Skeleton.test.js Outdated
refInstanceof: window.HTMLSpanElement,
}));

describeConformance(<Skeleton variant="text" />, () => ({
Copy link
Member

@oliviertassinari oliviertassinari Jan 15, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

Let's use a single describeConformance. They would be too much duplication otherwise.

Copy link
Author

Choose a reason for hiding this comment

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

so only the first one without a variant?
what is the error of the broken check? i don't get it

Copy link
Member

Choose a reason for hiding this comment

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

One with the default props should great.

Copy link
Member

Choose a reason for hiding this comment

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

We can have a small dedicated test instead.

Copy link
Author

Choose a reason for hiding this comment

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

ok if i run yarn docs:api the docs will get updated. but than the default value is messed up

Copy link
Member

@oliviertassinari oliviertassinari Jan 16, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

What do you mean by "messed up", like more accurate?

In this case, always using span sounds better, which means giving less weight to the div vs span semantic in the tradeoff, considering the dimension negligible: https://stackoverflow.com/questions/2961889/is-there-a-semantic-difference-spans-and-divs/2961920.

@oliviertassinari oliviertassinari added the new feature New feature or request label Jan 16, 2020
@oliviertassinari oliviertassinari mentioned this pull request Jan 17, 2020
Merged
@oliviertassinari
Copy link
Member

oliviertassinari commented Jan 17, 2020 •
edited
Loading

I can't push commits on your branch. I have continued the changes in #19278. Thank you raising the issue and putting a solution in motion

@hzhz hzhz mentioned this pull request Jul 5, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@oliviertassinari oliviertassinari oliviertassinari left review comments

Assignees
No one assigned
Labels
component: skeleton This is the name of the generic UI component, not the React module! new feature New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Skeleton provides error in <p> tags
3 participants
@ximex @mui-pr-bot @oliviertassinari