You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by "Abhirup-99 (via GitHub)" <gi...@apache.org> on 2025/08/20 11:24:02 UTC
[PR] feat(color picker): enhance color picker to easier alpha changes [superset]
Abhirup-99 opened a new pull request, #34772:
URL: https://github.com/apache/superset/pull/34772
<!---
Please write the PR title following the conventions at https://www.conventionalcommits.org/en/v1.0.0/
Example:
fix(dashboard): load charts correctly
-->
### SUMMARY
This pull request updates the `ColorPicker` component to match the previous color picker UI.
### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
<!--- Skip this if not applicable -->
Old Design
<img width="337" height="518" alt="Screenshot from 2025-08-20 16-44-52" src="https://github.com/user-attachments/assets/6ad1eaf6-7ec5-486a-ad26-12edbc4c6ef4" />
New Design
<img width="337" height="518" alt="Screenshot from 2025-08-20 16-44-08" src="https://github.com/user-attachments/assets/36f06cdf-34eb-4dcd-b769-b931473f7ab0" />
### TESTING INSTRUCTIONS
<!--- Required! What steps can be taken to manually verify the changes? -->
Check the screenshot difference
### ADDITIONAL INFORMATION
<!--- Check any relevant boxes with "x" -->
<!--- HINT: Include "Fixes #nnn" if you are fixing an existing issue -->
- [ ] Has associated issue:
- [ ] Required feature flags:
- [X] Changes UI
- [ ] Includes DB Migration (follow approval process in [SIP-59](https://github.com/apache/superset/issues/13351))
- [ ] Migration is atomic, supports rollback & is backwards-compatible
- [ ] Confirm DB migration upgrade and downgrade tested
- [ ] Runtime estimates and downtime expectations provided
- [ ] Introduces new feature or API
- [ ] Removes existing feature or API
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] feat(color picker): enhance color picker to easier alpha changes [superset]
Posted by "Abhirup-99 (via GitHub)" <gi...@apache.org>.
Abhirup-99 closed pull request #34772: feat(color picker): enhance color picker to easier alpha changes
URL: https://github.com/apache/superset/pull/34772
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] feat(color picker): enhance color picker to easier alpha changes [superset]
Posted by "msyavuz (via GitHub)" <gi...@apache.org>.
msyavuz commented on code in PR #34772:
URL: https://github.com/apache/superset/pull/34772#discussion_r2288841473
##########
superset-frontend/packages/superset-ui-core/src/components/ColorPicker/index.tsx:
##########
@@ -20,10 +20,33 @@ import {
ColorPicker as AntdColorPicker,
type ColorPickerProps as AntdColorPickerProps,
} from 'antd';
+import { css, Global } from '@emotion/react';
// Re-export the AntD ColorPicker as-is for themeable usage
export type ColorPickerProps = AntdColorPickerProps;
-export const ColorPicker = AntdColorPicker;
+export const ColorPicker: React.FC<ColorPickerProps> = props => (
+ <>
+ <Global
+ styles={css`
+ .ant-slider.ant-color-picker-slider.ant-slider-horizontal {
+ margin: 11px 5px;
+ }
+ .ant-color-picker
+ .ant-color-picker-input-container
+ .ant-color-picker-slider-alpha,
+ .ant-color-picker
+ .ant-color-picker-input-container
+ .ant-color-picker-alpha-input,
+ .ant-color-picker
+ .ant-color-picker-input-container
+ .ant-color-picker-format-select {
+ display: inline-flex;
+ }
+ `}
+ />
+ <AntdColorPicker {...props} />
+ </>
+);
Review Comment:
Global styles for this is not the right approach, you can use css prop but i would suggest inspecting why it doesn't behave like this antd itself without customization
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] feat(color picker): enhance color picker to easier alpha changes [superset]
Posted by "msyavuz (via GitHub)" <gi...@apache.org>.
msyavuz commented on PR #34772:
URL: https://github.com/apache/superset/pull/34772#issuecomment-3242946343
Thanks to helpful people over at geostyler, i fixed this upstream. We should just update our version now. @Abhirup-99
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] feat(color picker): enhance color picker to easier alpha changes [superset]
Posted by "msyavuz (via GitHub)" <gi...@apache.org>.
msyavuz commented on code in PR #34772:
URL: https://github.com/apache/superset/pull/34772#discussion_r2288841473
##########
superset-frontend/packages/superset-ui-core/src/components/ColorPicker/index.tsx:
##########
@@ -20,10 +20,33 @@ import {
ColorPicker as AntdColorPicker,
type ColorPickerProps as AntdColorPickerProps,
} from 'antd';
+import { css, Global } from '@emotion/react';
// Re-export the AntD ColorPicker as-is for themeable usage
export type ColorPickerProps = AntdColorPickerProps;
-export const ColorPicker = AntdColorPicker;
+export const ColorPicker: React.FC<ColorPickerProps> = props => (
+ <>
+ <Global
+ styles={css`
+ .ant-slider.ant-color-picker-slider.ant-slider-horizontal {
+ margin: 11px 5px;
+ }
+ .ant-color-picker
+ .ant-color-picker-input-container
+ .ant-color-picker-slider-alpha,
+ .ant-color-picker
+ .ant-color-picker-input-container
+ .ant-color-picker-alpha-input,
+ .ant-color-picker
+ .ant-color-picker-input-container
+ .ant-color-picker-format-select {
+ display: inline-flex;
+ }
+ `}
+ />
+ <AntdColorPicker {...props} />
+ </>
+);
Review Comment:
Global styles for this is not the right approach, you can use css prop but i would suggest inspecting why it doesn't behave like this in antd itself without customization
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] feat(color picker): enhance color picker to easier alpha changes [superset]
Posted by "Abhirup-99 (via GitHub)" <gi...@apache.org>.
Abhirup-99 commented on PR #34772:
URL: https://github.com/apache/superset/pull/34772#issuecomment-3218019071
@msyavuz @mistercrunch the styles are coming from the geostyler library inside node modules.
```
.ant-color-picker .ant-color-picker-slider-container {
padding-bottom: 6px;
}
.ant-color-picker .ant-color-picker-slider-container .ant-color-picker-slider-group {
align-self: end;
}
.ant-color-picker .ant-color-picker-slider-alpha,
.ant-color-picker .ant-color-picker-alpha-input,
.ant-color-picker .ant-color-picker-format-select {
display: none;
}
```
these are unscoped styles inside https://github.com/geostyler/geostyler/blob/a5960db5592d1661fdcf1bbc6dc234bf97c383ee/src/Component/Symbolizer/Field/ColorField/ColorField.css#L26
Antd doesn't allow adding a classname to the popover which is created when the color picker is clicked. https://ant.design/components/color-picker
An alternative could be to scope the entire panel under a div using panelrender and style the div with the changes with we are looking for.
```
panelRender Custom Render Panel (panel: React.ReactNode, extra: { components: { Picker: FC; Presets: FC } }) => React.ReactNode - 5.7.0
```
or ask the geostyles team to do the same for their colorpicker CSS properties.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] feat(color picker): enhance color picker to easier alpha changes [superset]
Posted by "Abhirup-99 (via GitHub)" <gi...@apache.org>.
Abhirup-99 commented on PR #34772:
URL: https://github.com/apache/superset/pull/34772#issuecomment-3206152969
fixes #34721
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] feat(color picker): enhance color picker to easier alpha changes [superset]
Posted by "msyavuz (via GitHub)" <gi...@apache.org>.
msyavuz commented on PR #34772:
URL: https://github.com/apache/superset/pull/34772#issuecomment-3241453283
That is certainly an oversight in geostyler, [reported this there.](https://github.com/geostyler/geostyler/issues/2631). If we can we should probably fix it there and update our geostyler version here.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] feat(color picker): enhance color picker to easier alpha changes [superset]
Posted by "mistercrunch (via GitHub)" <gi...@apache.org>.
mistercrunch commented on PR #34772:
URL: https://github.com/apache/superset/pull/34772#issuecomment-3222272278
> these are unscoped styles
oh wow, we should report that on their repo ...
I'm not good at CSS puzzles, maybe @rusackas can work some magic?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] feat(color picker): enhance color picker to easier alpha changes [superset]
Posted by "Abhirup-99 (via GitHub)" <gi...@apache.org>.
Abhirup-99 commented on PR #34772:
URL: https://github.com/apache/superset/pull/34772#issuecomment-3228901516
@rusackas can you check this out?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] feat(color picker): enhance color picker to easier alpha changes [superset]
Posted by "mistercrunch (via GitHub)" <gi...@apache.org>.
mistercrunch commented on PR #34772:
URL: https://github.com/apache/superset/pull/34772#issuecomment-3215525900
we love to maintain vanilla antd as much as possible, wondering why antd's component isn't what we want it here, seemed you're mostly spacing out the 2 siders? Can this be addressed in core antd? or a Superset-specific styles interfering here?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org