This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a commit to branch template_less
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/template_less by this push:
new 6f73e58b25 refactor(theming): Fixes to previously migrated components
(#32845)
6f73e58b25 is described below
commit 6f73e58b25c03f5ae86542ace9622fe697f1a47a
Author: Mehmet Salih Yavuz <[email protected]>
AuthorDate: Thu Apr 3 03:55:12 2025 +0300
refactor(theming): Fixes to previously migrated components (#32845)
---
.../src/components/DropdownContainer/index.tsx | 8 ++-
superset-frontend/src/components/Menu/index.tsx | 79 ++++++++++++----------
superset-frontend/src/components/Modal/Modal.tsx | 3 -
.../src/components/PageHeaderWithActions/index.tsx | 2 +-
.../ColumnConfigControl/ColumnConfigItem.tsx | 4 +-
5 files changed, 51 insertions(+), 45 deletions(-)
diff --git a/superset-frontend/src/components/DropdownContainer/index.tsx
b/superset-frontend/src/components/DropdownContainer/index.tsx
index 86a367a568..f8a0db2a8a 100644
--- a/superset-frontend/src/components/DropdownContainer/index.tsx
+++ b/superset-frontend/src/components/DropdownContainer/index.tsx
@@ -364,9 +364,11 @@ const DropdownContainer = forwardRef(
/>
<Popover
- overlayInnerStyle={{
- maxHeight: `${MAX_HEIGHT}px`,
- overflow: showOverflow ? 'auto' : 'visible',
+ styles={{
+ body: {
+ maxHeight: `${MAX_HEIGHT}px`,
+ overflow: showOverflow ? 'auto' : 'visible',
+ },
}}
content={popoverContent}
trigger="click"
diff --git a/superset-frontend/src/components/Menu/index.tsx
b/superset-frontend/src/components/Menu/index.tsx
index 881f47b168..0f5a9a7c86 100644
--- a/superset-frontend/src/components/Menu/index.tsx
+++ b/superset-frontend/src/components/Menu/index.tsx
@@ -41,36 +41,37 @@ export type AntdMenuItemType = ReactElement & {
export type MenuItemChildType = AntdMenuItemType;
const StyledMenuItem = styled(AntdMenu.Item)`
- a {
- text-decoration: none;
- }
- &.antd5-menu-item {
- div {
- display: flex;
- align-items: center;
- justify-content: space-between;
- }
+ ${({ theme }) => css`
a {
- transition: background-color ${({ theme }) => theme.motionDurationMid}s;
- &:after {
- content: '';
- position: absolute;
- bottom: -2px;
- left: 50%;
- width: 0;
- height: 3px;
- opacity: 0;
- transform: translateX(-50%);
- transition: all ${({ theme }) => theme.motionDurationMid}s;
- background-color: ${({ theme }) => theme.colorPrimary};
+ text-decoration: none;
+ }
+ &.antd5-menu-item {
+ div {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
}
- &:focus {
- @media (max-width: 767px) {
- background-color: ${({ theme }) => theme.colors.primary.light5};
+ a {
+ transition: background-color ${theme.motionDurationMid}s;
+ &:after {
+ content: '';
+ position: absolute;
+ bottom: -2px;
+ left: 50%;
+ width: 0;
+ height: 3px;
+ opacity: 0;
+ transform: translateX(-50%);
+ transition: translate ${theme.motionDurationMid}s;
+ }
+ &:focus {
+ @media (max-width: 767px) {
+ background-color: ${theme.colorPrimaryBgHover};
+ }
}
}
}
- }
+ `}
`;
const StyledMenu = styled(AntdMenu)`
@@ -86,25 +87,31 @@ const StyledNav = styled(AntdMenu)`
align-items: center;
height: 100%;
gap: 0;
+ border-bottom: 0;
+ line-height: ${theme.lineHeight};
&.antd5-menu-horizontal > .antd5-menu-item {
height: 100%;
display: flex;
align-items: center;
margin: 0;
- border-bottom: 2px solid transparent;
padding: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 4}px;
- &:hover {
- background-color: ${theme.colors.primary.light5};
- border-bottom: 2px solid transparent;
- & a:after {
- opacity: 1;
- width: 100%;
- }
+ ::after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 2px;
+ background-color: ${theme.colorPrimaryBorderHover};
+ bottom: ${theme.sizeUnit / 4}px;
+ left: 0;
+ transform: scale(0);
+ transition: 0.2s all ease-out;
+ }
+ :hover::after {
+ transform: scale(1);
}
}
- &.antd5-menu-horizontal > .antd5-menu-item-selected {
- box-sizing: border-box;
- border-bottom: 2px solid ${theme.colorPrimary};
+ &.antd5-menu-horizontal > .antd5-menu-item-selected::after {
+ transform: scale(1);
}
`}
`;
diff --git a/superset-frontend/src/components/Modal/Modal.tsx
b/superset-frontend/src/components/Modal/Modal.tsx
index 51e727260e..978b9f1ee2 100644
--- a/superset-frontend/src/components/Modal/Modal.tsx
+++ b/superset-frontend/src/components/Modal/Modal.tsx
@@ -399,9 +399,6 @@ const CustomModal = ({
};
CustomModal.displayName = 'Modal';
-// TODO: in another PR, rename this to CompatabilityModal
-// and demote it as the default export.
-// We should start using AntD component interfaces going forward.
const Modal = Object.assign(CustomModal, {
error: AntdModal.error,
warning: AntdModal.warning,
diff --git a/superset-frontend/src/components/PageHeaderWithActions/index.tsx
b/superset-frontend/src/components/PageHeaderWithActions/index.tsx
index 553d4d0f20..b946c6e6fa 100644
--- a/superset-frontend/src/components/PageHeaderWithActions/index.tsx
+++ b/superset-frontend/src/components/PageHeaderWithActions/index.tsx
@@ -154,7 +154,7 @@ export const PageHeaderWithActions = ({
>
<Button
css={menuTriggerStyles}
- buttonStyle="secondary"
+ buttonStyle="tertiary"
aria-label={t('Menu actions trigger')}
tooltip={tooltipProps?.text}
placement={tooltipProps?.placement}
diff --git
a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigItem.tsx
b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigItem.tsx
index 0bb71cefb2..c6b80c2d62 100644
---
a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigItem.tsx
+++
b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigItem.tsx
@@ -47,8 +47,8 @@ export default memo(function ColumnConfigItem({
)}
trigger="click"
placement="right"
- overlayInnerStyle={{ width, height }}
- overlayClassName="column-config-popover"
+ styles={{ body: { width, height } }}
+ rootClassName="column-config-popover"
>
<div
css={{
