Merge pull request #30 from sippy-platform/0.13

Mellow UI 0.13.4
sippy-platform · Aug 19, 2022 · 9d5b4cf · 9d5b4cf
2 parents c3da860 + def26e1
commit 9d5b4cf
Show file tree

Hide file tree

Showing 10 changed files with 445 additions and 465 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sippy-platform/mellow-ui",
-  "version": "0.13.3",
+  "version": "0.13.4",
   "description": "React components for the Mellow Design System.",
   "main": "./dist/mellow-ui.umd.js",
   "module": "./dist/mellow-ui.es.js",
@@ -34,19 +34,19 @@
     "@headlessui/react": "1.6.6",
     "clsx": "1.2.1",
     "react-element-to-jsx-string": "15.0.0",
-    "sass": "1.53.0"
+    "sass": "1.54.4"
   },
   "devDependencies": {
-    "@types/node": "18.0.6",
-    "@types/react": "18.0.15",
+    "@types/node": "18.7.6",
+    "@types/react": "18.0.17",
     "@types/react-dom": "18.0.6",
-    "@vitejs/plugin-react": "2.0.0",
+    "@vitejs/plugin-react": "2.0.1",
     "hast-to-hyperscript": "10.0.1",
     "react-router-dom": "6.3.0",
     "refractor": "4.7.0",
     "typescript": "4.7.4",
-    "vite": "3.0.2",
-    "vite-plugin-dts": "1.4.0"
+    "vite": "3.0.8",
+    "vite-plugin-dts": "1.4.1"
   },
   "peerDependencies": {
     "@sippy-platform/mellow-css": ">=0.11.0",

diff --git a/src/components/InputControl/InputControl.tsx b/src/components/InputControl/InputControl.tsx
@@ -64,7 +64,7 @@ export const InputControl = ({
   const uniqueName = name ?? id;
 
   return (
-    <>
+    <div>
       <div className="form-floating">
         <input
           name={uniqueName}
@@ -85,7 +85,7 @@ export const InputControl = ({
           {helper}
         </div>
       )}
-    </>
+    </div>
   );
 };
 

diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
@@ -2,13 +2,7 @@ import { ReactNode } from 'react';
 
 import { Menu as MenuPrimitive } from '@headlessui/react';
 
-import clsx from 'clsx';
-
 export interface MenuProps {
-  /**
-   * The open state
-   */
-  open: boolean;
   /**
    * The contents of the dialog
    */
@@ -19,7 +13,6 @@ export interface MenuProps {
  * Primary UI component for user interaction
  */
 export const Menu = ({
-  open,
   children,
   ...props
 }: MenuProps) => {

diff --git a/src/components/MenuTrigger/MenuTrigger.tsx b/src/components/MenuTrigger/MenuTrigger.tsx
@@ -4,12 +4,7 @@ import { Menu as MenuPrimitive } from '@headlessui/react';
 
 import clsx from 'clsx';
 
-
 export interface MenuTriggerProps {
-  /**
-   * The open state
-   */
-  open: boolean;
   /**
    * Custom classes for the label
    */
@@ -24,7 +19,6 @@ export interface MenuTriggerProps {
  * Primary UI component for user interaction
  */
 export const MenuTrigger = ({
-  open,
   children,
   className,
   ...props

diff --git a/src/components/SelectControl/SelectControl.tsx b/src/components/SelectControl/SelectControl.tsx
@@ -93,7 +93,7 @@ export const SelectControl = ({
   );
 
   return (
-    <>
+    <div>
       <div className="form-floating">
         <Listbox
           value={value}
@@ -146,7 +146,7 @@ export const SelectControl = ({
           {helper}
         </div>
       )}
-    </>
+    </div>
   );
 };
 

diff --git a/src/docs/pages/Components/PivotDemo.tsx b/src/docs/pages/Components/PivotDemo.tsx
@@ -20,36 +20,6 @@ export default function PivotDemo() {
           </PivotPanels>
         </Pivot>
       </DemoBox>
-      <h3>Pills</h3>
-      <DemoBox>
-        <Pivot>
-          <PivotNav variant="pills">
-            <PivotItem>Tab 1</PivotItem>
-            <PivotItem>Tab 2</PivotItem>
-            <PivotItem>Tab 3</PivotItem>
-          </PivotNav>
-          <PivotPanels>
-            <PivotPanel>Content 1</PivotPanel>
-            <PivotPanel>Content 2</PivotPanel>
-            <PivotPanel>Content 3</PivotPanel>
-          </PivotPanels>
-        </Pivot>
-      </DemoBox>
-      <h3>Underline</h3>
-      <DemoBox>
-        <Pivot>
-          <PivotNav variant="underline">
-            <PivotItem>Tab 1</PivotItem>
-            <PivotItem>Tab 2</PivotItem>
-            <PivotItem>Tab 3</PivotItem>
-          </PivotNav>
-          <PivotPanels>
-            <PivotPanel>Content 1</PivotPanel>
-            <PivotPanel>Content 2</PivotPanel>
-            <PivotPanel>Content 3</PivotPanel>
-          </PivotPanels>
-        </Pivot>
-      </DemoBox>
     </>
   );
 }
diff --git a/src/docs/pages/Forms/FormControlDemo.tsx b/src/docs/pages/Forms/FormControlDemo.tsx
@@ -13,7 +13,7 @@ export default function FormControlDemo() {
 
       <h3>Input Control</h3>
       <DemoBox>
-        <Grid>
+        <Grid xs={1}>
           <InputControl name="default" label="Default" placeholder="Default" helper="A default text field." />
           <InputControl name="email" type="email" label="Email" placeholder="Email" />
           <InputControl name="password" type="password" label="Password" placeholder="Password" />

diff --git a/src/docs/pages/Forms/InputDemo.tsx b/src/docs/pages/Forms/InputDemo.tsx
@@ -7,7 +7,7 @@ export default function InputDemo() {
     <>
       <h2>Input</h2>
       <DemoBox>
-        <Grid>
+        <Grid xs={1}>
           <Input placeholder="Default" />
           <Input type="email" placeholder="Email" />
           <Input type="password" placeholder="Password" />

diff --git a/src/docs/pages/Forms/InputGroupDemo.tsx b/src/docs/pages/Forms/InputGroupDemo.tsx
@@ -10,7 +10,7 @@ export default function InputGroupDemo() {
       <h3>Input Addon</h3>
       <p>The input group allows you to add input addons to an input. These are small text labels.</p>
       <DemoBox>
-        <Grid>
+        <Grid xs={1}>
           <InputGroup>
             <InputAddon>Prefix</InputAddon>
             <Input placeholder="Default" />