Skip to content

Commit aeffbe0

Browse files
authored
Merge pull request #2066 from chanzuckerberg/release-v15.4.1
### [15.4.1](v15.4.0...v15.4.1) (2024-10-04) [Storybook](https://61313967cde49b003ae2a860-ffjofyjbkx.chromatic.com/) ### Bug Fixes * **Button:** specify size for enabled/disabled buttons ([#2063](#2063)) ([39f3af6](39f3af6))
2 parents eadbcd0 + 679ce57 commit aeffbe0

34 files changed

+591
-642
lines changed

.storybook/components/Docs/Guidelines/CodeGuidelines.mdx

+19
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Canvas, Meta } from '@storybook/blocks';
66

77
EDS component code follows these principles and conventions for HTML, CSS, and JavaScript/TypeScript/React:
88

9+
- [Reading Figma APIs](#figma)
910
- [HTML](#html)
1011
- [CSS](#css)
1112
- [CSS design principles](#css-design-principles)
@@ -22,6 +23,24 @@ EDS component code follows these principles and conventions for HTML, CSS, and J
2223
- [Accessibility](#accessibility)
2324
- [Tools](#accessibility-tools)
2425

26+
# Reading Figma APIs <a name="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+
2544
# HTML principles and conventions <a name="html"></a>
2645

2746
- **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.

.storybook/static/along-footer-paper.svg

-3
This file was deleted.

.storybook/static/along-logo-bulb.svg

-17
This file was deleted.
-151 KB
Binary file not shown.
-124 KB
Binary file not shown.

0 commit comments

Comments
 (0)