chore: ability to show tooltip in Radio + new HelperText component

SIKKA-6908[closed] SIKKA-6907[closed] SIKKA-6906[closed] SIKKA-6901[closed] SIKKA-6904[closed]
sikka-software · May 19, 2024 · e93810f · e93810f
1 parent 26855f3
commit e93810f
Show file tree

Hide file tree

Showing 18 changed files with 248 additions and 65 deletions.
diff --git a/apps/docs/CHANGELOG.md b/apps/docs/CHANGELOG.md
@@ -1,5 +1,12 @@
 # hawa-docs
 
+## 0.0.64
+
+### Patch Changes
+
+- Updated dependencies
+  - @sikka/hawa@0.35.0
+
 ## 0.0.63
 
 ### Patch Changes

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hawa-docs",
-  "version": "0.0.63",
+  "version": "0.0.64",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3001",

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @sikka/hawa
 
+## 0.35.0
+
+### Minor Changes
+
+- `CodeConfirmation` fix cancel button variant
+- `Button`: ability to pass `labelProps`
+- `Button`: adds `HelperText` and the ability to show/hide it with `showHelperText` prop
+- `DataTable` an X button in the search input to clear search
+- `DatePicker`: ability to pass `popoverContentProps`
+- `DatePickerButton`: additional customization with `buttonClassNames`
+- New component: `HerlperText`
+- `Input`: fix width issues
+- `Radio`: ability to pass `tooltip` and `tooltipContentProps` to a radio option
+
 ## 0.34.2
 
 ### Patch Changes

diff --git a/packages/components/blocks/auth/CodeConfirmation.tsx b/packages/components/blocks/auth/CodeConfirmation.tsx
@@ -139,7 +139,7 @@ export const CodeConfirmation: FC<TConfirmation> = (props) => {
           )}
 
           <div className="hawa-mt-4 hawa-grid hawa-grid-cols-2 hawa-gap-2">
-            <Button variant="secondary">
+            <Button variant="outline">
               {props.texts?.cancel || "Cancel"}
             </Button>
             <Button isLoading={props.confirmLoading}>

diff --git a/packages/components/elements/button/Button.tsx b/packages/components/elements/button/Button.tsx
@@ -3,7 +3,8 @@ import * as React from "react";
 import { cn } from "@util/index";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { Label } from "../label";
+import { HelperText } from "../helperText";
+import { Label, LabelProps } from "../label";
 import { Loading } from "../loading/Loading";
 
 const buttonVariants = cva(
@@ -37,10 +38,7 @@ const buttonVariants = cva(
         smallIcon: "hawa-h-7 hawa-w-7",
       },
     },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
+    defaultVariants: { variant: "default", size: "default" },
   },
 );
 
@@ -51,6 +49,10 @@ export interface ButtonProps
   centered?: boolean;
   isLoading?: boolean;
   label?: string;
+  labelProps?: LabelProps;
+  /** The small red text under the input field to show validation.   */
+  helperText?: any;
+  showHelperText?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -64,21 +66,23 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       centered = true,
       isLoading,
       children,
+      labelProps,
+      showHelperText = false,
       ...props
     },
     ref,
   ) => {
     const Comp = "button";
 
-    // Determine the color for the HawaLoading component based on the variant
+    // Determine the color for the Loading component based on the variant
     const loadingColor =
       variant === "outline" || variant === "ghost" || variant === "neoBrutalism"
         ? "hawa-bg-primary"
         : "hawa-bg-primary-foreground";
 
     return (
-      <div className="flex flex-col">
-        {label && <Label className="hawa-mb-2">{label}</Label>}
+      <div className="hawa-flex hawa-flex-col hawa-gap-2">
+        {label && <Label {...labelProps}>{label}</Label>}
         <Comp
           className={cn(
             buttonVariants({ variant, size, className }),
@@ -102,6 +106,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             children
           )}
         </Comp>
+        {showHelperText && <HelperText helperText={props.helperText} />}
       </div>
     );
   },

diff --git a/packages/components/elements/dataTable/DataTable.tsx b/packages/components/elements/dataTable/DataTable.tsx
@@ -148,12 +148,40 @@ export const DataTable = <DataProps extends {}>({
         <div className="hawa-flex hawa-flex-row hawa-items-center hawa-gap-4">
           {enableSearch && (
             <Input
+              inputProps={{ title: "" }}
               forceHideHelperText
               placeholder={props.texts?.searchPlaceholder}
               value={globalFilter ?? ""}
               onChange={(event: any) => setGlobalFilter(event.target.value)}
               margin="none"
               className="hawa-w-full md:hawa-max-w-sm"
+              endIconProps={{ className: "!hawa-end-2" }}
+              endIcon={
+                globalFilter ? (
+                  <Button
+                    onClick={() => setGlobalFilter("")}
+                    variant={"ghost"}
+                    size={"smallIcon"}
+                    aria-label="Clear Search"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      className="hawa-icon hawa-text-muted-foreground"
+                    >
+                      <path d="M18 6 6 18" />
+                      <path d="m6 6 12 12" />
+                    </svg>
+                  </Button>
+                ) : null
+              }
             />
           )}
           {enableHideColumns && (

diff --git a/packages/components/elements/datePicker/DatePicker.tsx b/packages/components/elements/datePicker/DatePicker.tsx
@@ -1,8 +1,4 @@
 import * as React from "react";
-import {
-  SelectRangeEventHandler,
-  SelectSingleEventHandler,
-} from "react-day-picker";
 
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 
@@ -12,16 +8,27 @@ import { PopoverRoot, PopoverContent, PopoverTrigger } from "../popover";
 type DatePickerProps = CalendarProps & {
   trigger: React.ReactNode;
   popoverTriggerProps?: PopoverPrimitive.PopoverTriggerProps;
+  popoverContentProps?: PopoverPrimitive.PopoverContentProps;
+  /**
+   * Make sure this is true when DatePickerButton has forceHideHelperText set to true
+   */
+  required?: boolean;
 };
 export const DatePicker: React.FC<DatePickerProps> = ({
   trigger,
   popoverTriggerProps,
+  popoverContentProps,
+  required,
   ...props
 }) => {
   return (
     <PopoverRoot>
       <PopoverTrigger {...popoverTriggerProps}>{trigger}</PopoverTrigger>
-      <PopoverContent>
+      <PopoverContent
+        align={props.dir === "rtl" ? "end" : "start"}
+        sideOffset={required ? -16 : -4}
+        {...popoverContentProps}
+      >
         <Calendar {...props} />
       </PopoverContent>
     </PopoverRoot>

diff --git a/packages/components/elements/datePicker/DatePickerButton.tsx b/packages/components/elements/datePicker/DatePickerButton.tsx
@@ -1,28 +1,40 @@
-import { FC } from "react";
+import React, { FC } from "react";
 
 import { cn } from "@util/index";
 
 import { Button } from "../button";
+import { LabelProps } from "../label";
 
 type DatePickerButtonProps = {
   label?: string;
   value?: string | React.ReactNode;
   multiple?: boolean;
+  labelProps?: LabelProps;
+  /** The small red text under the input field to show validation.   */
+  helperText?: any;
+  showHelperText?: boolean;
+  buttonClassNames?: string;
 };
 export const DatePickerButton: FC<DatePickerButtonProps> = ({
   label,
   value,
   multiple,
+  buttonClassNames,
+  ...props
 }) => {
   return (
     <Button
       label={label}
+      labelProps={props.labelProps}
+      helperText={props.helperText}
+      showHelperText={props.showHelperText}
       variant={"outline"}
+      title={value as string}
       className={cn(
         "!hawa-w-full hawa-flex hawa-flex-row",
         multiple && "hawa-flex-row",
+        buttonClassNames,
       )}
-      title={value as string}
     >
       <span
         className={cn(

diff --git a/packages/components/elements/helperText/HelperText.tsx b/packages/components/elements/helperText/HelperText.tsx
@@ -0,0 +1,12 @@
+import { cn } from "@util/index";
+
+export const HelperText = ({ helperText }: { helperText: string }) => (
+  <p
+    className={cn(
+      "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
+      helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0",
+    )}
+  >
+    {helperText}
+  </p>
+);
diff --git a/packages/components/elements/helperText/index.ts b/packages/components/elements/helperText/index.ts
@@ -0,0 +1 @@
+export * from "./HelperText";
diff --git a/packages/components/elements/input/Input.tsx b/packages/components/elements/input/Input.tsx
@@ -115,7 +115,7 @@ export const Input = forwardRef<HTMLInputElement, TextFieldTypes>(
             </span>
           )}
           {props.isLoading ? (
-            <div className="hawa-pb-2">
+            <div className="hawa-pb-2 hawa-w-full">
               <Skeleton className="hawa-h-[40px] hawa-w-full" />
             </div>
           ) : (