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

docs: add fix for Toolbar and Table overlapping #1269

Merged
merged 1 commit into from
Jul 17, 2020
Merged

docs: add fix for Toolbar and Table overlapping #1269

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
42 changes: 21 additions & 21 deletions stories/table/__snapshots__/table.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -360,7 +360,7 @@ exports[`Storyshots Components/Table Interactive Table With Hoverable and Activa


<h4
style="margin-bottom:0px;"
style="margin: 0;"
>
Interactive Table With Hoverable and Activable Cells and Rows
</h4>
Expand Down Expand Up @@ -631,7 +631,7 @@ exports[`Storyshots Components/Table Merged Cells 1`] = `


<h4
style="margin-bottom:0px;"
style="margin: 0;"
>
Table with Merged Cells
</h4>
Expand Down Expand Up @@ -860,7 +860,7 @@ exports[`Storyshots Components/Table Navigation Indication States 1`] = `


<h4
style="margin-bottom:0px;"
style="margin: 0;"
>
Table with Navigation Indication State
</h4>
Expand Down Expand Up @@ -1121,7 +1121,7 @@ exports[`Storyshots Components/Table Navigation Indication States 1`] = `


<h4
style="margin-bottom:0px;"
style="margin: 0;"
>
Table with Navigation Indication State on RTL
</h4>
Expand Down Expand Up @@ -1386,7 +1386,7 @@ exports[`Storyshots Components/Table Primary 1`] = `


<h4
style="margin-bottom:0px;"
style="margin: 0;"
>
Default Table
</h4>
Expand Down Expand Up @@ -1626,7 +1626,7 @@ exports[`Storyshots Components/Table Responsive Table 1`] = `


<h4
style="margin-bottom:0px;"
style="margin: 0;"
>
Responsive Table
</h4>
Expand Down Expand Up @@ -1990,7 +1990,7 @@ exports[`Storyshots Components/Table Responsive Table Pop In Mode 1`] = `


<h4
style="margin-bottom:0px;"
style="margin: 0;"
>
Responsive Table - Pop-in mode
</h4>
Expand Down Expand Up @@ -2255,7 +2255,7 @@ exports[`Storyshots Components/Table Responsive Table Pop In Mode 1`] = `


<h4
style="margin-bottom:0px;"
style="margin: 0;"
>
Responsive Table - Pop-in Mode with Checkboxes and Navigation Indicator
</h4>
Expand Down Expand Up @@ -2573,7 +2573,7 @@ exports[`Storyshots Components/Table Semantic Rows 1`] = `


<h4
style="margin-bottom:0px;"
style="margin: 0;"
>
Table with Semantic Rows
</h4>
Expand Down Expand Up @@ -3295,7 +3295,7 @@ exports[`Storyshots Components/Table Table With Contextual Menu 1`] = `


<h4
style="margin-bottom:0px;"
style="margin: 0;"
>
Table with Contextual Menu
</h4>
Expand Down Expand Up @@ -4440,7 +4440,7 @@ exports[`Storyshots Components/Table With Advanced Toolbar 1`] = `


<h4
style="margin-bottom:0px;"
style="margin: 0;"
>
Table With Advanced Shellbar
</h4>
Expand Down Expand Up @@ -4683,7 +4683,7 @@ exports[`Storyshots Components/Table With Checkbox 1`] = `


<h4
style="margin-bottom:0px;"
style="margin: 0;"
>
Table With Checkbox Cozy Mode
</h4>
Expand Down Expand Up @@ -4985,7 +4985,7 @@ exports[`Storyshots Components/Table With Checkbox Compact 1`] = `


<h4
style="margin-bottom:0px;"
style="margin: 0;"
>
Table With Checkbox Compact Mode
</h4>
Expand Down Expand Up @@ -5287,7 +5287,7 @@ exports[`Storyshots Components/Table With Checkbox Condensed 1`] = `


<h4
style="margin-bottom:0px;"
style="margin: 0;"
>
Table With Checkbox Condensed Mode
</h4>
Expand Down Expand Up @@ -5589,7 +5589,7 @@ exports[`Storyshots Components/Table With Footer 1`] = `


<h4
style="margin-bottom:0px;"
style="margin: 0;"
>
Table With Footer Cozy Mode
</h4>
Expand Down Expand Up @@ -5838,7 +5838,7 @@ exports[`Storyshots Components/Table With Footer Compact 1`] = `


<h4
style="margin-bottom:0px;"
style="margin: 0;"
>
Table With Footer Compact Mode
</h4>
Expand Down Expand Up @@ -6089,7 +6089,7 @@ exports[`Storyshots Components/Table With Footer Condensed 1`] = `


<h4
style="margin-bottom:0px;"
style="margin: 0;"
>
Table With Footer Condensed Mode
</h4>
Expand Down Expand Up @@ -6340,7 +6340,7 @@ exports[`Storyshots Components/Table With Menu In Header 1`] = `


<h4
style="margin-bottom:0px;"
style="margin: 0;"
>
Table with Popover in Headers
</h4>
Expand Down Expand Up @@ -6788,7 +6788,7 @@ exports[`Storyshots Components/Table With Pagination 1`] = `


<h4
style="margin-bottom:0px;"
style="margin: 0;"
>
Table With Pagination at The Bottom
</h4>
Expand Down Expand Up @@ -7094,7 +7094,7 @@ exports[`Storyshots Components/Table Without Borders 1`] = `


<h4
style="margin-bottom:0px;"
style="margin: 0;"
>
Table Without Borders
</h4>
Expand Down Expand Up @@ -7305,7 +7305,7 @@ exports[`Storyshots Components/Table Without Borders On Body 1`] = `


<h4
style="margin-bottom:0px;"
style="margin: 0;"
>
Table Without Borders On Body
</h4>
Expand Down
42 changes: 21 additions & 21 deletions stories/table/table.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default {

export const primary = () => `
<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active">
<h4 style="margin-bottom:0px;">Default Table</h4>
<h4 style="margin: 0;">Default Table</h4>
<span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span>
</div>
<table class="fd-table">
Expand Down Expand Up @@ -67,7 +67,7 @@ Both can be added to `fd-table`, `fd-table__header`, or `fd-table__body`.

export const withoutBorders = () => `
<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active">
<h4 style="margin-bottom:0px;">Table Without Borders</h4>
<h4 style="margin: 0;">Table Without Borders</h4>
<span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span>
</div>
<table class="fd-table fd-table--no-horizontal-borders fd-table--no-vertical-borders">
Expand Down Expand Up @@ -104,7 +104,7 @@ export const withoutBorders = () => `

export const withoutBordersOnBody = () => `
<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active">
<h4 style="margin-bottom:0px;">Table Without Borders On Body</h4>
<h4 style="margin: 0;">Table Without Borders On Body</h4>
<span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span>
</div>
<table class="fd-table">
Expand Down Expand Up @@ -144,7 +144,7 @@ It has to contain same size of columns as tbody and thead. */

export const withFooter = () => `
<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active">
<h4 style="margin-bottom:0px;">Table With Footer Cozy Mode</h4>
<h4 style="margin: 0;">Table With Footer Cozy Mode</h4>
<span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span>
</div>
<table class="fd-table">
Expand Down Expand Up @@ -188,7 +188,7 @@ export const withFooter = () => `

export const withFooterCompact = () => `
<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active">
<h4 style="margin-bottom:0px;">Table With Footer Compact Mode</h4>
<h4 style="margin: 0;">Table With Footer Compact Mode</h4>
<span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span>
</div>
<table class="fd-table fd-table--compact">
Expand Down Expand Up @@ -233,7 +233,7 @@ export const withFooterCompact = () => `

export const withFooterCondensed = () => `
<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active">
<h4 style="margin-bottom:0px;">Table With Footer Condensed Mode</h4>
<h4 style="margin: 0;">Table With Footer Condensed Mode</h4>
<span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span>
</div>
<table class="fd-table fd-table--condensed">
Expand Down Expand Up @@ -285,7 +285,7 @@ export const withFooterCondensed = () => `

export const interactiveRowsAndColumns = () => `
<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active">
<h4 style="margin-bottom:0px;">Interactive Table With Hoverable and Activable Cells and Rows</h4>
<h4 style="margin: 0;">Interactive Table With Hoverable and Activable Cells and Rows</h4>
<span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span>
</div>
<table class="fd-table">
Expand Down Expand Up @@ -341,7 +341,7 @@ Also for cells that include a checkbox should contain the `fd-table__cell--check

export const withCheckbox = () => `
<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active">
<h4 style="margin-bottom:0px;">Table With Checkbox Cozy Mode</h4>
<h4 style="margin: 0;">Table With Checkbox Cozy Mode</h4>
<span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span>
</div>
<table class="fd-table">
Expand Down Expand Up @@ -394,7 +394,7 @@ export const withCheckbox = () => `

export const withCheckboxCompact = () => `
<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active">
<h4 style="margin-bottom:0px;">Table With Checkbox Compact Mode</h4>
<h4 style="margin: 0;">Table With Checkbox Compact Mode</h4>
<span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span>
</div>
<table class="fd-table fd-table--compact">
Expand Down Expand Up @@ -447,7 +447,7 @@ export const withCheckboxCompact = () => `

export const withCheckboxCondensed = () => `
<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active">
<h4 style="margin-bottom:0px;">Table With Checkbox Condensed Mode</h4>
<h4 style="margin: 0;">Table With Checkbox Condensed Mode</h4>
<span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span>
</div>
<table class="fd-table fd-table--condensed">
Expand Down Expand Up @@ -501,7 +501,7 @@ export const withCheckboxCondensed = () => `

export const withPagination = () => `
<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active">
<h4 style="margin-bottom:0px;">Table With Pagination at The Bottom</h4>
<h4 style="margin: 0;">Table With Pagination at The Bottom</h4>
<span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span>
</div>
<table class="fd-table">
Expand Down Expand Up @@ -681,7 +681,7 @@ export const withAdvancedToolbar = () => `
</div>
</div>
<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active">
<h4 style="margin-bottom:0px;">Table With Advanced Shellbar</h4>
<h4 style="margin: 0;">Table With Advanced Shellbar</h4>
<div class="fd-toolbar__spacer"></div>
<button aria-label="navigation" class="fd-button fd-button--compact fd-button--transparent sap-icon--filter" onclick="toggleDialog('filter-dialog-example', true)"></button>
<button aria-label="navigation" class="fd-button fd-button--compact fd-button--transparent sap-icon--action-settings" onclick="toggleDialog('settings-dialog-example', true)"></button>
Expand Down Expand Up @@ -738,7 +738,7 @@ For Pop-in example markup is changed, one row is transformed to 2 rows with `fd-

export const responsiveTable = () => `
<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active">
<h4 style="margin-bottom:0px;">Responsive Table</h4>
<h4 style="margin: 0;">Responsive Table</h4>
<span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span>
</div>
<table class="fd-table fd-table--no-horizontal-borders">
Expand Down Expand Up @@ -813,7 +813,7 @@ export const responsiveTable = () => `
export const responsiveTablePopInMode = () => `
<div style="max-width: 450px">
<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active">
<h4 style="margin-bottom:0px;">Responsive Table - Pop-in mode</h4>
<h4 style="margin: 0;">Responsive Table - Pop-in mode</h4>
<span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span>
</div>
<table class="fd-table fd-table--no-horizontal-borders fd-table--no-vertical-borders fd-table--pop-in">
Expand Down Expand Up @@ -876,7 +876,7 @@ export const responsiveTablePopInMode = () => `
<br>
<div style="max-width: 450px">
<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active">
<h4 style="margin-bottom:0px;">Responsive Table - Pop-in Mode with Checkboxes and Navigation Indicator</h4>
<h4 style="margin: 0;">Responsive Table - Pop-in Mode with Checkboxes and Navigation Indicator</h4>
<span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span>
</div>
<table class="fd-table fd-table--no-horizontal-borders fd-table--no-vertical-borders fd-table--pop-in">
Expand Down Expand Up @@ -957,7 +957,7 @@ Other indicators such as semantic states and modes can be added using the `--val

export const semanticRows = () => `
<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active">
<h4 style="margin-bottom:0px;">Table with Semantic Rows</h4>
<h4 style="margin: 0;">Table with Semantic Rows</h4>
<span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span>
</div>
<table class="fd-table">
Expand Down Expand Up @@ -1082,7 +1082,7 @@ export const semanticRows = () => `

export const mergedCells = () => `
<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active">
<h4 style="margin-bottom:0px;">Table with Merged Cells</h4>
<h4 style="margin: 0;">Table with Merged Cells</h4>
<span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span>
</div>
<table class="fd-table">
Expand Down Expand Up @@ -1136,7 +1136,7 @@ a contextual menu can be substituted to display all actions in one menu.

export const tableWithContextualMenu = () => `
<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active">
<h4 style="margin-bottom:0px;">Table with Contextual Menu</h4>
<h4 style="margin: 0;">Table with Contextual Menu</h4>
<span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span>
</div>
<table class="fd-table" >
Expand Down Expand Up @@ -1259,7 +1259,7 @@ added with `fd-table__popover` class.

export const withMenuInHeader = () => `
<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active">
<h4 style="margin-bottom:0px;">Table with Popover in Headers</h4>
<h4 style="margin: 0;">Table with Popover in Headers</h4>
<span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span>
</div>
<table class="fd-table" >
Expand Down Expand Up @@ -1441,7 +1441,7 @@ export const fixColumnHeader = () => `

export const navigationIndicationStates = () => `
<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active">
<h4 style="margin-bottom:0px;">Table with Navigation Indication State</h4>
<h4 style="margin: 0;">Table with Navigation Indication State</h4>
<span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span>
</div>
<table class="fd-table">
Expand Down Expand Up @@ -1487,7 +1487,7 @@ export const navigationIndicationStates = () => `

<div dir="rtl">
<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active">
<h4 style="margin-bottom:0px;">Table with Navigation Indication State on RTL</h4>
<h4 style="margin: 0;">Table with Navigation Indication State on RTL</h4>
<span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span>
</div>
<table class="fd-table">
Expand Down