refactor: Menu, DatePicker & Textarea improvements (#58)

closes #55 closes #57
fold-dev · Feb 18, 2024 · 7778dea · 7778dea
1 parent 35a07c2
commit 7778dea
Show file tree

Hide file tree

Showing 11 changed files with 89 additions and 46 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "fold-dev",
     "title": "Fold",
-    "version": "0.2.3",
+    "version": "0.3.0",
     "description": "The UI library for product teams.",
     "workspaces": {
         "packages": [

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@fold-dev/core",
     "title": "Fold",
-    "version": "0.2.3",
+    "version": "0.3.0",
     "description": "The UI library for product teams.",
     "main": "dist/index.js",
     "module": "dist/index.js",

diff --git a/packages/core/src/date-time/date-time.css b/packages/core/src/date-time/date-time.css
@@ -7,6 +7,7 @@
     --f-time-picker-color-hover: var(--f-color-text-weak);
     --f-time-picker-color-active: var(--f-color-accent);
     --f-time-picker-padding: var(--f-space-2) var(--f-space-5);
+    --f-time-picker-ampm-padding: var(--f-space-3);
 }
 
 .f-time-picker { 
@@ -35,7 +36,7 @@
 }
 
 .f-time-picker__ampm {
-    padding: 0 var(--f-space-3);
+    padding: var(--f-time-picker-ampm-padding);
 }
 
 /* date cell */
@@ -264,17 +265,7 @@
 
 /* scrolling date picker */
 
-:root {
-    --f-date-scrolling-picker-title-padding: 0.25rem 0;
-}
-
 .f-scrolling-date-picker {
   position: relative;
   overflow-y: auto;
 }
-
-.f-scrolling-date-picker__title {
-    font-weight: 600;
-    display: inline-block;
-    padding: var(--f-date-scrolling-picker-title-padding);
-}
diff --git a/packages/core/src/date-time/date-time.stories.tsx b/packages/core/src/date-time/date-time.stories.tsx
@@ -15,6 +15,7 @@ import {
     Popover,
     ScrollingDatePicker,
     Stack,
+    Text,
     TimePicker,
     useScrollingDatePicker,
     useVisibility,
@@ -373,10 +374,17 @@ export const ScrollingPicker = () => {
                 <Button onClick={handleTodayClick}>Go to Today</Button>
                 <ScrollingDatePicker
                     ref={ref}
-                    defaultDate={new Date()}
+                    defaultDate={today}
                     selection={selection}
                     onChange={handleSelection}
-                    monthTitle={(date: Date) => '' + `${monthNames[date.getMonth()]} / ${date.getFullYear()}`}
+                    monthTitle={(date: Date) => (
+                        <Text
+                            p="1rem"
+                            as="span"
+                            width="100%">
+                            {monthNames[date.getMonth()]} / {date.getFullYear()}
+                        </Text>
+                    )}
                 />
             </DateRangeProvider>
         </View>

diff --git a/packages/core/src/date-time/date-time.tsx b/packages/core/src/date-time/date-time.tsx
@@ -1,4 +1,5 @@
 import React, {
+    ReactElement,
     createContext,
     forwardRef,
     useContext,
@@ -941,7 +942,7 @@ export type ScrollingDatePickerProps = {
     weekdaysProps?: WeekdaysProps
     monthProps?: Omit<MonthProps, 'date'>
     monthNames?: string[]
-    monthTitle: (date: Date) => string
+    monthTitle: (date: Date) => ReactElement
 } & Omit<CoreViewProps, 'onChange' | 'disabled'>
 
 export const useScrollingDatePicker = () => {
@@ -1033,13 +1034,7 @@ export const ScrollingDatePicker = forwardRef((props: ScrollingDatePickerProps,
                         key={uuid}
                         className="f-col"
                         style={{ height, width: '100%' }}>
-                        <Text
-                            as="span"
-                            className="f-scrolling-date-picker__title"
-                            size={size}
-                            width="100%">
-                            {monthTitle(month)}
-                        </Text>
+                        {monthTitle(month)}
                         <Month
                             width="100%"
                             flex={1}

diff --git a/packages/core/src/input/input.stories.tsx b/packages/core/src/input/input.stories.tsx
@@ -19,6 +19,7 @@ import {
     Popover,
     Stack,
     Text,
+    Textarea,
     useVisibility,
     View,
 } from '@fold-dev/core'
@@ -338,6 +339,20 @@ export const Control = () => {
                     onChange={(e) => setText(e.target.value)}
                 />
             </InputControl>
+
+            <InputControl>
+                <InputPrefix>
+                    <IconLib icon="circle" />
+                </InputPrefix>
+                <Textarea
+                    autoAdjust
+                    value={text}
+                    maxHeight={300}
+                    className="f-scrollbar"
+                    placeholder="Write message..."
+                    onChange={(e) => setText(e.target.value)}
+                />
+            </InputControl>
         </View>
     )
 }

diff --git a/packages/core/src/menu/menu.css b/packages/core/src/menu/menu.css
@@ -182,29 +182,14 @@
     overflow: hidden;
     display: block;
     border-top: 0.1rem solid var(--f-menu-divider-color);
+    margin-top: var(--f-menu-divider-spacing);
+    margin-bottom: var(--f-menu-divider-spacing);
 }
 
 .f-menu-divider > hr {
     display: none;
 }
 
-/* spacing using sibling selectors */
-
-.f-menu:not(.is-menubar) .f-menu-divider + .f-menu-optiongroup,
-.f-menu:not(.is-menubar) .f-menu-divider + .f-menu-heading,
-.f-menu:not(.is-menubar) .f-menu-divider + .f-menu-item,
-.f-menu:not(.is-menubar) .f-menu-divider + .f-menu-section {
-    margin-top: var(--f-menu-divider-spacing);
-}
-
-.f-menu:not(.is-menubar) .f-menu-optiongroup + .f-menu-divider,
-.f-menu:not(.is-menubar) .f-menu-item + .f-menu-divider,
-.f-menu:not(.is-menubar) .f-menu-heading + .f-menu-divider
-.f-menu:not(.is-menubar) .f-menu-section + .f-menu-divider {
-    margin-top: var(--f-menu-divider-spacing);
-    margin-bottom: var(--f-menu-divider-spacing);
-}
-
 /* ************************************************************** */
 /* ************************************************************** */
 /* ************************************************************** */
@@ -227,6 +212,7 @@
 
 .f-menu-heading {
     flex-shrink: 0;
+    display: inline-block;
 }
 
 .f-menu-heading .f-menu-heading__heading {

diff --git a/packages/core/src/textarea/textarea.css b/packages/core/src/textarea/textarea.css
@@ -78,3 +78,26 @@
     outline-offset: 1px;
     transition: outline 100ms;
 }
+
+/*
+    Please see the <Input /> component.
+    This adds the ability wrap textarea with <InputControl />.
+    It would be better to inherit directly there - but this is more explicit.
+*/
+
+.f-input-control .f-textarea {
+    position: relative;
+    color: inherit;
+    background-color: transparent !important;
+    flex: 1;
+    height: fit-content;
+    border: 0;
+    border-color: none;
+    border-radius: 0;
+    font-weight: inherit;
+    font-family: inherit;
+    box-shadow: none;
+    transition: none;
+    outline: none !important;
+}
+
diff --git a/packages/core/src/textarea/textarea.stories.tsx b/packages/core/src/textarea/textarea.stories.tsx
@@ -1,4 +1,4 @@
-import { Textarea, View } from '@fold-dev/core'
+import { IconLib, InputControl, InputPrefix, Textarea, View } from '@fold-dev/core'
 import React, { useState } from 'react'
 
 export default {
@@ -132,3 +132,28 @@ export const Sizes = () => {
         </View>
     )
 }
+
+// --
+
+/**
+ * The `InputControl` component can also be used to create a `Textarea` with a prefix or suffix.
+ */
+export const WithInputControl = () => {
+    const [text, setText] = useState('')
+
+    return (
+        <InputControl>
+            <InputPrefix>
+                <IconLib icon="circle" />
+            </InputPrefix>
+            <Textarea
+                autoAdjust
+                value={text}
+                maxHeight={300}
+                className="f-scrollbar"
+                placeholder="Write message..."
+                onChange={(e) => setText(e.target.value)}
+            />
+        </InputControl>
+    )
+}
diff --git a/packages/design/package.json b/packages/design/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@fold-dev/design",
     "title": "Design Tokens",
-    "version": "0.2.3",
+    "version": "0.3.0",
     "description": "The UI library for product teams.",
     "main": "",
     "module": "",