fix: refactor popover and checkbox (#63)

* fix: form issue fixes * fix ui issue with button having href in table * fix: button ui * fix: button ui * fix: skeleton ui fix, remove old skeleton(loader) * fix: states component, dependencies on loader * fix: header * fix: states title alignment * fix: skeleton animation after removing loader component * fix: table- added skeletons, added option to pass data * fix: table- show no data only when isLoading=false * fix: remove antd props, refactor empty table component * implemented basic InputNumber component * feat: add picker-date/time picker and range picker * chore: removed unwanted dependency * feat: implement card, collapse, loader, fix table pagination style * feat: export new modal, added prop for overlay background * chore: bump version to 0.8.1 * feat: implement alert component * fix: refactor popover and checkbox * chore: force push * fix: issues with popover
raystack · Feb 13, 2023 · 690d19e · 690d19e
1 parent 2823a99
commit 690d19e
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 32 deletions.
diff --git a/packages/apsara-ui/src/Checkbox/Checkbox.styles.tsx b/packages/apsara-ui/src/Checkbox/Checkbox.styles.tsx
@@ -34,6 +34,7 @@ export const CheckboxWrapper = styled("div")`
 
 export const CheckboxGroupWrapper = styled("div")<{ orientation?: "horizontal" | "vertical" }>`
     display: flex;
+    flex-wrap: wrap;
     ${({ orientation }) => {
         return orientation === "vertical"
             ? css`

diff --git a/packages/apsara-ui/src/Checkbox/Checkbox.tsx b/packages/apsara-ui/src/Checkbox/Checkbox.tsx
@@ -46,7 +46,7 @@ const Checkbox = ({
     }, [checked]);
 
     return (
-        <CheckboxWrapper>
+        <CheckboxWrapper className="apsara-checkbox-wrapper">
             <StyledCheckbox
                 defaultChecked={defaultChecked}
                 id={id}
@@ -92,7 +92,7 @@ const CheckboxGroup = ({
     };
 
     return (
-        <CheckboxGroupWrapper orientation={orientation}>
+        <CheckboxGroupWrapper orientation={orientation} className="apsara-checkbox-group">
             {options &&
                 options.map((option, index) => (
                     <div className="checkbox_label_wrapper" key={option.value}>

diff --git a/packages/apsara-ui/src/Popover/Popover.stories.tsx b/packages/apsara-ui/src/Popover/Popover.stories.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
-import React from "react";
+import React, { useState } from "react";
 
 import Popover from "./Popover";
 import Button from "../Button";
@@ -10,14 +10,6 @@ export default {
     component: Popover,
 };
 
-export const popover = () => (
-    <>
-        <Popover title="Confirmation" message="please confirm" onOk={() => {}}>
-            <Button>Default Button</Button>
-        </Popover>
-    </>
-);
-
 export const popoverContent = () => (
     <>
         <Popover
@@ -27,7 +19,10 @@ export const popoverContent = () => (
                     <Input />
                 </div>
             }
-            onOk={() => {}}
+            okBtnProps={{
+                text: "ok",
+                style: { marginLeft: "10px" },
+            }}
             cancelBtnProps={{
                 text: "Cancel",
                 style: { marginLeft: "10px" },
@@ -37,3 +32,27 @@ export const popoverContent = () => (
         </Popover>
     </>
 );
+
+export const popoverContentParam = () => {
+    const [open, setOpen] = useState(false);
+    return (
+        <>
+            <Popover
+                title="Confirmation"
+                content={
+                    <div>
+                        <Input />
+                    </div>
+                }
+                cancelBtnProps={{
+                    text: "Cancel",
+                    style: { marginLeft: "10px" },
+                }}
+                open={open}
+                onOpenChange={setOpen}
+            >
+                <Button>Default Button</Button>
+            </Popover>
+        </>
+    );
+};
diff --git a/packages/apsara-ui/src/Popover/Popover.styles.tsx b/packages/apsara-ui/src/Popover/Popover.styles.tsx
@@ -7,7 +7,7 @@ import styled from "styled-components";
 
 export const Container = styled.div`
     font-size: 12px;
-    width: 260px;
+    width: fit-content;
     margin: -12px -16px;
 `;
 

diff --git a/packages/apsara-ui/src/Popover/Popover.tsx b/packages/apsara-ui/src/Popover/Popover.tsx
@@ -18,7 +18,9 @@ interface ButtonPopoverContentProps {
     title: string;
     message?: string;
     content?: React.ReactNode | null;
-    onOk: () => void;
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
+    onOk?: () => void;
     onCancel?: () => void;
     okBtnProps?: {
         text?: string;
@@ -37,7 +39,7 @@ export const PopoverContent = ({
     okBtnProps = {},
     cancelBtnProps = {},
 }: ButtonPopoverContentProps) => {
-    const { text: okText = "Yes", ...restOkBtnProps } = okBtnProps;
+    const { text: okText, ...restOkBtnProps } = okBtnProps;
     const { text: cancelText, ...restCancelBtnProps } = cancelBtnProps;
 
     return (
@@ -46,16 +48,20 @@ export const PopoverContent = ({
                 <Title>{title}</Title>
                 <Message>{message || content}</Message>
             </Content>
-            <Footer>
-                <Button onClick={onOk} size="small" type="primary" {...restOkBtnProps}>
-                    {okText}
-                </Button>
-                {cancelText ? (
-                    <Button onClick={onCancel} size="small" {...restCancelBtnProps}>
-                        {cancelText}
-                    </Button>
-                ) : null}
-            </Footer>
+            {(okText || cancelText) && (
+                <Footer className="apsara-popover-footer">
+                    {okText ? (
+                        <Button onClick={onOk} size="small" type="primary" {...restOkBtnProps}>
+                            {okText}
+                        </Button>
+                    ) : null}
+                    {cancelText ? (
+                        <Button onClick={onCancel} size="small" {...restCancelBtnProps}>
+                            {cancelText}
+                        </Button>
+                    ) : null}
+                </Footer>
+            )}
         </Container>
     );
 };
@@ -68,26 +74,51 @@ function ConfirmationPopover({
     title = "",
     message = "",
     content = null,
+    open,
+    onOpenChange = () => ({}),
     onOk,
-    onCancel = () => ({}),
+    onCancel,
     okBtnProps,
     cancelBtnProps,
     children,
 }: ButtonConfirmationPopover) {
-    const [open, setOpen] = useState(false);
+    const [internalOpen, setInternalOpen] = useState(false);
+    const controlled = typeof open !== "boolean";
 
     const onOKClick = () => {
-        setOpen(false);
-        onOk();
+        if (controlled) {
+            setInternalOpen(false);
+        }
+        if (onOk) {
+            onOk();
+        } else if (onOpenChange) {
+            onOpenChange(false);
+        }
     };
 
     const onCancelClick = () => {
-        setOpen(false);
-        onCancel();
+        if (controlled) {
+            setInternalOpen(false);
+        }
+        if (onCancel) {
+            onCancel();
+        } else if (onOpenChange) {
+            onOpenChange(false);
+        }
     };
 
+    const finalOpen = controlled ? internalOpen : open;
+
     return (
-        <StyledPopover open={open} onOpenChange={(open) => setOpen(open)}>
+        <StyledPopover
+            open={finalOpen}
+            onOpenChange={(value) => {
+                if (controlled) setInternalOpen(value);
+                else {
+                    onOpenChange && onOpenChange(value);
+                }
+            }}
+        >
             <PopoverTrigger asChild>
                 <span aria-label="Update dimensions">{children}</span>
             </PopoverTrigger>