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

Sign up to get free protection for your applications and to get access to all the features.
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` |