superdesk-ui-framework 5.2.2 → 6.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/app/styles/_avatar.scss +147 -12
  2. package/app/styles/_tooltips.scss +7 -1
  3. package/app-typescript/components/CopyableTextBox.tsx +8 -1
  4. package/app-typescript/components/SearchBar.tsx +1 -1
  5. package/app-typescript/components/ShowPopup.tsx +1 -0
  6. package/app-typescript/components/avatar/avatar-group.tsx +25 -15
  7. package/app-typescript/components/avatar/avatar-with-inline-text-wrapper.tsx +22 -0
  8. package/app-typescript/components/avatar/avatar.tsx +119 -46
  9. package/dist/components/Avatar.tsx +523 -58
  10. package/dist/examples.bundle.css +6 -4
  11. package/dist/examples.bundle.js +29933 -29777
  12. package/dist/superdesk-ui.bundle.css +101 -18
  13. package/dist/superdesk-ui.bundle.js +29551 -29498
  14. package/dist/vendor.bundle.js +16 -16
  15. package/package.json +1 -1
  16. package/react/components/CopyableTextBox.d.ts +4 -1
  17. package/react/components/CopyableTextBox.js +4 -1
  18. package/react/components/SearchBar.js +6 -6
  19. package/react/components/ShowPopup.js +1 -1
  20. package/react/components/avatar/avatar-group.d.ts +4 -2
  21. package/react/components/avatar/avatar-group.js +7 -9
  22. package/react/components/avatar/avatar-with-inline-text-wrapper.d.ts +8 -0
  23. package/react/components/avatar/avatar-with-inline-text-wrapper.js +17 -0
  24. package/react/components/avatar/avatar.d.ts +28 -8
  25. package/react/components/avatar/avatar.js +67 -39
package/dist/components/Avatar.tsx CHANGED
@@ -1,39 +1,41 @@
1
1
  import * as React from 'react';
2
2
  import * as Markup from '../../js/react';
3
3
 
4
- import {Container, Avatar, AvatarGroup, AvatarPlaceholder} from '../../../app-typescript';
5
- import {IAvatarInGroup, IAvatarPlaceholderInGroup} from '../../../app-typescript/components/avatar/avatar-group';
4
+ import {Container, Avatar, AvatarGroup, AvatarPlaceholder, Prop, PropsList} from '../../../app-typescript';
5
+ import {IAvatarInGroup} from '../../../app-typescript/components/avatar/avatar-group';
6
6
 
7
7
  const avatars: Array<IAvatarInGroup> = [
8
8
  {
9
9
  imageUrl: 'avatar.jpg',
10
- initials: 'U1',
11
- displayName: 'User1',
10
+ initials: 'JL',
11
+ displayName: 'Jeffrey Lebowski',
12
12
  },
13
13
  {
14
14
  imageUrl: null,
15
- initials: 'U2',
16
- displayName: 'User2',
15
+ initials: 'WS',
16
+ displayName: 'Walter Sobchak',
17
+ tooltip: 'Walter Sobchak - Professional Bowler',
17
18
  },
18
19
  {
19
20
  imageUrl: null,
20
- initials: 'U3',
21
- displayName: 'User3',
21
+ initials: 'DK',
22
+ displayName: 'Donny Kerabatsos',
22
23
  },
23
24
  {
24
25
  imageUrl: 'avatar-3.jpg',
25
- initials: 'U4',
26
- displayName: 'User4',
26
+ initials: 'JJB',
27
+ displayName: 'Jean-Jacques Burnel',
28
+ tooltip: 'Jean-Jacques Burnel - Professional Boxer',
27
29
  },
28
30
  {
29
31
  imageUrl: 'avatar-4.jpg',
30
- initials: 'U5',
31
- displayName: 'User5',
32
+ initials: 'DH',
33
+ displayName: 'Deborah Ann Harry',
32
34
  },
33
35
  {
34
- imageUrl: null,
35
- initials: 'A6',
36
- displayName: 'User6',
36
+ imageUrl: 'avatar-5.jpg',
37
+ initials: 'CW',
38
+ displayName: 'Christopher George Latore Wallace',
37
39
  },
38
40
  ];
39
41
 
@@ -300,22 +302,6 @@ export default class AvatarDoc extends React.PureComponent {
300
302
 
301
303
 
302
304
  // With status indicator
303
- <Avatar
304
- size="x-small"
305
- imageUrl="/avatar.jpg"
306
- initials="JL"
307
- displayName="Jeffrey Lebowski"
308
- statusIndicator="online"
309
- />
310
-
311
- <Avatar
312
- size="x-small"
313
- imageUrl="/avatar.jpg"
314
- initials="JL"
315
- displayName="Jeffrey Lebowski"
316
- statusIndicator="offline"
317
- />
318
-
319
305
  <Avatar
320
306
  size="large"
321
307
  imageUrl="/avatar.jpg"
@@ -324,14 +310,6 @@ export default class AvatarDoc extends React.PureComponent {
324
310
  statusIndicator="online"
325
311
  />
326
312
 
327
- <Avatar
328
- size="large"
329
- imageUrl="/avatar.jpg"
330
- initials="JL"
331
- displayName="Jeffrey Lebowski"
332
- statusIndicator="offline"
333
- />
334
-
335
313
  // With administrator indicator
336
314
 
337
315
  <Avatar
@@ -381,7 +359,7 @@ export default class AvatarDoc extends React.PureComponent {
381
359
  imageUrl={null}
382
360
  initials={null}
383
361
  displayName="Unassigned"
384
- emptyLight
362
+ noAvatarPlaceholderColor="subtle"
385
363
  icon={{name: 'text', color: 'var(--sd-colour-state--canceled)'}}
386
364
  />
387
365
 
@@ -402,7 +380,7 @@ export default class AvatarDoc extends React.PureComponent {
402
380
  />
403
381
 
404
382
  // With icon and Coverage status indicator
405
- <Avatar
383
+ <Avatar
406
384
  displayName="Unassigned"
407
385
  imageUrl={null}
408
386
  initials={null}
@@ -410,7 +388,7 @@ export default class AvatarDoc extends React.PureComponent {
410
388
  icon={{name: 'text', color: 'var(--sd-colour-state--assigned)'}}
411
389
  statusDot={{color: 'var(--sd-colour-coverage-state--on-merit)'}}
412
390
  />
413
- <Avatar
391
+ <Avatar
414
392
  displayName="Unassigned"
415
393
  imageUrl={null}
416
394
  initials={null}
@@ -423,11 +401,323 @@ export default class AvatarDoc extends React.PureComponent {
423
401
  </Markup.ReactMarkupCode>
424
402
  </Markup.ReactMarkup>
425
403
 
426
- <h3 className="docs-page__h3 docs-page__h3--small-top-m">AvatarGroup</h3>
427
- <p className="docs-page__paragraph"></p>
404
+ <h3 className="docs-page__h3">Name Display Modes</h3>
405
+ <p className="docs-page__paragraph">
406
+ Avatar supports different ways to display (or hide) the user's name:
407
+ </p>
408
+ <Markup.ReactMarkup>
409
+ <Markup.ReactMarkupPreview>
410
+ <div className="docs-page__content-row">
411
+ <p className="docs-page__paragraph">// Tooltip Mode (default)</p>
412
+ <Container gap="medium" className="sd-margin-b--3">
413
+ <Avatar
414
+ size="large"
415
+ imageUrl="/avatar.jpg"
416
+ initials="JL"
417
+ displayName="Jeffrey Lebowski"
418
+ nameDisplay={{kind: 'tooltip'}}
419
+ />
420
+ <Avatar
421
+ size="large"
422
+ imageUrl={null}
423
+ initials="WS"
424
+ displayName="Walter Sobchak"
425
+ nameDisplay={{kind: 'tooltip'}}
426
+ />
427
+ <Avatar
428
+ size="large"
429
+ imageUrl="/avatar-3.jpg"
430
+ initials="TD"
431
+ displayName="Theodore Donald Kerabatsos"
432
+ nameDisplay={{kind: 'tooltip', content: 'Donny - Professional Bowler'}}
433
+ />
434
+ </Container>
435
+
436
+ <p className="docs-page__paragraph">// None Mode (no name displayed)</p>
437
+ <Container gap="medium" className="sd-margin-b--3">
438
+ <Avatar
439
+ size="large"
440
+ imageUrl="/avatar.jpg"
441
+ initials="JL"
442
+ displayName="Jeffrey Lebowski"
443
+ nameDisplay={{kind: 'none'}}
444
+ />
445
+ <Avatar
446
+ size="large"
447
+ imageUrl={null}
448
+ initials="WS"
449
+ displayName="Walter Sobchak"
450
+ nameDisplay={{kind: 'none'}}
451
+ />
452
+ </Container>
453
+
454
+ <p className="docs-page__paragraph">// Inline Mode</p>
455
+ <Container gap="medium" className="sd-margin-b--3" direction="column">
456
+ <Avatar
457
+ size="x-small"
458
+ imageUrl={null}
459
+ initials="KL"
460
+ displayName="Kurt Lebowski"
461
+ nameDisplay={{kind: 'inline'}}
462
+ />
463
+ <Avatar
464
+ size="small"
465
+ imageUrl="/avatar.jpg"
466
+ initials="JL"
467
+ displayName="Jeffrey Lebowski"
468
+ nameDisplay={{kind: 'inline'}}
469
+ />
470
+ <Avatar
471
+ size="medium"
472
+ imageUrl={null}
473
+ initials="WS"
474
+ displayName="Walter Sobchak"
475
+ nameDisplay={{kind: 'inline'}}
476
+ />
477
+ <Avatar
478
+ size="large"
479
+ imageUrl="/avatar-3.jpg"
480
+ initials="JJB"
481
+ displayName="Jean-Jacques Burnel"
482
+ nameDisplay={{kind: 'inline'}}
483
+ />
484
+ <Avatar
485
+ size="x-large"
486
+ imageUrl="/avatar-4.jpg"
487
+ initials="DH"
488
+ displayName="Deborah Ann Harry"
489
+ nameDisplay={{kind: 'inline'}}
490
+ />
491
+ <Avatar
492
+ size="xx-large"
493
+ imageUrl="/avatar-5.jpg"
494
+ initials="CW"
495
+ displayName="Christopher George Latore Wallace"
496
+ nameDisplay={{kind: 'inline'}}
497
+ />
498
+ </Container>
499
+ </div>
500
+ </Markup.ReactMarkupPreview>
501
+ <Markup.ReactMarkupCode>
502
+ {`
503
+ // Tooltip Mode (default) - shows name in tooltip component
504
+ <Avatar
505
+ size="large"
506
+ imageUrl="/avatar.jpg"
507
+ initials="JL"
508
+ displayName="Jeffrey Lebowski"
509
+ nameDisplay="tooltip"
510
+ />
511
+
512
+ // Can add additional info via tooltip prop
513
+ <Avatar
514
+ size="large"
515
+ imageUrl="/avatar-3.jpg"
516
+ initials="JJB"
517
+ displayName="Jean-Jacques Burnel"
518
+ nameDisplay="tooltip"
519
+ tooltip="JJB - Professional Boxer"
520
+ />
521
+
522
+ // None Mode - no name is displayed at all
523
+ <Avatar
524
+ size="large"
525
+ imageUrl="/avatar.jpg"
526
+ initials="JL"
527
+ displayName="Jeffrey Lebowski"
528
+ nameDisplay="none"
529
+ />
530
+
531
+ // Inline Mode - displays name beside avatar
532
+ <Avatar
533
+ size="medium"
534
+ imageUrl={null}
535
+ initials="WS"
536
+ displayName="Walter Sobchak"
537
+ nameDisplay="inline"
538
+ />
539
+ `}
540
+ </Markup.ReactMarkupCode>
541
+ </Markup.ReactMarkup>
542
+
543
+ <h3 className="docs-page__h3">Tooltip Position Control</h3>
544
+ <p className="docs-page__paragraph">
545
+ When using tooltip mode, you can control the position of the tooltip using the{' '}
546
+ <code>tooltipFlow</code> prop. Available positions are: 'top' (default), 'left', 'right', and
547
+ 'down'.
548
+ </p>
549
+ <Markup.ReactMarkup>
550
+ <Markup.ReactMarkupPreview>
551
+ <Container gap="large" className="sd-margin-b--3">
552
+ <Avatar
553
+ size="large"
554
+ imageUrl="/avatar.jpg"
555
+ initials="JL"
556
+ displayName="Jeffrey Lebowski"
557
+ nameDisplay={{kind: 'tooltip', placement: 'top'}}
558
+ />
559
+ <Avatar
560
+ size="large"
561
+ imageUrl="/avatar-3.jpg"
562
+ initials="JJB"
563
+ displayName="Jean-Jacques Burnel"
564
+ nameDisplay={{kind: 'tooltip', placement: 'right'}}
565
+ />
566
+ <Avatar
567
+ size="large"
568
+ imageUrl="/avatar-4.jpg"
569
+ initials="DH"
570
+ displayName="Deborah Ann Harry"
571
+ nameDisplay={{kind: 'tooltip', placement: 'bottom'}}
572
+ />
573
+ <Avatar
574
+ size="large"
575
+ imageUrl="/avatar-5.jpg"
576
+ initials="CW"
577
+ displayName="Christopher George Latore Wallace"
578
+ nameDisplay={{kind: 'tooltip', placement: 'left'}}
579
+ />
580
+ </Container>
581
+ </Markup.ReactMarkupPreview>
582
+ <Markup.ReactMarkupCode>
583
+ {`
584
+ // Top position (default)
585
+ <Avatar
586
+ size="large"
587
+ imageUrl="/avatar.jpg"
588
+ initials="JL"
589
+ displayName="Jeffrey Lebowski"
590
+ nameDisplay={{kind: "tooltip", placement: 'top'}}
591
+ />
592
+ <Avatar
593
+ size="large"
594
+ imageUrl="/avatar-3.jpg"
595
+ initials="JJB"
596
+ displayName="Jean-Jacques Burnel"
597
+ nameDisplay={{kind: "tooltip", placement: 'right'}}
598
+ />
599
+ <Avatar
600
+ size="large"
601
+ imageUrl="/avatar-4.jpg"
602
+ initials="DH"
603
+ displayName="Deborah Ann Harry"
604
+ nameDisplay={{kind: "tooltip", placement: 'bottom'}}
605
+ />
606
+ <Avatar
607
+ size="large"
608
+ imageUrl="/avatar-5.jpg"
609
+ initials="CW"
610
+ displayName="Christopher George Latore Wallace"
611
+ nameDisplay={{kind: "tooltip", placement: 'left'}}
612
+ />
613
+ `}
614
+ </Markup.ReactMarkupCode>
615
+ </Markup.ReactMarkup>
616
+
617
+ <h3 className="docs-page__h3">Text Position in Inline Mode</h3>
618
+ <p className="docs-page__paragraph">
619
+ When using inline mode, you can control whether the text appears before or after the avatar using
620
+ the <code>textPosition</code> prop. Use 'start' to place text before the avatar, or 'end' (default)
621
+ to place it after.
622
+ </p>
623
+ <Markup.ReactMarkup>
624
+ <Markup.ReactMarkupPreview>
625
+ <div className="docs-page__content-row">
626
+ <p className="docs-page__paragraph">// Text Position: End (default)</p>
627
+ <Container gap="medium" className="sd-margin-b--3" direction="column">
628
+ <Avatar
629
+ size="small"
630
+ imageUrl="/avatar.jpg"
631
+ initials="JL"
632
+ displayName="Jeffrey Lebowski"
633
+ nameDisplay={{kind: 'inline', placement: 'end'}}
634
+ />
635
+ <Avatar
636
+ size="medium"
637
+ imageUrl={null}
638
+ initials="WS"
639
+ displayName="Walter Sobchak"
640
+ nameDisplay={{kind: 'inline', placement: 'end'}}
641
+ />
642
+ <Avatar
643
+ size="large"
644
+ imageUrl="/avatar-3.jpg"
645
+ initials="JJB"
646
+ displayName="Jean-Jacques Burnel"
647
+ nameDisplay={{kind: 'inline'}}
648
+ />
649
+ </Container>
650
+
651
+ <p className="docs-page__paragraph">// Text Position: Start</p>
652
+ <Container gap="medium" className="sd-margin-b--3" direction="column">
653
+ <Avatar
654
+ size="small"
655
+ imageUrl="/avatar.jpg"
656
+ initials="JL"
657
+ displayName="Jeffrey Lebowski"
658
+ nameDisplay={{kind: 'inline', placement: 'start'}}
659
+ />
660
+ <Avatar
661
+ size="medium"
662
+ imageUrl={null}
663
+ initials="WS"
664
+ displayName="Walter Sobchak"
665
+ nameDisplay={{kind: 'inline', placement: 'start'}}
666
+ />
667
+ <Avatar
668
+ size="large"
669
+ imageUrl="/avatar-3.jpg"
670
+ initials="JJB"
671
+ displayName="Jean-Jacques Burnel"
672
+ nameDisplay={{kind: 'inline', placement: 'start'}}
673
+ />
674
+ </Container>
675
+ </div>
676
+ </Markup.ReactMarkupPreview>
677
+ <Markup.ReactMarkupCode>
678
+ {`
679
+ // Text Position: End (default behavior)
680
+ <Avatar
681
+ size="medium"
682
+ imageUrl="/avatar.jpg"
683
+ initials="JL"
684
+ displayName="Jeffrey Lebowski"
685
+ nameDisplay={{kind: "inline", placement: "end"}}
686
+ />
687
+
688
+ // Omitting textPosition defaults to "end" (text after avatar)
689
+ <Avatar
690
+ size="medium"
691
+ imageUrl="/avatar-3.jpg"
692
+ initials="JJB"
693
+ displayName="Jean-Jacques Burnel"
694
+ nameDisplay={{kind: "inline"}}
695
+ />
696
+
697
+ // Text Position: Start (text before avatar)
698
+ <Avatar
699
+ size="medium"
700
+ imageUrl={null}
701
+ initials="WS"
702
+ displayName="Walter Sobchak"
703
+ nameDisplay={{kind: "inline", placement: "start"}}
704
+ />
705
+ `}
706
+ </Markup.ReactMarkupCode>
707
+ </Markup.ReactMarkup>
708
+
709
+ <h3 className="docs-page__h3">AvatarGroup</h3>
710
+ <p className="docs-page__paragraph">
711
+ The <code>AvatarGroup</code> component displays multiple avatars in a compact, stacked layout. It's
712
+ commonly used to show participants, assignees, or team members in a space-efficient manner.
713
+ </p>
714
+ <p className="docs-page__paragraph">
715
+ <strong>Note:</strong> In <code>AvatarGroup</code>, inline mode is automatically converted to
716
+ tooltip mode to maintain compact display.
717
+ </p>
428
718
  <Markup.ReactMarkup>
429
719
  <Markup.ReactMarkupPreview>
430
- <p className="docs-page__paragraph">// With action</p>
720
+ <p className="docs-page__paragraph">// Various sizes</p>
431
721
  <AvatarGroup size="x-small" items={avatars} />
432
722
 
433
723
  <br />
@@ -453,38 +743,38 @@ export default class AvatarDoc extends React.PureComponent {
453
743
  const avatars: Array<IAvatarInGroup> = [
454
744
  {
455
745
  imageUrl: 'avatar.jpg',
456
- initials: 'U1',
457
- displayName: 'User1',
746
+ initials: 'JL',
747
+ displayName: 'Jeffrey Lebowski',
458
748
  icon: {name: 'print', color: 'red'},
459
749
  },
460
750
  {
461
751
  imageUrl: null,
462
- initials: 'U2',
463
- displayName: 'User2',
752
+ initials: 'WS',
753
+ displayName: 'Walter Sobchak',
464
754
  icon: {name: 'print', color: 'green'},
465
755
  },
466
756
  {
467
757
  imageUrl: null,
468
- initials: 'U3',
469
- displayName: 'User3',
758
+ initials: 'DK',
759
+ displayName: 'Donny Kerabatsos',
470
760
  icon: {name: 'print', color: 'var(--sd-colour-state--in-workflow)'},
471
761
  },
472
762
  {
473
763
  imageUrl: 'avatar-3.jpg',
474
- initials: 'U4',
475
- displayName: 'User4',
764
+ initials: 'JJB',
765
+ displayName: 'Jean-Jacques Burnel',
476
766
  icon: {name: 'print', color: 'var(--sd-colour-state--in-progress)'},
477
767
  },
478
768
  {
479
769
  imageUrl: 'avatar-4.jpg',
480
- initials: 'U5',
481
- displayName: 'User5',
770
+ initials: 'DH',
771
+ displayName: 'Deborah Ann Harry',
482
772
  icon: {name: 'print', color: 'var(--sd-colour-highlight)'},
483
773
  },
484
774
  {
485
- imageUrl: null,
486
- initials: 'U6',
487
- displayName: 'User6',
775
+ imageUrl: 'avatar-5.jpg',
776
+ initials: 'CW',
777
+ displayName: 'Christopher George Latore Wallace',
488
778
  icon: {name: 'print', color: 'var(--sd-colour-state--in-progress)'},
489
779
  },
490
780
  ];
@@ -653,6 +943,181 @@ export default class AvatarDoc extends React.PureComponent {
653
943
  `}
654
944
  </Markup.ReactMarkupCode>
655
945
  </Markup.ReactMarkup>
946
+
947
+ <h3 className="docs-page__h3">Props</h3>
948
+
949
+ <h4 className="docs-page__h4">Avatar</h4>
950
+ <PropsList>
951
+ <Prop
952
+ name="imageUrl"
953
+ isRequired={true}
954
+ type="string | null"
955
+ default="/"
956
+ description="URL of the avatar image. Pass null if no image is available."
957
+ />
958
+ <Prop
959
+ name="displayName"
960
+ isRequired={true}
961
+ type="string"
962
+ default="/"
963
+ description="User's display name shown in tooltip or inline mode."
964
+ />
965
+ <Prop
966
+ name="initials"
967
+ isRequired={true}
968
+ type="string | null"
969
+ default="/"
970
+ description="User's initials (max 3 letters). Pass null if not available."
971
+ />
972
+ <Prop
973
+ name="size"
974
+ isRequired={true}
975
+ type="'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large'"
976
+ default="/"
977
+ description="Size of the avatar."
978
+ />
979
+ <Prop
980
+ name="statusIndicator"
981
+ isRequired={false}
982
+ type="'online' | 'offline'"
983
+ default="/"
984
+ description="Shows user's online/offline status."
985
+ />
986
+ <Prop
987
+ name="administratorIndicator"
988
+ isRequired={false}
989
+ type="boolean"
990
+ default="false"
991
+ description="Shows administrator crown indicator."
992
+ />
993
+ <Prop
994
+ name="icon"
995
+ isRequired={false}
996
+ type="{name: string; color?: string}"
997
+ default="/"
998
+ description="Icon to display over the avatar (e.g., content type indicator)."
999
+ />
1000
+ <Prop
1001
+ name="statusDot"
1002
+ isRequired={false}
1003
+ type="{color?: string}"
1004
+ default="/"
1005
+ description="Custom colored status dot (e.g., for coverage states)."
1006
+ />
1007
+ <Prop
1008
+ name="noAvatarPlaceholderColor"
1009
+ isRequired={false}
1010
+ type="'subtle' | 'strong'"
1011
+ default="'strong'"
1012
+ description="Color scheme for placeholder when no image is available."
1013
+ />
1014
+ <Prop
1015
+ name="tooltip"
1016
+ isRequired={false}
1017
+ type="string"
1018
+ default="/"
1019
+ description="Additional information to show in tooltip (added on a new line below displayName)."
1020
+ />
1021
+ <Prop
1022
+ name="nameDisplay"
1023
+ isRequired={false}
1024
+ type="'tooltip' | 'none' | 'inline'"
1025
+ default="'tooltip'"
1026
+ description="Controls how the name is displayed: 'tooltip' (shows in tooltip component), 'none' (no name displayed at all), 'inline' (displays beside avatar)."
1027
+ />
1028
+ <Prop
1029
+ name="tooltipFlow"
1030
+ isRequired={false}
1031
+ type="'top' | 'left' | 'right' | 'down'"
1032
+ default="'top'"
1033
+ description="Tooltip position. Only applies when nameDisplay is 'tooltip'."
1034
+ />
1035
+ <Prop
1036
+ name="textPosition"
1037
+ isRequired={false}
1038
+ type="'start' | 'end'"
1039
+ default="'end'"
1040
+ description="Text position relative to avatar. Only applies when nameDisplay is 'inline'. 'start' places text before avatar, 'end' places it after."
1041
+ />
1042
+ <Prop
1043
+ name="customContent"
1044
+ isRequired={false}
1045
+ type="JSX.Element"
1046
+ default="/"
1047
+ description="Custom content to render inside the avatar (AvatarContentText or AvatarContentImage)."
1048
+ />
1049
+ </PropsList>
1050
+
1051
+ <h4 className="docs-page__h4">AvatarGroup</h4>
1052
+ <PropsList>
1053
+ <Prop
1054
+ name="items"
1055
+ isRequired={true}
1056
+ type="Array<IAvatarInGroup | IAvatarPlaceholderInGroup>"
1057
+ default="/"
1058
+ description="Array of avatar or placeholder configurations. Each item has same props as Avatar or AvatarPlaceholder (excluding size)."
1059
+ />
1060
+ <Prop
1061
+ name="size"
1062
+ isRequired={true}
1063
+ type="'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large'"
1064
+ default="/"
1065
+ description="Size applied to all avatars in the group."
1066
+ />
1067
+ <Prop
1068
+ name="max"
1069
+ isRequired={false}
1070
+ type="number | 'show-all'"
1071
+ default="4"
1072
+ description="Maximum number of avatars to show inline before showing '+N' button."
1073
+ />
1074
+ <Prop
1075
+ name="onClick"
1076
+ isRequired={false}
1077
+ type="() => void"
1078
+ default="/"
1079
+ description="Custom click handler. If not provided, a popover with all avatars is shown when max is exceeded."
1080
+ />
1081
+ </PropsList>
1082
+
1083
+ <h4 className="docs-page__h4">AvatarPlaceholder</h4>
1084
+ <PropsList>
1085
+ <Prop
1086
+ name="kind"
1087
+ isRequired={true}
1088
+ type="'plus-button' | 'user-icon'"
1089
+ default="/"
1090
+ description="Type of placeholder: 'plus-button' shows add icon, 'user-icon' shows user silhouette."
1091
+ />
1092
+ <Prop
1093
+ name="size"
1094
+ isRequired={true}
1095
+ type="'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large'"
1096
+ default="/"
1097
+ description="Size of the placeholder avatar."
1098
+ />
1099
+ <Prop
1100
+ name="tooltip"
1101
+ isRequired={false}
1102
+ type="string | null"
1103
+ default="/"
1104
+ description="Tooltip text to show on hover."
1105
+ />
1106
+ <Prop
1107
+ name="icon"
1108
+ isRequired={false}
1109
+ type="{name: string; color?: string}"
1110
+ default="/"
1111
+ description="Icon to display over the placeholder."
1112
+ />
1113
+ <Prop
1114
+ name="onClick"
1115
+ isRequired={false}
1116
+ type="() => void"
1117
+ default="/"
1118
+ description="Click handler for the placeholder."
1119
+ />
1120
+ </PropsList>
656
1121
  </section>
657
1122
  );
658
1123
  }