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

[Feature Request]: ui5-color-picker option to disable transparency #9979

Closed
1 task done
brandon-sap opened this issue Oct 3, 2024 · 4 comments · Fixed by #10153
Closed
1 task done

[Feature Request]: ui5-color-picker option to disable transparency #9979

brandon-sap opened this issue Oct 3, 2024 · 4 comments · Fixed by #10153

Comments

@brandon-sap
Copy link
Member

Feature Request Description

The ability to disable transparency. Hide transparency controls in the user interface.

Proposed Solution

Maybe something like a "hide-transparency" attribute.

image

The left is how it looks by default, the right might be what it looks like when transparency is hidden. Doesn't really matter to me exactly how it looks, you guys can figure out a way to make it look good!

Proposed Alternatives

Currently using a very outdated library. It's a great color picker, but it's so outdated that it's finally begun to cause us issues.

Organization

SAP

Additional Context

We need this for an email editor. Not all email clients support transparency (Outlook on Windows). Outlook simply ignores colors defined with rgba(). We could fallback to removing the alpha after the color has been picked, but that significantly changes the color!

Here is some HTML with some background color and 2 pieces of content with the same color other than transparency. It's displayed in Chrome on the left, and Outlook on the right. It's not email HTML, so Outlook doesn't render it well, but the color is the important thing. Notice the difference in the colors within Chrome. Simply removing the transparency is a significant change! (Especially since there's a light grey background). In Outlook, the rgba content has no color at all. You only see the grey background under that text.

{8E85A653-5270-4C9F-8A68-1BD580ABE7B5}

As a result, we must be able to hide/disable transparency in our color pickers. It's quite a shock to have your colors change this much!

We're not currently using this color picker, but it and the palette seem very nice, very similar to the one that we use, currently, so I'd love to switch! But this is a show stopper.

Priority

Low

Privacy Policy

  • I’m not disclosing any internal or sensitive information.
@LidiyaGeorgieva
Copy link
Contributor

Hello @SAP/ui5-webcomponents-topic-p, take a look of this feature request.

@DMihaylova DMihaylova self-assigned this Oct 14, 2024
@DMihaylova
Copy link

Hi @brandon-sap,

Would it suit your needs if we implement in ui5-color-picker simplified mode as the one in UI5 Color Picker? https://ui5.sap.com/#/entity/sap.ui.unified.ColorPicker/sample/sap.ui.unified.sample.ColorPickerSimplified

If yes, could you please open E1 item as per the new design process? Let me know if assistance is needed ;)

Regards,
Diana

@brandon-sap
Copy link
Member Author

I think that might work. I've asked stakeholders for feedback on it.

didip1000 added a commit that referenced this issue Nov 14, 2024
Introducing a new property `displayMode` for the `ui5-color-picker` allowing users to select between the `default` (classic) color picker or the new `simplified` color picker.

The simplified picker does not include the RGB inputs and alpha slider.

You can create a color picker in simplified mode as follows:

<ui5-color-picker display-mode="Simplified"></ui5-color-picker>

Fixes: #9979
@github-project-automation github-project-automation bot moved this from In Progress to Completed in Planning - Topic B Nov 14, 2024
@ui5-webcomponents-bot
Copy link
Collaborator

🎉 This issue has been resolved in version v2.5.0-rc.0 🎉

The release is available on v2.5.0-rc.0

Your semantic-release bot 📦🚀

@DMihaylova DMihaylova added this to the 2.5.0 milestone Nov 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Completed
Development

Successfully merging a pull request may close this issue.

4 participants