Skip to content

Remove compact prop from DataTable #1189 #1386

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

Merged
merged 5 commits into from
May 17, 2018
Merged

Remove compact prop from DataTable #1189 #1386

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4d3ece2
Improve documentation: Usage with webpack #1182
Nov 21, 2017
97a3d3e
Renames `React Design System` as `Design System React`
Nov 21, 2017
547e626
Merge branch 'master' of https://github.com/dennismphil/design-system…
dennismphil Nov 21, 2017
eb560a0
Merge remote-tracking branch 'upstream/master'
dennismphil May 17, 2018
8f8a75d
Remove compact prop from DataTable #1189
dennismphil May 17, 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: 1 addition & 8 deletions components/component-docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3083,13 +3083,6 @@
"required": false,
"description": "A variant which adds border to the vertical columns."
},
"compact": {
"type": {
"name": "bool"
},
"required": false,
"description": "A variant which decreases padding and allows more items and columns to be viewed."
},
"id": {
"type": {
"name": "string"
Expand Down Expand Up @@ -11654,4 +11647,4 @@
"SLDS-component-path": "/components/slider",
"dependencies": []
}
}
}
12 changes: 0 additions & 12 deletions components/data-table/__examples__/basic.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,18 +133,6 @@ const Example = createReactClass({
>
{columns}
</DataTable>

<h3 className="slds-text-heading--medium slds-m-vertical--medium">
Compact
</h3>

<DataTable
compact
items={this.state.items}
id="DataTableExample-compact"
>
{columns}
</DataTable>
</div>
</IconSettings>
);
Expand Down
99 changes: 0 additions & 99 deletions components/data-table/__tests__/__snapshots__/data-table.snapshot-test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -556,104 +556,5 @@ exports[`DataTable Basic HTML Snapshot 1`] = `
</tr>
</tbody>
</table>
<h3 class=\\"slds-text-heading--medium slds-m-vertical--medium\\">Compact</h3>
<table class=\\"slds-table slds-table--compact slds-table--bordered slds-table--cell-buffer\\" id=\\"DataTableExample-compact\\">
<thead>
<tr class=\\"slds-text-title--caps\\">
<th class=\\"\\" focusable=\\"false\\" scope=\\"col\\">
<div class=\\"slds-truncate\\">Opportunity Name</div>
</th>
<th class=\\"\\" focusable=\\"false\\" scope=\\"col\\">
<div class=\\"slds-truncate\\">Account Name</div>
</th>
<th class=\\"\\" focusable=\\"false\\" scope=\\"col\\">
<div class=\\"slds-truncate\\">Close Date</div>
</th>
<th class=\\"\\" focusable=\\"false\\" scope=\\"col\\">
<div class=\\"slds-truncate\\">Stage</div>
</th>
<th class=\\"\\" focusable=\\"false\\" scope=\\"col\\">
<div class=\\"slds-truncate\\">Confidence</div>
</th>
<th class=\\"\\" focusable=\\"false\\" scope=\\"col\\">
<div class=\\"slds-truncate\\">Amount</div>
</th>
<th class=\\"\\" focusable=\\"false\\" scope=\\"col\\">
<div class=\\"slds-truncate\\">Contact</div>
</th>
</tr>
</thead>
<tbody>
<tr class=\\"\\">
<td>
<div class=\\"\\" title=\\"Cloudhub\\"><a href=\\"javascript:void(0);\\">Cloudhub</a></div>
</td>
<td>
<div class=\\"\\" title=\\"Cloudhub\\">Cloudhub</div>
</td>
<td>
<div class=\\"\\" title=\\"4/14/2015\\">4/14/2015</div>
</td>
<td>
<div class=\\"\\" title=\\"Prospecting\\">Prospecting</div>
</td>
<td>
<div class=\\"\\" title=\\"20%\\">20%</div>
</td>
<td>
<div class=\\"\\" title=\\"$25k\\">$25k</div>
</td>
<td>
<div class=\\"\\" title=\\"[email protected]\\"><a href=\\"javascript:void(0);\\">[email protected]</a></div>
</td>
</tr>
<tr class=\\"\\">
<td>
<div class=\\"\\" title=\\"Cloudhub + Anypoint Connectors\\"><a href=\\"javascript:void(0);\\">Cloudhub + Anypoint Connectors</a></div>
</td>
<td>
<div class=\\"\\" title=\\"Cloudhub\\">Cloudhub</div>
</td>
<td>
<div class=\\"\\" title=\\"4/14/2015\\">4/14/2015</div>
</td>
<td>
<div class=\\"\\" title=\\"Prospecting\\">Prospecting</div>
</td>
<td>
<div class=\\"\\" title=\\"20%\\">20%</div>
</td>
<td>
<div class=\\"\\" title=\\"$25k\\">$25k</div>
</td>
<td>
<div class=\\"\\" title=\\"[email protected]\\"><a href=\\"javascript:void(0);\\">[email protected]</a></div>
</td>
</tr>
<tr class=\\"\\">
<td>
<div class=\\"\\" title=\\"Cloudhub\\"><a href=\\"javascript:void(0);\\">Cloudhub</a></div>
</td>
<td>
<div class=\\"\\" title=\\"Cloudhub\\">Cloudhub</div>
</td>
<td>
<div class=\\"\\" title=\\"4/14/2015\\">4/14/2015</div>
</td>
<td>
<div class=\\"\\" title=\\"Prospecting\\">Prospecting</div>
</td>
<td>
<div class=\\"\\" title=\\"20%\\">20%</div>
</td>
<td>
<div class=\\"\\" title=\\"$25k\\">$25k</div>
</td>
<td>
<div class=\\"\\" title=\\"[email protected]\\"><a href=\\"javascript:void(0);\\">[email protected]</a></div>
</td>
</tr>
</tbody>
</table>
</div>"
`;
8 changes: 8 additions & 0 deletions components/data-table/check-props.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,14 @@ if (process.env.NODE_ENV !== 'production') {
checkProps = function (COMPONENT, props) {
/* eslint-disable max-len */
// Deprecated and changed to another property
deprecatedProperty(
COMPONENT,
props.compact,
'compact',
undefined,
'compact has been deprecated as non-compact data tables do not exist in SLDS'
);

deprecatedProperty(COMPONENT, props.collection, 'collection', 'items');
deprecatedProperty(COMPONENT, props.onSelect, 'onSelect', 'onChange');
deprecatedProperty(COMPONENT, props.onDeselect, 'onDeselect', 'onChange');
Expand Down
5 changes: 0 additions & 5 deletions components/data-table/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,10 +118,6 @@ const DataTable = createReactClass({
* A variant which adds border to the vertical columns.
*/
columnBordered: PropTypes.bool,
/**
* A variant which decreases padding and allows more items and columns to be viewed.
*/
compact: PropTypes.bool,
/**
* A unique ID is needed in order to support keyboard navigation and ARIA support.
*/
Expand Down Expand Up @@ -261,7 +257,6 @@ const DataTable = createReactClass({
className={classNames(
'slds-table',
{
'slds-table--compact': this.props.compact,
'slds-table--fixed-layout': this.props.fixedLayout,
'slds-table--bordered': !this.props.unborderedRow,
'slds-table--cell-buffer':
Expand Down