You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: .storybook/components/Docs/Guidelines/CodeGuidelines.mdx
+19
Original file line number
Diff line number
Diff line change
@@ -6,6 +6,7 @@ import { Canvas, Meta } from '@storybook/blocks';
6
6
7
7
EDS component code follows these principles and conventions for HTML, CSS, and JavaScript/TypeScript/React:
8
8
9
+
-[Reading Figma APIs](#figma)
9
10
-[HTML](#html)
10
11
-[CSS](#css)
11
12
-[CSS design principles](#css-design-principles)
@@ -22,6 +23,24 @@ EDS component code follows these principles and conventions for HTML, CSS, and J
22
23
-[Accessibility](#accessibility)
23
24
-[Tools](#accessibility-tools)
24
25
26
+
# Reading Figma APIs <aname="figma"></a>
27
+
28
+
Both code and figma component documentation have different needs. Tackling the API is not an exact science, so we include some guidelines on how to read and implement the APIs.
29
+
30
+
## Exact matching APIs
31
+
32
+
Cases where the API names match **exactly** between code and figma:
33
+
34
+
-**boolean fields** (e.g., `isFullWidth`, `hasLeadingIcon`) - match the names of boolean fields between code and figma, to avoid ambiguity and confusion
35
+
36
+
## Figma APIs not in Code
37
+
38
+
- By convention, some APIs shown in Figma are for designers and should not be implemented in code. These should include a marker both in the API table and figma component UI (e.g., the gear emoji)
39
+
40
+
## Code APIs not in Figma
41
+
42
+
- In code, there will be APIs for handling events, controlling other UI behaviors, and some props needed for React implementations. We annotate these by grouping the APIs in the props in the types either under `// Component API` or `// Design API`.
43
+
25
44
# HTML principles and conventions <aname="html"></a>
26
45
27
46
-**Use semantic markup.** That means using the `<button>` tag rather than `<div onClick={toggle}>` when a button is required, an `<a>` tag when a link is required, and so on.
0 commit comments