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

fix(table): Improve Table overflow behavior #8424

Merged
merged 22 commits into from
Dec 21, 2023
Merged

fix(table): Improve Table overflow behavior #8424

merged 22 commits into from
Dec 21, 2023

Conversation

macandcheese
Copy link
Contributor

@macandcheese macandcheese commented Dec 14, 2023 •
edited
Loading

Related Issue: #7677

Summary

Fixes table overflow issues and adds conditional styles to prevent double borders on last visible table row when pagination is present.

previous (from #7677): https://codepen.io/jmanke/pen/XWoNNbv?editors=1100
with this pr: https://codepen.io/mac_and_cheese/pen/abXgNdb?editors=1100

previous (from #7677 comment): https://codepen.io/Olga-Knyazeva-the-bashful/pen/yLZweJG
with this pr: https://codepen.io/mac_and_cheese/pen/BaMgLLK

@macandcheese macandcheese added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Dec 14, 2023
@macandcheese macandcheese changed the title Macandcheese/7677 improve table overflow scrollbars fix(table): Improve table overflow behavior Dec 14, 2023
@github-actions github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Dec 14, 2023
@macandcheese macandcheese changed the title fix(table): Improve table overflow behavior fix(table): Improve Table overflow behavior Dec 14, 2023
@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Dec 15, 2023
@macandcheese macandcheese marked this pull request as ready for review December 15, 2023 00:14
@macandcheese macandcheese requested a review from a team as a code owner December 15, 2023 00:14
driskull
driskull reviewed Dec 15, 2023
View reviewed changes
Copy link
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

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

❓

packages/calcite-components/src/components/table/table.scss
@@ -15,20 +15,20 @@
}

:host {
@apply table;
@apply flex;
Copy link
Member

Choose a reason for hiding this comment

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

This would be a breaking change, right? Are we allowing a breaking change here?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah, not sure if there's another way to fix this without this change. The resultant Chromatic changes are minimal (https://www.chromatic.com/build?appId=6266d45509d7eb004aa254fb&number=3263) - maybe @jcfranco can make a call?

Copy link
Member

Choose a reason for hiding this comment

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

Sounds good.

We had discussed changes like this being breaking changes since users apps may be expecting the component to display a certain way. Maybe we can get away with these changes if we note them more prominently.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Marking as draft for now.

Copy link
Member

Choose a reason for hiding this comment

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

I think we can proceed with this w/o it being breaking for the following reasons:

  • display: table ➡️ display: flex still has a block flow parent-wise (flex-specific styling might kick in, but not likely due to its current display and any overrides to use flex would still be honored)
  • Slotted children of calcite-table are all table-related, so the styles of these should be encapsulated already, and user content would be unaffected

@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Dec 15, 2023
@macandcheese macandcheese marked this pull request as draft December 15, 2023 04:52
@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Dec 16, 2023
@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Dec 16, 2023
@macandcheese macandcheese removed the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Dec 16, 2023
@macandcheese macandcheese added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Dec 16, 2023
@macandcheese macandcheese marked this pull request as ready for review December 17, 2023 17:56
@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Dec 18, 2023
jcfranco
jcfranco approved these changes Dec 20, 2023
View reviewed changes
Copy link
Member

@jcfranco jcfranco left a comment

Choose a reason for hiding this comment

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

📜📜📜📜📜📜📜📜📜📜📜📜📜📜📜📜📜📜📜📜📜📜📜📜📜📜📜📜
📜🏓📜📜📜🏓📜📜🏓🏓📜📜🏓🏓🏓📜📜🏓🏓🏓📜🏓🏓🏓🏓📜🏓📜
📜🏓🏓📜📜🏓📜🏓📜📜🏓📜📜🏓📜📜🏓📜📜📜📜🏓📜📜📜📜🏓📜
📜🏓📜🏓📜🏓📜🏓📜📜🏓📜📜🏓📜📜🏓📜📜📜📜🏓🏓🏓📜📜🏓📜
📜🏓📜📜🏓🏓📜🏓📜📜🏓📜📜🏓📜📜🏓📜📜📜📜🏓📜📜📜📜📜📜
📜🏓📜📜📜🏓📜📜🏓🏓📜📜🏓🏓🏓📜📜🏓🏓🏓📜🏓🏓🏓🏓📜🏓📜
📜📜📜📜📜📜📜📜📜📜📜📜📜📜📜📜📜📜📜📜📜📜📜📜📜📜📜📜

geospatialem
geospatialem approved these changes Dec 21, 2023
View reviewed changes
Copy link
Member

@geospatialem geospatialem left a comment

Choose a reason for hiding this comment

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

All sounds great with both JAWS and NVDA on Windows. 🏆

@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Dec 21, 2023
@macandcheese macandcheese force-pushed the macandcheese/7677-improve-table-overflow-scrollbars branch from eef1843 to 0d57efe Compare December 21, 2023 17:44
@macandcheese macandcheese merged commit 79743e1 into main Dec 21, 2023
10 checks passed
@macandcheese macandcheese deleted the macandcheese/7677-improve-table-overflow-scrollbars branch December 21, 2023 18:27
@calcite-admin calcite-admin mentioned this pull request Dec 21, 2023
Merged
geospatialem pushed a commit that referenced this pull request Jan 17, 2024
@calcite-admin @github-actions
chore: release main (#8455)
3709f80 
🤖 I have created a release *beep* *boop*
---


<details><summary>@esri/calcite-design-tokens: 2.1.1</summary>

##
[2.1.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@2.1.0...@esri/calcite-design-tokens@2.1.1)
(2024-01-17)


### Bug Fixes

* Allow users to control tabindex on interactive components
([#8166](#8166))
([b15c052](b15c052))


### Reverts

* Chore(modal): remove e2e tests that are covered by dedicated openClose
commonTests helper
([#8392](#8392))
([#8471](#8471))
([4bedf99](4bedf99))
</details>

<details><summary>@esri/calcite-components: 2.2.0</summary>

##
[2.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.1.0...@esri/calcite-components@2.2.0)
(2024-01-17)


### Features

* **action-menu:** Close menu on blur instead of on tab key.
([#8577](#8577))
([ccfbd0c](ccfbd0c))
* **checkbox, combobox, input-date-picker, input-time-picker,
segmented-control, select:** Add required property
([#8517](#8517))
([72a1ce4](72a1ce4))
* **handle, block, list-item:** Improve drag handle tooltip to include
item label
([#8584](#8584))
([6e643e2](6e643e2))
* **handle:** Add `blurUnselectDisabled` property to disable unselecting
handle on blur.
([#8483](#8483))
([4d665cc](4d665cc))
* **handle:** Add selected property and calciteHandleChange event.
([#8484](#8484))
([d2e9880](d2e9880))
* **list-item:** Add dragSelected property and
calciteListItemDragHandleChange event
([#8524](#8524))
([4db2eb7](4db2eb7))
* **list-item:** Add tooltip for expanding and collapsing
([#8612](#8612))
([4964491](4964491))
* **list:** Add "filter-no-results" slot to display content when no
filtered items are shown
([#8569](#8569))
([f1fc7f6](f1fc7f6))
* **list:** Introduce clearer unselected state
([#8510](#8510))
([f1e836c](f1e836c))
* **radio-button-group, segmented control:** Add validationMessage,
validationIcon, and status properties
([#8561](#8561))
([d4c5efc](d4c5efc))
* Reflect validationIcon property
([#8583](#8583))
([b3d38b3](b3d38b3))
* **table-header:** Add style when within a `selected` Table Row
([#8449](#8449))
([13cfe75](13cfe75))
* **tabs:** Emit selection-related events when selection is modified
after closing the selected tab
([#8582](#8582))
([b15c940](b15c940))
* **tile:** Add visual scales
([#8496](#8496))
([7638ec4](7638ec4))
* Use input-message to display validation messages for invalid fields
after form submission
([#8574](#8574))
([fd392fe](fd392fe))


### Bug Fixes

* **action:** Update component tokens to support transparent
([#8532](#8532))
([81cb5cc](81cb5cc))
* Allow users to control tabindex on interactive components
([#8166](#8166))
([b15c052](b15c052))
* **button:** Avoid needlessly overwriting title
([#8491](#8491))
([350a983](350a983))
* **color-picker:** Emit color change when nudging color channels by
using the shift key
([#8579](#8579))
([4250598](4250598))
* **combobox:** Only allow deleting visible chips with the keyboard
([#8603](#8603))
([2d38241](2d38241))
* **date-picker:** Prevent console error when selecting just an end date
for input date picker
([#8444](#8444))
([c0e51c3](c0e51c3))
* **filter:** Prevent console warning from displaying to end users
([#8458](#8458))
([0de7646](0de7646))
* **input-date-picker:** Ensure range icon toggles open corresponding
date-picker
([#8554](#8554))
([cfafd15](cfafd15))
* **input-date-picker:** Resolve a hard to reproduce number formatter
caching issue that occurred due to the countdown delay in queued Alerts.
([5f4fa3e](5f4fa3e))
* **input-message:** Add missing margin to scale="s", spacing CSS
variable has effect
([#8592](#8592))
([49b0a20](49b0a20))
* **input, input-number, input-text:** Restore focus on input after
browser validation error is displayed and user continues typing
([#8563](#8563))
([5897965](5897965))
* **input, input-number:** Support setting value property to Infinity
([#8547](#8547))
([f6ac698](f6ac698))
* **list-item:** Store last focused cell from focusing on elements
within a cell.
([#8494](#8494))
([28f93b4](28f93b4))
* **list, list-item, list-item-group:** Honor hidden attribute on
list-item and list-item-group
([#8541](#8541))
([3851dc6](3851dc6))
* **list:** Correct selectedItems value when list is filtered
([#8481](#8481))
([9de1922](9de1922))
* **list:** Fix event detail newIndex when down arrow pressed to sort
([#8462](#8462))
([b3d5169](b3d5169))
* **list:** Fix keyboard arrow navigation
([#8470](#8470))
([57fdaa4](57fdaa4))
* **modal:** Ensure focus trapping in dynamically created, subsequently
opened modals
([#8593](#8593))
([4ec6b94](4ec6b94))
* **table:** Fix double border on `bordered` Table Rows in
`table-footer`
([#8509](#8509))
([c16ea33](c16ea33))
* **table:** Improve Table overflow behavior
([#8424](#8424))
([79743e1](79743e1))
* **text-area:** Prevent infinite render loop when `max-length` property
is defined
([#8610](#8610))
([f30d933](f30d933))


### Reverts

* Chore(modal): remove e2e tests that are covered by dedicated openClose
commonTests helper
([#8392](#8392))
([#8471](#8471))
([4bedf99](4bedf99))


### Dependencies

* The following workspace dependencies were updated
  * devDependencies
    * @esri/calcite-design-tokens bumped from ^2.1.1-next.4 to ^2.1.1
</details>

<details><summary>@esri/calcite-components-angular: 2.2.0</summary>

##
[2.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.1.0...@esri/calcite-components-angular@2.2.0)
(2024-01-17)


### Miscellaneous Chores

* **@esri/calcite-components-angular:** Synchronize undefined versions


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from ^2.2.0-next.22 to ^2.2.0
</details>

<details><summary>@esri/calcite-components-react: 2.2.0</summary>

##
[2.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.1.0...@esri/calcite-components-react@2.2.0)
(2024-01-17)


### Miscellaneous Chores

* **@esri/calcite-components-react:** Synchronize undefined versions


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from ^2.2.0-next.22 to ^2.2.0
</details>

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
@calcite-admin calcite-admin mentioned this pull request May 14, 2024
Merged
@calcite-admin calcite-admin mentioned this pull request May 28, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@driskull driskull driskull left review comments

@jcfranco jcfranco jcfranco approved these changes

@geospatialem geospatialem geospatialem approved these changes

@benelan benelan Awaiting requested review from benelan

Assignees

@macandcheese macandcheese

Labels
bug Bug reports for broken functionality. Issues should include a reproduction of the bug. pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Milestone
2024-01-17 - Jan Main Release
Development

Successfully merging this pull request may close these issues.
4 participants
@macandcheese @jcfranco @driskull @geospatialem