playbook_ui_docs 13.10.0.pre.alpha.play10481357 → 13.10.0.pre.alpha.play10561409

Sign up to get free protection for your applications and to get access to all the features.
Files changed (37) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_button/docs/_button_circle_swift.md +28 -0
  3. data/app/pb_kits/playbook/pb_button/docs/_button_default_swift.md +23 -0
  4. data/app/pb_kits/playbook/pb_button/docs/_button_full_width_swift.md +9 -0
  5. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options_swift.md +18 -0
  6. data/app/pb_kits/playbook/pb_button/docs/_button_props_swift.md +11 -0
  7. data/app/pb_kits/playbook/pb_button/docs/_button_size_swift.md +20 -0
  8. data/app/pb_kits/playbook/pb_button/docs/example.yml +8 -0
  9. data/app/pb_kits/playbook/pb_card/docs/_card_background_swift.md +29 -0
  10. data/app/pb_kits/playbook/pb_card/docs/_card_border_none_swift.md +7 -0
  11. data/app/pb_kits/playbook/pb_card/docs/_card_border_radius_swift.md +33 -0
  12. data/app/pb_kits/playbook/pb_card/docs/_card_header_swift.md +33 -0
  13. data/app/pb_kits/playbook/pb_card/docs/_card_highlight_swift.md +17 -0
  14. data/app/pb_kits/playbook/pb_card/docs/_card_light_swift.md +7 -0
  15. data/app/pb_kits/playbook/pb_card/docs/_card_padding_swift.md +33 -0
  16. data/app/pb_kits/playbook/pb_card/docs/_card_props_swift.md +10 -0
  17. data/app/pb_kits/playbook/pb_card/docs/_card_selected_swift.md +0 -0
  18. data/app/pb_kits/playbook/pb_card/docs/_card_separator_swift.md +11 -0
  19. data/app/pb_kits/playbook/pb_card/docs/_card_shadow_swift.md +21 -0
  20. data/app/pb_kits/playbook/pb_card/docs/_card_styles_swift.md +17 -0
  21. data/app/pb_kits/playbook/pb_card/docs/_card_tag_swift.md +0 -0
  22. data/app/pb_kits/playbook/pb_card/docs/example.yml +12 -0
  23. data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +0 -1
  24. data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +1 -2
  25. data/app/pb_kits/playbook/pb_table/docs/_table_header.html.erb +47 -31
  26. data/app/pb_kits/playbook/pb_table/docs/_table_header.md +5 -0
  27. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx +0 -1
  28. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_truncated.html.erb +31 -0
  29. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_truncated.jsx +45 -0
  30. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_truncated.md +5 -0
  31. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +3 -0
  32. data/app/pb_kits/playbook/pb_tooltip/docs/index.js +1 -0
  33. data/app/pb_kits/playbook/pb_tooltip/docs/styles.css +7 -0
  34. data/dist/playbook-doc.js +8 -8
  35. metadata +25 -4
  36. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.jsx +0 -33
  37. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.md +0 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 296328e3d1c7eb5cf5f0dc6696afff99f1bd1d8ce2ee64e2c35d21ab98833330
4
- data.tar.gz: '019600190da21da1ea40428c2e6334285066ab5a8939ec4cd8c1bb71e8f7986c'
3
+ metadata.gz: 9e8b0f34e3ce1ae0e6dd4ff0fd257aa7dd073be6361014f46b171c8f74ac9332
4
+ data.tar.gz: feb0177fc6b2782b778e1e06236ecc982d873f3655beb35954c30b87376e2297
5
5
  SHA512:
6
- metadata.gz: e96d98faa465ca46cf792d25f1762160f6c83aa52eaba899748595960ece45d2d0a86315100ef917840809460c9f4d681875ce6a734231925f248bd3b0ca8219
7
- data.tar.gz: 794c82fde93a25a935f1f3f78f179b132618e088bd18ff1a4713ee77c157acc8a6da45bee4ae9715e9d7b675d2bd80c3d48c45d97cd0b7d20d0b61b74c53711a
6
+ metadata.gz: cf3ff6c0e522f2c1635b9f0769d65f71d46329ef5e8ee1eb824f16e07dd9216a6674ecf08e20c45ebf707974293ec485a65e812285d2d1e558462c1a709e3639
7
+ data.tar.gz: ade5d5455664e3e1ab79535370bbb4a14dce3da1d224c6cb82bd8fb2a5addc42ac40836e41bd93dc106c0b02f4d6969b526c34a4d29372e2651a01721268e5d9
@@ -0,0 +1,28 @@
1
+ ![button-circles](https://github.com/powerhome/playbook/assets/92755007/c8f98358-5369-475d-9287-67f2aa54f35c)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading, spacing: Spacing.small) {
5
+ PBButton(
6
+ shape: .circle,
7
+ icon: PBIcon.fontAwesome(.plus, size: .x1),
8
+ action: {}
9
+ )
10
+ PBButton(
11
+ variant: .secondary,
12
+ shape: .circle,
13
+ icon: PBIcon.fontAwesome(.pen, size: .x1),
14
+ action: {}
15
+ )
16
+ PBButton(
17
+ variant: .disabled,
18
+ shape: .circle,
19
+ icon: PBIcon.fontAwesome(.times, size: .x1)
20
+ )
21
+ PBButton(
22
+ variant: .link,
23
+ shape: .circle,
24
+ icon: PBIcon.fontAwesome(.user, size: .x1),
25
+ action: {}
26
+ )
27
+ }
28
+ ```
@@ -0,0 +1,23 @@
1
+ ![button-default](https://github.com/powerhome/playbook/assets/92755007/28a19644-8963-4b13-9eb7-c8fef8a047cc)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading, spacing: Spacing.small) {
5
+ PBButton(
6
+ title: "Button Primary",
7
+ action: {}
8
+ )
9
+ PBButton(
10
+ variant: .secondary,
11
+ title: "Button Secondary",
12
+ action: {})
13
+ PBButton(
14
+ variant: .link,
15
+ title: "Button Link",
16
+ action: {}
17
+ )
18
+ PBButton(
19
+ variant: .disabled,
20
+ title: "Button Disabled"
21
+ )
22
+ }
23
+ ```
@@ -0,0 +1,9 @@
1
+ ![button-full-width](https://github.com/powerhome/playbook/assets/92755007/7818e026-e27c-4485-9d14-337fe5c0f99f)
2
+
3
+ ```swift
4
+ PBButton(
5
+ fullWidth: true,
6
+ title: "Full Width",
7
+ action: {}
8
+ )
9
+ ```
@@ -0,0 +1,18 @@
1
+ ![button-icon-positions](https://github.com/powerhome/playbook/assets/92755007/c0b257c5-ca29-4ecb-83f8-85d631bb8613)
2
+
3
+
4
+ ```swift
5
+ VStack(alignment: .leading, spacing: Spacing.small) {
6
+ PBButton(
7
+ title: "Button with Icon on Left",
8
+ icon: PBIcon.fontAwesome(.user, size: .x1),
9
+ action: {}
10
+ )
11
+ PBButton(
12
+ title: "Button with Icon on Right",
13
+ icon: PBIcon.fontAwesome(.user, size: .x1),
14
+ iconPosition: .right,
15
+ action: {}
16
+ )
17
+ }
18
+ ```
@@ -0,0 +1,11 @@
1
+ ### Props
2
+ | Name | Type | Description | Default | Values |
3
+ | --- | ----------- | --------- | --------- | --------- |
4
+ | **Full Width** | `Bool` | Sets Button to full width | `false` | `true` `false` |
5
+ | **Variant** | `PBButtonVariant` | Changes the color of the Button | ` .primary` | `.primary` `.secondary` `.link` `.disabled` |
6
+ | **Size** | `Size` | Adjusts Button size | `.medium` | `.small` `.medium` `.large` |
7
+ | **Shape** | `Shape` | Changes the shape of the Button | `.primary` | `.primary` `.circle` |
8
+ | **Title** | `String` | Sets Button text | `nil` | |
9
+ | **Icon** | `PBIcon` | Adds an icon to the Button | `nil` | |
10
+ | **Icon Position** | `IconPosition` | Adjusts the icon's position | `.left` | `.left` `.right` |
11
+ | **Action** | `(() -> Void)` | Adds an action for the Button to perform | `{}` | |
@@ -0,0 +1,20 @@
1
+ ![button-sizes](https://github.com/powerhome/playbook/assets/92755007/79bfe9e4-c09a-4d5e-bbb2-cf9ae8aa2895)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading, spacing: Spacing.small) {
5
+ PBButton(
6
+ size: .small,
7
+ title: "Button sm",
8
+ action: {}
9
+ )
10
+ PBButton(
11
+ title: "Button md",
12
+ action: {}
13
+ )
14
+ PBButton(
15
+ size: .large,
16
+ title: "Button lg",
17
+ action: {}
18
+ )
19
+ }
20
+ ```
@@ -25,3 +25,11 @@ examples:
25
25
  - button_size: Button Size
26
26
  - button_form: Button Form Attribute
27
27
  - button_hover: Button Hover
28
+
29
+ swift:
30
+ - button_default_swift: Button Variants
31
+ - button_full_width_swift: Button Full Width
32
+ - button_icon_options_swift: Button Icon Options
33
+ - button_circle_swift: Circle Button
34
+ - button_size_swift: Button Size
35
+ - button_props_swift: ""
@@ -0,0 +1,29 @@
1
+ ![card-background-colors](https://github.com/powerhome/playbook/assets/92755007/9b9a6519-0f79-4d8c-a58a-ea5799f9e679)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading, spacing: Spacing.small) {
5
+ PBCard {
6
+ Text(text).pbFont(.body)
7
+ }
8
+
9
+ PBCard(backgroundColor: .background(.light)) {
10
+ Text("Light").pbFont(.body, color: .text(.light))
11
+ }
12
+
13
+ PBCard(backgroundColor: .background(.dark)) {
14
+ Text("Dark").pbFont(.body, color: .text(.light))
15
+ }
16
+
17
+ PBCard(backgroundColor: .product(.product1, category: .background)) {
18
+ Text("Product 1 Background").pbFont(.body, color: .white)
19
+ }
20
+
21
+ PBCard(backgroundColor: .product(.product7, category: .highlight)) {
22
+ Text("Product 7 Highlight").pbFont(.body, color: .white)
23
+ }
24
+
25
+ PBCard(backgroundColor: .product(.product2, category: .highlight)) {
26
+ Text("Product 2 Highlight").pbFont(.body, color: .white)
27
+ }
28
+ }
29
+ ```
@@ -0,0 +1,7 @@
1
+ ![card-no-border](https://github.com/powerhome/playbook/assets/92755007/a4f3e9e1-6770-425f-b882-dded98863917)
2
+
3
+ ```swift
4
+ PBCard(border: false) {
5
+ Text(text).pbFont(.body)
6
+ }
7
+ ```
@@ -0,0 +1,33 @@
1
+ ![card-border-radius](https://github.com/powerhome/playbook/assets/92755007/c2c0965f-7c4f-4e7b-8c94-f187c724939d)
2
+
3
+ ```swift
4
+ VStack(spacing: Spacing.small) {
5
+ PBCard(borderRadius: BorderRadius.none) {
6
+ Text("None").pbFont(.body)
7
+ }
8
+
9
+ PBCard(borderRadius: BorderRadius.xSmall) {
10
+ Text("X Small").pbFont(.body)
11
+ }
12
+
13
+ PBCard(borderRadius: BorderRadius.small) {
14
+ Text("Small").pbFont(.body)
15
+ }
16
+
17
+ PBCard(borderRadius: BorderRadius.medium) {
18
+ Text("Medium").pbFont(.body)
19
+ }
20
+
21
+ PBCard(borderRadius: BorderRadius.large) {
22
+ Text("Large").pbFont(.body)
23
+ }
24
+
25
+ PBCard(borderRadius: BorderRadius.xLarge) {
26
+ Text("X Large").pbFont(.body)
27
+ }
28
+
29
+ PBCard(borderRadius: BorderRadius.rounded) {
30
+ Text("Rounded").pbFont(.body)
31
+ }
32
+ }
33
+ ``````
@@ -0,0 +1,33 @@
1
+ ![card-header](https://github.com/powerhome/playbook/assets/92755007/a8fd21a1-89cb-4ec2-97f6-d6427f1264c2)
2
+
3
+ ```swift
4
+ Stack(spacing: Spacing.small) {
5
+ PBCard(padding: Spacing.none) {
6
+ PBCardHeader(color: .category(.category1)) {
7
+ Text("Category 1").pbFont(.body, color: .white).padding(Spacing.small)
8
+ }
9
+ Text("Body").pbFont(.body, color: .text(.default)).padding(Spacing.small)
10
+ }
11
+
12
+ PBCard(padding: Spacing.none) {
13
+ PBCardHeader(color: .category(.category3)) {
14
+ Text("Category 3").pbFont(.body, color: .black).padding(Spacing.small)
15
+ }
16
+ Text("Body").pbFont(.body, color: .text(.default)).padding(Spacing.small)
17
+ }
18
+
19
+ PBCard(padding: Spacing.none) {
20
+ PBCardHeader(color: .product(.product2, category: .background)) {
21
+ Text("Product 2 Background").pbFont(.body, color: .white).padding(Spacing.small)
22
+ }
23
+ Text("Body").pbFont(.body, color: .text(.default)).padding(Spacing.small)
24
+ }
25
+
26
+ PBCard(padding: Spacing.none) {
27
+ PBCardHeader(color: .product(.product6, category: .background)) {
28
+ Text("Product 6 Background").pbFont(.body, color: .white).padding(Spacing.small)
29
+ }
30
+ Text("Body").pbFont(.body, color: .text(.default)).padding(Spacing.small)
31
+ }
32
+ }
33
+ ```
@@ -0,0 +1,17 @@
1
+ ![card-highlight](https://github.com/powerhome/playbook/assets/92755007/aba8c811-e21a-4aee-8d2d-64789989875d)
2
+
3
+ ```swift
4
+ VStack(spacing: Spacing.small) {
5
+ PBCard(highlight: .side(.product(.product6, category: .highlight))) {
6
+ Text("Side Position & Product 6 Highlight Color").pbFont(.body)
7
+ }
8
+
9
+ PBCard(highlight: .top(.status(.warning))) {
10
+ Text("Top Position & Warning Color").pbFont(.body)
11
+ }
12
+
13
+ PBCard(highlight: .side(.category(.category2))) {
14
+ Text("Side Position & Category 2 Color").pbFont(.body)
15
+ }
16
+ }
17
+ ```
@@ -0,0 +1,7 @@
1
+ ![card-default](https://github.com/powerhome/playbook/assets/92755007/2209c5d4-806f-4a54-98f4-4ed864b7fad2)
2
+
3
+ ```swift
4
+ PBCard {
5
+ Text("Card Content").pbFont(.body)
6
+ }
7
+ ```
@@ -0,0 +1,33 @@
1
+ ![card-padding](https://github.com/powerhome/playbook/assets/92755007/b5f56638-2307-46fb-ac28-c4225cf3e051)
2
+
3
+ ```swift
4
+ VStack(spacing: Spacing.small) {
5
+ PBCard(padding: Spacing.none) {
6
+ Text("None").pbFont(.body)
7
+ }
8
+
9
+ PBCard(padding: Spacing.xxSmall) {
10
+ Text("XX Small").pbFont(.body)
11
+ }
12
+
13
+ PBCard(padding: Spacing.xSmall) {
14
+ Text("X Small").pbFont(.body)
15
+ }
16
+
17
+ PBCard(padding: Spacing.small) {
18
+ Text("Small").pbFont(.body)
19
+ }
20
+
21
+ PBCard(padding: Spacing.medium) {
22
+ Text("Medium").pbFont(.body)
23
+ }
24
+
25
+ PBCard(padding: Spacing.large) {
26
+ Text("Large").pbFont(.body)
27
+ }
28
+
29
+ PBCard(padding: Spacing.xLarge) {
30
+ Text("X Large").pbFont(.body)
31
+ }
32
+ }
33
+ ```
@@ -0,0 +1,10 @@
1
+ ### Props
2
+ | Name | Type | Description | Default | Values |
3
+ | --- | ----------- | --------- | --------- | --------- |
4
+ | **Background Color** | `Color` | Changes background color | `.card` | `Color` |
5
+ | **Border** | `Bool` | Adds border around the Card | `true` | `true` `false` |
6
+ | **Border Radius** | `CGFloat` | Specifies the roundness of the Card | `BorderRadius.medium` | `BorderRadius.none` `BorderRadius.xSmall` `BorderRadius.small` `BorderRadius.medium` `BorderRadius.large` `BorderRadius.xLarge` `BorderRadius.rounded` |
7
+ | **Highlight** | `Highlight` | Adds a border accent color | `.none` | `Color` |
8
+ | **Padding** | `CGFloat` | Applies padding between text and border | `Spacing.medium` | `Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge` |
9
+ | **Style** | `PBCardStyle` | Specifies the color of the border | `.default` | `.default` `.selected` `.error` `.inline` |
10
+ | **Shadow** | `Shadow` | Applies shadow | `nil` | `Shadow.deep` `Shadow.deeper` `Shadow.deepest` `Shadow.none` |
@@ -0,0 +1,11 @@
1
+ ![card-separator](https://github.com/powerhome/playbook/assets/92755007/5988d360-d603-4a11-b928-16fe57dc1aea)
2
+
3
+ ```swift
4
+ PBCard(padding: Spacing.none) {
5
+ Text("Header").pbFont(.body).padding(Spacing.small)
6
+ PBSectionSeparator()
7
+ Text(loremIpsum).pbFont(.body).padding(Spacing.small)
8
+ PBSectionSeparator()
9
+ Text("Footer").pbFont(.body).padding(Spacing.small)
10
+ }
11
+ ```
@@ -0,0 +1,21 @@
1
+ ![card-shadow](https://github.com/powerhome/playbook/assets/92755007/7dd7edc1-a2b1-4e91-b271-9c897c9ededd)
2
+
3
+ ```swift
4
+ VStack(spacing: Spacing.small) {
5
+ PBCard(shadow: Shadow.deep) {
6
+ Text("Deep").pbFont(.body)
7
+ }
8
+
9
+ PBCard(shadow: Shadow.deeper) {
10
+ Text("Deeper").pbFont(.body)
11
+ }
12
+
13
+ PBCard(shadow: Shadow.deepest) {
14
+ Text("Deepest").pbFont(.body)
15
+ }
16
+
17
+ PBCard(shadow: Shadow.none) {
18
+ Text("None").pbFont(.body)
19
+ }
20
+ }
21
+ ```
@@ -0,0 +1,17 @@
1
+ ![card-styles](https://github.com/powerhome/playbook/assets/92755007/b6ea347b-6a7b-46e8-b4ce-213727587499)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading, spacing: Spacing.small) {
5
+ PBCard {
6
+ Text("Card Context").pbFont(.body)
7
+ }
8
+
9
+ PBCard(style: .selected()) {
10
+ Text("Card Context").pbFont(.body)
11
+ }
12
+
13
+ PBCard(style: .error) {
14
+ Text("Card Context").pbFont(.body)
15
+ }
16
+ }
17
+ ```
@@ -25,3 +25,15 @@ examples:
25
25
  - card_separator: Separator Card
26
26
  - card_border_none: No Border
27
27
  - card_border_radius: Border Radius
28
+ swift:
29
+ - card_light_swift: Default
30
+ - card_background_swift: Card Backgrounds
31
+ - card_highlight_swift: Highlight Cards
32
+ - card_header_swift: Header Cards
33
+ - card_padding_swift: Padding Size
34
+ - card_shadow_swift: Shadow Size
35
+ - card_separator_swift: Separator Card
36
+ - card_border_none_swift: No Border
37
+ - card_border_radius_swift: Border Radius
38
+ - card_styles_swift: Styles
39
+ - card_props_swift: ""
@@ -15,7 +15,6 @@ examples:
15
15
  - rich_text_editor_default: Default
16
16
  - rich_text_editor_advanced_default: Advanced Default
17
17
  - rich_text_editor_more_extensions: Advanced (Extra Extensions)
18
- - rich_text_editor_toolbar_disabled: Advanced (Toolbar disabled)
19
18
  - rich_text_editor_simple: Simple
20
19
  - rich_text_editor_attributes: Attributes
21
20
  - rich_text_editor_focus: Focus
@@ -8,5 +8,4 @@ export { default as RichTextEditorToolbarBottom } from './_rich_text_editor_tool
8
8
  export { default as RichTextEditorInline } from './_rich_text_editor_inline.jsx'
9
9
  export { default as RichTextEditorPreview } from './_rich_text_editor_preview.jsx'
10
10
  export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_advanced_default.jsx'
11
- export { default as RichTextEditorMoreExtensions } from './_rich_text_editor_more_extensions.jsx'
12
- export { default as RichTextEditorToolbarDisabled } from './_rich_text_editor_toolbar_disabled.jsx'
11
+ export { default as RichTextEditorMoreExtensions } from './_rich_text_editor_more_extensions.jsx'
@@ -1,12 +1,37 @@
1
- <%= pb_rails("table", props: { size: "lg"} ) do %>
1
+ <%# Example data for demonstration purposes %>
2
+ <% data_rows = [
3
+ { 'territory' => 'North', 'firstname' => 'John', 'lastname' => 'Doe', 'age' => 30, 'job' => 'Engineer' },
4
+ { 'territory' => 'South', 'firstname' => 'Alice', 'lastname' => 'Smith', 'age' => 28, 'job' => 'Designer' },
5
+ { 'territory' => 'East', 'firstname' => 'Mike', 'lastname' => 'Johnson', 'age' => 35, 'job' => 'Manager' },
6
+ { 'territory' => 'West', 'firstname' => 'Sarah', 'lastname' => 'Brown', 'age' => 29, 'job' => 'Developer' },
7
+ { 'territory' => 'Central', 'firstname' => 'David', 'lastname' => 'Wilson', 'age' => 32, 'job' => 'Analyst' }
8
+ ]
9
+ %>
10
+
11
+ <%# Example sort method for demonstration purposes %>
12
+ <% if params["sort"] %>
13
+ <% sort_param = params["sort"].gsub(/_(asc|desc)\z/, "") %>
14
+ <% sort_direction = params["sort"].end_with?("_asc") ? 1 : -1 %>
15
+ <% data_rows.sort! do |a, b|
16
+ value_a = a[sort_param]
17
+ value_b = b[sort_param]
18
+
19
+ value_a = value_a.to_i if value_a.is_a?(String) && value_a.match?(/^\d+$/)
20
+ value_b = value_b.to_i if value_b.is_a?(String) && value_b.match?(/^\d+$/)
21
+
22
+ sort_direction * (value_a <=> value_b)
23
+ end %>
24
+ <% end %>
25
+
26
+ <%= pb_rails("table", props: { data_table: true, vertical_border: true, id: "table-header" } ) do %>
2
27
  <thead>
3
28
  <tr>
4
29
  <%= pb_rails("table/table_header", props: {
5
30
  text: "Territory",
6
31
  id: "territory",
7
32
  sort_menu: [
8
- { item: "Territory", link: "?sort=territory_desc", active: params["sort"] == "territory_desc", direction: "desc" },
9
- { item: "Territory", link: "?sort=territory_asc", active: params["sort"] == "territory_asc", direction: "asc" }
33
+ { item: "Territory", link: "?sort=territory_asc#table-header", active: params["sort"] == "territory_asc", direction: "asc" },
34
+ { item: "Territory", link: "?sort=territory_desc#table-header", active: params["sort"] == "territory_desc", direction: "desc" }
10
35
  ],
11
36
  }) %>
12
37
  <%= pb_rails("table/table_header", props: {
@@ -14,45 +39,36 @@
14
39
  text: "Full Name",
15
40
  colspan: 2,
16
41
  sort_menu: [
17
- { item: "First Name Descending", link: "?sort=firstname_desc", active: params["sort"] == "firstname_desc", direction: "desc" },
18
- { item: "First Name Ascending", link: "?sort=firstname_asc", active: params["sort"] == "firstname_asc", direction: "asc" },
19
- { item: "Last Name Descending", link: "?sort=lastname_desc", active: params["sort"] == "lastname_desc", direction: "desc" },
20
- { item: "Last Name Ascending", link: "?sort=lastname_asc", active: params["sort"] == "lastname_asc", direction: "asc" }
42
+ { item: "First Name Descending", link: "?sort=firstname_desc#table-header", active: params["sort"] == "firstname_desc", direction: "desc" },
43
+ { item: "First Name Ascending", link: "?sort=firstname_asc#table-header", active: params["sort"] == "firstname_asc", direction: "asc" },
44
+ { item: "Last Name Descending", link: "?sort=lastname_desc#table-header", active: params["sort"] == "lastname_desc", direction: "desc" },
45
+ { item: "Last Name Ascending", link: "?sort=lastname_asc#table-header", active: params["sort"] == "lastname_asc", direction: "asc" }
21
46
  ],
22
47
  }) %>
23
48
  <%= pb_rails("table/table_header", props: {
24
49
  text: "Age",
25
50
  id: "age",
26
- sort_dropdown: true,
27
51
  sort_menu: [
28
- { item: "Age Descending", link: "?sort=age_desc", active: params["sort"] == "age_desc", direction: "desc" },
29
- { item: "Age Ascending", link: "?sort=age_asc", active: params["sort"] == "age_asc", direction: "asc" }
52
+ { item: "Age Descending", link: "?sort=age_desc#table-header", active: params["sort"] == "age_desc", direction: "desc" },
53
+ { item: "Age Ascending", link: "?sort=age_asc#table-header", active: params["sort"] == "age_asc", direction: "asc" }
30
54
  ],
31
55
  }) %>
32
56
  <%= pb_rails("table/table_header", props: { text: "Job Title" }) %>
33
57
  </tr>
34
58
  </thead>
35
59
  <tbody>
36
- <tr>
37
- <td>Ter 1</td>
38
- <td>First Name 1</td>
39
- <td>Last Name 1</td>
40
- <td>Age 1</td>
41
- <td>Job 1</td>
42
- </tr>
43
- <tr>
44
- <td>Ter 2</td>
45
- <td>First Name 2</td>
46
- <td>Last Name 2</td>
47
- <td>Age 2</td>
48
- <td>Job 2</td>
49
- </tr>
50
- <tr>
51
- <td>Ter 3</td>
52
- <td>First Name 3</td>
53
- <td>Last Name 3</td>
54
- <td>Age 3</td>
55
- <td>Job 3</td>
56
- </tr>
60
+ <% data_rows.each do |row| %>
61
+ <tr>
62
+ <% row.each do |key, value| %>
63
+ <%= pb_rails("background", props: {
64
+ background_color: (params["sort"] && params["sort"].start_with?(key) ? "info_subtle" : "card_light"),
65
+ text_align: (value.is_a?(Integer) ? "right" : ""),
66
+ tag: "td"
67
+ }) do %>
68
+ <%= value %>
69
+ <% end %>
70
+ <% end %>
71
+ </tr>
72
+ <% end %>
57
73
  </tbody>
58
74
  <% end %>
@@ -6,3 +6,8 @@ presence of `sort_menu` enables the sort link within the header
6
6
  * `sort_dropdown` (boolean) optionally declares that (true) clicking a header's sort link opens a dropdown of sort options, or (false) each sort link click cycles through available sort_menu items in the order they are passed
7
7
  * passing a valid `colspan` will render sort options within a dropdown by default, without requiring `sort_dropdown` explicitly. Alternatively, the default sort dropdown can be prevented on headers with `colspan` by setting `sort_dropdown: false`, which reverts the column to sorting to multi-click default (each click of the sort link cycles through the available sort_menu items in the order they are passed)
8
8
  * `id` (string) is required for headers that have a dropdown (for popover reference); otherwise they are optional
9
+
10
+ </br>
11
+ <div class="pb_pill_kit_warning"><div class="pb_title_kit_size_4 pb_pill_text">Disclaimer</div></div>
12
+
13
+ This example uses a custom sort method that may need to be modified or replaced within your project.
@@ -14,7 +14,6 @@ const TooltipDefaultReact = (props) => {
14
14
  >
15
15
  <FlexItem>
16
16
  <Tooltip
17
- className={"customClassNameHere"}
18
17
  placement='top'
19
18
  text="Whoa. I'm a Tooltip"
20
19
  zIndex={10}
@@ -0,0 +1,31 @@
1
+ <%= pb_rails("flex", props: { gap: "md", justify: "center", wrap: true }) do %>
2
+ <%= pb_rails("flex/flex_item") do %>
3
+ <span id='truncated-tooltip-2' style="
4
+ display: inline-block;
5
+ white-space: nowrap;
6
+ overflow: hidden;
7
+ text-overflow: ellipsis;
8
+ max-width: 100px;
9
+ ">This is a truncated tooltip trigger.</span>
10
+ <%= pb_rails("tooltip", props: {
11
+ trigger_element_selector: "#truncated-tooltip-2",
12
+ tooltip_id: "truncated-2",
13
+ position: 'left',
14
+ truncatable: true
15
+ }) do %>
16
+ This is a truncated tooltip trigger.
17
+ <% end %>
18
+ <% end %>
19
+ <%= pb_rails("flex/flex_item") do %>
20
+ <span id='truncated-tooltip-1'>This tooltip trigger is not truncated.</span>
21
+ <%= pb_rails("tooltip", props: {
22
+ trigger_element_selector: "#truncated-tooltip-1",
23
+ tooltip_id: "truncated-1",
24
+ position: 'left',
25
+ truncatable: true
26
+ }) do %>
27
+ This tooltip trigger is not truncated.
28
+ <% end %>
29
+ <% end %>
30
+
31
+ <% end %>
@@ -0,0 +1,45 @@
1
+ // @flow
2
+
3
+ import React from 'react'
4
+ import { Tooltip, Flex, FlexItem } from '../..'
5
+ import './styles.css'
6
+
7
+ const TooltipTruncated = (props) => {
8
+
9
+ return (
10
+ <Flex
11
+ flexDirection='row'
12
+ gap='md'
13
+ justifyContent='center'
14
+ wrap
15
+ >
16
+ <FlexItem>
17
+ <Tooltip
18
+ className='tooltip-text-truncation'
19
+ style={{
20
+ 'backgroundColor': 'red'
21
+ }}
22
+ text='This is a truncated tooltip trigger.'
23
+ truncatable
24
+ zIndex={10}
25
+ {...props}
26
+ >
27
+ {'This is a truncated tooltip trigger.'}
28
+ </Tooltip>
29
+ </FlexItem>
30
+ <FlexItem>
31
+ <Tooltip
32
+ className='tooltip-text-truncation'
33
+ text='This is a truncated tooltip trigger.'
34
+ truncatable
35
+ zIndex={10}
36
+ {...props}
37
+ >
38
+ {'This'}
39
+ </Tooltip>
40
+ </FlexItem>
41
+ </Flex>
42
+ )
43
+ }
44
+
45
+ export default TooltipTruncated
@@ -0,0 +1,5 @@
1
+ If your implementation involves truncated text, you can set the `truncatable` prop to `true` and only display the tooltip when the trigger element is truncated.
2
+
3
+ When activated, the component checks whether the trigger element's scrollWidth is equal to its clientWidth, or if the scrollWidth is equal to 0. If either of these conditions is met, the tooltip won't be displayed because the text is not truncated.
4
+
5
+ This feature only works alongside with CSS `ellipsis` and setting a `max-width` for the trigger element. Check the CSS applied in the example above for details.
@@ -4,6 +4,7 @@ examples:
4
4
  - tooltip_default: Default
5
5
  - tooltip_selectors: Using Common Selectors
6
6
  - tooltip_with_icon_circle: Icon Circle Tooltip
7
+ - tooltip_truncated: Text Truncation
7
8
 
8
9
  react:
9
10
  - tooltip_default_react: Default
@@ -11,3 +12,5 @@ examples:
11
12
  - tooltip_margin: Margin
12
13
  - tooltip_icon: Tooltip with Icon
13
14
  - tooltip_delay: Delay
15
+ - tooltip_truncated: Text Truncation
16
+
@@ -3,3 +3,4 @@ export { default as TooltipInteraction } from './_tooltip_interaction'
3
3
  export { default as TooltipMargin } from './_tooltip_margin'
4
4
  export { default as TooltipIcon } from './_tooltip_icon'
5
5
  export { default as TooltipDelay } from './_tooltip_delay'
6
+ export { default as TooltipTruncated } from './_tooltip_truncated'