docs: update Select and Tooltip (v2) documentation (#1930)

chanzuckerberg · May 7, 2024 · 9c27510 · 9c27510
1 parent 146df70
commit 9c27510
Show file tree

Hide file tree

Showing 3 changed files with 267 additions and 10 deletions.
diff --git a/src/components/Select/Select-v2.stories.tsx b/src/components/Select/Select-v2.stories.tsx
@@ -326,6 +326,29 @@ export const WithFieldName: StoryObj = {
       </>
     ),
   },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<Select onChange={...}>
+  <Select.Button>
+    {({ value, open, disabled }) => (
+      <Select.ButtonWrapper isOpen={open}>
+        {value.label}
+      </Select.ButtonWrapper>
+    )}
+  </Select.Button>
+  <Select.Options>
+  {exampleOptions.map((option) => (
+    <Select.Option key={option.key} value={option}>
+      {option.label}
+    </Select.Option>
+  ))}
+  </Select.Options>
+</Select>`,
+      },
+    },
+  },
 };
 
 export const WithFieldNote: StoryObj = {
@@ -381,6 +404,27 @@ export const UncontrolledHeadless: StoryObj = {
       </>
     ),
   },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<Select onChange={...}>
+  <Select.Button>
+    {({ value, open, disabled }) => (
+      <button className="fpo">{value.label}</button>
+    )}
+  </Select.Button>
+  <Select.Options>
+  {exampleOptions.map((option) => (
+    <Select.Option key={option.key} value={option}>
+      {option.label}
+    </Select.Option>
+  ))}
+  </Select.Options>
+</Select>`,
+      },
+    },
+  },
 };
 
 /**
@@ -411,6 +455,29 @@ export const StyledUncontrolled: StoryObj = {
       </>
     ),
   },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<Select onChange={...}>
+  <Select.Button>
+    {({ value, open, disabled }) => (
+      <Select.ButtonWrapper isOpen={open}>
+        {value.label}
+      </Select.ButtonWrapper>
+    )}
+  </Select.Button>
+  <Select.Options>
+  {exampleOptions.map((option) => (
+    <Select.Option key={option.key} value={option}>
+      {option.label}
+    </Select.Option>
+  ))}
+  </Select.Options>
+</Select>`,
+      },
+    },
+  },
 };
 
 /**
@@ -457,22 +524,20 @@ export const Multiple: StoryObj = {
     docs: {
       source: {
         code: `
-<Select>
+<Select multiple>
   <Select.Button>
     {({ value, open, disabled }) => (
-      <Select.ButtonWrapper
-        isOpen={open}
-        >
+      <Select.ButtonWrapper isOpen={open}>
         {value.length > 0 ? value.length : 'none'} selected
       </Select.ButtonWrapper>
     )}
   </Select.Button>
   <Select.Options>
-    {exampleOptions.map((option) => (
-      <Select.Option key={option.key} value={option}>
-        {option.label}
-      </Select.Option>
-    ))}
+  {exampleOptions.map((option) => (
+    <Select.Option key={option.key} value={option}>
+      {option.label}
+    </Select.Option>
+  ))}
   </Select.Options>
 </Select>`,
       },
@@ -513,6 +578,30 @@ export const MultipleWithTruncation: StoryObj = {
       </>
     ),
   },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<Select multiple>
+  <Select.Button>
+    {({ value, open, disabled }) => (
+      <Select.ButtonWrapper isOpen={open} shouldTruncate>
+        {value.length > 0 ? value.length : 'none'} long selected
+        description
+      </Select.ButtonWrapper>
+    )}
+  </Select.Button>
+  <Select.Options>
+  {exampleOptions.map((option) => (
+    <Select.Option key={option.key} value={option}>
+      {option.label}
+    </Select.Option>
+  ))}
+  </Select.Options>
+</Select>`,
+      },
+    },
+  },
 };
 
 /**
@@ -567,9 +656,34 @@ export const LongOptionList: StoryObj = {
     await expect(selectButton.getAttribute('aria-expanded')).toEqual('true');
   },
   parameters: {
-    badges: ['intro-1.2'],
+    badges: ['intro-1.2', 'current-2.0'],
     layout: 'centered',
     chromatic: { delay: 450 },
+    docs: {
+      source: {
+        code: `
+<Select onChange={...}>
+  <Select.Button>
+    {({ value, open, disabled }) => (
+      <Select.ButtonWrapper isOpen={open} shouldTruncate>
+        {value}
+      </Select.ButtonWrapper>
+    )}
+  </Select.Button>
+  <Select.Options>
+  {Array(30)
+    .fill('test')
+    .map((option, index) => (
+      // eslint-disable-next-line react/no-array-index-key
+      <Select.Option key={\`$\{option}-$\{index}\`} value={option + index}>
+        {option}
+        {index}
+      </Select.Option>
+    ))}
+  </Select.Options>
+</Select>`,
+      },
+    },
   },
   decorators: [(Story) => <div className="p-8 pb-16">{Story()}</div>],
 };

diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
@@ -326,6 +326,29 @@ export const WithFieldName: StoryObj = {
       </>
     ),
   },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<Select onChange={...}>
+  <Select.Button>
+    {({ value, open, disabled }) => (
+      <Select.ButtonWrapper isOpen={open}>
+        {value.label}
+      </Select.ButtonWrapper>
+    )}
+  </Select.Button>
+  <Select.Options>
+  {exampleOptions.map((option) => (
+    <Select.Option key={option.key} value={option}>
+      {option.label}
+    </Select.Option>
+  ))}
+  </Select.Options>
+</Select>`,
+      },
+    },
+  },
 };
 
 /**
@@ -356,6 +379,27 @@ export const UncontrolledHeadless: StoryObj = {
       </>
     ),
   },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<Select onChange={...}>
+  <Select.Button>
+    {({ value, open, disabled }) => (
+      <button className="fpo">{value.label}</button>
+    )}
+  </Select.Button>
+  <Select.Options>
+  {exampleOptions.map((option) => (
+    <Select.Option key={option.key} value={option}>
+      {option.label}
+    </Select.Option>
+  ))}
+  </Select.Options>
+</Select>`,
+      },
+    },
+  },
 };
 
 /**
@@ -386,6 +430,29 @@ export const StyledUncontrolled: StoryObj = {
       </>
     ),
   },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<Select onChange={...}>
+  <Select.Button>
+    {({ value, open, disabled }) => (
+      <Select.ButtonWrapper isOpen={open}>
+        {value.label}
+      </Select.ButtonWrapper>
+    )}
+  </Select.Button>
+  <Select.Options>
+  {exampleOptions.map((option) => (
+    <Select.Option key={option.key} value={option}>
+      {option.label}
+    </Select.Option>
+  ))}
+  </Select.Options>
+</Select>`,
+      },
+    },
+  },
 };
 
 /**
@@ -428,6 +495,29 @@ export const Multiple: StoryObj = {
       </>
     ),
   },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<Select multiple>
+  <Select.Button>
+    {({ value, open, disabled }) => (
+      <Select.ButtonWrapper isOpen={open}>
+        {value.length > 0 ? value.length : 'none'} selected
+      </Select.ButtonWrapper>
+    )}
+  </Select.Button>
+  <Select.Options>
+  {exampleOptions.map((option) => (
+    <Select.Option key={option.key} value={option}>
+      {option.label}
+    </Select.Option>
+  ))}
+  </Select.Options>
+</Select>`,
+      },
+    },
+  },
 };
 
 /**
@@ -463,6 +553,30 @@ export const MultipleWithTruncation: StoryObj = {
       </>
     ),
   },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<Select multiple>
+  <Select.Button>
+    {({ value, open, disabled }) => (
+      <Select.ButtonWrapper isOpen={open} shouldTruncate>
+        {value.length > 0 ? value.length : 'none'} long selected
+        description
+      </Select.ButtonWrapper>
+    )}
+  </Select.Button>
+  <Select.Options>
+  {exampleOptions.map((option) => (
+    <Select.Option key={option.key} value={option}>
+      {option.label}
+    </Select.Option>
+  ))}
+  </Select.Options>
+</Select>`,
+      },
+    },
+  },
 };
 
 /**
@@ -520,6 +634,30 @@ export const LongOptionList: StoryObj = {
     badges: ['intro-1.2'],
     layout: 'centered',
     chromatic: { delay: 450 },
+    docs: {
+      source: {
+        code: `
+<Select onChange={...}>
+  <Select.Button>
+    {({ value, open, disabled }) => (
+      <Select.ButtonWrapper isOpen={open} shouldTruncate>
+        {value}
+      </Select.ButtonWrapper>
+    )}
+  </Select.Button>
+  <Select.Options>
+  {Array(30)
+    .fill('test')
+    .map((option, index) => (
+      <Select.Option key={\`$\{option}-$\{index}\`} value={option + index}>
+        {option}
+        {index}
+      </Select.Option>
+    ))}
+  </Select.Options>
+</Select>`,
+      },
+    },
   },
   decorators: [(Story) => <div className="p-8 pb-16">{Story()}</div>],
 };

diff --git a/src/components/Tooltip/Tooltip-v2.stories.tsx b/src/components/Tooltip/Tooltip-v2.stories.tsx
@@ -14,6 +14,11 @@ const defaultArgs = {
   // this turns animation off to ensure stable visual snapshots
   duration: 0,
   visible: true,
+  parameters: {
+    chromatic: {
+      delay: 300,
+    },
+  },
 };
 
 export default {