Skip to content

feat(cdk/table): Emit CSS classes on sticky elements that border non-… - #21179

Merged
mmalerba merged 1 commit into
angular:masterfrom
kseamon:additional-sticky-styles
Dec 4, 2020
Merged

feat(cdk/table): Emit CSS classes on sticky elements that border non-…#21179
mmalerba merged 1 commit into
angular:masterfrom
kseamon:additional-sticky-styles

Conversation

@kseamon

@kseamon kseamon commented Nov 30, 2020

Copy link
Copy Markdown
Contributor

…sticky elements

This allows adding borders and/or shadows to indicate the break between sticky
and fixed rows/columns.

@google-cla google-cla Bot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Nov 30, 2020
@kseamon
kseamon requested a review from mmalerba November 30, 2020 23:25

@jelbourn jelbourn left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall looks good, couple minor comments

this._borderCellCss = {
'top': `${_stickCellCss}-border-elem-top`,
'bottom': `${_stickCellCss}-border-elem-bottom`,
'left': `${_stickCellCss}-border-elem-left`,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it be accurate to use "start" and "end" so that the terminology works with RTL?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is actually accurate - the rtl right/left swapping is already handled in the sticky column code below.

Comment thread src/cdk/table/sticky-styler.ts Outdated
* direction and value.
*/
_addStickyStyle(element: HTMLElement, dir: StickyDirection, dirValue: number) {
_addStickyStyle(element: HTMLElement, dir: StickyDirection, dirValue: number,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not a huge fan of boolean, "do something extra" flags like this, but I can live with it since it's an internal method. I think ideally we'd have a data structure to pass to this method that had these args.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From a readability perspective I agree, though from a function that gets called hundreds or thousands of times while setting up a table perspective, I'm not sure it's the right trade-off.

Comment thread src/cdk/table/table.spec.ts Outdated
const endPositions = this._getStickyEndColumnPositions(cellWidths, stickyEndStates);

const lastStickyStart = stickyStartStates.lastIndexOf(true);
const firstStickyEnd = stickyEndStates.indexOf(true);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need some logic to verify that the first and last sticky indexes are different?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think as long as the same column is not specified as sticky and stickyEnd, this will be fine. I think that if both of those were set, getting both of these CSS classes would be the least of the odd behaviors to result.

@jelbourn jelbourn left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, there's just a lint error on the commit message (you can fix by squashing)

@jelbourn jelbourn added G This is is related to a Google internal issue action: merge The PR is ready for merge by the caretaker P2 The issue is important to a large percentage of users, with a workaround target: minor This PR is targeted for the next minor release labels Dec 1, 2020
…sticky elements

This allows adding borders and/or shadows to indicate the break between sticky
and fixed rows/columns.
@kseamon
kseamon force-pushed the additional-sticky-styles branch from 1ede76a to c12a77e Compare December 1, 2020 17:56
@kseamon

kseamon commented Dec 1, 2020

Copy link
Copy Markdown
Contributor Author

LGTM, there's just a lint error on the commit message (you can fix by squashing)

Done

@mmalerba
mmalerba merged commit 7648632 into angular:master Dec 4, 2020
@angular-automatic-lock-bot

Copy link
Copy Markdown

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot Bot locked and limited conversation to collaborators Jan 4, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement G This is is related to a Google internal issue P2 The issue is important to a large percentage of users, with a workaround target: minor This PR is targeted for the next minor release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants