playbook_ui_docs 13.27.0.pre.alpha.PLAY888Cardkithighlightoverflowtooltiperror2930 → 13.27.0.pre.alpha.PLAY1122fixMultipleUserspaddingoverflow2844

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 (78) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb +66 -46
  3. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +29 -8
  4. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb +33 -13
  5. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +67 -48
  6. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +20 -0
  7. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -2
  8. data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb +0 -20
  9. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +1 -41
  10. data/app/pb_kits/playbook/pb_card/docs/_card_background.md +1 -1
  11. data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +1 -1
  12. data/app/pb_kits/playbook/pb_card/docs/_card_header.md +1 -1
  13. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md +1 -1
  14. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +0 -7
  15. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +1 -3
  16. data/app/pb_kits/playbook/pb_date_range_inline/docs/example.yml +1 -4
  17. data/app/pb_kits/playbook/pb_date_stacked/docs/example.yml +0 -7
  18. data/app/pb_kits/playbook/pb_date_time/docs/example.yml +0 -6
  19. data/app/pb_kits/playbook/pb_date_year_stacked/docs/example.yml +0 -4
  20. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +3 -3
  21. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +1 -1
  22. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_subcomponent_structure_rails.html.erb → _dropdown_subcomponent_structure.html.erb} +3 -3
  23. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +6 -5
  24. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_display_rails.html.erb → _dropdown_with_custom_display.html.erb} +6 -11
  25. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +3 -6
  26. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +3 -3
  27. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_options_rails.html.erb → _dropdown_with_custom_options.html.erb} +11 -16
  28. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +2 -5
  29. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md +1 -1
  30. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +3 -3
  31. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md +1 -1
  32. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_trigger_rails.html.erb → _dropdown_with_custom_trigger.html.erb} +11 -16
  33. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +2 -5
  34. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md +1 -1
  35. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +3 -3
  36. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +1 -1
  37. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +6 -6
  38. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +0 -9
  39. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -1
  40. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
  41. data/dist/app/components/playbook/pb_docs/kit_example.html.erb +3 -3
  42. data/dist/menu.yml +2 -2
  43. data/dist/playbook-doc.js +6 -6
  44. metadata +6 -40
  45. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.md +0 -3
  46. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.md +0 -3
  47. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx +0 -72
  48. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.md +0 -3
  49. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.html.erb +0 -19
  50. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.md +0 -3
  51. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx +0 -73
  52. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.md +0 -3
  53. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.html.erb +0 -20
  54. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.md +0 -3
  55. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default_swift.md +0 -61
  56. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_props_swift.md +0 -11
  57. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold_swift.md +0 -32
  58. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default_swift.md +0 -17
  59. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year_swift.md +0 -19
  60. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_props_swift.md +0 -10
  61. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reversed_swift.md +0 -17
  62. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_alignment_swift.md +0 -39
  63. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default_swift.md +0 -39
  64. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_props_swift.md +0 -15
  65. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size_swift.md +0 -78
  66. data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default_swift.md +0 -20
  67. data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_props_swift.md +0 -6
  68. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.md +0 -6
  69. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md +0 -5
  70. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.md +0 -1
  71. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.md +0 -1
  72. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children_swift.md +0 -23
  73. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close_swift.md +0 -7
  74. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default_swift.md +0 -9
  75. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dismiss_with_timer_swift.md +0 -22
  76. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_swift.md +0 -9
  77. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions_swift.md +0 -62
  78. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_props_swift.md +0 -8
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui_docs
3
3
  version: !ruby/object:Gem::Version
4
- version: 13.27.0.pre.alpha.PLAY888Cardkithighlightoverflowtooltiperror2930
4
+ version: 13.27.0.pre.alpha.PLAY1122fixMultipleUserspaddingoverflow2844
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2024-05-20 00:00:00.000000000 Z
12
+ date: 2024-05-07 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: playbook_ui
@@ -61,10 +61,8 @@ files:
61
61
  - app/pb_kits/playbook/pb_advanced_table/docs/index.js
62
62
  - app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb
63
63
  - app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx
64
- - app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.md
65
64
  - app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb
66
65
  - app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx
67
- - app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.md
68
66
  - app/pb_kits/playbook/pb_avatar/docs/_avatar_default.html.erb
69
67
  - app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx
70
68
  - app/pb_kits/playbook/pb_avatar/docs/_avatar_default_swift.md
@@ -352,14 +350,6 @@ files:
352
350
  - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx
353
351
  - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.md
354
352
  - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_colors_swift.md
355
- - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx
356
- - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.md
357
- - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.html.erb
358
- - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.md
359
- - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx
360
- - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.md
361
- - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.html.erb
362
- - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.md
363
353
  - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.html.erb
364
354
  - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx
365
355
  - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default_swift.md
@@ -512,8 +502,6 @@ files:
512
502
  - app/pb_kits/playbook/pb_date_picker/docs/index.js
513
503
  - app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.html.erb
514
504
  - app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx
515
- - app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default_swift.md
516
- - app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_props_swift.md
517
505
  - app/pb_kits/playbook/pb_date_range_inline/docs/_description.md
518
506
  - app/pb_kits/playbook/pb_date_range_inline/docs/example.yml
519
507
  - app/pb_kits/playbook/pb_date_range_inline/docs/index.js
@@ -527,17 +515,12 @@ files:
527
515
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.jsx
528
516
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.html.erb
529
517
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.jsx
530
- - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold_swift.md
531
518
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.html.erb
532
519
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx
533
- - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default_swift.md
534
520
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.html.erb
535
521
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.jsx
536
- - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year_swift.md
537
- - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_props_swift.md
538
522
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reverse.html.erb
539
523
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reverse.jsx
540
- - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reversed_swift.md
541
524
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_sizes.html.erb
542
525
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_sizes.jsx
543
526
  - app/pb_kits/playbook/pb_date_stacked/docs/_description.md
@@ -546,14 +529,10 @@ files:
546
529
  - app/pb_kits/playbook/pb_date_stacked/docs/index.js
547
530
  - app/pb_kits/playbook/pb_date_time/docs/_date_time_align.html.erb
548
531
  - app/pb_kits/playbook/pb_date_time/docs/_date_time_align.jsx
549
- - app/pb_kits/playbook/pb_date_time/docs/_date_time_alignment_swift.md
550
532
  - app/pb_kits/playbook/pb_date_time/docs/_date_time_default.html.erb
551
533
  - app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx
552
- - app/pb_kits/playbook/pb_date_time/docs/_date_time_default_swift.md
553
- - app/pb_kits/playbook/pb_date_time/docs/_date_time_props_swift.md
554
534
  - app/pb_kits/playbook/pb_date_time/docs/_date_time_size.html.erb
555
535
  - app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx
556
- - app/pb_kits/playbook/pb_date_time/docs/_date_time_size_swift.md
557
536
  - app/pb_kits/playbook/pb_date_time/docs/_description.md
558
537
  - app/pb_kits/playbook/pb_date_time/docs/example.yml
559
538
  - app/pb_kits/playbook/pb_date_time/docs/index.js
@@ -564,8 +543,6 @@ files:
564
543
  - app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.html.erb
565
544
  - app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx
566
545
  - app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.md
567
- - app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default_swift.md
568
- - app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_props_swift.md
569
546
  - app/pb_kits/playbook/pb_date_year_stacked/docs/_description.md
570
547
  - app/pb_kits/playbook/pb_date_year_stacked/docs/_footer.md
571
548
  - app/pb_kits/playbook/pb_date_year_stacked/docs/example.yml
@@ -628,29 +605,25 @@ files:
628
605
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb
629
606
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
630
607
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md
608
+ - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb
631
609
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx
632
610
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md
633
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.html.erb
634
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.md
635
611
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
636
612
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.md
637
613
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx
638
614
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md
615
+ - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.html.erb
639
616
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx
640
617
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md
641
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb
642
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md
618
+ - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb
643
619
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx
644
620
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md
645
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.html.erb
646
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.md
647
621
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb
648
622
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx
649
623
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md
624
+ - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb
650
625
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx
651
626
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md
652
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.html.erb
653
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.md
654
627
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx
655
628
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx
656
629
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb
@@ -703,22 +676,15 @@ files:
703
676
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children.html.erb
704
677
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children.jsx
705
678
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children.md
706
- - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children_swift.md
707
679
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.html.erb
708
680
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx
709
- - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close_swift.md
710
681
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.html.erb
711
682
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.jsx
712
- - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default_swift.md
713
- - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dismiss_with_timer_swift.md
714
683
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb
715
684
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
716
685
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.md
717
- - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_swift.md
718
686
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb
719
687
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.jsx
720
- - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions_swift.md
721
- - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_props_swift.md
722
688
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml
723
689
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js
724
690
  - app/pb_kits/playbook/pb_flex/docs/_description.md
@@ -1,3 +0,0 @@
1
- NOTE: All `componentOverlay` implementations require a `placement` prop, that accepts any of the following values: `top-right`, `top-left`, `bottom-right`, `bottom-left`, `top-center`, `bottom-center`, `left-center`, and `right-center`.
2
-
3
- When passing the `badge` component as an overlay, you must also specify its text content,and you may optionally control the color by passing an [approved value](https://playbook.powerapp.cloud/kits/badge#colors) as a `variant`.
@@ -1,3 +0,0 @@
1
- NOTE: All `componentOverlay` implementations require a `placement` prop, that accepts any of the following values: `top-right`, `top-left`, `bottom-right`, `bottom-left`, `top-center`, `bottom-center`, `left-center`, and `right-center`.
2
-
3
- When passing the `iconCircle` component as an overlay, you must also specify an `icon`, and you may optionally control the color by passing an [approved value](https://playbook.powerapp.cloud/kits/icon_circle/rails#color) as a `variant`.
@@ -1,72 +0,0 @@
1
- import React from 'react'
2
- import { Collapsible, useCollapsible, Background, Flex, Title, List, ListItem } from '../..'
3
-
4
- const CollapsibleCustomMain = () => {
5
- const [isCollapsed, setIsCollapsed] = useCollapsible(true)
6
-
7
- return (
8
- <>
9
- <Collapsible
10
- collapsed={isCollapsed}
11
- >
12
- <Background
13
- backgroundColor="white"
14
- cursor="pointer"
15
- htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
16
- position="sticky"
17
- top="0"
18
- >
19
- <Flex
20
- align="center"
21
- gap="sm"
22
- justify="between"
23
- >
24
- <Title
25
- size={4}
26
- text="Custom Main Section"
27
- />
28
- </Flex>
29
- </Background>
30
- <Collapsible.Content padding="none">
31
- <div>
32
- <List>
33
- <ListItem
34
- align="stretch"
35
- flexDirection="column"
36
- >
37
- Checklist item
38
- </ListItem>
39
- <ListItem
40
- align="stretch"
41
- flexDirection="column"
42
- >
43
- Checklist item
44
- </ListItem>
45
- <ListItem
46
- align="stretch"
47
- flexDirection="column"
48
- >
49
- Checklist item
50
- </ListItem>
51
- <ListItem
52
- align="stretch"
53
- flexDirection="column"
54
- >
55
- Checklist item
56
- </ListItem>
57
- <ListItem
58
- align="stretch"
59
- flexDirection="column"
60
- >
61
- Checklist item
62
- </ListItem>
63
- </List>
64
- </div>
65
- </Collapsible.Content>
66
- </Collapsible>
67
-
68
- </>
69
- )
70
- }
71
-
72
- export default CollapsibleCustomMain
@@ -1,3 +0,0 @@
1
- Optionally replace your `Collapsible.Main` with any component to customize your Main section's contents and/or style. This gives you full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.
2
-
3
- __NOTE__: Custom main sections requires the `useCollapsible` hook to ensure the collapsible's toggle action works correctly.
@@ -1,19 +0,0 @@
1
- <%= pb_rails("collapsible", props: { name: "default-example" }) do %>
2
- <%= pb_rails("background", props: { background_color: "white", position: "sticky", top: "0", cursor:"pointer", data: {"collapsible-main": "true"} }) do %>
3
- <%= pb_rails("flex", props: {align:"center", gap:"sm", justify:"between"}) do %>
4
- <%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
5
- <% end %>
6
- <% end %>
7
- <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
8
- <% end %>
9
- <%= pb_rails("collapsible/collapsible_content", props: { padding: "none" }) do %>
10
- <%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %>
11
- <%= pb_rails("list/item") do %> Checklist Item <% end %>
12
- <%= pb_rails("list/item") do %> Checklist Item <% end %>
13
- <%= pb_rails("list/item") do %> Checklist Item <% end %>
14
- <%= pb_rails("list/item") do %> Checklist Item <% end %>
15
- <%= pb_rails("list/item") do %> Checklist Item <% end %>
16
- <% end %>
17
- <% end %>
18
- <% end %>
19
-
@@ -1,3 +0,0 @@
1
- Optionally replace your `collapsible/collapsible_main` with any component to customize your Main section's contents and/or style. This gives you full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.
2
-
3
- __NOTE__: Custom main sections require `data: {"collapsible-main": "true"}` to ensure the collapsible's toggle action works correctly.
@@ -1,73 +0,0 @@
1
- import React from 'react'
2
- import { Collapsible, useCollapsible, Background, Flex, Title, List, ListItem } from '../..'
3
-
4
- const CollapsibleCustomMainWithIcon = () => {
5
- const [isCollapsed, setIsCollapsed] = useCollapsible(true)
6
-
7
- return (
8
- <>
9
- <Collapsible
10
- collapsed={isCollapsed}
11
- >
12
- <Background
13
- backgroundColor="white"
14
- cursor="pointer"
15
- htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
16
- position="sticky"
17
- top="0"
18
- >
19
- <Flex
20
- align="center"
21
- gap="sm"
22
- justify="between"
23
- >
24
- <Title
25
- size={4}
26
- text="Custom Main Section"
27
- />
28
- <Collapsible.Icon collapsed={isCollapsed}/>
29
- </Flex>
30
- </Background>
31
- <Collapsible.Content padding="none">
32
- <div>
33
- <List>
34
- <ListItem
35
- align="stretch"
36
- flexDirection="column"
37
- >
38
- Checklist item
39
- </ListItem>
40
- <ListItem
41
- align="stretch"
42
- flexDirection="column"
43
- >
44
- Checklist item
45
- </ListItem>
46
- <ListItem
47
- align="stretch"
48
- flexDirection="column"
49
- >
50
- Checklist item
51
- </ListItem>
52
- <ListItem
53
- align="stretch"
54
- flexDirection="column"
55
- >
56
- Checklist item
57
- </ListItem>
58
- <ListItem
59
- align="stretch"
60
- flexDirection="column"
61
- >
62
- Checklist item
63
- </ListItem>
64
- </List>
65
- </div>
66
- </Collapsible.Content>
67
- </Collapsible>
68
-
69
- </>
70
- )
71
- }
72
-
73
- export default CollapsibleCustomMainWithIcon
@@ -1,3 +0,0 @@
1
- When using a custom Main Section, you can also use the optional `Collapsible.Icon`.
2
-
3
- __NOTE__: The optional icon subcomponent must receive the `collapsed` state of the collapsible in order to toggle correctly. It also accepts all icon-related props (`icon`, `size`, and `color`) for further customization. If none of these are specified, the default icon will be rendered.
@@ -1,20 +0,0 @@
1
- <%= pb_rails("collapsible", props: { name: "default-example" }) do %>
2
- <%= pb_rails("background", props: { background_color: "white", position: "sticky", top: "0", cursor:"pointer", data: {"collapsible-main": "true"} }) do %>
3
- <%= pb_rails("flex", props: {align:"center", gap:"sm", justify:"between"}) do %>
4
- <%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
5
- <%= pb_rails("collapsible/collapsible_icon") %>
6
- <% end %>
7
- <% end %>
8
- <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
9
- <% end %>
10
- <%= pb_rails("collapsible/collapsible_content", props: { padding: "none" }) do %>
11
- <%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %>
12
- <%= pb_rails("list/item") do %> Checklist Item <% end %>
13
- <%= pb_rails("list/item") do %> Checklist Item <% end %>
14
- <%= pb_rails("list/item") do %> Checklist Item <% end %>
15
- <%= pb_rails("list/item") do %> Checklist Item <% end %>
16
- <%= pb_rails("list/item") do %> Checklist Item <% end %>
17
- <% end %>
18
- <% end %>
19
- <% end %>
20
-
@@ -1,3 +0,0 @@
1
- When using a custom Main Section, you can also use the optional `collapsible/collapsible_icon` subcomponent.
2
-
3
- __NOTE__: The optional icon subcomponent accepts all icon-related props (`icon`, `size`, and `color`) for further customization. If none of these are specified, the default icon will be rendered.
@@ -1,61 +0,0 @@
1
- ![Date-Range-Inline-Default](https://github.com/powerhome/playbook-swift/assets/54749071/793dc133-b2a8-4283-96e1-c8b19065392d)
2
-
3
- ```swift
4
- VStack(alignment: .leading, spacing: Spacing.large) {
5
- VStack(alignment: .leading, spacing: Spacing.small) {
6
- PBDateRangeInline(
7
- size: .caption,
8
- iconSize: .xSmall,
9
- startDate: "18 Jun 2013",
10
- endDate: "20 Mar 2015",
11
- startVariant: .standard
12
- )
13
- PBDateRangeInline(
14
- size: .body,
15
- iconSize: .x1,
16
- startDate: "18 Jun 2013",
17
- endDate: "20 Mar 2015",
18
- startVariant: .standard
19
- )
20
- }
21
- .frame(maxWidth: .infinity, alignment: .leading)
22
- VStack(alignment: .center, spacing: Spacing.small) {
23
- PBDateRangeInline(
24
- size: .caption,
25
- iconSize: .xSmall,
26
- startDate: "15 Jan 2013",
27
- endDate: "15 Aug 2015",
28
- startVariant: .short(showIcon: true),
29
- endVariant: .short(showIcon: false)
30
- )
31
- PBDateRangeInline(
32
- size: .body,
33
- iconSize: .x1,
34
- startDate: "15 Jan 2013",
35
- endDate: "15 Aug 2015",
36
- startVariant: .short(showIcon: true),
37
- endVariant: .short(showIcon: false)
38
- )
39
- }
40
- .frame(maxWidth: .infinity, alignment: .center)
41
- VStack(alignment: .trailing, spacing: Spacing.small) {
42
- PBDateRangeInline(
43
- size: .caption,
44
- iconSize: .xSmall,
45
- startDate: "15 Jan 2013",
46
- endDate: "15 Aug 2015",
47
- startVariant: .short(showIcon: true),
48
- endVariant: .short(showIcon: false)
49
- )
50
- PBDateRangeInline(
51
- size: .body,
52
- iconSize: .x1,
53
- startDate: "15 Jan 2013",
54
- endDate: "15 Aug 2015",
55
- startVariant: .short(showIcon: true),
56
- endVariant: .short(showIcon: false)
57
- )
58
- }
59
- .frame(maxWidth: .infinity, alignment: .trailing)
60
- }
61
- ```
@@ -1,11 +0,0 @@
1
- ### Props
2
- | Name | Type | Description | Default | Values |
3
- | --- | ----------- | --------- | --------- | --------- |
4
- | **date** | `Date` | Sets the date | `Date()` | |
5
- | **size** | `PBFont` | Sets the font size | `.body` | `.body` `.caption` `.subcaption` |
6
- | **iconSize** | `PBIcon.IconSize` | Sets the icon size | `.xSmall` | `xSmall` `small` `large` `x1` |
7
- | **startDate** | `String` | Takes a string value to set the starting date range value | | |
8
- | **endDate** | `String` | Takes a string value to set the ending date range value | | |
9
- | **startVariant** | `PBDate.Variant` | Changes the style of the starting date | `.standard` | `.short(showIcon: false)` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)` |
10
- | **endVariant** | `PBDate.Variant` | Changes the style of the ending date | `.standard` | `.short(showIcon: false)` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)` |
11
- | **isArrowIconBold** | `Bool` | Determines if the date range arrow is bold | `false` | `true` `false` |
@@ -1,32 +0,0 @@
1
- ![Date-Stacked-Bold](https://github.com/powerhome/playbook-swift/assets/54749071/e241e4b8-efce-4872-99f9-aefb1e3007d2)
2
- ```swift
3
- VStack(alignment: .leading, spacing: Spacing.small) {
4
- PBDateStacked(
5
- alignment: .leading,
6
- date: Date(),
7
- variant: .short(showIcon: false),
8
- dateSize: .title4,
9
- isMonthStacked: true,
10
- isMonthBold: true
11
- )
12
- PBDateStacked(
13
- alignment: .center,
14
- date: Date().makeDate(year: 2018, month: 3, day: 20),
15
- variant: .standard,
16
- dateSize: .title4,
17
- isStandardStacked: true,
18
- isYearBold: true,
19
- isMonthBold: true
20
- )
21
- .frame(maxWidth: .infinity, alignment: .center)
22
- PBDateStacked(
23
- alignment: .trailing,
24
- date: Date(),
25
- variant: .short(showIcon: false),
26
- dateSize: .title4,
27
- isMonthStacked: true,
28
- isMonthBold: true
29
- )
30
- .frame(maxWidth: .infinity, alignment: .trailing)
31
- }
32
- ```
@@ -1,17 +0,0 @@
1
- ![Date-Stacked-Default](https://github.com/powerhome/playbook-swift/assets/54749071/5185a6b6-534a-43c0-8c87-abecf770b8f5)
2
- ```swift
3
- VStack(alignment: .leading, spacing: Spacing.small) {
4
- PBDateStacked(
5
- date: Date(),
6
- variant: .short(showIcon: false),
7
- dateSize: .title4,
8
- isMonthStacked: true
9
- )
10
- PBDateStacked(
11
- date: Date(),
12
- variant: .short(showIcon: false),
13
- dateSize: .title3,
14
- isMonthStacked: true
15
- )
16
- }
17
- ```
@@ -1,19 +0,0 @@
1
- ![Date-Stacked-Not-Current-Year](https://github.com/powerhome/playbook-swift/assets/54749071/f778f10f-21c3-42b9-b660-9def6c75ecf3)
2
- ```swift
3
- VStack(alignment: .leading, spacing: Spacing.small) {
4
- PBDateStacked(
5
- alignment: .leading,
6
- date: Date().makeDate(year: 2018, month: 3, day: 20),
7
- variant: .standard,
8
- dateSize: .title4,
9
- isStandardStacked: true
10
- )
11
- PBDateStacked(
12
- alignment: .leading,
13
- date: Date().makeDate(year: 2018, month: 3, day: 20),
14
- variant: .standard,
15
- dateSize: .title3,
16
- isStandardStacked: true
17
- )
18
- }
19
- ```
@@ -1,10 +0,0 @@
1
- ### Props
2
- | Name | Type | Description | Default | Values |
3
- | --- | ----------- | --------- | --------- | --------- |
4
- | **alignment** | `HorizontalAlignment` | Changes the alignment of the date | `.leading` | `.leading` `.trailing` |
5
- | **dateSize** | `PBFont` |Sets the size of the date | `.body` | `.subcaption` `.caption` `.body` |
6
- | **isReversed** | `Bool` | Boolean value that determines whether or not the month and date are reversed. | `false` | `true` `false` |
7
- | **isMonthStacked** | `Bool` | Boolean value that determines whether or not the month is stacked | `false` | `true` `false` |
8
- | **isStandardStacked** | `Bool` | Boolean value that determines whether or not the standard date variant is stacked. | `false` | `true` `false` |
9
- | **isYearBold** | `Bool` | Boolean value that determines whether or not the the year is bold | `false` | `true` `false` |
10
- | **isMonthBold** | `Bool` | Boolean value that determines whether or not the month is bold. | `false` | `true` `false` |
@@ -1,17 +0,0 @@
1
- ![Date-Stacked-Reversed](https://github.com/powerhome/playbook-swift/assets/54749071/4dc3ff84-3a0d-4d9b-a363-5d649a3bdae6)
2
- ```swift
3
- VStack(alignment: .leading, spacing: Spacing.small) {
4
- PBDateStacked(
5
- date: Date(),
6
- variant: .short(showIcon: false),
7
- dateSize: .title4,
8
- isReversed: true
9
- )
10
- PBDateStacked(
11
- date: Date(),
12
- variant: .short(showIcon: false),
13
- dateSize: .title3,
14
- isReversed: true
15
- )
16
- }
17
- ```
@@ -1,39 +0,0 @@
1
- ![Date-Time-Alignment](https://github.com/powerhome/playbook-swift/assets/54749071/9d1e08ac-4906-406f-b81d-1edf0a09e2e3)
2
-
3
- ```swift
4
- VStack(spacing: Spacing.small) {
5
- HStack {
6
- PBDateTime(
7
- dateVariant: .short(showIcon: false),
8
- timeVariant: .iconTimeZone,
9
- isLowercase: true,
10
- isTimeBold: true,
11
- zone: .utc,
12
- showTimeZone: true,
13
- timeZoneIdentifier: "2012-08-02T17:49:29Z"
14
- )
15
- }
16
- .frame(maxWidth: .infinity, alignment: .leading)
17
- PBDateTime(
18
- dateVariant: .short(showIcon: false),
19
- timeVariant: .iconTimeZone,
20
- isLowercase: true,
21
- isTimeBold: true,
22
- zone: .utc,
23
- showTimeZone: true,
24
- timeZoneIdentifier: "2012-08-02T17:49:29Z"
25
- )
26
- HStack {
27
- PBDateTime(
28
- dateVariant: .short(showIcon: false),
29
- timeVariant: .iconTimeZone,
30
- isLowercase: true,
31
- isTimeBold: true,
32
- zone: .utc,
33
- showTimeZone: true,
34
- timeZoneIdentifier: "2012-08-02T17:49:29Z"
35
- )
36
- }
37
- .frame(maxWidth: .infinity, alignment: .trailing)
38
- }
39
- ```
@@ -1,39 +0,0 @@
1
- ![Date-Time-Default](https://github.com/powerhome/playbook-swift/assets/54749071/f9ea63f9-81bd-41a9-8171-8a213c55ccfe)
2
- ```swift
3
- VStack(alignment: .leading, spacing: Spacing.small) {
4
- PBDateTime(
5
- dateVariant: .dayDate(showYear: true),
6
- timeVariant: .iconTimeZone,
7
- isLowercase: true,
8
- isTimeBold: true,
9
- timeZoneIdentifier: "EST"
10
- )
11
- PBDateTime(
12
- dateVariant: .dayDate(showYear: false),
13
- timeVariant: .iconTimeZone,
14
- isLowercase: true,
15
- isTimeBold: true,
16
- zone: .utc,
17
- showTimeZone: true,
18
- timeZoneIdentifier: "2012-08-02T17:49:29Z"
19
- )
20
- PBDateTime(
21
- dateVariant: .short(showIcon: false),
22
- timeVariant: .iconTimeZone,
23
- isLowercase: true,
24
- isTimeBold: true,
25
- zone: .utc,
26
- showTimeZone: true,
27
- timeZoneIdentifier: "2012-08-02T17:49:29Z",
28
- showIcon: true
29
- )
30
- PBDateTime(
31
- dateVariant: .standard,
32
- timeVariant: .iconTimeZone,
33
- isLowercase: true,
34
- isTimeBold: true,
35
- showTimeZone: true,
36
- timeZoneIdentifier: "GMT+9"
37
- )
38
- }
39
- ```
@@ -1,15 +0,0 @@
1
- ### Props
2
- | Name | Type | Description | Default | Values |
3
- | --- | ----------- | --------- | --------- | --------- |
4
- | **dateTime** | `Date` | Sets current date. | | |
5
- | **iconSize** | `PBIcon.IconSize` | Allows user to change the size of the clock icon. | `.x3` | `.small` `.medium` `.large` |
6
- | **dateVariant** | `PBDate.Variant` | Allows user to choose how they would like the date to be displayed | `.dayDate(showYear: false)` | `.short` `.dayDate(showYear: false)` `.standard` `.withIcon(isStandard: true)` `.withIcon(isStandard: false)` |
7
- | **timeVariant** | `PBTime.Variant` | Allows user to choose how they would like the time to be displayed | `.time` | `.time` `.clockIcon` `.timeZone` `.iconTimeZone` `.withTimeZoneHeader` |
8
- | **fontSize** | `PBFont` | Allows user to change the size of the text | `.caption` | `.subcaption` `.caption` `.body` |
9
- | **isLowercase** | `Bool` | Determines whether or not am/pm is capitalized | `false` | `true` `false` |
10
- | **isTimeBold** | `Bool` | Determines whether or not the time is bold | `false` | `true` `false` |
11
- | **isTimeZoneBold** | `Bool` | Determines whether or not the time zone is bold | `false` | `true` `false` |
12
- | **zone** | `PBTime.Zones` | Allows the user to set the time zone | `.east` | `.east` `.central` `.mountain` `.pacific` `.gmt` |
13
- | **showTimeZone** | `Bool` | Determines whether or not the time zone is displayed | `false` | `true` `false` |
14
- | **timeZoneIdentifier** | `String` | String that the time kit utilizes to calculate the current time and time zone | | |
15
- | **showIcon** | `Bool` | Determines whether or not the clock icon is displayed | `false` | `true` `false` |