fix: styles across components (#4263)

fix(ListContainer): outline overflow clipping Co-authored-by: Bruno Henriques <[email protected]>
lumada-design · Aug 13, 2024 · 59f16c4 · 59f16c4
1 parent fdb2d48
commit 59f16c4
Show file tree

Hide file tree

Showing 27 changed files with 145 additions and 233 deletions.
diff --git a/apps/app/src/assets/HitachiLogo.tsx b/apps/app/src/assets/HitachiLogo.tsx
@@ -1,16 +1,10 @@
-import { theme } from "@hitachivantara/uikit-styles";
-
 export const HitachiLogo = ({ ...others }: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg
-      x="0px"
-      y="0px"
+      role="img"
       viewBox="0 0 80 16"
-      xmlSpace="preserve"
-      width={80}
-      height={16}
-      style={{ width: 72, height: 20 }}
-      fill={theme.colors.secondary}
+      width={72}
+      fill="currentColor"
       {...others}
     >
       <title>Logo</title>

diff --git a/packages/cli/src/baselines/vite/src/assets/HitachiLogo.tsx b/packages/cli/src/baselines/vite/src/assets/HitachiLogo.tsx
@@ -1,18 +1,13 @@
-import { theme } from "@hitachivantara/uikit-styles";
-
-const HitachiLogo = (props: React.SVGAttributes<SVGElement>) => {
+export const HitachiLogo = ({ ...others }: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg
-      x="0px"
-      y="0px"
+      role="img"
       viewBox="0 0 80 16"
-      xmlSpace="preserve"
-      width={80}
-      height={16}
-      style={{ width: 72, height: 20 }}
-      fill={theme.colors.secondary}
-      {...props}
+      width={72}
+      fill="currentColor"
+      {...others}
     >
+      <title>Logo</title>
       <path d="M63.6,2.5c0,0,0,4.8,0,4.7H70c0,0,0-4.7,0-4.7s3.1,0,3.1,0c0,0,0,11.8,0,11.9H70c0,0,0-5.2,0-5.2c0,0-6.3,0-6.3,0c0,0,0,5.2,0,5.2h-3.1c0,0,0-11.9,0-11.9C60.5,2.5,63.6,2.5,63.6,2.5z" />
       <path d="M33.9,2.5c0,0,0,2,0,2h-4.8v9.8h-3.1V4.5h-4.8v-2C21.1,2.5,33.9,2.5,33.9,2.5z" />
       <path d="M46,14.3c0,0-3.5,0-3.5,0l-1-2.6h-5.9c0,0-1,2.6-1,2.6h-3.5l5.5-11.9h3.8L46,14.3z M38.6,4.5l-2.2,5.4h4.4L38.6,4.5" />
@@ -30,5 +25,3 @@ const HitachiLogo = (props: React.SVGAttributes<SVGElement>) => {
     </svg>
   );
 };
-
-export default HitachiLogo;
diff --git a/packages/cli/src/baselines/vite/src/components/common/Header/Header.tsx b/packages/cli/src/baselines/vite/src/components/common/Header/Header.tsx
@@ -11,7 +11,7 @@ import {
   HvHeaderNavigationProps,
 } from "@hitachivantara/uikit-react-core";
 
-import HitachiLogo from "../../../assets/HitachiLogo";
+import { HitachiLogo } from "../../../assets/HitachiLogo";
 import { NavigationContext } from "../../../context/NavigationContext";
 // @ts-expect-error TODO
 import navigation from "../../../lib/navigation";

diff --git a/packages/core/src/AppSwitcher/Action/Action.styles.tsx b/packages/core/src/AppSwitcher/Action/Action.styles.tsx
@@ -9,7 +9,6 @@ export const { staticClasses, useClasses } = createClasses(
       width: "100%",
       maxWidth: 280,
       minHeight: 52,
-      marginRight: theme.space.sm,
     },
     icon: { display: "flex", minWidth: 40, justifyContent: "center" },
     iconUrl: { width: 32 },

diff --git a/packages/core/src/AppSwitcher/Action/Action.tsx b/packages/core/src/AppSwitcher/Action/Action.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useState } from "react";
 import { Info } from "@hitachivantara/uikit-react-icons";
-import { getColor, HvColorAny, theme } from "@hitachivantara/uikit-styles";
+import { getColor, HvColorAny } from "@hitachivantara/uikit-styles";
 
 import { HvAvatar } from "../../Avatar";
 import { useUniqueId } from "../../hooks/useUniqueId";
@@ -66,9 +66,10 @@ export const HvAppSwitcherAction = ({
   const { name, description, disabled, iconElement, iconUrl, url, target } =
     application;
 
-  const color = disabled
-    ? theme.colors.secondary_60
-    : getColor(application?.color, theme.colors.secondary);
+  const color = getColor(
+    disabled ? "secondary_60" : application?.color,
+    "secondary",
+  );
 
   const [validIconUrl, setValidIconUrl] = useState<boolean>(true);
 
@@ -122,48 +123,6 @@ export const HvAppSwitcherAction = ({
   const isLink = url != null;
   const descriptionElementId = useUniqueId(id);
 
-  const renderApplication = useCallback(
-    (children: React.ReactNode) => {
-      const typographyProps = {
-        className: classes.typography,
-        onClick: handleOnClick,
-        style: { borderColor: color },
-        "aria-label": name,
-        ...(description && { "aria-describedby": descriptionElementId }),
-      };
-
-      if (isLink) {
-        return (
-          <HvTypography
-            component="a"
-            href={url}
-            target={target || "_top"}
-            {...typographyProps}
-          >
-            {children}
-          </HvTypography>
-        );
-      }
-
-      return (
-        <HvTypography component="button" {...typographyProps}>
-          {children}
-        </HvTypography>
-      );
-    },
-    [
-      classes.typography,
-      color,
-      description,
-      descriptionElementId,
-      handleOnClick,
-      isLink,
-      name,
-      target,
-      url,
-    ],
-  );
-
   return (
     <HvListItem
       id={id}
@@ -177,37 +136,33 @@ export const HvAppSwitcherAction = ({
         className,
       )}
     >
-      {/* As HvTooltip don't have the id prop, is not possible to use the aria-labelledby to reference it.
-       In substitution is used the aria-label with the "title" value */}
-      {renderApplication(
-        <>
-          <div className={classes.icon}>{renderApplicationIcon()}</div>
-
-          <HvOverflowTooltip
-            paragraphOverflow
-            className={classes.title}
-            placement="top-start"
-            data={name}
-            classes={{
-              tooltipAnchorParagraph: classes.titleAnchor,
-            }}
-          />
-
-          {description && (
-            <HvTooltip
-              disableFocusListener
-              disableTouchListener
-              title={description}
-            >
-              <Info
-                className={classes.iconInfo}
-                title={description}
-                id={descriptionElementId}
-              />
-            </HvTooltip>
-          )}
-        </>,
-      )}
+      <HvTypography
+        component="button"
+        className={classes.typography}
+        onClick={handleOnClick}
+        style={{ borderColor: color }}
+        aria-label={name}
+        {...(description && { "aria-describedby": descriptionElementId })}
+        {...(isLink && { component: "a", href: url, target: target || "_top" })}
+      >
+        <div className={classes.icon}>{renderApplicationIcon()}</div>
+
+        <HvOverflowTooltip
+          paragraphOverflow
+          className={classes.title}
+          placement="top-start"
+          data={name}
+          classes={{
+            tooltipAnchorParagraph: classes.titleAnchor,
+          }}
+        />
+
+        {description && (
+          <HvTooltip title={description}>
+            <Info className={classes.iconInfo} id={descriptionElementId} />
+          </HvTooltip>
+        )}
+      </HvTypography>
     </HvListItem>
   );
 };
diff --git a/packages/core/src/AppSwitcher/AppSwitcher.styles.tsx b/packages/core/src/AppSwitcher/AppSwitcher.styles.tsx
@@ -6,14 +6,7 @@ export const { staticClasses, useClasses } = createClasses("HvAppSwitcher", {
   root: {
     display: "flex",
     flexDirection: "column",
-    backgroundColor: theme.colors.atmo1,
     overflow: "hidden",
-
-    // we need to play with the 4px because of the focus ring
-    // padding: `${theme.spacing(2) - 4}px 0 ${theme.spacing(2) - 4}px ${
-    //   theme.spacing(2) - 4
-    // }px`,
-    padding: theme.spacing("sm", 0, "sm", "sm"),
   },
   item: {},
   itemSelected: {},
@@ -28,22 +21,19 @@ export const { staticClasses, useClasses } = createClasses("HvAppSwitcher", {
     justifyContent: "flex-start",
 
     overflowY: "auto",
-
-    // We need to play with the 4px because of the focus ring
-    padding: "4px 0 4px 4px",
+    gap: theme.space.xs,
+    padding: 4,
+    margin: -4,
   },
   footerContainer: {
     display: "flex",
     alignItems: "center",
     marginTop: "auto",
     height: 52,
-
-    // We need to play with the 4px because of the focus ring
-    // padding: `${theme.hv.spacing.sm - 4}px ${theme.hv.spacing.sm + 4}px 4px 4px`,
-    padding: `${theme.space.sm} ${theme.space.sm} 4px 4px`,
+    paddingTop: theme.space.sm,
   },
   open: {
-    zIndex: "1200",
+    zIndex: theme.zIndices.overlay,
     position: "absolute",
     top: "50px",
     overflowX: "hidden",
@@ -52,16 +42,13 @@ export const { staticClasses, useClasses } = createClasses("HvAppSwitcher", {
   closed: { display: "none" },
   title: {
     minHeight: 36,
-
-    // we need to play with the 4px because of the focus ring
-    // padding: `4px ${theme.hv.spacing.sm}px ${theme.hv.spacing.sm - 4}px 4px`,
-    padding: `4px ${theme.space.sm} ${theme.space.sm} 4px`,
+    paddingBottom: theme.space.sm,
     ...theme.typography.label,
   },
   titleAnchor: {
     WebkitLineClamp: 2,
   },
-  single: { width: 320 },
-  dual: { width: 640 },
+  single: { width: 280 + 40 },
+  dual: { width: 560 + 40 },
   fluid: {},
 });
diff --git a/packages/core/src/AppSwitcher/AppSwitcher.tsx b/packages/core/src/AppSwitcher/AppSwitcher.tsx
@@ -3,6 +3,7 @@ import { useMemo } from "react";
 import { useDefaultProps } from "../hooks/useDefaultProps";
 import { HvListContainer } from "../ListContainer";
 import { HvOverflowTooltip } from "../OverflowTooltip";
+import { HvPanel } from "../Panel";
 import { HvBaseProps } from "../types/generic";
 import { HvTypography } from "../Typography";
 import { ExtractNames } from "../utils/classes";
@@ -88,7 +89,7 @@ export const HvAppSwitcher = (props: HvAppSwitcherProps) => {
   );
 
   return (
-    <div
+    <HvPanel
       className={cx(
         classes.root,
         classes[layout],
@@ -112,7 +113,11 @@ export const HvAppSwitcher = (props: HvAppSwitcherProps) => {
             }}
           />
         ))}
-      <HvListContainer disableGutters className={classes.actionsContainer}>
+      <HvListContainer
+        condensed
+        disableGutters
+        className={classes.actionsContainer}
+      >
         {panelActions}
       </HvListContainer>
       {footer && (
@@ -124,6 +129,6 @@ export const HvAppSwitcher = (props: HvAppSwitcherProps) => {
           {footer}
         </HvTypography>
       )}
-    </div>
+    </HvPanel>
   );
 };
diff --git a/packages/core/src/AvatarGroup/AvatarGroup.tsx b/packages/core/src/AvatarGroup/AvatarGroup.tsx
@@ -5,7 +5,7 @@ import { HvSize, theme } from "@hitachivantara/uikit-styles";
 import { HvAvatar } from "../Avatar/Avatar";
 import { useDefaultProps } from "../hooks/useDefaultProps";
 import { HvBaseProps } from "../types/generic";
-import { ExtractNames } from "../utils/classes";
+import { ExtractNames, mergeStyles } from "../utils/classes";
 import { staticClasses, useClasses } from "./AvatarGroup.styles";
 import { HvAvatarGroupProvider } from "./AvatarGroupContext";
 
@@ -167,14 +167,15 @@ export const HvAvatarGroup = forwardRef<HTMLDivElement, HvAvatarGroupProps>(
         className={cx(
           classes.root,
           classes[direction],
-          { [classes.highlight]: highlight },
-          { [classes.toBack]: toBack },
+          {
+            [classes.highlight]: highlight,
+            [classes.toBack]: toBack,
+          },
           className,
         )}
-        style={{
-          ["--spacing" as string]: `-${spacingValue}px`,
-          ...style,
-        }}
+        style={mergeStyles(style, {
+          "--spacing": `-${spacingValue}px`,
+        })}
         ref={ref}
         {...others}
       >

diff --git a/packages/core/src/BaseDropdown/BaseDropdown.styles.tsx b/packages/core/src/BaseDropdown/BaseDropdown.styles.tsx
@@ -48,6 +48,7 @@ export const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
   headerDisabled: {
     cursor: "not-allowed",
     pointerEvents: "none",
+    color: theme.colors.secondary_60,
     border: `1px solid ${theme.colors.secondary_60}`,
     background: theme.colors.atmo2,
     "&:hover": {
@@ -57,6 +58,7 @@ export const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
   headerReadOnly: {
     cursor: "not-allowed",
     pointerEvents: "none",
+    color: theme.colors.secondary_80,
     border: `1px solid ${theme.colors.secondary_60}`,
     background: theme.colors.atmo2,
     userSelect: "text",
@@ -79,16 +81,13 @@ export const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
     boxSizing: "border-box",
     paddingLeft: theme.space.xs,
     paddingRight: theme.sizes.sm,
+    color: "inherit",
   },
+  selectionDisabled: {},
   placeholder: {
     display: "block",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    ...theme.typography.body,
     color: theme.colors.secondary_80,
   },
-  selectionDisabled: { color: theme.colors.secondary_60 },
   panel: {
     position: "relative",
 

diff --git a/packages/core/src/BaseDropdown/BaseDropdown.tsx b/packages/core/src/BaseDropdown/BaseDropdown.tsx
@@ -267,14 +267,13 @@ const BaseDropdown = forwardRef<
       ref={handleDropdownHeaderRef}
       {...dropdownHeaderProps}
     >
-      <div className={classes.selection}>
+      <div
+        className={cx(classes.selection, {
+          [classes.selectionDisabled]: disabled,
+        })}
+      >
         {placeholder && typeof placeholder === "string" ? (
-          <HvTypography
-            className={cx(classes.placeholder, {
-              [classes.selectionDisabled]: disabled,
-            })}
-            variant="body"
-          >
+          <HvTypography noWrap className={classes.placeholder}>
             {placeholder}
           </HvTypography>
         ) : (