feat: add some previous bits of content

thedaviddias · Dec 23, 2024 · 1b08a8b · 1b08a8b
1 parent 774e85a
commit 1b08a8b
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 9 deletions.
diff --git a/.github/workflows/update-patterns-list.yml b/.github/workflows/update-patterns-list.yml
@@ -17,6 +17,8 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.PAT_TOKEN }}
 
       - name: Set up Node.js
         uses: actions/setup-node@v4
@@ -29,7 +31,7 @@ jobs:
       - name: Create Pull Request
         uses: peter-evans/create-pull-request@v6
         with:
-          token: ${{ secrets.GITHUB_TOKEN }}
+          token: ${{ secrets.PAT_TOKEN }}
           commit-message: "docs: update patterns list [skip ci]"
           title: "docs: update patterns list"
           body: |

diff --git a/content/en/patterns/forms/search-field.mdx b/content/en/patterns/forms/search-field.mdx
@@ -7,8 +7,21 @@ import { Callout } from "nextra/components";
 
 # Search Field
 
+**_(Also called search input)_**
+
 <Callout type="warning">
   This page is empty for now. Please help us by
   [contributing](https://github.com/thedaviddias/ux-patterns-for-developers/blob/main/.github/CONTRIBUTING.md)
   to add content.
 </Callout>
+
+## Overview
+
+## Usage
+
+A search can be used in the following cases:
+
+- Global search on a website
+- Reduce the number of results in a list (ex: dropdown with a list of elements)
+
+Usually used in combinaison with [autocomplete](/patterns/forms/autocomplete)
diff --git a/content/en/patterns/forms/selection-input.mdx b/content/en/patterns/forms/selection-input.mdx
@@ -7,6 +7,8 @@ import { Callout } from "nextra/components";
 
 # Selection Input
 
+**_(Also called dropdown, select)_**
+
 <Callout type="warning">
   This page is empty for now. Please help us by
   [contributing](https://github.com/thedaviddias/ux-patterns-for-developers/blob/main/.github/CONTRIBUTING.md)

diff --git a/content/en/patterns/forms/slider.mdx b/content/en/patterns/forms/slider.mdx
@@ -12,3 +12,13 @@ import { Callout } from "nextra/components";
   [contributing](https://github.com/thedaviddias/ux-patterns-for-developers/blob/main/.github/CONTRIBUTING.md)
   to add content.
 </Callout>
+
+## Resources
+
+### Articles
+
+- [Designing The Perfect Slider UX](https://www.smashingmagazine.com/2017/07/designing-perfect-slider/) by Smashing Magazine
+
+### Design systems
+
+https://developer.apple.com/design/human-interface-guidelines/components/selection-and-input/sliders
diff --git a/content/en/patterns/forms/text-field.mdx b/content/en/patterns/forms/text-field.mdx
@@ -7,8 +7,31 @@ import { Callout } from "nextra/components";
 
 # Text Field
 
+**_(Also called text input or text box)_**
+
 <Callout type="warning">
   This page is empty for now. Please help us by
   [contributing](https://github.com/thedaviddias/ux-patterns-for-developers/blob/main/.github/CONTRIBUTING.md)
   to add content.
 </Callout>
+
+## Best Practices
+
+### Design
+
+- [ ] Don't rely **only on color to indicate the state of the text field**. Use a different border color or a different icon to indicate the state of the text field.
+- [ ] Avoid using an icon signifiying an **error state inside a text field**. It's easier to establish a common pattern for all input fields. For example: inputs `type=file` don't contain text, it's usually represented by a button. A password field has usually an eye icon on the right of the input. A date field has usually a calendar icon on the right of the input. A search field has usually a clear icon on the right of the input.
+
+## Anatomy
+
+1. Label
+2. Input
+3. Placeholder
+4. Helper text
+5. Validation message
+
+## Resources
+
+### References
+
+- https://uxdesign.cc/text-fields-forms-design-ui-components-series-2b32b2beebd0
diff --git a/content/en/patterns/forms/dropdown.mdx → ...n/patterns/navigation/infinite-scroll.mdx b/content/en/patterns/forms/dropdown.mdx → ...n/patterns/navigation/infinite-scroll.mdx
@@ -1,12 +1,14 @@
 ---
-description: "Select options from a collapsible list"
-icon: ChevronsUpDown
+description: ""
+icon:
 ---
 
 import { BrowserSupport } from "@app/_components/browser-support";
 import { Callout } from "nextra/components";
 
-# Dropdown
+# Infinite scroll
+
+**_(Also called Continuous scrolling)_**
 
 <Callout type="warning">
   This page is empty for now. Please help us by
@@ -16,7 +18,7 @@ import { Callout } from "nextra/components";
 
 ## Overview
 
-**Dropdowns** are [brief description of the component].
+**Infinite scrolls** are [brief description of the component].
 
 ## Use Cases
 
@@ -48,14 +50,14 @@ import { Callout } from "nextra/components";
 
 ```mermaid
 flowchart TB
-subgraph Dropdown[Dropdown Navigation]
+subgraph Infinite scroll[Infinite scroll Navigation]
 A[Component Part 1] -.->|relation| B[Component Part 2]
 B -.->|relation| C[Component Part 3]
 style A fill:#f0f0f0,stroke:#666,stroke-width:1px
 style B fill:#f0f0f0,stroke:#666,stroke-width:1px
 style C fill:#f0f0f0,stroke:#666,stroke-width:1px
 classDef container fill:#ffffe0,stroke:#666,stroke-width:2px
-class Dropdown container
+class Infinite scroll container
 end
 ```
 
@@ -160,12 +162,12 @@ end
 
 These design tokens follow the [Design Tokens Format](https://design-tokens.github.io/community-group/format/) specification and can be used with various token transformation tools to generate platform-specific variables.
 
-### Dropdown Tokens in DTF Format
+### Infinite scroll Tokens in DTF Format
 
 ```json:.json
 {
   "$schema": "https://design-tokens.org/schema.json",
-  "Dropdown": {}
+  "Infinite scroll": {}
 }
 ```
 

diff --git a/content/en/patterns/navigation/pagination.mdx b/content/en/patterns/navigation/pagination.mdx
@@ -12,3 +12,9 @@ import { Callout } from "nextra/components";
   [contributing](https://github.com/thedaviddias/ux-patterns-for-developers/blob/main/.github/CONTRIBUTING.md)
   to add content.
 </Callout>
+
+## Best Practices
+
+### Design
+
+- [ ] Design for the possibility of having a digit bigger than 1000 (maybe use 1k, 2k, 3k, etc.)