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(button): don't needlessly overwrite title #8491

Merged
merged 1 commit into from
Jan 4, 2024
Merged

fix(button): don't needlessly overwrite title #8491

merged 1 commit into from
Jan 4, 2024

Conversation

maxpatiiuk
Copy link
Member

Related Issue: #8417

Summary

In my application I set title attribute on the <calcite-button>, but it wasn't being displayed because the shadow DOM's <button> had an empty title attribute (title="") which was overwriting the title set on the calcite-button.

Reproduction:

  1. Codepen example
  2. Hover over the button - no tooltip is shown
  3. Remove the "title" attribute from the <button>, and tooltip is visible

Video reproduction:

out.mp4

@maxpatiiuk maxpatiiuk self-assigned this Dec 22, 2023
@maxpatiiuk maxpatiiuk requested a review from a team as a code owner December 22, 2023 17:56
@maxpatiiuk maxpatiiuk mentioned this pull request Dec 22, 2023
Merged
@github-actions GitHub Actions
Copy link
Contributor

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

@github-actions github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Dec 30, 2023
@maxpatiiuk maxpatiiuk requested a review from benelan December 30, 2023 01:48
@maxpatiiuk maxpatiiuk removed the Stale Issues or pull requests that have not had recent activity. label Dec 30, 2023
@jcfranco jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. skip visual snapshots Pull requests that do not need visual regression testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. skip visual snapshots Pull requests that do not need visual regression testing. labels Jan 3, 2024
jcfranco
jcfranco approved these changes Jan 4, 2024
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.

⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
⭐🏆⭐⭐⭐🏆🏆🏆🏆⭐🏆🏆🏆🏆🏆⭐🏆⭐⭐⭐🏆⭐🏆⭐
⭐🏆⭐⭐⭐🏆⭐⭐⭐⭐⭐⭐🏆⭐⭐⭐🏆🏆⭐🏆🏆⭐🏆⭐
⭐🏆⭐⭐⭐🏆⭐🏆🏆⭐⭐⭐🏆⭐⭐⭐🏆⭐🏆⭐🏆⭐🏆⭐
⭐🏆⭐⭐⭐🏆⭐⭐🏆⭐⭐⭐🏆⭐⭐⭐🏆⭐⭐⭐🏆⭐⭐⭐
⭐🏆🏆🏆⭐🏆🏆🏆🏆⭐⭐⭐🏆⭐⭐⭐🏆⭐⭐⭐🏆⭐🏆⭐
⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

@benelan I'm guessing the Chromatic check is failing because the PR is coming from a fork, right? If so, I think we can bypass screenshot checks as the E2E test provides coverage and IIRC we currently don't have screenshot tests with hover states (to prompt the button's tooltip).

@benelan
Copy link
Member

benelan commented Jan 4, 2024

@jcfranco yeah the failure is due to permission issues related to the fork

@jcfranco jcfranco merged commit 350a983 into Esri:main Jan 4, 2024
17 of 20 checks passed
@calcite-admin calcite-admin mentioned this pull request Jan 4, 2024
Merged
benelan added a commit that referenced this pull request Jan 5, 2024
@benelan
Merge remote-tracking branch 'origin/main' into benelan/required-prop…
78185fe 
…-not-internal

* origin/main:
  refactor: remove @ts-ignore needed for Stencil missing  in JSX types (#8551)
  refactor(combobox): remove unused interface (#8552)
  fix(input-date-picker): ensure range icon toggles open corresponding date-picker (#8554)
  fix(button): avoid needlessly overwriting title (#8491)
benelan added a commit that referenced this pull request Jan 5, 2024
@benelan
Merge remote-tracking branch 'origin/main' into benelan/8000-form-val…
94a59c4 
…idation-ui

* origin/main:
  refactor: remove @ts-ignore needed for Stencil missing  in JSX types (#8551)
  refactor(combobox): remove unused interface (#8552)
  fix(input-date-picker): ensure range icon toggles open corresponding date-picker (#8554)
  fix(button): avoid needlessly overwriting title (#8491)
benelan added a commit that referenced this pull request Jan 5, 2024
@benelan
Merge remote-tracking branch 'origin/main' into benelan/7866-input-nu…
67cd152 
…mber-infinity

* origin/main:
  refactor: remove @ts-ignore needed for Stencil missing  in JSX types (#8551)
  refactor(combobox): remove unused interface (#8552)
  fix(input-date-picker): ensure range icon toggles open corresponding date-picker (#8554)
  fix(button): avoid needlessly overwriting title (#8491)
  docs(d, f, g, and h-named components): update api description refs (#8540)
  docs(b and c components): consistent api description refs (#8536)
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

@jcfranco jcfranco jcfranco approved these changes

@benelan benelan Awaiting requested review from benelan

Assignees

@maxpatiiuk maxpatiiuk

Labels
skip visual snapshots Pull requests that do not need visual regression testing.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@maxpatiiuk @benelan @jcfranco