brightspaceui / table Goto Github PK

(Zoom at the corners)

It looks like the action button to scroll a page left or right doesn't appear until after you change the window size.

after making window full screen

A container for d2l-grid-action elements.

Requirements:

• Selections (Added by d2l-grid or bound to this component)

Polyfill doesn't work correctly in iframes

gets cut off:

First noticed by @omsmith

After some digging, it appears to be a rendering bug in Chrome. The "button" in the screenshot isn't clickable. Only the area highlighted by the dev tools is clickable.

Some other weirdness is going on. Removing the progress bar (specifically the element having the transition: transform) seems to "fix" things, sometimes.

Some of the styling is easier to do at the wrapper level. To keep the styles from being split between the table itself and the wrapper, move all the styles to the wrapper level.

Pros:

• All styles in one place

Cons:

• Custom styling of table needs to be done through d2l-table-wrapper instead of table[is="d2l-table"]

An alternative solution is to remove the need for d2l-table-wrapper. Either by:

1. Using the ShadowDOM to create the wrapper. Most browsers don't seem to mind the presence of a wrapper in the table with shadyDOM, but it is still hacky and not correct HTML
2. Create d2l-table-* elements.
3. Another possibility is extending the template element. http://caniuse.com/#feat=template. This won't work on IE10,IE11 however.
4. Using <tr><td><table>... It will be tricky tricking IE into accepting this

It has a z-index of 4: https://github.com/BrightspaceUI/table/blob/master/d2l-sticky-element.js#L23

This is causing the button to appear on top of other elements such as the immersive navbar, which only has a z-index of 2:

As far as I can tell a z-index of 1 for the sticky element might be sufficient.

When folks are using d2l-table with a <dom-repeat> to iterate over their rows, the resulting shady DOM ends up being something like:

<table>
    <dom-repeat>
        <tr>...</tr>
    </dom-repeat>
</table>

Technically this is invalid DOM. It works in all browsers, except IE11.

We should look at alternate approaches to this, such as using a data-provider like approach similar to what vaadin-grid.

Hey guys @dlockhart , @svanherk , @dbatiste , can we add

:host([hidden]) {
	display: none;
}

to the styling of d2l-table? https://github.com/BrightspaceUI/table/blob/master/d2l-table.js#L140

Its causing us some regression bugs on quick-eval. And the only way for us to fix things on our end is to do: [hidden] { display: none; }

• Galen (maybe?)
• WCT

http://search.dev.d2l/source/xref/LSOne/lp/framework/web/D2L.LP.Web.UI/Desktop/Controls/Grid/JavaScript/ClassInitializerSelectionInput.js

• d2l-grid-sel-input
  • Single select and multi-select modes
• d2l-grid-sel-page-input
  • Select all

When d2l-table is placed inside another web component, the rtl rules are not being matched. Seeing this behaviour in d2l-evaluation-hub-activities-list and d2l-rubric-criteria-group (back to at least 10.8.10). I believe it's because we use [dir="rtl"] instead of :host(:dir(rtl)) in our css, but I haven't gotten a chance to test this theory yet.

Improve the table for Grid and DataGrid, which should target ~80% of the cases tables are used for data in the monolith.

http://search.dev.d2l/source/xref/LSOne/lp/framework/web/D2L.LP.Web.UI/Desktop/Controls/Grid/
http://search.dev.d2l/source/xref/LSOne/lp/framework/web/D2L.Web/ui/DataGrid/

Requirements:

• Styling to add to d2l-table
  • Header styling (repeated rows. Prefer inside thead)
  • Footer (Summary) styling
  • Cell alignment styling
• Select button. For single select, use radio input type. For multi select, use checkbox input type
• selected attribute indicates selection state. Bound to input's checked state
• no-selection attribute disables input element creation. A blank td is created instead

This component's purpose is to add a checkbox table cell to the start of the row and fire appropriate events.

Difficulties:

• A td can't be a child of a template body. The element will need to be created via Javascript

Requirements:

• Paging
• Sorting
• Selection (Maybe use https://elements.polymer-project.org/elements/iron-selector?active=Polymer.IronMultiSelectableBehavior)
• page-change, page-size-change, d2l-table-col-sort events

<d2l-grid type="data|list|nolines" has-selection multi page-size="1" page-num="1" on-sort="" on-page-change="" on-page-size-change="">
<d2l-grid-actions>
                <d2l-grid-action visible="{}">
                </d2l-grid-action>
            </d2l-grid-actions>
            <table>
                    <tr is="d2l-grid-row" selected visible="{}">
                        <td></td>
                        <td></td>
                    </tr>
            </table>
</d2l-grid>

http://search.dev.d2l/source/xref/LSOne/lp/framework/web/D2L.LP.Web.UI/Desktop/Controls/Grid/JavaScript/ClassInitializerSortField.js

• d2l-grid-header-sort-field
• d2l-grid-header-sort-field-multikey

In Polymer 1.11.1, they made some changes to how direction selectors work:

Fix :dir selector to handle a few more complicated use cases

• other-custom-element:dir()
• :dir() in a shadowroot should behave like *:dir()
• A few cases where the dir attribute is set between inside of a shadowroot

For whatever reason, those changes cause the sticky left/right buttons to no longer float.

If you use <th> as row headers, you end up with a double border on the right. Additionally, in the last row the first cell has rounded right corners.

Example:

<d2l-table-wrapper>
    <table class="d2l-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Value</th>
                <th>Cost</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Item 1</th>
                <td>1234</td>
                <td>$100</td>
            </tr>
            <tr>
                <th scope="row">Item 2</th>
                <td>5678</td>
                <td>$50</td>
            </tr>
        </tbody>
    </table>
</d2l-table-wrapper>

Related to this, if the table doesn't have a header row, the first row's first cell has rounded right corners:

In Microsoft Edge 16, in RTL, the sticky scroll actions are rendered in the wrong position. Specifically, they are rendered far to the right. The click targets are still positioned in the correct place, and the buttons do work as if they were rendered in the correct place.

• button metrics
• same, with sticky shaded red

<d2l-offscreen> is likely causing the issue to manifest:

• d2l-offscreen offset disabled

Microsoft is aware of this issue and it appears to be a defect in their position: sticky; implementation.

• EDGE 16 position:sticky broken with RTL - Microsoft Edge Development
• position sticky breaks with combination of rtl & box-shadow - Microsoft Edge Development

The scroll buttons appear to introduce a large amount of white-space atop tables in IE11 and Edge. Specifically, the margin-bottom: 60px; style on .sticky elements.

I am encountering this while trying to make the legacy DataGrid responsive, but it also happens in the legacy Grid and the MVC Grid.

• Legacy DataGrid (Edge with style disabled left; IE11 right, style enabled)
• MVC Grid (Firefox left; Edge right)

Builds have been failing on bower install with the following:
bower Stickyfill#master ECMDERR Failed to execute "git ls-remote --tags --heads git://github.com/seaneking/stickyfill.git", exit code of #128 fatal: remote error: Repository not found.

It looks like this fork is no longer accessible/no longer exists.

Anthony, I assigned this to you because it looks like you added this dependency in 4fb0228.

When I consume d2l-table from Bower in my own application, StickyFill comes down as a dependency into bower_components. However, if I then use something like Vulcanize to merge all my WCs into a single import, I end up with this in the compiled file:

<script src="../bower_components/Stickyfill/dist/stickyfill.min.js">

Obviously that file isn't going to exist wherever I publish my site, so I end up with 404s. A couple options here... we can somehow make Stickyfill more web-component friendly, or consumers are going to need to know that when they run Vulcanize, then need to embed all scripts with the vulcanize --inline-scripts flag.

An item in d2l-grid-actions. Contains buttons that do some action on a grid

Blocked by webcomponents/shadydom#168

When native shadow DOM is enabled, and the page direction is right-to-left, the table's overflow arrows are slightly misaligned:

It doesn't seem to matter whether using Polymer 1 or 2.