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

refactor(table): change the paddings in the expandable content #1598

Merged
merged 12 commits into from Mar 27, 2019
Merged

refactor(table): change the paddings in the expandable content #1598

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
a8e698f
refactor(table): change the paddings in the expandable content
christiemolloy Mar 19, 2019
46fd3b2
update
christiemolloy Mar 22, 2019
6554ae8
fix mc
christiemolloy Mar 22, 2019
3357e1a
updates from cokers review
christiemolloy Mar 25, 2019
6d13e33
update a11y
christiemolloy Mar 25, 2019
75783fd
fix a11y
christiemolloy Mar 25, 2019
c2643aa
update check id
christiemolloy Mar 25, 2019
9684021
fix a11y
christiemolloy Mar 25, 2019
950e6b1
update sizing
christiemolloy Mar 25, 2019
b5f411c
change spacing
christiemolloy Mar 26, 2019
911384f
update wording
christiemolloy Mar 27, 2019
befe394
Merge branch 'master' into iss1507
christiemolloy Mar 27, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 5 additions & 4 deletions src/patternfly/components/Table/docs/table-expandable.md
View file
Open in desktop
Expand Up @@ -6,7 +6,7 @@
<br>
<mark>**All checkbox/action button accessibility and usage requirements apply.**</mark>

Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.pf-c-table__expandable-row-content`.
Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.pf-c-table__expandable-row-content`. For no padding add `.pf-m-no-padding` to `.pf-c-table__expandable-row` > `<td>`

### Accessibility
| Attribute | Applied To | Outcome |
Expand All @@ -23,6 +23,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p

| Class | Applied To | Outcome |
| -- | -- | -- |
| `.pf-c-table__expandable-row` | `<tr>` | Initiates an expandable row |
| `.pf-c-table__expandable-row-content` | `.pf-c-table__expandable-row` > `<td>` > `<div>` | Initiates an expandable row content wrapper. |
| `.pf-m-expanded` | `.pf-c-table__toggle` > `.pf-c-button`, `.pf-c-table__expandable-row` | Modifies for expanded state. |
| `.pf-c-table__expandable-row` | `<tr>` | Initiates an expandable row. |
| `.pf-c-table__expandable-row-content` | `.pf-c-table__expandable-row` > `<td>` > `<div>` | Initiates an expandable row content wrapper. |
| `.pf-m-expanded` | `.pf-c-table__toggle` > `.pf-c-button`, `.pf-c-table__expandable-row` | Modifies for expanded state. |
| `.pf-m-no-padding` | `.pf-c-table__expandable-row` > `<td>` | Modifies the expandable row to have no padding.
18 changes: 9 additions & 9 deletions src/patternfly/components/Table/examples/table-compound-expansion-example.hbs
View file
Open in desktop
Expand Up @@ -57,21 +57,21 @@
{{/table-tr}}

{{#> table-tr table-tr--expandable="true" table-tr--IsExpanded="true"}}
{{#> table-td table-td--attribute='colspan="7"'}}
{{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
{{#> table-nested table--id=(concat table--id '-nested-table-1')}}
{{/table-nested}}
{{/table-td}}
{{/table-tr}}

{{#> table-tr table-tr--expandable="true"}}
{{#> table-td table-td--attribute='colspan="7"'}}
{{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
{{#> table-nested table--id=(concat table--id '-nested-table-2')}}
{{/table-nested}}
{{/table-td}}
{{/table-tr}}

{{#> table-tr table-tr--expandable="true"}}
{{#> table-td table-td--attribute='colspan="7"'}}
{{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
{{#> table-nested table--id=(concat table--id '-nested-table-3')}}
{{/table-nested}}
{{/table-td}}
Expand Down Expand Up @@ -114,21 +114,21 @@
{{/table-tr}}

{{#> table-tr table-tr--expandable="true"}}
{{#> table-td table-td--attribute='colspan="7"'}}
{{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
{{#> table-nested table--id=(concat table--id '-nested-table-4')}}
{{/table-nested}}
{{/table-td}}
{{/table-tr}}

{{#> table-tr table-tr--expandable="true"}}
{{#> table-td table-td--attribute='colspan="7"'}}
{{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
{{#> table-nested table--id=(concat table--id '-nested-table-5')}}
{{/table-nested}}
{{/table-td}}
{{/table-tr}}

{{#> table-tr table-tr--expandable="true"}}
{{#> table-td table-td--attribute='colspan="7"'}}
{{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
{{#> table-nested table--id=(concat table--id '-nested-table-6')}}
{{/table-nested}}
{{/table-td}}
Expand Down Expand Up @@ -171,21 +171,21 @@
{{/table-tr}}

{{#> table-tr table-tr--expandable="true"}}
{{#> table-td table-td--attribute='colspan="7"'}}
{{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
{{#> table-nested table--id=(concat table--id '-nested-table-7')}}
{{/table-nested}}
{{/table-td}}
{{/table-tr}}

{{#> table-tr table-tr--expandable="true"}}
{{#> table-td table-td--attribute='colspan="7"'}}
{{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
{{#> table-nested table--id=(concat table--id '-nested-table-8')}}
{{/table-nested}}
{{/table-td}}
{{/table-tr}}

{{#> table-tr table-tr--expandable="true"}}
{{#> table-td table-td--attribute='colspan="7"'}}
{{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
{{#> table-nested table--id=(concat table--id '-nested-table-9')}}
{{/table-nested}}
{{/table-td}}
Expand Down
92 changes: 85 additions & 7 deletions src/patternfly/components/Table/examples/table-expandable-example.hbs
View file
Open in desktop
Expand Up @@ -47,15 +47,18 @@
{{/table-tr}}

{{#> table-tr table-tr--expandable="true" table-tr--IsExpanded="true"}}
{{#> table-td table-td--attribute=(concat 'colspan="7" id="' table--id '-content1"')}}
<div class="pf-c-table__expandable-row-content">
This content has padding.
</div>
{{#> table-td}}{{/table-td}}
{{#> table-td}}{{/table-td}}
{{#> table-td table-td--attribute=(concat 'colspan="4" id="' table--id '-content1"')}}
{{#> table-expandable-row-content}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{{/table-expandable-row-content}}
{{/table-td}}
{{#> table-td}}{{/table-td}}
{{/table-tr}}
{{/table-tbody}}

{{#> table-tbody table-tbody--modifier="pf-m-expanded"}}
{{#> table-tbody}}
{{#> table-tr}}
{{#> table-td table-td--toggle="true" table-td--button--attribute=(concat 'aria-labelledby="' table--id '-node2 expandable-toggle2" id="expandable-toggle2" aria-label="Details" aria-controls="' table--id '-content2"')}}{{/table-td}}
{{#> table-td table-td--check="true"}}
Expand All @@ -82,9 +85,84 @@
{{/table-td}}
{{/table-tr}}

{{#> table-tr table-tr--expandable="true" table-tr--IsExpanded="true"}}
{{#> table-tr table-tr--expandable="true"}}
{{#> table-td table-td--attribute=(concat 'colspan="7" id="' table--id '-content2"')}}
This content has no padding.
{{#> table-expandable-row-content}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{{/table-expandable-row-content}}
{{/table-td}}
{{/table-tr}}
{{/table-tbody}}


{{#> table-tbody table-tbody--modifier="pf-m-expanded"}}
{{#> table-tr table-tr--expanded="true"}}
{{#> table-td table-td--toggle="true" table-td--button--attribute=(concat 'aria-labelledby="' table--id '-node3 expandable-toggle3" id="expandable-toggle3" aria-label="Details" aria-controls="' table--id '-content3"')}}{{/table-td}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="checkrow3" aria-labelledby="{{concat table--id '-node3'}}" aria-label="Details">
{{/table-td}}
{{#> table-th table-th--data-label="Repository Name"}}
<div>
<div id="{{table--id}}-node3">Node 3</div>
<a href="#">siemur/test-space</a>
</div>
{{/table-th}}
{{#> table-td table-td--data-label="Branches"}}
10
{{/table-td}}
{{#> table-td table-td--data-label="Pull Requests"}}
25
{{/table-td}}
{{#> table-td table-td--data-label="Action"}}
<a href="#">Link 3</a>
{{/table-td}}
{{#> table-td table-td--action="true"}}
{{#> dropdown id=(concat table--id "-dropdown-kebab-right-aligned-3") dropdown--IsActionMenu="true" dropdown-menu--modifier="pf-m-align-right" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}}
{{/dropdown}}
{{/table-td}}
{{/table-tr}}

{{#> table-tr table-tr--expandable="true" table-tr--IsExpanded="true"}}
{{#> table-td table-td--attribute=(concat 'colspan="7" id="' table--id '-content3"')}}
{{#> table-expandable-row-content}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{{/table-expandable-row-content}}
{{/table-td}}
{{/table-tr}}
{{/table-tbody}}

{{#> table-tbody table-tbody--modifier="pf-m-expanded"}}
{{#> table-tr table-tr--expanded="true"}}
{{#> table-td table-td--toggle="true" table-td--button--attribute=(concat 'aria-labelledby="' table--id '-node4 expandable-toggle4" id="expandable-toggle4" aria-label="Details" aria-controls="' table--id '-content4"')}}{{/table-td}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="checkrow4" aria-labelledby="{{concat table--id '-node4'}}" aria-label="Details">
{{/table-td}}
{{#> table-th table-th--data-label="Repository Name"}}
<div>
<div id="{{table--id}}-node4">Node 4</div>
<a href="#">siemur/test-space</a>
</div>
{{/table-th}}
{{#> table-td table-td--data-label="Branches"}}
10
{{/table-td}}
{{#> table-td table-td--data-label="Pull Requests"}}
25
{{/table-td}}
{{#> table-td table-td--data-label="Action"}}
<a href="#">Link 4</a>
{{/table-td}}
{{#> table-td table-td--action="true"}}
{{#> dropdown id=(concat table--id "-dropdown-kebab-right-aligned-4") dropdown--IsActionMenu="true" dropdown-menu--modifier="pf-m-align-right" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}}
{{/dropdown}}
{{/table-td}}
{{/table-tr}}

{{#> table-tr table-tr--expandable="true" table-tr--IsExpanded="true"}}
{{#> table-td table-td--modifier="pf-m-no-padding" table-td--attribute=(concat 'colspan="7" id="' table--id '-content4"')}}
{{#> table-expandable-row-content}}
Expandable row content has no padding.
{{/table-expandable-row-content}}
{{/table-td}}
{{/table-tr}}
{{/table-tbody}}
Expand Down
6 changes: 6 additions & 0 deletions src/patternfly/components/Table/table-expandable-row-content.hbs
View file
Open in desktop
@@ -0,0 +1,6 @@
<div class="pf-c-table__expandable-row-content{{#if table-expandable-row-content--modifier}} {{table-expandable-row-content--modifier}}{{/if}}"
{{#if table-expandable-row-content--attribute}}
{{{table-expandable-row-content--attribute}}}
{{/if}}>
{{> @partial-block}}
</div>
35 changes: 29 additions & 6 deletions src/patternfly/components/Table/table-grid.scss
View file
Open in desktop
Expand Up @@ -54,9 +54,9 @@ $pf-c-table-xs-breakpoint: 380px;
}

--pf-c-table-tr--responsive--nested-table--PaddingTop: var(--pf-global--spacer--xl);
--pf-c-table-tr--responsive--nested-table--PaddingRight: var(--pf-global--spacer--2xl);
--pf-c-table-tr--responsive--nested-table--PaddingRight: var(--pf-global--spacer--lg);
--pf-c-table-tr--responsive--nested-table--PaddingBottom: var(--pf-global--spacer--xl);
--pf-c-table-tr--responsive--nested-table--PaddingLeft: var(--pf-global--spacer--2xl);
--pf-c-table-tr--responsive--nested-table--PaddingLeft: var(--pf-global--spacer--lg);

// Td
--pf-c-table-td--responsive--GridColumnGap: var(--pf-global--spacer--md);
Expand All @@ -71,8 +71,8 @@ $pf-c-table-xs-breakpoint: 380px;
--pf-c-table--m-compact-tr-td--responsive--PaddingBottom: var(--pf-global--spacer--sm);

// Expandable row content
--pf-c-table__expandable-row-content--responsive--PaddingRight: var(--pf-global--spacer--xl);
--pf-c-table__expandable-row-content--responsive--PaddingLeft: var(--pf-global--spacer--xl);
--pf-c-table__expandable-row-content--responsive--PaddingRight: var(--pf-global--spacer--lg);
--pf-c-table__expandable-row-content--responsive--PaddingLeft: var(--pf-global--spacer--lg);

// Table check
--pf-c-table__check--responsive--MarginLeft: var(--pf-global--spacer--sm);
Expand Down Expand Up @@ -207,6 +207,18 @@ $pf-c-table-xs-breakpoint: 380px;
}
}

tr > * {
// Remove First child padding left
&:first-child {
--pf-c-table-cell--PaddingLeft: 0;
}

// Remove Last child padding right
&:last-child {
--pf-c-table-cell--PaddingRight: 0;
}
}

// nested tables
.pf-c-table {
--pf-c-table-tr--responsive--PaddingTop: var(--pf-c-table-tr--responsive--nested-table--PaddingTop);
Expand Down Expand Up @@ -295,8 +307,6 @@ $pf-c-table-xs-breakpoint: 380px;
--pf-c-table-cell--responsive--PaddingLeft: 0;
--pf-c-table-cell--PaddingRight: 0;
--pf-c-table-cell--PaddingLeft: 0;
--pf-c-table__expandable-row-content--PaddingRight: var(--pf-c-table__expandable-row-content--responsive--PaddingRight);
--pf-c-table__expandable-row-content--PaddingLeft: var(--pf-c-table__expandable-row-content--responsive--PaddingLeft);

display: block;
max-height: var(--pf-c-table__expandable-row--MaxHeight); // Overflow scroll should only happen on responsive
Expand All @@ -321,10 +331,23 @@ $pf-c-table-xs-breakpoint: 380px;
visibility: hidden;
}

td {
&.pf-m-no-padding {
.pf-c-table__expandable-row-content {
padding: 0;
}
}
}

&:not(.pf-m-expanded) {
display: none;
visibility: hidden;
}

.pf-c-table__expandable-row-content {
padding-right: var(--pf-c-table__expandable-row-content--responsive--PaddingRight);
padding-left: var(--pf-c-table__expandable-row-content--responsive--PaddingLeft);
}
}

// Set defaults
Expand Down
19 changes: 12 additions & 7 deletions src/patternfly/components/Table/table.scss
View file
Open in desktop
Expand Up @@ -77,9 +77,7 @@
--pf-c-table__expandable-row--MaxHeight: #{pf-size-prem(450px)};
--pf-c-table__expandable-row-content--Transition: var(--pf-global--Transition);
--pf-c-table__expandable-row-content--PaddingTop: var(--pf-global--spacer--xl);
--pf-c-table__expandable-row-content--PaddingRight: var(--pf-global--spacer--xl);
--pf-c-table__expandable-row-content--PaddingBottom: var(--pf-global--spacer--xl);
--pf-c-table__expandable-row-content--PaddingLeft: var(--pf-global--spacer--xl);

// Sort indicator
--pf-c-table__sort-indicator--MarginLeft: var(--pf-global--spacer--md);
Expand Down Expand Up @@ -393,14 +391,21 @@
transition: var(--pf-c-table__expandable-row--Transition);
}

// no padding on standard td
td:only-child {
padding: 0;
padding-left: var(--pf-c-table__expandable-row--before--Width); // set padding-left to adjust for left border.
/* stylelint-disable */
td {
&.pf-m-no-padding {
padding: 0 0 0 var(--pf-c-table__expandable-row--before--Width); // set padding-left to adjust for left border.

.pf-c-table__expandable-row-content {
padding: 0;
}
}
}
/* stylelint-enable */

.pf-c-table__expandable-row-content {
padding: var(--pf-c-table__expandable-row-content--PaddingTop) var(--pf-c-table__expandable-row-content--PaddingRight) var(--pf-c-table__expandable-row-content--PaddingBottom) var(--pf-c-table__expandable-row-content--PaddingLeft);
padding-top: var(--pf-c-table__expandable-row-content--PaddingTop);
padding-bottom: var(--pf-c-table__expandable-row-content--PaddingBottom);
}

// Modifier - Expanded tr
Expand Down