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

[Table] Padding feature #12415

Merged
merged 4 commits into from
Aug 7, 2018
Merged

[Table] Padding feature #12415

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c3d47a2
Added table padding feature.
aseem191 Aug 5, 2018
ea4f930
Fixed style errors
aseem191 Aug 6, 2018
96d359a
Fixed undefined context padding.
aseem191 Aug 6, 2018
53a528d
fix(www): let's merge
oliviertassinari Aug 7, 2018
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
9 changes: 8 additions & 1 deletion packages/material-ui/src/Table/Table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@ class Table extends React.Component {
getChildContext() {
// eslint-disable-line class-methods-use-this
return {
table: {},
table: {
padding: this.props.padding,
},
};
}

Expand Down Expand Up @@ -48,10 +50,15 @@ Table.propTypes = {
* Either a string to use a DOM element or a component.
*/
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
/**
* Allows TableCells to inherit padding of the Table.
*/
padding: PropTypes.oneOf(['default', 'checkbox', 'dense', 'none']),
};

Table.defaultProps = {
component: 'table',
padding: 'default',
};

Table.childContextTypes = {
Expand Down
6 changes: 4 additions & 2 deletions packages/material-ui/src/Table/Table.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ describe('<Table />', () => {
it('should spread custom props on the root node', () => {
const wrapper = shallow(<Table data-my-prop="woofTable">foo</Table>);
assert.strictEqual(
wrapper.prop('data-my-prop'),
wrapper.props()['data-my-prop'],
'woofTable',
'custom prop should be woofTable',
);
Expand All @@ -45,6 +45,8 @@ describe('<Table />', () => {

it('should define table in the child context', () => {
const wrapper = shallow(<Table>foo</Table>);
assert.deepStrictEqual(wrapper.instance().getChildContext().table, {});
assert.deepStrictEqual(wrapper.instance().getChildContext().table, {
padding: 'default',
});
});
});
6 changes: 3 additions & 3 deletions packages/material-ui/src/TableBody/TableBody.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ class TableBody extends React.Component {
getChildContext() {
// eslint-disable-line class-methods-use-this
return {
table: {
body: true,
tablelvl2: {
variant: 'body',
},
};
}
Expand Down Expand Up @@ -53,7 +53,7 @@ TableBody.defaultProps = {
};

TableBody.childContextTypes = {
table: PropTypes.object,
tablelvl2: PropTypes.object,
};

export default withStyles(styles, { name: 'MuiTableBody' })(TableBody);
2 changes: 1 addition & 1 deletion packages/material-ui/src/TableBody/TableBody.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,6 @@ describe('<TableBody />', () => {

it('should define table.body in the child context', () => {
const wrapper = shallow(<TableBody>foo</TableBody>);
assert.strictEqual(wrapper.instance().getChildContext().table.body, true);
assert.strictEqual(wrapper.instance().getChildContext().tablelvl2.variant, 'body');
});
});
23 changes: 14 additions & 9 deletions packages/material-ui/src/TableCell/TableCell.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,30 +75,34 @@ function TableCell(props, context) {
component,
sortDirection,
numeric,
padding,
padding: paddingProp,
scope: scopeProp,
variant,
...other
} = props;
const { table } = context;

const { table, tablelvl2 } = context;
let Component;
if (component) {
Component = component;
} else {
Component = table && table.head ? 'th' : 'td';
Component = tablelvl2 && tablelvl2.variant === 'head' ? 'th' : 'td';
}

let scope = scopeProp;
if (!scope && table && table.head) {
if (!scope && tablelvl2 && tablelvl2.variant === 'head') {
scope = 'col';
}
const padding = paddingProp || (table && table.padding ? table.padding : 'default');

const className = classNames(
classes.root,
{
[classes.head]: variant ? variant === 'head' : table && table.head,
[classes.body]: variant ? variant === 'body' : table && table.body,
[classes.footer]: variant ? variant === 'footer' : table && table.footer,
[classes.head]: variant ? variant === 'head' : tablelvl2 && tablelvl2.variant === 'head',
[classes.body]: variant ? variant === 'body' : tablelvl2 && tablelvl2.variant === 'body',
[classes.footer]: variant
? variant === 'footer'
: tablelvl2 && tablelvl2.variant === 'footer',
[classes.numeric]: numeric,
[classes[`padding${capitalize(padding)}`]]: padding !== 'default',
},
Expand Down Expand Up @@ -142,6 +146,7 @@ TableCell.propTypes = {
numeric: PropTypes.bool,
/**
* Sets the padding applied to the cell.
* By default, the Table parent component set the value.
*/
padding: PropTypes.oneOf(['default', 'checkbox', 'dense', 'none']),
/**
Expand All @@ -161,11 +166,11 @@ TableCell.propTypes = {

TableCell.defaultProps = {
numeric: false,
padding: 'default',
};

TableCell.contextTypes = {
table: PropTypes.object.isRequired,
table: PropTypes.object,
tablelvl2: PropTypes.object,
};

export default withStyles(styles, { name: 'MuiTableCell' })(TableCell);
16 changes: 8 additions & 8 deletions packages/material-ui/src/TableCell/TableCell.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ describe('<TableCell />', () => {

it('should render a th with the head class when in the context of a table head', () => {
const wrapper = shallow(<TableCell />);
wrapper.setContext({ table: { head: true } });
wrapper.setContext({ tablelvl2: { variant: 'head' } });
assert.strictEqual(wrapper.name(), 'th');
assert.strictEqual(wrapper.hasClass(classes.root), true);
assert.strictEqual(wrapper.hasClass(classes.head), true, 'should have the head class');
Expand All @@ -75,13 +75,13 @@ describe('<TableCell />', () => {

it('should render specified scope attribute even when in the context of a table head', () => {
const wrapper = shallow(<TableCell scope="row" />);
wrapper.setContext({ table: { head: true } });
wrapper.setContext({ tablelvl2: { variant: 'head' } });
assert.strictEqual(wrapper.props().scope, 'row', 'should have the specified scope attribute');
});

it('should render a th with the footer class when in the context of a table footer', () => {
const wrapper = shallow(<TableCell />);
wrapper.setContext({ table: { footer: true } });
wrapper.setContext({ tablelvl2: { variant: 'footer' } });
assert.strictEqual(wrapper.name(), 'td');
assert.strictEqual(wrapper.hasClass(classes.root), true);
assert.strictEqual(wrapper.hasClass(classes.footer), true, 'should have the footer class');
Expand All @@ -95,33 +95,33 @@ describe('<TableCell />', () => {

it('should render with the footer class when in the context of a table footer', () => {
const wrapper = shallow(<TableCell />);
wrapper.setContext({ table: { footer: true } });
wrapper.setContext({ tablelvl2: { variant: 'footer' } });
assert.strictEqual(wrapper.hasClass(classes.root), true);
assert.strictEqual(wrapper.hasClass(classes.footer), true, 'should have the footer class');
});

it('should render with the head class when variant is head, overriding context', () => {
const wrapper = shallow(<TableCell variant="head" />);
wrapper.setContext({ table: { footer: true } });
wrapper.setContext({ tablelvl2: { variant: 'footer' } });
assert.strictEqual(wrapper.hasClass(classes.head), true);
assert.strictEqual(wrapper.props().scope, undefined, 'should have the correct scope attribute');
});

it('should render without head class when variant is body, overriding context', () => {
const wrapper = shallow(<TableCell variant="body" />);
wrapper.setContext({ table: { head: true } });
wrapper.setContext({ tablelvl2: { variant: 'head' } });
assert.strictEqual(wrapper.hasClass(classes.head), false);
});

it('should render without footer class when variant is body, overriding context', () => {
const wrapper = shallow(<TableCell variant="body" />);
wrapper.setContext({ table: { footer: true } });
wrapper.setContext({ tablelvl2: { variant: 'footer' } });
assert.strictEqual(wrapper.hasClass(classes.footer), false);
});

it('should render with the footer class when variant is footer, overriding context', () => {
const wrapper = shallow(<TableCell variant="footer" />);
wrapper.setContext({ table: { head: true } });
wrapper.setContext({ tablelvl2: { variant: 'head' } });
assert.strictEqual(wrapper.hasClass(classes.footer), true);
});

Expand Down
6 changes: 3 additions & 3 deletions packages/material-ui/src/TableFooter/TableFooter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ class TableFooter extends React.Component {
getChildContext() {
// eslint-disable-line class-methods-use-this
return {
table: {
footer: true,
tablelvl2: {
variant: 'footer',
},
};
}
Expand Down Expand Up @@ -53,7 +53,7 @@ TableFooter.defaultProps = {
};

TableFooter.childContextTypes = {
table: PropTypes.object,
tablelvl2: PropTypes.object,
};

export default withStyles(styles, { name: 'MuiTableFooter' })(TableFooter);
6 changes: 3 additions & 3 deletions packages/material-ui/src/TableHead/TableHead.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ class TableHead extends React.Component {
getChildContext() {
// eslint-disable-line class-methods-use-this
return {
table: {
head: true,
tablelvl2: {
variant: 'head',
},
};
}
Expand Down Expand Up @@ -53,7 +53,7 @@ TableHead.defaultProps = {
};

TableHead.childContextTypes = {
table: PropTypes.object,
tablelvl2: PropTypes.object,
};

export default withStyles(styles, { name: 'MuiTableHead' })(TableHead);
2 changes: 1 addition & 1 deletion packages/material-ui/src/TableHead/TableHead.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,6 @@ describe('<TableHead />', () => {

it('should define table.head in the child context', () => {
const wrapper = shallow(<TableHead>foo</TableHead>);
assert.strictEqual(wrapper.instance().getChildContext().table.head, true);
assert.strictEqual(wrapper.instance().getChildContext().tablelvl2.variant, 'head');
});
});
20 changes: 10 additions & 10 deletions packages/material-ui/src/TableRow/TableRow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,15 @@ export const styles = theme => ({
: 'rgba(255, 255, 255, 0.14)',
},
},
/* Styles applied to the root element if `context.table` & `selected={true}`. */
/* Styles applied to the root element if `selected={true}`. */
selected: {},
/* Styles applied to the root element if `context.table` & `hover={true}`. */
/* Styles applied to the root element if `hover={true}`. */
hover: {},
/* Styles applied to the root element if `context.table.head`. */
/* Styles applied to the root element if table variant = 'head'. */
head: {
height: 56,
},
/* Styles applied to the root element if `context.table.footer`. */
/* Styles applied to the root element if table variant = 'footer'. */
footer: {
height: 56,
},
Expand All @@ -52,15 +52,15 @@ function TableRow(props, context) {
selected,
...other
} = props;
const { table } = context;
const { tablelvl2 } = context;

const className = classNames(
classes.root,
{
[classes.head]: table && table.head,
[classes.footer]: table && table.footer,
[classes.hover]: table && hover,
[classes.selected]: table && selected,
[classes.head]: tablelvl2 && tablelvl2.variant === 'head',
[classes.footer]: tablelvl2 && tablelvl2.variant === 'footer',
[classes.hover]: hover,
[classes.selected]: selected,
},
classNameProp,
);
Expand Down Expand Up @@ -104,7 +104,7 @@ TableRow.defaultProps = {
};

TableRow.contextTypes = {
table: PropTypes.object,
tablelvl2: PropTypes.object,
};

export default withStyles(styles, { name: 'MuiTableRow' })(TableRow);
4 changes: 2 additions & 2 deletions packages/material-ui/src/TableRow/TableRow.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,14 +47,14 @@ describe('<TableRow />', () => {

it('should render with the head class when in the context of a table head', () => {
const wrapper = shallow(<TableRow />);
wrapper.setContext({ table: { head: true } });
wrapper.setContext({ tablelvl2: { variant: 'head' } });
assert.strictEqual(wrapper.hasClass(classes.root), true);
assert.strictEqual(wrapper.hasClass(classes.head), true, 'should have the head class');
});

it('should render with the footer class when in the context of a table footer', () => {
const wrapper = shallow(<TableRow />);
wrapper.setContext({ table: { footer: true } });
wrapper.setContext({ tablelvl2: { variant: 'footer' } });
assert.strictEqual(wrapper.hasClass(classes.root), true);
assert.strictEqual(wrapper.hasClass(classes.footer), true, 'should have the footer class');
});
Expand Down
2 changes: 1 addition & 1 deletion pages/api/table-cell.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ title: TableCell API
| <span class="prop-name">classes</span> | <span class="prop-type">object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> |   | The component used for the root node. Either a string to use a DOM element or a component. |
| <span class="prop-name">numeric</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, content will align to the right. |
| <span class="prop-name">padding</span> | <span class="prop-type">enum:&nbsp;'default'&nbsp;&#124;<br>&nbsp;'checkbox'&nbsp;&#124;<br>&nbsp;'dense'&nbsp;&#124;<br>&nbsp;'none'<br> | <span class="prop-default">'default'</span> | Sets the padding applied to the cell. |
| <span class="prop-name">padding</span> | <span class="prop-type">enum:&nbsp;'default'&nbsp;&#124;<br>&nbsp;'checkbox'&nbsp;&#124;<br>&nbsp;'dense'&nbsp;&#124;<br>&nbsp;'none'<br> |   | Sets the padding applied to the cell. By default, the Table parent component set the value. |
| <span class="prop-name">scope</span> | <span class="prop-type">string |   | Set scope attribute. |
| <span class="prop-name">sortDirection</span> | <span class="prop-type">enum:&nbsp;'asc'&nbsp;&#124;<br>&nbsp;'desc'&nbsp;&#124;<br>&nbsp;false<br> |   | Set aria-sort direction. |
| <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'head'&nbsp;&#124;<br>&nbsp;'body'&nbsp;&#124;<br>&nbsp;'footer'<br> |   | Specify the cell type. By default, the TableHead, TableBody or TableFooter parent component set the value. |
Expand Down
8 changes: 4 additions & 4 deletions pages/api/table-row.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,10 @@ This property accepts the following keys:
| Name | Description |
|:-----|:------------|
| <span class="prop-name">root</span> | Styles applied to the root element.
| <span class="prop-name">selected</span> | Styles applied to the root element if `context.table` & `selected={true}`.
| <span class="prop-name">hover</span> | Styles applied to the root element if `context.table` & `hover={true}`.
| <span class="prop-name">head</span> | Styles applied to the root element if `context.table.head`.
| <span class="prop-name">footer</span> | Styles applied to the root element if `context.table.footer`.
| <span class="prop-name">selected</span> | Styles applied to the root element if `selected={true}`.
| <span class="prop-name">hover</span> | Styles applied to the root element if `hover={true}`.
| <span class="prop-name">head</span> | Styles applied to the root element if table variant = 'head'.
| <span class="prop-name">footer</span> | Styles applied to the root element if table variant = 'footer'.

Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/TableRow/TableRow.js)
Expand Down
1 change: 1 addition & 0 deletions pages/api/table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ title: Table API
| <span class="prop-name required">children *</span> | <span class="prop-type">node |   | The content of the table, normally `TableHeader` and `TableBody`. |
| <span class="prop-name">classes</span> | <span class="prop-type">object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> | <span class="prop-default">'table'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
| <span class="prop-name">padding</span> | <span class="prop-type">enum:&nbsp;'default'&nbsp;&#124;<br>&nbsp;'checkbox'&nbsp;&#124;<br>&nbsp;'dense'&nbsp;&#124;<br>&nbsp;'none'<br> | <span class="prop-default">'default'</span> | Allows TableCells to inherit padding of the Table. |

Any other properties supplied will be spread to the root element (native element).

Expand Down