feat: improve apsara component (#65)

* feat: expose useWatch form * fix: fix accesibility form * feat: create SidebarV2 * fix: fix accessibility button component (#63) fix: fix accesibility button component * feat: expose custom filter listing (#64) * chore: expose sidebarV2 * feat: code refactor sidebarV2 * feat: explore classname tooltips * feat: add focus-visible keyboard navigation * feat: add default collapse current active sidebar state * feat: expose customize icon collapsible * chore: bump v0.10.0
goto · Nov 1, 2024 · 5ff93b0 · 5ff93b0
1 parent 3f3f938
commit 5ff93b0
Show file tree

Hide file tree

Showing 32 changed files with 950 additions and 180 deletions.
diff --git a/lerna.json b/lerna.json
@@ -2,7 +2,7 @@
     "packages": ["packages/*"],
     "npmClient": "yarn",
     "useWorkspaces": true,
-    "version": "0.9.22",
+    "version": "0.10.0",
     "command": {
         "version": {
             "message": "chore(release): publish %s"

diff --git a/packages/apsara-icons/package.json b/packages/apsara-icons/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@goto-company/icons",
-    "version": "0.9.22",
+    "version": "0.10.0",
     "description": "Apsara icons",
     "scripts": {
         "build": "node scripts/build.js",

diff --git a/packages/apsara-ui/package.json b/packages/apsara-ui/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@goto-company/apsara",
-    "version": "0.9.22",
+    "version": "0.10.0",
     "description": "A list of base components for apsara",
     "author": "Praveen Yadav <[email protected]>",
     "license": "Apache-2.0",

diff --git a/packages/apsara-ui/src/Button/Button.styles.tsx b/packages/apsara-ui/src/Button/Button.styles.tsx
@@ -31,150 +31,158 @@ const colorStyles = (color: string, background: string, border: string) => css`
     background: ${background};
 `;
 
-export const StyledButton = styled("span")<{
-    type: "primary" | "ghost" | "dashed" | "link" | "text" | "default" | "barebone";
-    size: string | "small" | "middle" | "large";
+interface StyBaseButtonParams {
+    variantType: "primary" | "ghost" | "dashed" | "link" | "text" | "default" | "barebone";
+    size: "small" | "middle" | "large";
     block: boolean;
     shape: "circle" | "round" | "default";
-}>`
-    .apsara-btn {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        gap: 8px;
-        text-shadow: none;
-        border-radius: ${({ shape }) => (shape === "circle" ? "50%" : "2px")};
-        cursor: pointer;
-        outline: none;
-        border: 1px solid #fff;
-        transition: 0.3s;
-        ${({ block }) => block && "width: 100%"};
-
-        padding: ${({ size }) => styleMap[size]?.padding || styleMap[defaultSize].padding};
-        height: ${({ size }) => styleMap[size]?.height || styleMap[defaultSize].height};
-        font-size: ${({ size }) => styleMap[size]?.fontSize || styleMap[defaultSize].fontSize};
-        line-height: ${({ size }) => styleMap[size]?.lineHeight || styleMap[defaultSize].lineHeight};
-        letter-spacing: ${({ size }) => styleMap[size]?.letterSpacing || styleMap[defaultSize].letterSpacing};
+}
 
-        &:focus {
-            box-shadow: 0px 0px 0px 1px rgb(166, 200, 242);
-            animation: anim-shadow 0.5s forwards;
-        }
+const styBaseButton = css<StyBaseButtonParams>`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    text-shadow: none;
+    border-radius: ${({ shape }) => (shape === "circle" ? "50%" : "2px")};
+    cursor: pointer;
+    outline: none;
+    border: 1px solid #fff;
+    transition: 0.3s;
+    ${({ block }) => block && "width: 100%"};
+
+    padding: ${({ size }) => styleMap[size]?.padding || styleMap[defaultSize].padding};
+    height: ${({ size }) => styleMap[size]?.height || styleMap[defaultSize].height};
+    font-size: ${({ size }) => styleMap[size]?.fontSize || styleMap[defaultSize].fontSize};
+    line-height: ${({ size }) => styleMap[size]?.lineHeight || styleMap[defaultSize].lineHeight};
+    letter-spacing: ${({ size }) => styleMap[size]?.letterSpacing || styleMap[defaultSize].letterSpacing};
+
+    &:focus {
+        box-shadow: 0px 0px 0px 1px rgb(166, 200, 242);
+        animation: anim-shadow 0.5s forwards;
+    }
 
-        @keyframes anim-shadow {
-            100% {
-                box-shadow: 0px 0px 5px 5px rgba(168, 208, 250, 0);
-            }
+    @keyframes anim-shadow {
+        100% {
+            box-shadow: 0px 0px 5px 5px rgba(168, 208, 250, 0);
         }
+    }
 
-        ${({ theme }) => colorStyles(theme?.colors?.black[9], "transparent", theme?.colors?.black[4])}
-        &:hover,
+    ${({ theme }) => colorStyles(theme?.colors?.black[9], "transparent", theme?.colors?.black[4])}
+    &:hover,
         &:focus {
-            ${({ theme }) => colorStyles(theme?.colors?.primary[5], "transparent", theme?.colors?.primary[5])}
-        }
-        &:active {
-            ${({ theme }) => colorStyles(theme?.colors?.primary[6], "transparent", theme?.colors?.primary[6])}
-        }
+        ${({ theme }) => colorStyles(theme?.colors?.primary[5], "transparent", theme?.colors?.primary[5])}
+    }
+    &:active {
+        ${({ theme }) => colorStyles(theme?.colors?.primary[6], "transparent", theme?.colors?.primary[6])}
+    }
 
-        &[disabled] {
-            cursor: not-allowed;
-            &,
-            &:hover,
-            &:focus,
-            &:active {
-                ${({ theme }) => colorStyles(theme?.colors?.black[6], "transparent", theme?.colors?.black[4])}
-            }
+    &[disabled] {
+        cursor: not-allowed;
+        &,
+        &:hover,
+        &:focus,
+        &:active {
+            ${({ theme }) => colorStyles(theme?.colors?.black[6], "transparent", theme?.colors?.black[4])}
         }
+    }
 
-        ${({ type, theme }) =>
-            type === "primary"
-                ? css`
-                      ${colorStyles(theme?.colors?.black[0], theme?.colors?.primary[4], theme?.colors?.primary[4])}
-                      &:hover,
+    ${({ variantType, theme }) =>
+        variantType === "primary"
+            ? css`
+                  ${colorStyles(theme?.colors?.black[0], theme?.colors?.primary[4], theme?.colors?.primary[4])}
+                  &:hover,
                       &:focus {
-                          ${colorStyles(theme?.colors?.black[0], theme?.colors?.primary[5], theme?.colors?.primary[5])}
-                      }
+                      ${colorStyles(theme?.colors?.black[0], theme?.colors?.primary[5], theme?.colors?.primary[5])}
+                  }
 
+                  &:active {
+                      ${colorStyles(theme?.colors?.black[0], theme?.colors?.primary[6], theme?.colors?.primary[6])}
+                  }
+
+                  &[disabled] {
+                      &,
+                      &:hover,
+                      &:focus,
                       &:active {
-                          ${colorStyles(theme?.colors?.black[0], theme?.colors?.primary[6], theme?.colors?.primary[6])}
+                          ${colorStyles(theme?.colors?.black[0], theme?.colors?.black[6], theme?.colors?.black[6])}
                       }
+                  }
+              `
+            : variantType === "text"
+            ? css`
+                  ${colorStyles(theme?.colors?.primary[4], "transparent", "transparent")}
+                  &:hover,
+                      &:focus {
+                      ${colorStyles(theme?.colors?.primary[5], "transparent", "transparent")}
+                      animation: none;
+                      box-shadow: none;
+                  }
+                  &:active {
+                      ${colorStyles(theme?.colors?.primary[6], "transparent", "transparent")}
+                  }
 
-                      &[disabled] {
-                          &,
-                          &:hover,
-                          &:focus,
-                          &:active {
-                              ${colorStyles(theme?.colors?.black[0], theme?.colors?.black[6], theme?.colors?.black[6])}
-                          }
-                      }
-                  `
-                : type === "text"
-                ? css`
-                      ${colorStyles(theme?.colors?.primary[4], "transparent", "transparent")}
+                  &[disabled] {
+                      &,
                       &:hover,
-                      &:focus {
-                          ${colorStyles(theme?.colors?.primary[5], "transparent", "transparent")}
-                          animation: none;
-                          box-shadow: none;
-                      }
+                      &:focus,
                       &:active {
-                          ${colorStyles(theme?.colors?.primary[6], "transparent", "transparent")}
+                          ${colorStyles(theme?.colors?.black[6], "transparent", "transparent")}
                       }
+                  }
+              `
+            : variantType === "barebone"
+            ? css`
+                  padding: 0px;
+                  background: transparent;
+                  border: 0;
+                  box-shadow: none;
+                  color: ${({ theme }) => theme?.colors?.primary[5]};
+                  font-weight: bold;
 
-                      &[disabled] {
-                          &,
-                          &:hover,
-                          &:focus,
-                          &:active {
-                              ${colorStyles(theme?.colors?.black[6], "transparent", "transparent")}
-                          }
-                      }
-                  `
-                : type === "barebone"
-                ? css`
-                      padding: 0px;
-                      background: transparent;
-                      border: 0;
-                      box-shadow: none;
-                      color: ${({ theme }) => theme?.colors?.primary[5]};
+                  &.apsara-btn[disabled],
+                  > .apsara-btn[disabled] {
+                      display: flex;
+                      align-self: center;
+                      align-items: center;
                       font-weight: bold;
+                      border: none !important;
+                      background: transparent !important;
+                      color: ${({ theme }) => theme?.colors?.black[6]};
 
-                      &.apsara-btn[disabled],
-                      > .apsara-btn[disabled] {
-                          display: flex;
-                          align-self: center;
-                          align-items: center;
-                          font-weight: bold;
-                          border: none !important;
-                          background: transparent !important;
-                          color: ${({ theme }) => theme?.colors?.black[6]};
-
-                          > .apsara_icon {
-                              vertical-align: text-bottom;
-                          }
+                      > .apsara_icon {
+                          vertical-align: text-bottom;
                       }
+                  }
 
-                      span.apsara_icon {
-                          margin: 0;
-                      }
-                  `
-                : type === "link"
-                ? css`
-                      &:focus {
-                          animation: none;
-                          box-shadow: none;
-                      }
-                  `
-                : type === "dashed"
-                ? css`
-                      border-style: dashed;
-                  `
-                : null}
-    }
-    a.disabled {
+                  span.apsara_icon {
+                      margin: 0;
+                  }
+              `
+            : variantType === "link"
+            ? css`
+                  &:focus {
+                      animation: none;
+                      box-shadow: none;
+                  }
+              `
+            : variantType === "dashed"
+            ? css`
+                  border-style: dashed;
+              `
+            : null}
+    &.disabled {
         pointer-events: none;
         cursor: not-allowed;
         border-color: #b3b3b3;
         background: #b3b3b3;
     }
 `;
+
+export const StyledButton = styled("button")<StyBaseButtonParams>`
+    ${styBaseButton}
+`;
+
+export const StyledButtonLink = styled("a")<StyBaseButtonParams>`
+    ${styBaseButton}
+`;
diff --git a/packages/apsara-ui/src/Button/Button.tsx b/packages/apsara-ui/src/Button/Button.tsx
@@ -5,7 +5,7 @@ import Tooltip from "../Tooltip";
 import Icon from "../Icon";
 // import * as AC from "./Button.styles";
 import { CustomButtonProps } from "./Button.types";
-import { StyledButton } from "./Button.styles";
+import { StyledButton, StyledButtonLink } from "./Button.styles";
 
 const defaultIconSize = 24;
 const Button = ({
@@ -44,32 +44,39 @@ const Button = ({
     };
 
     const button = (
-        <StyledButton role="button" type={type} size={size} block={block} shape={shape}>
-            {!href && (
-                <button
-                    type={htmlType || "button"}
-                    disabled={disabled}
-                    onClick={(e) => {
-                        onClick(e);
-                    }}
-                    className={`apsara-btn ${clsx(className, type)}`}
-                    {...props}
-                >
-                    <IconComponent />
-                    {children}
-                </button>
-            )}
-            {href && (
-                <a
+        <>
+            {href ? (
+                <StyledButtonLink
                     href={href}
                     className={`apsara-btn ${clsx(className, type)} ${disabled ? "disabled" : ""}`}
+                    block={block}
+                    shape={shape}
+                    size={size}
+                    variantType={type}
                     {...props}
                 >
                     <IconComponent />
                     {children}
-                </a>
+                </StyledButtonLink>
+            ) : (
+                <StyledButton
+                    type={htmlType}
+                    disabled={disabled}
+                    onClick={onClick}
+                    block={block}
+                    shape={shape}
+                    size={size}
+                    variantType={type}
+                    className={`apsara-btn ${clsx(className, type)}`}
+                    {...props}
+                >
+                    <>
+                        <IconComponent />
+                        {children}
+                    </>
+                </StyledButton>
             )}
-        </StyledButton>
+        </>
     );
 
     return tooltipProps?.message ? (