feat: export ActionBar component for use in overrides

measuredco · Aug 15, 2024 · 04fd6c5 · 04fd6c5
1 parent 7c79787
commit 04fd6c5
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 63 deletions.
diff --git a/packages/core/components/ActionBar/index.tsx b/packages/core/components/ActionBar/index.tsx
@@ -0,0 +1,31 @@
+import { ReactNode, SyntheticEvent } from "react";
+import getClassNameFactory from "../../lib/get-class-name-factory";
+import styles from "./styles.module.css";
+const getClassName = getClassNameFactory("ActionBarComponent", styles);
+
+export const ActionBar = ({
+  label,
+  children,
+}: {
+  label?: string;
+  children?: ReactNode;
+}) => (
+  <div className={getClassName()}>
+    {label && <div className={getClassName("actionsLabel")}>{label}</div>}
+    {children}
+  </div>
+);
+
+export const Action = ({
+  children,
+  onClick,
+}: {
+  children: ReactNode;
+  onClick: (e: SyntheticEvent) => void;
+}) => (
+  <button className={getClassName("action")} onClick={onClick}>
+    {children}
+  </button>
+);
+
+ActionBar.Action = Action;
diff --git a/packages/core/components/ActionBar/styles.module.css b/packages/core/components/ActionBar/styles.module.css
@@ -0,0 +1,58 @@
+.ActionBarComponent {
+  display: flex;
+  width: auto;
+  padding: 4px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  border-radius: 8px;
+  background: var(--puck-color-grey-01);
+  color: var(--puck-color-white);
+  font-family: var(--puck-font-family);
+  gap: 4px;
+}
+
+.ActionBarComponent-actionsLabel {
+  color: var(--puck-color-grey-08);
+  display: flex;
+  font-size: var(--puck-font-size-xxxs);
+  font-weight: 500;
+  justify-content: center;
+  align-items: center;
+  padding-left: 8px;
+  padding-right: 16px;
+  margin-right: 8px;
+  border-right: 0.5px solid var(--puck-color-grey-05); /* Fractional value required due to scaling */
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ActionBarComponent-action {
+  background: transparent;
+  border: none;
+  color: var(--puck-color-grey-08);
+  cursor: pointer;
+  padding: 6px 8px;
+  border-radius: 4px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 50ms ease-in;
+}
+
+.ActionBarComponent-action:focus-visible {
+  outline: 2px solid var(--puck-color-azure-05);
+  outline-offset: -2px;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .ActionBarComponent-action:hover {
+    color: var(--puck-color-azure-06);
+    transition: none;
+  }
+}
+
+.ActionBarComponent-action:active {
+  color: var(--puck-color-azure-07);
+  transition: none;
+}
diff --git a/packages/core/components/DraggableComponent/index.tsx b/packages/core/components/DraggableComponent/index.tsx
@@ -14,6 +14,7 @@ import { isIos } from "../../lib/is-ios";
 import { useAppContext } from "../Puck/context";
 import { DefaultDraggable } from "../Draggable";
 import { Loader } from "../Loader";
+import { ActionBar } from "../ActionBar";
 
 const getClassName = getClassNameFactory("DraggableComponent", styles);
 
@@ -138,15 +139,14 @@ export const DraggableComponent = ({
                 right: actionsRight / zoomConfig.zoom,
               }}
             >
-              {label && (
-                <div className={getClassName("actionsLabel")}>{label}</div>
-              )}
-              <button className={getClassName("action")} onClick={onDuplicate}>
-                <Copy size={16} />
-              </button>
-              <button className={getClassName("action")} onClick={onDelete}>
-                <Trash size={16} />
-              </button>
+              <ActionBar label={label}>
+                <ActionBar.Action onClick={onDuplicate}>
+                  <Copy size={16} />
+                </ActionBar.Action>
+                <ActionBar.Action onClick={onDelete}>
+                  <Trash size={16} />
+                </ActionBar.Action>
+              </ActionBar>
             </div>
           </div>
           <div className={getClassName("overlay")} />

diff --git a/packages/core/components/DraggableComponent/styles.module.css b/packages/core/components/DraggableComponent/styles.module.css
@@ -103,16 +103,8 @@
 .DraggableComponent-actions {
   position: absolute;
   width: auto;
-  padding: 4px;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-  border-radius: 8px;
-  background: var(--puck-color-grey-01);
-  color: var(--puck-color-white);
   cursor: grab;
   display: none;
-  font-family: var(--puck-font-family);
-  gap: 4px;
   pointer-events: auto;
   box-sizing: border-box;
   transform-origin: right top;
@@ -123,49 +115,3 @@
   > .DraggableComponent-actions {
   display: flex;
 }
-
-.DraggableComponent-actionsLabel {
-  color: var(--puck-color-grey-08);
-  display: flex;
-  font-size: var(--puck-font-size-xxxs);
-  font-weight: 500;
-  justify-content: center;
-  align-items: center;
-  padding-left: 8px;
-  padding-right: 16px;
-  margin-right: 8px;
-  border-right: 0.5px solid var(--puck-color-grey-05); /* Fractional value required due to scaling */
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.DraggableComponent-action {
-  background: transparent;
-  border: none;
-  color: var(--puck-color-grey-08);
-  cursor: pointer;
-  padding: 6px 8px;
-  border-radius: 4px;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: color 50ms ease-in;
-}
-
-.DraggableComponent-action:focus-visible {
-  outline: 2px solid var(--puck-color-azure-05);
-  outline-offset: -2px;
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .DraggableComponent-action:hover {
-    color: var(--puck-color-azure-06);
-    transition: none;
-  }
-}
-
-.DraggableComponent-action:active {
-  color: var(--puck-color-azure-07);
-  transition: none;
-}
diff --git a/packages/core/index.ts b/packages/core/index.ts
@@ -6,6 +6,7 @@ export * from "./types/Config";
 export * from "./types/Plugin";
 export * from "./types/Fields";
 
+export * from "./components/ActionBar";
 export * from "./components/AutoField";
 export * from "./components/Button";
 export { Drawer } from "./components/Drawer";