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

[Table] 3.x - bordered not displaying correctly in Firefox #11464

Closed
2 of 6 tasks
macandcheese opened this issue Feb 5, 2025 · 2 comments
Closed
2 of 6 tasks

[Table] 3.x - bordered not displaying correctly in Firefox #11464

macandcheese opened this issue Feb 5, 2025 · 2 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (design) Issues logged by Calcite designers. estimate - 1 Very small fix or change (potentially a single line), doesn't require updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone
Milestone
2025-02-06 - 3.0....

Comments

@macandcheese
Copy link
Contributor

macandcheese commented Feb 5, 2025 •
edited
Loading

Check existing issues

Actual Behavior

In Firefox, Table borders are not always displaying correctly in 3.x when bordered property is requested:

(FF / Safari / Chrome - all macOS):

Image

Expected Behavior

Firefox should display the Table component as other browsers do with correctly displayed borders.

Reproduction Sample

https://codepen.io/mac_and_cheese/pen/JoPQMjq?editors=100

Reproduction Steps

  1. Open Codepen in Chrome
  2. Notice display is correct with 3.x CC import
  3. Switch to 2.x CC import
  4. Notice display is correct
  5. Open Codepen in Firefox
  6. Notice display is incorrect with 3.x CC import
  7. Switch to 2.x CC import
  8. Notice display is correct

Reproduction Version

3.x

Relevant Info

This showed up with the Lumina refactor - I think it's due to this long standing bug: https://bugzilla.mozilla.org/show_bug.cgi?id=688556

Regression?

3.x / Lumina migration

Priority impact

impact - p2 - want for an upcoming milestone

Impact

No response

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/calcite-ui-icons
  • @esri/eslint-plugin-calcite-components

Esri team

Calcite (design)
@macandcheese macandcheese added 0 - new New issues that need assignment. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. needs triage Planning workflow - pending design/dev review. labels Feb 5, 2025
@macandcheese macandcheese self-assigned this Feb 5, 2025
@github-actions github-actions bot added Calcite (design) Issues logged by Calcite designers. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone labels Feb 5, 2025
@macandcheese macandcheese changed the title [Table] 3.x - Borders not displaying correctly in Firefox [Table] 3.x - bordered not displaying correctly in Firefox Feb 5, 2025
@macandcheese macandcheese mentioned this issue Feb 5, 2025
Merged
@macandcheese macandcheese added 2 - in development Issues that are actively being worked on. estimate - 1 Very small fix or change (potentially a single line), doesn't require updates to tests. and removed 0 - new New issues that need assignment. labels Feb 5, 2025
macandcheese added a commit that referenced this issue Feb 6, 2025
@macandcheese
fix(table): Fix bordered styling in Firefox (#11466)
340ef9f 
**Related Issue:** #11464

## Summary
Adds a set of styling rules to address a Firefox-specific styling bug
with a "not best practice" disclaimer.
Also updates the Table "local demo" to use Dialog instead of Modal.

Note: in FF - the Table ends up being slightly taller because of this
adjustment - however, prior to this change, there was a greater
difference in height ...


| Before    | After |
| -------- | ------- |
| ![Screenshot 2025-02-05 at 3 11
36 PM](https://github.com/user-attachments/assets/86677e1e-2415-4244-886e-3671cbd01ee1)
| ![Screenshot 2025-02-05 at 3 10
24 PM](https://github.com/user-attachments/assets/159c5310-a8bc-4f94-a388-8ab52accef25)
|
@macandcheese macandcheese added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Feb 6, 2025
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned macandcheese Feb 6, 2025
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Feb 6, 2025

Installed and assigned for verification.

@geospatialem geospatialem removed the needs triage Planning workflow - pending design/dev review. label Feb 6, 2025
@geospatialem
Copy link
Member

Verified in 3.0.0-next.132 across browsers - FF, Chrome, and Edge

Image

@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Feb 6, 2025
@macandcheese macandcheese mentioned this issue Feb 6, 2025
Closed
benelan pushed a commit that referenced this issue Feb 8, 2025
@macandcheese @benelan
fix(table): Fix bordered styling in Firefox (#11466)
eaf21f3 
**Related Issue:** #11464

## Summary
Adds a set of styling rules to address a Firefox-specific styling bug
with a "not best practice" disclaimer.
Also updates the Table "local demo" to use Dialog instead of Modal.

Note: in FF - the Table ends up being slightly taller because of this
adjustment - however, prior to this change, there was a greater
difference in height ...


| Before    | After |
| -------- | ------- |
| ![Screenshot 2025-02-05 at 3 11
36 PM](https://github.com/user-attachments/assets/86677e1e-2415-4244-886e-3671cbd01ee1)
| ![Screenshot 2025-02-05 at 3 10
24 PM](https://github.com/user-attachments/assets/159c5310-a8bc-4f94-a388-8ab52accef25)
|
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (design) Issues logged by Calcite designers. estimate - 1 Very small fix or change (potentially a single line), doesn't require updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone
Projects
None yet
Milestone
2025-02-06 - 3.0.0 Feb Breaking Chang...
Development

No branches or pull requests
3 participants
@macandcheese @geospatialem @DitwanP