feat(icons): add rotate property (#4433)

Author: zettca

packages/cli/src/templates/Canvas/index.tsx

@@ -182,12 +182,7 @@ const Page = () => {
     {
       id: "toggle",
       label: minimize ? "Maximize" : "Minimize",
-      icon: (
-        <DropUpXS
-          iconSize="XS"
-          style={{ rotate: !minimize ? "180deg" : undefined }}
-        />
-      ),
+      icon: <DropUpXS size="XS" rotate={!minimize} />,
     },
   ];
 

packages/core/src/Accordion/Accordion.tsx

@@ -98,10 +98,7 @@ export const HvAccordion = forwardRef<
         onClick={handleClick}
         variant={labelVariant}
       >
-        <DropUpXS
-          color="inherit"
-          style={{ rotate: isOpen ? undefined : "180deg" }}
-        />
+        <DropUpXS color="inherit" rotate={!isOpen} />
         {label}
       </HvTypography>
     );

packages/core/src/Card/stories/Expandable.tsx

@@ -48,24 +48,15 @@ export const Expandable = () => {
         <HvTypography>This is my hidden content</HvTypography>
       </HvCardContent>
 
-      <div
-        style={{ display: "flex", justifyContent: "center", paddingBottom: 0 }}
+      <HvIconButton
+        title={isOpen ? "Collapse" : "Expand"}
+        onClick={() => setIsOpen(!isOpen)}
+        aria-expanded={isOpen}
+        aria-controls={cardContentId}
+        style={{ width: "100%", height: 16, display: "flex", paddingBottom: 0 }}
       >
-        <HvIconButton
-          title={isOpen ? "Collapse" : "Expand"}
-          onClick={() => setIsOpen(!isOpen)}
-          aria-expanded={isOpen}
-          aria-controls={cardContentId}
-        >
-          <DropDownXS
-            style={{
-              width: 16,
-              height: 16,
-              rotate: isOpen ? "180deg" : undefined,
-            }}
-          />
-        </HvIconButton>
-      </div>
+        <DropDownXS rotate={isOpen} size="xs" />
+      </HvIconButton>
     </HvCard>
   );
 };

packages/core/src/DropdownButton/DropdownButton.tsx

@@ -49,9 +49,7 @@ export const HvDropdownButton = forwardRef<
 
   const { classes, cx } = useClasses(classesProp);
 
-  const endIcon = icon ? undefined : (
-    <DropDownXS iconSize="XS" style={{ rotate: open ? "180deg" : undefined }} />
-  );
+  const endIcon = icon ? undefined : <DropDownXS size="XS" rotate={open} />;
 
   return (
     <HvButton

packages/core/src/Forms/Suggestions/Suggestions.stories.tsx

@@ -241,10 +241,8 @@ export const CustomOpen: StoryObj<HvSuggestionsProps> = {
             }}
             endAdornment={
               <DropDownXS
-                style={{
-                  cursor: "pointer",
-                  rotate: open ? "180deg" : undefined,
-                }}
+                rotate={open}
+                style={{ cursor: "pointer" }}
                 onClick={(evt) => {
                   evt.stopPropagation();
                   setOpen((v) => !v);

packages/core/src/Section/Section.tsx

@@ -94,7 +94,7 @@ export const HvSection = forwardRef<HTMLDivElement, HvSectionProps>(
                 {...buttonProps}
                 {...expandButtonProps}
               >
-                <Down style={{ rotate: isOpen ? "180deg" : undefined }} />
+                <Down rotate={isOpen} />
               </HvButton>
             )}
             {title}

packages/core/src/Table/hooks/useRowExpand.tsx

@@ -63,7 +63,7 @@ export const CellWithExpandButton = ({
         aria-expanded={row.isExpanded}
         onClick={rowProps?.onClick}
       >
-        <DropDownXS style={{ rotate: row.isExpanded ? "180deg" : undefined }} />
+        <DropDownXS rotate={row.isExpanded} />
       </HvButton>
       {cell?.value && (
         <HvTypography variant="label" component="span">

packages/core/src/VerticalNavigation/TreeView/TreeViewItem.tsx

@@ -522,10 +522,7 @@ export const HvVerticalNavigationTreeViewItem = forwardRef(
             )}
 
             {isOpen && expandable && (
-              <DropDownXS
-                color="currentcolor"
-                style={{ rotate: expanded ? "180deg" : undefined }}
-              />
+              <DropDownXS color="currentcolor" rotate={expanded} />
             )}
           </HvTypography>
         </HvTooltip>

packages/icons/src/IconBase.tsx

@@ -8,7 +8,7 @@ import {
   theme,
 } from "@hitachivantara/uikit-styles";
 
-import { HvIconContainer } from "./IconContainer";
+import { HvIconContainer, HvIconContainerProps } from "./IconContainer";
 import { getSizeStyles } from "./utils";
 
 const getColorVars = (colorArray: string[]) => {
@@ -52,8 +52,7 @@ const getIconColors = (
 
 export type IconSize = "XS" | "S" | "M" | "L";
 
-export interface IconBaseProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
+export interface IconBaseProps extends Omit<HvIconContainerProps, "color"> {
   /**
    * A color or array of colors to override the default icon colors.
    * Accepts any valid CSS color or color from the UI Kit palette.

packages/icons/src/IconContainer.tsx

@@ -1,12 +1,27 @@
-import { forwardRef, ReactNode } from "react";
+import { forwardRef } from "react";
 import styled from "@emotion/styled";
 import { getColor, HvColorAny, HvSize } from "@hitachivantara/uikit-styles";
 
-import { IconSize } from "./IconBase";
+import type { IconSize } from "./IconBase";
 import { getSizeStyles } from "./utils";
 
-export const StyledIconBase = styled("div")({
+function getRotation(rotation?: HvIconContainerProps["rotate"]) {
+  switch (rotation) {
+    case "up":
+      return "-90deg";
+    case "down":
+      return "90deg";
+    case true:
+      return "180deg";
+    case false:
+    default:
+      return undefined;
+  }
+}
+
+const StyledIconContainer = styled("div")({
   display: "flex",
+  flex: "0 0 auto", // ensure icon doesn't flex grow/shrink
   fontSize: 16,
   // box has a minimum size of 32px (`xs` & `sm`)
   width: "var(--size, 32px)",
@@ -17,7 +32,7 @@ export const StyledIconBase = styled("div")({
 });
 
 export interface HvIconContainerProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
+  extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * A color to override the default icon colors.
    * Accepts any valid CSS color or color from the UI Kit palette.
@@ -38,38 +53,39 @@ export interface HvIconContainerProps
    * @default "S"
    */
   size?: HvSize | IconSize | number;
-  /**
-   * Icon to render.
-   */
-  children?: ReactNode;
+  /** Whether to rotate the icon @private WIP */
+  rotate?: boolean | "up" | "down";
 }
 
 /**
  * A component used to contain icons in the established margins.
- * This allows for the use of external icons with our components that expect an icon container of a specific size.
- * It also makes the use of our colors easier through the `color` prop.
+ *
+ * This allows using external icons UI Kit components that expect padding around the icon.
+ * It also makes the use of theme colors easier through the `color` prop.
  *
  * @example
- * <HvIconContainer color="warning" size="lg" />
+ * <HvIconContainer color="warning" size="lg">
  *  <svg />
  * </HvIconContainer>
- *
  */
-export const HvIconContainer = forwardRef<HTMLDivElement, HvIconContainerProps>(
-  (props, ref) => {
-    const { size, style: styleProp, color, children, ...others } = props;
-    return (
-      <StyledIconBase
-        ref={ref}
-        style={{
-          ...getSizeStyles("", size),
-          color: getColor(color),
-          ...styleProp,
-        }}
-        {...others}
-      >
-        {children}
-      </StyledIconBase>
-    );
-  },
-);
+export const HvIconContainer = forwardRef<
+  // no-indent
+  HTMLDivElement,
+  HvIconContainerProps
+>(function HvIconContainer(props, ref) {
+  const { size, style, color, rotate, children, ...others } = props;
+  return (
+    <StyledIconContainer
+      ref={ref}
+      style={{
+        ...getSizeStyles("", size),
+        color: getColor(color),
+        rotate: getRotation(rotate),
+        ...style,
+      }}
+      {...others}
+    >
+      {children}
+    </StyledIconContainer>
+  );
+});