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.

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

fix(ToggleButton): add checked disabled style #3224

Merged
merged 5 commits into from
Jan 16, 2024

Conversation

joakbjerk
Copy link
Contributor

proposal to solve #3028 and #3027

Not sure if its the best way though.

before:
Screenshot 2024-01-15 at 10 12 42

after:
Screenshot 2024-01-15 at 10 12 22

Copy link

vercel bot commented Jan 15, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
eufemia ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 16, 2024 1:13pm

@joakbjerk joakbjerk requested a review from tujoworker January 15, 2024 10:04
Copy link

codesandbox-ci bot commented Jan 15, 2024

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit b196b2d:

Sandbox Source
eufemia-starter Configuration

Copy link
Member

@tujoworker tujoworker left a comment

Choose a reason for hiding this comment

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

Looks good! Did you check the Sbanken styles?

@tujoworker
Copy link
Member

Also, do we have a visual test on the disabled state? Then we may add a "checked" example state in there as well (same test).

@joakbjerk
Copy link
Contributor Author

I'll add the same to Sbanken and add visual tests 🙏

@tujoworker
Copy link
Member

I added a commit. We actually had a visual test for the disabled state. So we just need to make one of them as "selected".

@tujoworker tujoworker merged commit c3ea6a6 into main Jan 16, 2024
10 checks passed
@tujoworker tujoworker deleted the fix/toggle-button-checked-disabled-style branch January 16, 2024 14:11
tujoworker pushed a commit that referenced this pull request Jan 16, 2024
## [10.18.0](v10.17.0...v10.18.0) (2024-01-16)

### ✨ Features

* **Form.useData:** add hook to get forms data outside of the context ([#3218](#3218)) ([58c77cd](58c77cd))

### 🐛 Bug Fixes

* **Expiry:** validation logic ([#3216](#3216)) ([beff8e8](beff8e8))
* **Field.Expiry:** correct disabled styling ([#3215](#3215)) ([2a0651a](2a0651a))
* **Field.Number:** use default size ([#3229](#3229)) ([348f3cb](348f3cb))
* **Field.PhoneNumber:** ensure data value is used when given ([#3222](#3222)) ([1e37cf6](1e37cf6))
* **NumberFormat:** setting selectall to false will no longer select all ([#3213](#3213)) ([ab5cea2](ab5cea2))
* **ToggleButton:** add checked disabled style ([#3224](#3224)) ([c3ea6a6](c3ea6a6))
* **VisuallyHidden:** remove flex support ([#3219](#3219)) ([2fd5c41](2fd5c41))
@tujoworker
Copy link
Member

🎉 This PR is included in version 10.18.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

tujoworker added a commit that referenced this pull request Mar 21, 2024
The checked disabled state color change made in [PR](#3224) is too prominent. Therefore this change.

Also, this change should be verified with an UX RFC.
tujoworker added a commit that referenced this pull request Mar 21, 2024
The checked disabled state color change made in [PR](#3224) is too prominent. Therefore this change.

Also, this change should be verified with an UX RFC.
tujoworker added a commit that referenced this pull request Mar 22, 2024
The checked disabled state color change made in [PR](#3224) is too prominent. Therefore this change.

Also, this change should be verified with an UX RFC.
tujoworker added a commit that referenced this pull request Mar 22, 2024
)

The checked disabled state color change made in
[PR](#3224) is too
prominent.

Also, this change should be verified with this [UX
RFC](https://www.figma.com/file/PomHecnAnpJJQb9HPowWSa/%F0%9F%92%A1-Eufemia---Web-RFCs?type=design&node-id=15003-36012&mode=design&t=XLBT6CO99vAkrCAq-4).

**Today when enabled:**
<img width="472" alt="Screenshot 2024-03-22 at 08 06 36"
src="https://github.com/dnbexperience/eufemia/assets/1501870/6f8bd2ff-e952-4e63-910a-d149dc6735c6">

**Today when disabled:**
<img width="485" alt="Screenshot 2024-03-22 at 08 06 27"
src="https://github.com/dnbexperience/eufemia/assets/1501870/a0ca2c53-6c8e-4bb8-a9d8-d8e247b9c84d">


**Suggestion:**
<img width="479" alt="Screenshot 2024-03-22 at 08 06 06"
src="https://github.com/dnbexperience/eufemia/assets/1501870/349b428b-1e70-4136-bee0-e02c2606b91d">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment