fix(theming): More theming bugs/regressions (apache#34507)

Author: msyavuz

superset-frontend/cypress-base/cypress/e2e/dashboard/horizontalFilterBar.test.ts

@@ -155,7 +155,7 @@ describe('Horizontal FilterBar', () => {
     ]);
     setFilterBarOrientation('horizontal');
 
-    cy.get('.filter-item-wrapper').should('have.length', 3);
+    cy.get('.filter-item-wrapper').should('have.length', 4);
     openMoreFilters();
     cy.getBySel('form-item-value').should('have.length', 12);
     cy.getBySel('filter-control-name').contains('test_3').should('be.visible');

superset-frontend/packages/superset-ui-core/src/components/Badge/index.tsx

@@ -24,6 +24,7 @@ export const Badge = styled((props: BadgeProps) => <AntdBadge {...props} />)`
   ${({ theme, color, count }) => `
     & > sup,
     & > sup.ant-badge-count {
+      box-shadow: none;
       ${
         count !== undefined ? `background: ${color || theme.colorPrimary};` : ''
       }

superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/index.tsx

@@ -17,96 +17,23 @@
  * under the License.
  */
 import {
-  CSSProperties,
   cloneElement,
   forwardRef,
-  ReactElement,
   RefObject,
   useEffect,
   useImperativeHandle,
   useLayoutEffect,
   useMemo,
   useState,
   useRef,
-  ReactNode,
   useCallback,
 } from 'react';
 
 import { Global } from '@emotion/react';
 import { css, t, useTheme, usePrevious } from '@superset-ui/core';
 import { useResizeDetector } from 'react-resize-detector';
 import { Badge, Icons, Button, Tooltip, Popover } from '..';
-/**
- * Container item.
- */
-export interface DropdownItem {
-  /**
-   * String that uniquely identifies the item.
-   */
-  id: string;
-  /**
-   * The element to be rendered.
-   */
-  element: ReactElement;
-}
-
-/**
- * Horizontal container that displays overflowed items in a dropdown.
- * It shows an indicator of how many items are currently overflowing.
- */
-export interface DropdownContainerProps {
-  /**
-   * Array of items. The id property is used to uniquely identify
-   * the elements when rendering or dealing with event handlers.
-   */
-  items: DropdownItem[];
-  /**
-   * Event handler called every time an element moves between
-   * main container and dropdown.
-   */
-  onOverflowingStateChange?: (overflowingState: {
-    notOverflowed: string[];
-    overflowed: string[];
-  }) => void;
-  /**
-   * Option to customize the content of the dropdown.
-   */
-  dropdownContent?: (overflowedItems: DropdownItem[]) => ReactElement;
-  /**
-   * Dropdown ref.
-   */
-  dropdownRef?: RefObject<HTMLDivElement>;
-  /**
-   * Dropdown additional style properties.
-   */
-  dropdownStyle?: CSSProperties;
-  /**
-   * Displayed count in the dropdown trigger.
-   */
-  dropdownTriggerCount?: number;
-  /**
-   * Icon of the dropdown trigger.
-   */
-  dropdownTriggerIcon?: ReactElement;
-  /**
-   * Text of the dropdown trigger.
-   */
-  dropdownTriggerText?: string;
-  /**
-   * Text of the dropdown trigger tooltip
-   */
-  dropdownTriggerTooltip?: ReactNode | null;
-  /**
-   * Main container additional style properties.
-   */
-  style?: CSSProperties;
-  /**
-   * Force render popover content before it's first opened
-   */
-  forceRender?: boolean;
-}
-
-export type DropdownRef = HTMLDivElement & { open: () => void };
+import { DropdownContainerProps, DropdownItem, DropdownRef } from './types';
 
 const MAX_HEIGHT = 500;
 
@@ -428,8 +355,13 @@ export const DropdownContainer = forwardRef(
                 <Button
                   buttonStyle="secondary"
                   data-test="dropdown-container-btn"
+                  icon={dropdownTriggerIcon}
+                  css={css`
+                    padding-left: ${theme.paddingXS}px;
+                    padding-right: ${theme.paddingXXS}px;
+                    gap: ${theme.sizeXXS}px;
+                  `}
                 >
-                  {dropdownTriggerIcon}
                   {dropdownTriggerText}
                   <Badge
                     count={dropdownTriggerCount ?? overflowingCount}
@@ -461,3 +393,5 @@ export const DropdownContainer = forwardRef(
     );
   },
 );
+
+export { DropdownItem, DropdownContainerProps, DropdownRef } from './types';

superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/types.ts

@@ -17,6 +17,7 @@
  * under the License.
  */
 import type { CSSProperties, ReactElement, RefObject, ReactNode } from 'react';
+import { IconType } from '../Icons';
 
 /**
  * Container item.
@@ -69,7 +70,7 @@ export interface DropdownContainerProps {
   /**
    * Icon of the dropdown trigger.
    */
-  dropdownTriggerIcon?: ReactElement;
+  dropdownTriggerIcon?: IconType;
   /**
    * Text of the dropdown trigger.
    */

superset-frontend/packages/superset-ui-core/src/components/Select/styles.tsx

@@ -32,8 +32,9 @@ export const StyledHeader = styled.span<{ headerPosition: string }>`
 `;
 
 export const StyledContainer = styled.div<{ headerPosition: string }>`
-  ${({ headerPosition }) => `
+  ${({ headerPosition, theme }) => `
     display: flex;
+    gap: ${theme.sizeUnit}px;
     flex-direction: ${headerPosition === 'top' ? 'column' : 'row'};
     align-items: ${headerPosition === 'left' ? 'center' : undefined};
     width: 100%;

superset-frontend/packages/superset-ui-core/src/components/TableCollection/index.tsx

@@ -52,7 +52,9 @@ interface TableCollectionProps<T extends object> {
 const StyledTable = styled(Table)`
   ${({ theme }) => `
     th.ant-column-cell {
-      min-width: fit-content;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
     .actions {
       opacity: 0;
@@ -83,7 +85,6 @@ const StyledTable = styled(Table)`
       font-feature-settings: 'tnum' 1;
       text-overflow: ellipsis;
       overflow: hidden;
-      max-width: 320px;
       line-height: 1;
       vertical-align: middle;
       padding-left: ${theme.sizeUnit * 4}px;
@@ -149,7 +150,7 @@ function TableCollection<T extends object>({
       size={size}
       data-test="listview-table"
       pagination={false}
-      tableLayout="auto"
+      tableLayout="fixed"
       rowKey="rowId"
       rowSelection={rowSelection}
       locale={{ emptyText: null }}

superset-frontend/packages/superset-ui-core/src/components/TableCollection/utils.tsx

@@ -94,7 +94,7 @@ export function mapColumns<T extends object>(
       dataIndex: column.id?.includes('.') ? column.id.split('.') : column.id,
       hidden: column.hidden,
       key: column.id,
-      minWidth: column.size ? COLUMN_SIZE_MAP[column.size] : COLUMN_SIZE_MAP.md,
+      width: column.size ? COLUMN_SIZE_MAP[column.size] : COLUMN_SIZE_MAP.md,
       ellipsis: !columnsForWrapText?.includes(column.id),
       defaultSortOrder: (isSorted
         ? isSortedDesc

superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx

@@ -21,7 +21,7 @@ import { useMemo, FC, ReactElement } from 'react';
 import { t, styled, useTheme, SupersetTheme } from '@superset-ui/core';
 
 import { Button, DropdownButton } from '@superset-ui/core/components';
-import { Icons } from '@superset-ui/core/components/Icons';
+import { IconType, Icons } from '@superset-ui/core/components/Icons';
 import { detectOS } from 'src/utils/common';
 import { QueryButtonProps } from 'src/SqlLab/types';
 import useQueryEditor from 'src/SqlLab/hooks/useQueryEditor';
@@ -40,23 +40,24 @@ export interface RunQueryActionButtonProps {
   overlayCreateAsMenu: ReactElement | null;
 }
 
-const buildText = (
+const buildTextAndIcon = (
   shouldShowStopButton: boolean,
   selectedText: string | undefined,
   theme: SupersetTheme,
-): string | JSX.Element => {
-  if (shouldShowStopButton) {
-    return (
-      <>
-        <Icons.Square iconSize="xs" iconColor={theme.colorIcon} />
-        {t('Stop')}
-      </>
-    );
-  }
+): { text: string; icon?: IconType } => {
+  let text = t('Run');
+  let icon: IconType | undefined;
   if (selectedText) {
-    return t('Run selection');
+    text = t('Run selection');
+  }
+  if (shouldShowStopButton) {
+    text = t('Stop');
+    icon = <Icons.Square iconSize="xs" iconColor={theme.colorIcon} />;
   }
-  return t('Run');
+  return {
+    text,
+    icon,
+  };
 };
 
 const onClick = (
@@ -130,6 +131,11 @@ const RunQueryActionButton = ({
     [userOS],
   );
 
+  const { text, icon } = useMemo(
+    () => buildTextAndIcon(shouldShowStopBtn, selectedText, theme),
+    [shouldShowStopBtn, selectedText, theme],
+  );
+
   return (
     <StyledButton>
       <ButtonComponent
@@ -159,9 +165,10 @@ const RunQueryActionButton = ({
             }
           : {
               buttonStyle: shouldShowStopBtn ? 'danger' : 'primary',
+              icon,
             })}
       >
-        {buildText(shouldShowStopBtn, selectedText, theme)}
+        {text}
       </ButtonComponent>
     </StyledButton>
   );

superset-frontend/src/components/Datasource/Field.tsx

@@ -26,12 +26,6 @@ import {
   FormLabel,
 } from '@superset-ui/core/components';
 
-const formItemInlineCss = css`
-  .ant-form-item-control-input-content {
-    display: flex;
-    flex-direction: row;
-  }
-`;
 interface FieldProps<V> {
   fieldKey: string;
   value?: V;
@@ -64,10 +58,6 @@ export default function Field<V>({
     [onChange, fieldKey],
   );
 
-  const hookedControl = cloneElement(control, {
-    value,
-    onChange: onControlChange,
-  });
   const theme = useTheme();
   const extra = !compact && description ? description : undefined;
   const infoTooltip =
@@ -83,13 +73,24 @@ export default function Field<V>({
         <Icons.InfoCircleOutlined
           iconSize="s"
           css={css`
-            margin-left: ${theme.sizeUnit}px;
+            margin-left: ${theme.marginXXS}px;
           `}
           iconColor={theme.colorTextTertiary}
         />
       </Tooltip>
     ) : undefined;
 
+  const hookedControl = cloneElement(control, {
+    value,
+    onChange: onControlChange,
+    label: (
+      <FormLabel>
+        {label || fieldKey}
+        {infoTooltip}
+      </FormLabel>
+    ),
+  });
+
   return (
     <div
       css={
@@ -101,22 +102,23 @@ export default function Field<V>({
     >
       {additionalControl}
       <FormItem
-        label={
-          <FormLabel>
-            {label || fieldKey}
-            {infoTooltip}
-          </FormLabel>
-        }
-        css={inline && formItemInlineCss}
         extra={extra}
+        css={
+          !inline &&
+          css`
+            .ControlHeader {
+              margin-bottom: ${theme.marginXXS}px;
+            }
+          `
+        }
       >
         {hookedControl}
       </FormItem>
       {errorMessage && (
         <div
           css={(theme: SupersetTheme) => ({
             color: theme.colorText,
-            [inline ? 'marginLeft' : 'marginTop']: theme.sizeUnit,
+            [inline ? 'marginLeft' : 'marginTop']: theme.marginXXS,
           })}
         >
           {errorMessage}

superset-frontend/src/components/Datasource/Fieldset.tsx

@@ -18,6 +18,7 @@
  */
 import { ReactNode, useCallback } from 'react';
 import { Divider, Form, Typography } from '@superset-ui/core/components';
+import { css } from '@superset-ui/core';
 import { recurseReactClone } from './utils';
 import Field from './Field';
 
@@ -57,7 +58,12 @@ export default function Fieldset({
   return (
     <Form className="CRUD" layout="vertical">
       {title && (
-        <Typography.Title level={5}>
+        <Typography.Title
+          level={5}
+          css={css`
+            margin-top: 0.5em;
+          `}
+        >
           {title} <Divider />
         </Typography.Title>
       )}