playbook_ui_docs 13.27.0.pre.alpha.PLAY1250fixTextInpputaddonborderradiusformgroup2862 → 13.27.0.pre.alpha.PLAY11782916

Sign up to get free protection for your applications and to get access to all the features.
Files changed (38) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb +46 -66
  3. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +8 -29
  4. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.md +3 -0
  5. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb +13 -33
  6. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +48 -67
  7. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.md +3 -0
  8. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +0 -20
  9. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -2
  10. data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb +20 -0
  11. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +41 -1
  12. data/app/pb_kits/playbook/pb_card/docs/_card_background.md +1 -1
  13. data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +1 -1
  14. data/app/pb_kits/playbook/pb_card/docs/_card_header.md +1 -1
  15. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md +1 -1
  16. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +3 -3
  17. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +1 -1
  18. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +5 -6
  19. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_subcomponent_structure.html.erb → _dropdown_subcomponent_structure_rails.html.erb} +3 -3
  20. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.md +6 -0
  21. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +3 -3
  22. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md +5 -0
  23. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md +1 -1
  24. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_options.html.erb → _dropdown_with_custom_options_rails.html.erb} +3 -3
  25. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.md +1 -0
  26. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +3 -3
  27. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md +1 -1
  28. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md +1 -1
  29. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_trigger.html.erb → _dropdown_with_custom_trigger_rails.html.erb} +3 -3
  30. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.md +1 -0
  31. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +3 -3
  32. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +1 -1
  33. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +6 -6
  34. data/dist/app/components/playbook/pb_docs/kit_example.html.erb +3 -3
  35. data/dist/menu.yml +2 -2
  36. data/dist/playbook-doc.js +3 -3
  37. metadata +12 -6
  38. /data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_display.html.erb → _dropdown_with_custom_display_rails.html.erb} +0 -0
@@ -5,21 +5,21 @@
5
5
  value: "United States",
6
6
  areaCode: "+1",
7
7
  icon: "🇺🇸",
8
- id: "United-states"
8
+ id: "us"
9
9
  },
10
10
  {
11
11
  label: "Canada",
12
12
  value: "Canada",
13
13
  areaCode: "+1",
14
14
  icon: "🇨🇦",
15
- id: "canada"
15
+ id: "ca"
16
16
  },
17
17
  {
18
18
  label: "Pakistan",
19
19
  value: "Pakistan",
20
20
  areaCode: "+92",
21
21
  icon: "🇵🇰",
22
- id: "pakistan"
22
+ id: "pk"
23
23
  }
24
24
  ]
25
25
 
@@ -0,0 +1 @@
1
+ `dropdown/dropdown_option` subcomponent accepts any child components to customize the options' contents and display. By default, options are Body kit text that is set by the `label` value from the `option` object.
@@ -1,8 +1,8 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'United States' },
4
- { label: 'Canada', value: 'Canada' },
5
- { label: 'Pakistan', value: 'Pakistan' },
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
6
  ]
7
7
 
8
8
  %>
@@ -1 +1 @@
1
- By default, the padding on each option in the dropdown is set to `xs`. The `padding` Global Props however can be used to override this default. In this example, we are setting padding to `sm`.
1
+ By default, dropdown option padding is set to `xs`, but this padding can be overridden using our global prop spacing token. In this example we are increasing the option padding to `sm`.
@@ -1 +1 @@
1
- The Dropdown can also be given a custom Trigger by passing children to the `Dropdown.Trigger` subcomponent as shown in this example. Here we are using the IconCircle kit.
1
+ Optionally replace the default trigger's select element by passing child components directly to the `Dropdown.Trigger`.
@@ -5,21 +5,21 @@
5
5
  value: "United States",
6
6
  areaCode: "+1",
7
7
  icon: "🇺🇸",
8
- id: "United-states"
8
+ id: "us"
9
9
  },
10
10
  {
11
11
  label: "Canada",
12
12
  value: "Canada",
13
13
  areaCode: "+1",
14
14
  icon: "🇨🇦",
15
- id: "canada"
15
+ id: "ca"
16
16
  },
17
17
  {
18
18
  label: "Pakistan",
19
19
  value: "Pakistan",
20
20
  areaCode: "+92",
21
21
  icon: "🇵🇰",
22
- id: "pakistan"
22
+ id: "pk"
23
23
  }
24
24
  ]
25
25
 
@@ -0,0 +1 @@
1
+ Optionally replace the default trigger's select element by passing child components directly to the `dropdown/dropdown_trigger`.
@@ -1,8 +1,8 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'United States' },
4
- { label: 'Canada', value: 'Canada' },
5
- { label: 'Pakistan', value: 'Pakistan' },
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
6
  ]
7
7
 
8
8
  %>
@@ -1 +1 @@
1
- The optional `label` prop takes a string value that if present will render that string as the label for the Dropdown.
1
+ The top-level Dropdown component optionally accepts any string through a `label` prop to produce a label above your trigger element.
@@ -1,12 +1,12 @@
1
1
  examples:
2
2
  rails:
3
3
  - dropdown_default: Default
4
- - dropdown_subcomponent_structure: Subcomponent Structure
4
+ - dropdown_subcomponent_structure_rails: Subcomponent Structure
5
5
  - dropdown_with_label: With Label
6
- - dropdown_with_custom_options: Custom Options
7
- - dropdown_with_custom_display: Custom Display
8
- - dropdown_with_custom_trigger: Custom Trigger
9
- - dropdown_with_custom_padding: Custom Padding for Dropdown Options
6
+ - dropdown_with_custom_options_rails: Custom Options
7
+ - dropdown_with_custom_display_rails: Custom Display
8
+ - dropdown_with_custom_trigger_rails: Custom Trigger
9
+ - dropdown_with_custom_padding: Custom Option Padding
10
10
 
11
11
  react:
12
12
  - dropdown_default: Default
@@ -15,7 +15,7 @@ examples:
15
15
  - dropdown_with_custom_options: Custom Options
16
16
  - dropdown_with_custom_display: Custom Display
17
17
  - dropdown_with_custom_trigger: Custom Trigger
18
- - dropdown_with_custom_padding: Custom Padding for Dropdown Options
18
+ - dropdown_with_custom_padding: Custom Option Padding
19
19
  # - dropdown_with_autocomplete: Autocomplete
20
20
  # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
21
21
  # - dropdown_with_external_control: useDropdown Hook
@@ -23,11 +23,11 @@
23
23
  <ul>
24
24
  <% hide_button = type == "rails" ? 'flex' : 'none' %>
25
25
  <li>
26
- <%= pb_rails("button", props: { id:"copy-html-#{example_key}", icon: "copy", text: "Copy HTML", variant: "link", size: "sm", display: hide_button }) %>
26
+ <%= pb_rails("button", props: { id:"copy-html-#{example_key}", icon: "copy", text: "Copy HTML", classname: dark ? "dark" : "", variant: "link", size: "sm", display: hide_button }) %>
27
27
  </li>
28
28
  <li>
29
- <%= pb_rails("button", props: { icon: "code", id:"toggle-open-opened", text: "Close Code", variant: "link", size: "sm", display: "none" }) %>
30
- <%= pb_rails("button", props: { icon: "code", id:"toggle-open-closed", text: "Show Code", variant: "link", size: "sm" }) %>
29
+ <%= pb_rails("button", props: { icon: "code", id:"toggle-open-opened", classname: dark ? "dark" : "", text: "Close Code", variant: "link", size: "sm", display: "none" }) %>
30
+ <%= pb_rails("button", props: { icon: "code", id:"toggle-open-closed", classname: dark ? "dark" : "", text: "Show Code", variant: "link", size: "sm" }) %>
31
31
  </li>
32
32
  </ul>
33
33
  </div>
data/dist/menu.yml CHANGED
@@ -255,9 +255,9 @@ kits:
255
255
  description: Playbook's date picker is built using flatpickr, a vanilla js library. Common date picker use cases and features have been adapted into simple prop based configuration detailed in the docs below.
256
256
  status: "stable"
257
257
  - name: dropdown
258
- platforms: *react_only
258
+ platforms: *web
259
259
  description: ""
260
- status: "beta"
260
+ status: "stable"
261
261
  - name: "multi_level_select"
262
262
  platforms: *web
263
263
  description: The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user.