Skip to content

Commit 9c27510

Browse files
booc0mtacobooc0mtaco
authored
docs: update Select and Tooltip (v2) documentation (#1930)
1 parent 146df70 commit 9c27510

File tree

3 files changed

+267
-10
lines changed

3 files changed

+267
-10
lines changed

‎src/components/Select/Select-v2.stories.tsx

Lines changed: 124 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -326,6 +326,29 @@ export const WithFieldName: StoryObj = {
326326
</>
327327
),
328328
},
329+
parameters: {
330+
docs: {
331+
source: {
332+
code: `
333+
<Select onChange={...}>
334+
<Select.Button>
335+
{({ value, open, disabled }) => (
336+
<Select.ButtonWrapper isOpen={open}>
337+
{value.label}
338+
</Select.ButtonWrapper>
339+
)}
340+
</Select.Button>
341+
<Select.Options>
342+
{exampleOptions.map((option) => (
343+
<Select.Option key={option.key} value={option}>
344+
{option.label}
345+
</Select.Option>
346+
))}
347+
</Select.Options>
348+
</Select>`,
349+
},
350+
},
351+
},
329352
};
330353

331354
export const WithFieldNote: StoryObj = {
@@ -381,6 +404,27 @@ export const UncontrolledHeadless: StoryObj = {
381404
</>
382405
),
383406
},
407+
parameters: {
408+
docs: {
409+
source: {
410+
code: `
411+
<Select onChange={...}>
412+
<Select.Button>
413+
{({ value, open, disabled }) => (
414+
<button className="fpo">{value.label}</button>
415+
)}
416+
</Select.Button>
417+
<Select.Options>
418+
{exampleOptions.map((option) => (
419+
<Select.Option key={option.key} value={option}>
420+
{option.label}
421+
</Select.Option>
422+
))}
423+
</Select.Options>
424+
</Select>`,
425+
},
426+
},
427+
},
384428
};
385429

386430
/**
@@ -411,6 +455,29 @@ export const StyledUncontrolled: StoryObj = {
411455
</>
412456
),
413457
},
458+
parameters: {
459+
docs: {
460+
source: {
461+
code: `
462+
<Select onChange={...}>
463+
<Select.Button>
464+
{({ value, open, disabled }) => (
465+
<Select.ButtonWrapper isOpen={open}>
466+
{value.label}
467+
</Select.ButtonWrapper>
468+
)}
469+
</Select.Button>
470+
<Select.Options>
471+
{exampleOptions.map((option) => (
472+
<Select.Option key={option.key} value={option}>
473+
{option.label}
474+
</Select.Option>
475+
))}
476+
</Select.Options>
477+
</Select>`,
478+
},
479+
},
480+
},
414481
};
415482

416483
/**
@@ -457,22 +524,20 @@ export const Multiple: StoryObj = {
457524
docs: {
458525
source: {
459526
code: `
460-
<Select>
527+
<Select multiple>
461528
<Select.Button>
462529
{({ value, open, disabled }) => (
463-
<Select.ButtonWrapper
464-
isOpen={open}
465-
>
530+
<Select.ButtonWrapper isOpen={open}>
466531
{value.length > 0 ? value.length : 'none'} selected
467532
</Select.ButtonWrapper>
468533
)}
469534
</Select.Button>
470535
<Select.Options>
471-
{exampleOptions.map((option) => (
472-
<Select.Option key={option.key} value={option}>
473-
{option.label}
474-
</Select.Option>
475-
))}
536+
{exampleOptions.map((option) => (
537+
<Select.Option key={option.key} value={option}>
538+
{option.label}
539+
</Select.Option>
540+
))}
476541
</Select.Options>
477542
</Select>`,
478543
},
@@ -513,6 +578,30 @@ export const MultipleWithTruncation: StoryObj = {
513578
</>
514579
),
515580
},
581+
parameters: {
582+
docs: {
583+
source: {
584+
code: `
585+
<Select multiple>
586+
<Select.Button>
587+
{({ value, open, disabled }) => (
588+
<Select.ButtonWrapper isOpen={open} shouldTruncate>
589+
{value.length > 0 ? value.length : 'none'} long selected
590+
description
591+
</Select.ButtonWrapper>
592+
)}
593+
</Select.Button>
594+
<Select.Options>
595+
{exampleOptions.map((option) => (
596+
<Select.Option key={option.key} value={option}>
597+
{option.label}
598+
</Select.Option>
599+
))}
600+
</Select.Options>
601+
</Select>`,
602+
},
603+
},
604+
},
516605
};
517606

518607
/**
@@ -567,9 +656,34 @@ export const LongOptionList: StoryObj = {
567656
await expect(selectButton.getAttribute('aria-expanded')).toEqual('true');
568657
},
569658
parameters: {
570-
badges: ['intro-1.2'],
659+
badges: ['intro-1.2', 'current-2.0'],
571660
layout: 'centered',
572661
chromatic: { delay: 450 },
662+
docs: {
663+
source: {
664+
code: `
665+
<Select onChange={...}>
666+
<Select.Button>
667+
{({ value, open, disabled }) => (
668+
<Select.ButtonWrapper isOpen={open} shouldTruncate>
669+
{value}
670+
</Select.ButtonWrapper>
671+
)}
672+
</Select.Button>
673+
<Select.Options>
674+
{Array(30)
675+
.fill('test')
676+
.map((option, index) => (
677+
// eslint-disable-next-line react/no-array-index-key
678+
<Select.Option key={\`$\{option}-$\{index}\`} value={option + index}>
679+
{option}
680+
{index}
681+
</Select.Option>
682+
))}
683+
</Select.Options>
684+
</Select>`,
685+
},
686+
},
573687
},
574688
decorators: [(Story) => <div className="p-8 pb-16">{Story()}</div>],
575689
};

‎src/components/Select/Select.stories.tsx

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -326,6 +326,29 @@ export const WithFieldName: StoryObj = {
326326
</>
327327
),
328328
},
329+
parameters: {
330+
docs: {
331+
source: {
332+
code: `
333+
<Select onChange={...}>
334+
<Select.Button>
335+
{({ value, open, disabled }) => (
336+
<Select.ButtonWrapper isOpen={open}>
337+
{value.label}
338+
</Select.ButtonWrapper>
339+
)}
340+
</Select.Button>
341+
<Select.Options>
342+
{exampleOptions.map((option) => (
343+
<Select.Option key={option.key} value={option}>
344+
{option.label}
345+
</Select.Option>
346+
))}
347+
</Select.Options>
348+
</Select>`,
349+
},
350+
},
351+
},
329352
};
330353

331354
/**
@@ -356,6 +379,27 @@ export const UncontrolledHeadless: StoryObj = {
356379
</>
357380
),
358381
},
382+
parameters: {
383+
docs: {
384+
source: {
385+
code: `
386+
<Select onChange={...}>
387+
<Select.Button>
388+
{({ value, open, disabled }) => (
389+
<button className="fpo">{value.label}</button>
390+
)}
391+
</Select.Button>
392+
<Select.Options>
393+
{exampleOptions.map((option) => (
394+
<Select.Option key={option.key} value={option}>
395+
{option.label}
396+
</Select.Option>
397+
))}
398+
</Select.Options>
399+
</Select>`,
400+
},
401+
},
402+
},
359403
};
360404

361405
/**
@@ -386,6 +430,29 @@ export const StyledUncontrolled: StoryObj = {
386430
</>
387431
),
388432
},
433+
parameters: {
434+
docs: {
435+
source: {
436+
code: `
437+
<Select onChange={...}>
438+
<Select.Button>
439+
{({ value, open, disabled }) => (
440+
<Select.ButtonWrapper isOpen={open}>
441+
{value.label}
442+
</Select.ButtonWrapper>
443+
)}
444+
</Select.Button>
445+
<Select.Options>
446+
{exampleOptions.map((option) => (
447+
<Select.Option key={option.key} value={option}>
448+
{option.label}
449+
</Select.Option>
450+
))}
451+
</Select.Options>
452+
</Select>`,
453+
},
454+
},
455+
},
389456
};
390457

391458
/**
@@ -428,6 +495,29 @@ export const Multiple: StoryObj = {
428495
</>
429496
),
430497
},
498+
parameters: {
499+
docs: {
500+
source: {
501+
code: `
502+
<Select multiple>
503+
<Select.Button>
504+
{({ value, open, disabled }) => (
505+
<Select.ButtonWrapper isOpen={open}>
506+
{value.length > 0 ? value.length : 'none'} selected
507+
</Select.ButtonWrapper>
508+
)}
509+
</Select.Button>
510+
<Select.Options>
511+
{exampleOptions.map((option) => (
512+
<Select.Option key={option.key} value={option}>
513+
{option.label}
514+
</Select.Option>
515+
))}
516+
</Select.Options>
517+
</Select>`,
518+
},
519+
},
520+
},
431521
};
432522

433523
/**
@@ -463,6 +553,30 @@ export const MultipleWithTruncation: StoryObj = {
463553
</>
464554
),
465555
},
556+
parameters: {
557+
docs: {
558+
source: {
559+
code: `
560+
<Select multiple>
561+
<Select.Button>
562+
{({ value, open, disabled }) => (
563+
<Select.ButtonWrapper isOpen={open} shouldTruncate>
564+
{value.length > 0 ? value.length : 'none'} long selected
565+
description
566+
</Select.ButtonWrapper>
567+
)}
568+
</Select.Button>
569+
<Select.Options>
570+
{exampleOptions.map((option) => (
571+
<Select.Option key={option.key} value={option}>
572+
{option.label}
573+
</Select.Option>
574+
))}
575+
</Select.Options>
576+
</Select>`,
577+
},
578+
},
579+
},
466580
};
467581

468582
/**
@@ -520,6 +634,30 @@ export const LongOptionList: StoryObj = {
520634
badges: ['intro-1.2'],
521635
layout: 'centered',
522636
chromatic: { delay: 450 },
637+
docs: {
638+
source: {
639+
code: `
640+
<Select onChange={...}>
641+
<Select.Button>
642+
{({ value, open, disabled }) => (
643+
<Select.ButtonWrapper isOpen={open} shouldTruncate>
644+
{value}
645+
</Select.ButtonWrapper>
646+
)}
647+
</Select.Button>
648+
<Select.Options>
649+
{Array(30)
650+
.fill('test')
651+
.map((option, index) => (
652+
<Select.Option key={\`$\{option}-$\{index}\`} value={option + index}>
653+
{option}
654+
{index}
655+
</Select.Option>
656+
))}
657+
</Select.Options>
658+
</Select>`,
659+
},
660+
},
523661
},
524662
decorators: [(Story) => <div className="p-8 pb-16">{Story()}</div>],
525663
};

‎src/components/Tooltip/Tooltip-v2.stories.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,11 @@ const defaultArgs = {
1414
// this turns animation off to ensure stable visual snapshots
1515
duration: 0,
1616
visible: true,
17+
parameters: {
18+
chromatic: {
19+
delay: 300,
20+
},
21+
},
1722
};
1823

1924
export default {

0 commit comments

Comments
 (0)