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

[TreeView] Migrate TreeItem to emotion #25835

Merged
merged 12 commits into from
Apr 27, 2021
Merged

[TreeView] Migrate TreeItem to emotion #25835

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
0f8a6b4
migrate TreeItem to emotion
siriwatknp Apr 19, 2021
da2a7b2
run prettier and lint
siriwatknp Apr 19, 2021
e488cb8
bring back api docs
siriwatknp Apr 19, 2021
12ca717
styled label and iconContainer inside TreeItemContent for flat css ov…
siriwatknp Apr 19, 2021
dda4834
fix styling in demos
siriwatknp Apr 19, 2021
ce96f22
remove validator
siriwatknp Apr 20, 2021
ecf66ed
add sx to types
siriwatknp Apr 20, 2021
187bc83
bring back default prop
siriwatknp Apr 20, 2021
9148b5f
remove deepmerge & fix pseudo styling
siriwatknp Apr 22, 2021
9c94521
use nested styles
siriwatknp Apr 23, 2021
8fe61aa
fix as suggested
siriwatknp Apr 25, 2021
a3234ed
sort asc
oliviertassinari Apr 25, 2021
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
3 changes: 2 additions & 1 deletion docs/pages/api-docs/tree-item.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"icon": { "type": { "name": "node" } },
"label": { "type": { "name": "node" } },
"onFocus": { "type": { "name": "custom", "description": "unsupportedProp" } },
"sx": { "type": { "name": "object" } },
"TransitionComponent": { "type": { "name": "elementType" }, "default": "Collapse" },
"TransitionProps": { "type": { "name": "object" } }
},
Expand Down Expand Up @@ -44,6 +45,6 @@
"filename": "/packages/material-ui-lab/src/TreeItem/TreeItem.js",
"inheritance": null,
"demos": "<ul><li><a href=\"/components/tree-view/\">Tree View</a></li></ul>",
"styledComponent": false,
"styledComponent": true,
"cssComponent": false
}
7 changes: 6 additions & 1 deletion docs/src/pages/components/tree-view/BarTreeView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ const useContentStyles = makeStyles((theme) => ({

const CustomContent = React.forwardRef(function CustomContent(props, ref) {
const {
className,
classes,
label,
nodeId,
Expand Down Expand Up @@ -116,7 +117,7 @@ const CustomContent = React.forwardRef(function CustomContent(props, ref) {
return (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
<div
className={clsx(classes.root, contentClasses.root, {
className={clsx(className, classes.root, contentClasses.root, {
[contentClasses.expanded]: expanded,
[contentClasses.selected]: selected,
[contentClasses.focused]: focused,
Expand All @@ -140,6 +141,10 @@ CustomContent.propTypes = {
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object.isRequired,
/**
* className applied to the root element.
*/
className: PropTypes.string,
/**
* The icon to display next to the tree node's label. Either a parent or end icon.
*/
Expand Down
3 changes: 2 additions & 1 deletion docs/src/pages/components/tree-view/BarTreeView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ const CustomContent = React.forwardRef(function CustomContent(
ref,
) {
const {
className,
classes,
label,
nodeId,
Expand Down Expand Up @@ -124,7 +125,7 @@ const CustomContent = React.forwardRef(function CustomContent(
return (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
<div
className={clsx(classes.root, contentClasses.root, {
className={clsx(className, classes.root, contentClasses.root, {
[contentClasses.expanded]: expanded,
[contentClasses.selected]: selected,
[contentClasses.focused]: focused,
Expand Down
9 changes: 5 additions & 4 deletions docs/src/pages/components/tree-view/GmailTreeView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@ const useTreeItemStyles = makeStyles((theme) => ({
backgroundColor: `var(--tree-view-bg-color, ${theme.palette.action.selected})`,
color: 'var(--tree-view-color)',
},
'& $label': {
Copy link
Member

Choose a reason for hiding this comment

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

Should we use the global class here? For example:

Suggested change
'& $label': {
'& .MuiTreeItem-label': {

Copy link
Member

Choose a reason for hiding this comment

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

Or even better:

Suggested change
'& $label': {
'& .${treeItemClasses.label}': {

Copy link
Member Author

Choose a reason for hiding this comment

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

@mnajdova similar to @oliviertassinari suggestion, but there are many places still using $ in this file so I think it might be better to update the whole demo in another PR. is that okay?

Copy link
Member

Choose a reason for hiding this comment

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

ok, got it, sorry missed previous question I guess :)

fontWeight: 'inherit',
color: 'inherit',
},
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved
},
group: {
marginLeft: 0,
Expand All @@ -44,10 +48,7 @@ const useTreeItemStyles = makeStyles((theme) => ({
expanded: {},
selected: {},
focused: {},
label: {
fontWeight: 'inherit',
color: 'inherit',
},
label: {},
labelRoot: {
display: 'flex',
alignItems: 'center',
Expand Down
9 changes: 5 additions & 4 deletions docs/src/pages/components/tree-view/GmailTreeView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,10 @@ const useTreeItemStyles = makeStyles((theme: Theme) =>
backgroundColor: `var(--tree-view-bg-color, ${theme.palette.action.selected})`,
color: 'var(--tree-view-color)',
},
'& $label': {
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved
fontWeight: 'inherit',
color: 'inherit',
},
},
group: {
marginLeft: 0,
Expand All @@ -60,10 +64,7 @@ const useTreeItemStyles = makeStyles((theme: Theme) =>
expanded: {},
selected: {},
focused: {},
label: {
fontWeight: 'inherit',
color: 'inherit',
},
label: {},
labelRoot: {
display: 'flex',
alignItems: 'center',
Expand Down
7 changes: 6 additions & 1 deletion docs/src/pages/components/tree-view/IconExpansionTreeView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const useStyles = makeStyles({
const CustomContent = React.forwardRef(function CustomContent(props, ref) {
const {
classes,
className,
label,
nodeId,
icon: iconProp,
Expand Down Expand Up @@ -53,7 +54,7 @@ const CustomContent = React.forwardRef(function CustomContent(props, ref) {
return (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
<div
className={clsx(classes.root, {
className={clsx(className, classes.root, {
[classes.expanded]: expanded,
[classes.selected]: selected,
[classes.focused]: focused,
Expand Down Expand Up @@ -82,6 +83,10 @@ CustomContent.propTypes = {
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object.isRequired,
/**
* className applied to the root element.
*/
className: PropTypes.string,
/**
* The icon to display next to the tree node's label. Either a parent or end icon.
*/
Expand Down
3 changes: 2 additions & 1 deletion docs/src/pages/components/tree-view/IconExpansionTreeView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const CustomContent = React.forwardRef(function CustomContent(
) {
const {
classes,
className,
label,
nodeId,
icon: iconProp,
Expand Down Expand Up @@ -63,7 +64,7 @@ const CustomContent = React.forwardRef(function CustomContent(
return (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
<div
className={clsx(classes.root, {
className={clsx(className, classes.root, {
[classes.expanded]: expanded,
[classes.selected]: selected,
[classes.focused]: focused,
Expand Down
1 change: 1 addition & 0 deletions docs/translations/api-docs/tree-item/tree-item.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"label": "The tree node label.",
"nodeId": "The id of the node.",
"onFocus": "This prop isn&#39;t supported. Use the <code>onNodeFocus</code> callback on the tree if you need to monitor a node&#39;s focus.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/basics/#the-sx-prop\">`sx` page</a> for more details.",
"TransitionComponent": "The component used for the transition. <a href=\"/components/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component.",
"TransitionProps": "Props applied to the transition element. By default, the element is based on this <a href=\"http://reactcommunity.org/react-transition-group/transition\"><code>Transition</code></a> component."
},
Expand Down
7 changes: 6 additions & 1 deletion packages/material-ui-lab/src/TreeItem/TreeItem.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import * as React from 'react';
import { InternalStandardProps as StandardProps } from '@material-ui/core';
import { InternalStandardProps as StandardProps, Theme } from '@material-ui/core';
import { TransitionProps } from '@material-ui/core/transitions';
import { SxProps } from '@material-ui/system';
import { TreeItemContentProps } from './TreeItemContent';

export interface TreeItemProps
Expand Down Expand Up @@ -85,6 +86,10 @@ export interface TreeItemProps
* By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition) component.
*/
TransitionProps?: TransitionProps;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
}

export type TreeItemClassKey = keyof NonNullable<TreeItemProps['classes']>;
Expand Down
Loading