playbook_ui_docs 13.28.0.pre.alpha.PLAY1209fixformgroupdatepickerborderradiusreact2953 → 13.28.0.pre.alpha.PLAY1338alpha3001

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: b3ae53fd3c3c01b8ab7b5e1922cbc0fde9e8babbac964775a6e3cfa46de098ed
4
- data.tar.gz: 9446ed8218ccc5ced9ed7bcd51f2c75fde40f4298f2fd66667c5f8f3dc46e21a
3
+ metadata.gz: 1aed448dd65d63413ecb057e90b8958747f1705b44aa24768962e73fd13e3dd0
4
+ data.tar.gz: d9e531582b07631ec84ccb19b8981c859d1ee4321be144067660d2c293cba8a3
5
5
  SHA512:
6
- metadata.gz: 21baa3bae3e9dcf2dfbbe264927f556ff9b7297471c3f31a38f87b6a934f653e78b92816815ba4f562edd80618e3acc62a03c0cb471f7d8555bfe7f61967306b
7
- data.tar.gz: fe01bb63c302da0a688b049d2b4934837d7e492fc6f4e7b9570fab803a7cc4bf77eccb60ffc37a0dcc7196aa20bbf21a551fe8bfe08a6cd6f5b17011d64049d7
6
+ metadata.gz: 51eef14d9fbb8a40b5e428d2ea06faf2d71dbc2bc4d3ec91b312f48a897a18e77496a3f3c2e15ffd1286a222240d5512f054925f68d2d2430040c5b76cec4fd2
7
+ data.tar.gz: f34f94cd176f0115650041af0d6f63acd559577ef13f747307d104d0be885e8b05b71e8a5a48e2ef2929190d7a83a9237cb8dde2d261b18edc6ce8deb858eb47
@@ -0,0 +1,40 @@
1
+ <%
2
+ column_definitions = [
3
+ {
4
+ accessor: "year",
5
+ label: "Year",
6
+ cellAccessors: ["quarter", "month", "day"],
7
+ },
8
+ {
9
+ accessor: "newEnrollments",
10
+ label: "New Enrollments",
11
+ },
12
+ {
13
+ accessor: "scheduledMeetings",
14
+ label: "Scheduled Meetings",
15
+ },
16
+ {
17
+ accessor: "attendanceRate",
18
+ label: "Attendance Rate",
19
+ },
20
+ {
21
+ accessor: "completedClasses",
22
+ label: "Completed Classes",
23
+ },
24
+ {
25
+ accessor: "classCompletionRate",
26
+ label: "Class Completion Rate",
27
+ },
28
+ {
29
+ accessor: "graduatedStudents",
30
+ label: "Graduated Students",
31
+ }
32
+ ]
33
+
34
+ subrow_headers = ["Quarter", "Month", "Day"]
35
+ %>
36
+
37
+ <%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
38
+ <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
39
+ <%= pb_rails("advanced_table/table_body", props: { id: "subrow_headers", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
40
+ <% end %>
@@ -0,0 +1,3 @@
1
+ `subrow_headers` is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.
2
+
3
+ `enable_toggle_expansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enable_toggle_expansion` is a string that can be "all", "header" or "none". If set to "all", the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to "header" button will only appear in header and NOT in subRow headers. This is set to "header" by default.
@@ -1,3 +1,3 @@
1
1
  `subRowHeaders` is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.
2
2
 
3
- `enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` is a string that can be 'all', 'header" or "none". If set to 'all', the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to 'header' button will only appear in header and NOT in subRow headers. This is set to 'header' by default.
3
+ `enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` is a string that can be "all", "header" or "none". If set to "all", the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to "header" button will only appear in header and NOT in subRow headers. This is set to "header" by default.
@@ -1,6 +1,7 @@
1
1
  examples:
2
2
  rails:
3
3
  - advanced_table_beta: Default (Required Props)
4
+ - advanced_table_beta_subrow_headers: SubRow Headers
4
5
  react:
5
6
  - advanced_table_default: Default (Required Props)
6
7
  - advanced_table_loading: Loading State
@@ -12,4 +13,3 @@ examples:
12
13
  - advanced_table_table_options: Table Options
13
14
  - advanced_table_table_props: Table Props
14
15
  - advanced_table_inline_row_loading: inline Row Loading
15
-
@@ -13,6 +13,15 @@
13
13
  ]
14
14
  %>
15
15
 
16
+ <%
17
+ example_dropdown_options = [
18
+ { label: 'United States', value: 'United States', id: 'us' },
19
+ { label: 'Canada', value: 'Canada', id: 'ca' },
20
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
21
+ ]
22
+
23
+ %>
24
+
16
25
  <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
17
26
  <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
18
27
  <%= form.text_field :example_text_field, props: { label: true } %>
@@ -23,6 +32,7 @@
23
32
  <%= form.password_field :example_password_field, props: { label: true } %>
24
33
  <%= form.url_field :example_url_field, props: { label: true } %>
25
34
  <%= form.text_area :example_text_area, props: { label: true } %>
35
+ <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options } %>
26
36
  <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
27
37
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
28
38
  <%= form.check_box :example_checkbox,
@@ -1 +1 @@
1
- A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color here: https://playbook.powerapp.cloud/utilities
1
+ A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.