refactor: remove autofocus from Stories & add system themes (#233)

closes #232
fold-dev · Jun 1, 2024 · 4cb41c7 · 4cb41c7
1 parent c19a11b
commit 4cb41c7
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 29 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.11.2",
+    "version": "0.11.3",
     "description": "The UI component 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.11.2",
+    "version": "0.11.3",
     "description": "The UI library for product teams.",
     "main": "dist/index.js",
     "module": "dist/index.js",

diff --git a/packages/core/src/menu/menu.stories.tsx b/packages/core/src/menu/menu.stories.tsx
@@ -27,28 +27,11 @@ export const docs = {
         'Menu components are a very common feature of almost any user interface. They are useful when screen real estate is limited or when there is a need to provide additional functionality to the relevant menu target.',
 }
 
-export const Usage = () => (
-    <Menu>
-        <MenuItem>Edit</MenuItem>
-        <MenuItem>Copy</MenuItem>
-        <MenuItem>Cut</MenuItem>
-        <MenuItem>Paste</MenuItem>
-        <MenuItem>Select</MenuItem>
-        <MenuDivider />
-        <MenuHeading>Rotation</MenuHeading>
-        <MenuItem>Rotate Left</MenuItem>
-        <MenuItem>Rotate Right</MenuItem>
-        <MenuItem>Flip Horizontal</MenuItem>
-        <MenuItem>Flip Vertical</MenuItem>
-    </Menu>
-)
-
-// --
-
 /**
- * Whilst not recommended, the automatic focus on the first item can be disabled
+ * Whilst not recommended, the automatic focus on the first item can be disabled. It's disabled here so the page doesn't jump down (to focus on the first item).
  */
-export const DisableAutoFocus = () => (
+
+export const Usage = () => (
     <Menu disableAutoFocus>
         <MenuItem>Edit</MenuItem>
         <MenuItem>Copy</MenuItem>

diff --git a/packages/core/src/select/select.stories.tsx b/packages/core/src/select/select.stories.tsx
@@ -166,6 +166,7 @@ export const AlwaysOpen = () => {
 
     return (
         <Select
+            noListFocus
             prefix={<IconLib icon="time" />}
             suffix={<IconLib icon="chevron-down" />}
             width={350}

diff --git a/packages/core/src/styles/reset.css b/packages/core/src/styles/reset.css
@@ -37,3 +37,11 @@ img {
     max-width: 100%;
     height: auto;
 }
+
+[data-theme='light'] {
+    color-scheme: light;
+}
+
+[data-theme='dark'] {
+    color-scheme: dark;
+}
diff --git a/packages/core/src/virtual/virtual.stories.tsx b/packages/core/src/virtual/virtual.stories.tsx
@@ -43,7 +43,7 @@ export const Usage = () => {
                         className="f-row"
                         style={{
                             ...style,
-                            borderTop: '2px solid white',
+                            borderTop: '2px solid var(--f-color-border)',
                             width: '100%',
                         }}>
                         <label>{item.name}</label>
@@ -129,7 +129,7 @@ export const AutoFetchOnBoundary = () => {
                             ...style,
                             padding: 5,
                             background: 'var(--f-color-surface-strong)',
-                            borderTop: '2px solid white',
+                            borderTop: '2px solid var(--f-color-border)',
                             height: 40,
                             width: '100%',
                         }}>

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.11.2",
+    "version": "0.11.3",
     "description": "The UI library for product teams.",
     "main": "",
     "module": "",

diff --git a/scripts/docgen/build.ts b/scripts/docgen/build.ts
@@ -233,6 +233,8 @@ useWindowResize
     })
 }
 
+console.log('Make sure Core is build first (npm run build:prod)')
+
 generateMdx(process.argv[2].split('=')[1])
 
 const navigationFile = prettier.format(`export const navigation = ${JSON.stringify(navigation)}`, {
-Original file line number
+Diff line change
@@ Expand Up / @@ -233,6 +233,8 @@ useWindowResize @@
         })
     }
+    console.log('Make sure Core is build first (npm run build:prod)')
     generateMdx(process.argv[2].split('=')[1])
     const navigationFile = prettier.format(`export const navigation = ${JSON.stringify(navigation)}`, {
@@ Expand Down @@