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

feat(Chip): change background color on hover/active #1302

Merged
merged 9 commits into from
Dec 19, 2024
Merged

feat(Chip): change background color on hover/active #1302

merged 9 commits into from
Dec 19, 2024

Conversation

tuentisre
Copy link
Collaborator

@tuentisre tuentisre commented Dec 10, 2024 •
edited by atabel
Loading

Automated changes by create-pull-request GitHub action

https://jira.tid.es/browse/WEB-2110

@tuentisre tuentisre requested review from atabel and pladaria December 10, 2024 10:46
@github-actions GitHub Actions
Copy link

github-actions bot commented Dec 10, 2024 •
edited
Loading

Size stats

master this branch diff
Total JS 12.3 MB 12.3 MB +55 B
JS without icons 2.04 MB 2.04 MB +55 B
Lib overhead 72.8 kB 72.8 kB 0 B
Lib overhead (gzip) 17.1 kB 17.1 kB -1 B

@github-actions GitHub Actions
Copy link

github-actions bot commented Dec 10, 2024 •
edited
Loading

Accessibility report
✔️ No issues found

ℹ️ You can run this locally by executing yarn audit-accessibility.

@github-actions GitHub Actions
Copy link

github-actions bot commented Dec 10, 2024 •
edited
Loading

Deploy preview for mistica-web ready!

✅ Preview
https://mistica-pcfxnlzm9-flows-projects-65bb050e.vercel.app

Built with commit 50a0a1a.
This pull request is being automatically deployed with vercel-action

@github-actions GitHub Actions
Copy link

github-actions bot commented Dec 10, 2024 •
edited
Loading

Screenshot tests report

✔️ All passing

@atabel atabel requested a review from aweell December 10, 2024 11:32
@aweell
Copy link
Contributor

aweell commented Dec 18, 2024

When is not active and is being hovered, text of the chip shouldn't change to textActivated but remain in textPrimary.

https://mistica-jopq1isi0-flows-projects-65bb050e.vercel.app/?path=/story/components-chip--single-selection

In the example in Movistar we can see the text of inactive chips to change to blue when hovered.

@atabel atabel changed the title feat(skin): update design tokens feat(Chip): change background color on hover/active Dec 18, 2024
@aweell aweell linked an issue Dec 18, 2024 that may be closed by this pull request
Chips [Hover and pressed states] Telefonica/mistica-design#1527
Closed
6 tasks
@aweell aweell self-requested a review December 18, 2024 17:03
@andredelramo-hm
Copy link

It would be necessary to include the pressed state

@atabel
Copy link
Contributor

atabel commented Dec 19, 2024 •
edited
Loading

It would be necessary to include the pressed state

hmmm... what do you mean? It should already have pressed state. For example: https://mistica-qgteupypi-flows-projects-65bb050e.vercel.app/playroom/preview/#?code=N4Igxg9gJgpiBcIA8AFATjAbgSxgdwBUIIAbAZwAIB6APgB0A7JAYQAtsAHCiB9GMsgF5gACgCUFQTQrAAvrJptOSKko70GIADQgALqxgBbOIgBCJAIYBXELKA

@andredelramo-hm
Copy link

You're right, when the chip only has the onPress property, it does appear, but in a multi-selection, it doesn't show.

@atabel
Copy link
Contributor

atabel commented Dec 19, 2024

You're right, when the chip only has the onPress property, it does appear, but in a multi-selection, it doesn't show.

ok, it should be fixed now. I thought the pressed state was only intended to be applied to button/link chips. With the latest changes, it should apply to any interactive chip, including checkbox/radio (single/multi selection) chips

@andredelramo-hm
Copy link

Great! It looks good now, just one small detail, the overlay doesn't reach the right edge of the chip.
Captura de pantalla 2024-12-19 a las 13 28 45
Could it be for the border?

andredelramo-hm
andredelramo-hm approved these changes Dec 19, 2024
View reviewed changes
Copy link

@andredelramo-hm andredelramo-hm left a comment

Choose a reason for hiding this comment

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

Now it's perfect :)

@atabel atabel added this pull request to the merge queue Dec 19, 2024
Merged via the queue into master with commit 73e33eb Dec 19, 2024
11 checks passed
@atabel atabel deleted the import-design-tokens-production branch December 19, 2024 16:13
tuentisre pushed a commit that referenced this pull request Jan 9, 2025
@semantic-release-bot
chore(release): 16.8.0 [skip ci]
34bcc78 
# [16.8.0](v16.7.0...v16.8.0) (2025-01-09)

### Bug Fixes

* **react-datetime:** upgrade react-datetime to support React18 ([#1303](#1303)) ([9caf2c2](9caf2c2))

### Features

* **Chip:** change background color on hover/active ([#1302](#1302)) ([73e33eb](73e33eb))
* **Drawer:** new component ([#1306](#1306)) ([2543c67](2543c67))
* **icons:** New floppy disk icon ([#1304](#1304)) ([d9c5353](d9c5353)), closes [/github.com/Telefonica/mistica-design/issues/1956#issuecomment-2535956321](https://github.com//github.com/Telefonica/mistica-design/issues/1956/issues/issuecomment-2535956321)
@tuentisre
Copy link
Collaborator Author

🎉 This PR is included in version 16.8.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@andredelramo-hm andredelramo-hm andredelramo-hm approved these changes

@aweell aweell aweell approved these changes

@atabel atabel atabel approved these changes

@pladaria pladaria pladaria approved these changes

Assignees
No one assigned
Labels
released
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Chips [Hover and pressed states]
5 participants
@tuentisre @aweell @andredelramo-hm @atabel @pladaria