fix: bug fixes & ui improvements

fluid-design-io · Feb 6, 2023 · 48e9724 · 48e9724
1 parent a668949
commit 48e9724
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 24 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -11,7 +11,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node: ['14.x', '16.x'] #'14.x',
+        node: ['16.x'] #'14.x',
         #os: [ubuntu-latest, windows-latest, macOS-latest]
         os: [ubuntu-latest]
 

diff --git a/src/lib/components/Form/AppFormItem.tsx b/src/lib/components/Form/AppFormItem.tsx
@@ -33,14 +33,15 @@ function FormItem({
           `relative mb-4 last:mb-0 overflow-visible rounded-lg transition-all [&_+_.item-description]:-mt-3`,
           error &&
             focused &&
-            `contrast:ring-gray-800 dark:contrast:ring-amber-800 ring-1 contrast:ring-2 ring-primary-400`,
+            `contrast:ring-gray-800 dark:contrast:ring-amber-800 ring-2 contrast:ring-2 ring-primary-400`,
           error &&
             !focused &&
-            'contrast:ring-red-500 dark:contrast:ring-red-300 ring-1 contrast:ring ring-red-400 dark:ring-red-500',
+            'contrast:ring-red-500 dark:contrast:ring-red-300 ring-2 contrast:ring ring-red-400 dark:ring-red-500',
           !error && '',
           !error &&
             focused &&
-            'contrast:ring-primary-400 dark:contrast:ring-primary-200 ring-1 contrast:ring-2 contrast:ring-offset-1 ring-primary-400',
+            'contrast:ring-primary-400 dark:contrast:ring-primary-200 ring-2 contrast:ring-2 contrast:ring-offset-1 ring-primary-400',
+          'focus-within:ring-2 focus-within:ring-primary-400',
           props.className && props.className
         )}
       >

diff --git a/src/lib/components/Form/AppSelect.tsx b/src/lib/components/Form/AppSelect.tsx
@@ -224,7 +224,7 @@ const AppSelect: SelectComponent = React.forwardRef(
                     multiple &&
                       value &&
                       value?.length > 1 &&
-                      'border-t border-t-gray-200 dark:border-t-gray-700',
+                      'border-t border-t-gray-200 dark:border-t-gray-700 focus-visible:bg-gray-100/50 dark:focus-visible:bg-gray-700 focus-visible:rounded-b-lg',
                     buttonClassName
                   )}
                   onBlur={() => {

diff --git a/src/lib/components/Modal/index.tsx b/src/lib/components/Modal/index.tsx
@@ -8,15 +8,19 @@ import {
   ModalProps,
   PresentModalProps,
   ModalProvider,
-} from "./useModal";
+  ModalTitle,
+  ModalCloseButton,
+} from './useModal';
 
 export const Dialog = Object.assign(ModalContainer, {
-  Title: ModalHeader,
+  Title: ModalTitle,
+  Header: ModalHeader,
   Description: ModalDescription,
   Footer: ModalFooter,
   Body: ModalBody,
+  CloseButton: ModalCloseButton,
 });
 
-Dialog.displayName = "Dialog";
+Dialog.displayName = 'Dialog';
 
 export { useModal, ModalProvider, ModalProps, PresentModalProps };
diff --git a/src/lib/components/Modal/useModal.tsx b/src/lib/components/Modal/useModal.tsx
@@ -13,6 +13,8 @@ import React, {
 import clsxm from '../../helpers/clsxm';
 import { ToastProvider } from '../Toast/useToast';
 import { useTheme } from '../FluidUI/ThemeContext';
+import { Button } from '../Button';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 
 export type PresentModalProps<P = unknown> = P & {
   /**
@@ -229,11 +231,11 @@ export const useModal = (
   return [presentModal as any, dismiss];
 };
 
-export const ModalHeader = ({ className = '', children }) => (
+export const ModalTitle = ({ className = '', children }) => (
   <Dialog.Title
     as='h1'
     className={clsxm(
-      'mb-4 font-bold md:text-2xl lg:text-2xl text-gray-700 dark:text-gray-100',
+      'font-semibold md:text-xl text-gray-700 dark:text-gray-100',
       className
     )}
   >
@@ -245,14 +247,38 @@ export const ModalFooter = ({ className = '', children }) => {
   return (
     <div
       className={clsxm(
-        'flex flex-col gap-4 bg-gray-50 px-4 py-3 dark:bg-gray-800 sm:flex-row-reverse sm:px-6',
+        'flex flex-col gap-4 px-4 py-3 sm:flex-row-reverse sm:px-6',
+        'bg-gray-50 dark:bg-gray-800',
         className
       )}
     >
       {children}
     </div>
   );
 };
+export const ModalHeader = ({ className = '', children }) => (
+  <div
+    className={clsxm(
+      'flex items-center justify-between pt-4 pb-3 px-4 sm:px-6 text-gray-600 dark:text-gray-300',
+      'bg-gray-50 dark:bg-gray-800',
+      className
+    )}
+  >
+    {children}
+  </div>
+);
+
+export const ModalCloseButton = ({ className = '', dismiss }) => (
+  <Button
+    className={clsxm(className)}
+    iconOnly
+    onClick={() => dismiss()}
+    aria-label='Close'
+    icon={XMarkIcon}
+    shape='pill'
+    weight='light'
+  />
+);
 
 export const ModalContainer = forwardRef(
   (
@@ -278,7 +304,7 @@ export const ModalContainer = forwardRef(
 export const ModalBody = ({ className = '', children }) => (
   <div
     className={clsxm(
-      'px-4 py-5 sm:p-6 text-gray-600 dark:text-gray-300',
+      'p-4 pt-2 sm:px-6 text-gray-600 dark:text-gray-300',
       className
     )}
   >

diff --git a/src/lib/components/Tab/TabListItem.tsx b/src/lib/components/Tab/TabListItem.tsx
@@ -1,18 +1,18 @@
-import { Tab as HeadlessTab } from "@headlessui/react";
-import { motion, useReducedMotion } from "framer-motion";
-import React, { Fragment } from "react";
-import { TabListItemProps } from "../../../type";
-import clsxm from "../../helpers/clsxm";
-import { Button } from "../Button";
-import { useTheme } from "../FluidUI/ThemeContext";
+import { Tab as HeadlessTab } from '@headlessui/react';
+import { motion, useReducedMotion } from 'framer-motion';
+import React, { Fragment } from 'react';
+import { TabListItemProps } from '../../../type';
+import clsxm from '../../helpers/clsxm';
+import { Button } from '../Button';
+import { useTheme } from '../FluidUI/ThemeContext';
 
 export const TabListItem = ({
   layoutId,
   as,
   title,
-  shape = "round",
-  weight = "normal",
-  size = "md",
+  shape = 'round',
+  weight = 'normal',
+  size = 'md',
   innerAs = as,
   children,
   tabClassName,
@@ -33,7 +33,7 @@ export const TabListItem = ({
       as={innerAs || Button}
       className={({ selected }): string =>
         clsxm(
-          "flex-1",
+          'flex-1',
           [theme.tabWrap.base, tabClassName],
           selected
             ? [theme.tabWrap.active[weight], tabActiveClassName]
@@ -68,7 +68,7 @@ export const TabListItem = ({
           <span className='z-[1]'>
             {children
               ? children
-              : typeof title === "string"
+              : typeof title === 'string'
               ? title
               : title.text}
           </span>