playbook_ui 13.10.0.pre.alpha.play10561428 → 13.10.0.pre.alpha.webpackerregistercomponents1463

Sign up to get free protection for your applications and to get access to all the features.
Files changed (26) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default_swift.md +10 -0
  3. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error_swift.md +12 -0
  4. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_swift.md +12 -0
  5. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_props_swift.md +7 -0
  6. data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +7 -0
  7. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_props.md +6 -0
  8. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_swift.md +16 -0
  9. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_defaul_swift.md +7 -0
  10. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes_swift.md +11 -0
  11. data/app/pb_kits/playbook/pb_icon_circle/docs/example.yml +7 -0
  12. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +6 -19
  13. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx +1 -0
  14. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +0 -3
  15. data/app/pb_kits/playbook/pb_tooltip/docs/index.js +0 -1
  16. data/app/pb_kits/playbook/pb_tooltip/index.js +0 -3
  17. data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb +0 -19
  18. data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +0 -1
  19. data/app/pb_kits/playbook/playbook-doc.js +1 -1
  20. data/dist/playbook-rails.js +6 -6
  21. data/lib/playbook/version.rb +1 -1
  22. metadata +10 -6
  23. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_truncated.html.erb +0 -31
  24. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_truncated.jsx +0 -45
  25. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_truncated.md +0 -5
  26. data/app/pb_kits/playbook/pb_tooltip/docs/styles.css +0 -13
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 8a2807d542e599318fd2f79fc104f3450b639e16fc72eefb448c01801a93ce26
4
- data.tar.gz: c746a684168766dc601005de394c14fb21f244afba8e0ffc06cae57b6bd41533
3
+ metadata.gz: 05d745f53385521fefd867230524eac36493cfe2af780a8c2600411069cbefe9
4
+ data.tar.gz: 41f1f9277e46f6daf91b0a02692f8c06730102a2b192b3e97cdd854d958bf5c2
5
5
  SHA512:
6
- metadata.gz: 4db6c5f56ab0b8c95662906a6d33f05a785ef9f882f2c84e6d9d5b8b47b1288d0bc1780d65f0e9cc4c65d8cf67067c35ec2dbf226e42a5c3fdf17adb220a7ca0
7
- data.tar.gz: bd5f400a9e68d7827361b21f54b9920584452c90611c7bd90f83a8e50348f1517736bf85a7597173d6112fea42f91b7e81e1584b43dd54e1a36e27bb5d1d9307
6
+ metadata.gz: 7200a71d51c92bfbded4d31a7d641d86fe9c171b582302fad9fd5fe7300114fccef96aa812a561fe1df6dc57d6d3dbfce62bdb2d5ae88b055240170ab240e8fc
7
+ data.tar.gz: 37e37724588a7c7f304aba08962a9631d1bb949d82003057689489b84ad08f53f200cbee8d77528703c0e2365fb6c1754959c93ef89a834bde084686e30912f7
@@ -0,0 +1,10 @@
1
+ ![checkbox-default](https://github.com/powerhome/playbook/assets/92755007/dc3af1fb-8786-4002-ac64-3111b5b8c476)
2
+
3
+ ```swift
4
+
5
+ PBCheckbox(checked: false, text: "Unchecked", action: {})
6
+ .padding(.bottom, Spacing.small)
7
+
8
+ PBCheckbox(checked: true, text: "Checked", action: {})
9
+
10
+ ```
@@ -0,0 +1,12 @@
1
+ ![checkbox-error](https://github.com/powerhome/playbook/assets/92755007/6466de7f-fbfb-418b-8c5a-74d07a0c4f63)
2
+
3
+ ```swift
4
+
5
+ PBCheckbox(
6
+ checked: false,
7
+ checkboxType: .error,
8
+ text: "Error",
9
+ action: {}
10
+ )
11
+
12
+ ```
@@ -0,0 +1,12 @@
1
+ ![checkbox-indeterminate](https://github.com/powerhome/playbook/assets/92755007/eacd6976-bd00-41a9-aca1-75ce23b6a58c)
2
+
3
+ ```swift
4
+
5
+ PBCheckbox(
6
+ checked: true,
7
+ checkboxType: .indeterminate,
8
+ text: "Indeterminate",
9
+ action: {}
10
+ )
11
+
12
+ ```
@@ -0,0 +1,7 @@
1
+ ### Props
2
+ | Name | Type | Description | Default | Values |
3
+ | --- | ----------- | --------- | --------- | --------- |
4
+ | **Checked** | `Bool` | Adds a check to the Checkbox | `false` | `true` `false` |
5
+ | **Checkbox Type** | `CheckboxType` | Changes the style of the Checkbox | `default` | `default` `error` `indeterminate` |
6
+ | **Text** | `String` | Adds a text label | `nil` | |
7
+ | **Action** | `(() -> Void)` | Adds an action | `{}` | |
@@ -13,3 +13,10 @@ examples:
13
13
  - checkbox_custom: Custom Checkbox
14
14
  - checkbox_error: Default w/ Error
15
15
  - checkbox_indeterminate: Indeterminate Checkbox
16
+
17
+ swift:
18
+ - checkbox_default_swift: Default
19
+ - checkbox_error_swift: Default w/ Error
20
+ - checkbox_indeterminate_swift: Indeterminate Checkbox
21
+ - checkbox_props_swift: ""
22
+
@@ -0,0 +1,6 @@
1
+ ### Props
2
+ | Name | Type | Description | Default | Values |
3
+ | --- | ----------- | --------- | --------- | --------- |
4
+ | **Icon** | `PlaybookGenericIcon` | Sets the kit's Icon | | |
5
+ | **Size** | `PBIcon.IconSize` | Changes the size of the Circle Icon | `.x1` | `xSmall` `small` `large` `x1` `x2` `x3` `x4` `x5` `x6` `x7` `x8` `x9` `x10` |
6
+ | **Color** | `Color` | Changes color of the Icon and background | `.status(.neutral)` | `Color` |
@@ -0,0 +1,16 @@
1
+ ![icon-circle-colors](https://github.com/powerhome/playbook/assets/92755007/d6507900-98e9-49fb-acfb-a238bef08d1b)
2
+
3
+ ```swift
4
+
5
+ VStack(spacing: Spacing.small) {
6
+ PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data1))
7
+ PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data2))
8
+ PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data3))
9
+ PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data4))
10
+ PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data5))
11
+ PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data6))
12
+ PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data7))
13
+ PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data8))
14
+ }
15
+
16
+ ```
@@ -0,0 +1,7 @@
1
+ ![icon-circle-default](https://github.com/powerhome/playbook/assets/92755007/d5de652d-ff9e-4b54-b55e-a3bf58d7cb23)
2
+
3
+ ```swift
4
+
5
+ PBIconCircle(FontAwesome.rocket)
6
+
7
+ ```
@@ -0,0 +1,11 @@
1
+ ![circle-icon-sizes](https://github.com/powerhome/playbook/assets/92755007/2a474df1-5712-4c2a-9d6b-fb740ae949f2)
2
+
3
+ ```swift
4
+
5
+ VStack(alignment: .leading, spacing: Spacing.small) {
6
+ PBIconCircle(FontAwesome.rocket, size: .small)
7
+ PBIconCircle(FontAwesome.rocket, size: .x1)
8
+ PBIconCircle(FontAwesome.rocket, size: .large)
9
+ }
10
+
11
+ ```
@@ -12,3 +12,10 @@ examples:
12
12
  - icon_circle_sizes: Size
13
13
  - icon_circle_color: Color
14
14
  - icon_circle_emoji: With Emoji
15
+
16
+ swift:
17
+ - icon_circle_defaul_swift: Default
18
+ - icon_circle_sizes_swift: Size
19
+ - icon_circle_color_swift: Color
20
+ - icon_circle_color_props: ""
21
+
@@ -28,7 +28,6 @@ type TooltipProps = {
28
28
  placement?: Placement,
29
29
  position?: "absolute" | "fixed";
30
30
  text: string,
31
- truncationEnabled?: boolean,
32
31
  } & GlobalProps
33
32
 
34
33
  const Tooltip = (props: TooltipProps): React.ReactElement => {
@@ -43,7 +42,6 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
43
42
  placement: preferredPlacement = "top",
44
43
  position = "absolute",
45
44
  text,
46
- truncationEnabled = false,
47
45
  zIndex,
48
46
  ...rest
49
47
  } = props
@@ -61,9 +59,10 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
61
59
 
62
60
  const {
63
61
  context,
62
+ floating,
64
63
  middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, },
65
64
  placement,
66
- refs,
65
+ reference,
67
66
  strategy,
68
67
  x,
69
68
  y,
@@ -83,24 +82,12 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
83
82
  ],
84
83
  open,
85
84
  onOpenChange(open) {
86
- if (truncationEnabled) {
87
- const domRef = refs.domReference.current;
88
- if (
89
- (domRef?.clientWidth === domRef?.scrollWidth) ||
90
- (domRef?.scrollWidth === 0)
91
- ) {
92
- return
93
- } else {
94
- setOpen(open);
95
- }
96
- } else {
97
- setOpen(open);
98
- }
85
+ setOpen(open)
99
86
  },
100
87
  placement: preferredPlacement
101
88
  })
102
89
 
103
-
90
+
104
91
  const { getFloatingProps } = useInteractions([
105
92
  useHover(context, {
106
93
  delay,
@@ -121,7 +108,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
121
108
  <>
122
109
  <div
123
110
  className={`pb_tooltip_kit ${css}`}
124
- ref={refs.setReference}
111
+ ref={reference}
125
112
  role="tooltip_trigger"
126
113
  style={{ display: "inline-flex" }}
127
114
  {...ariaProps}
@@ -133,7 +120,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
133
120
  <div
134
121
  {...getFloatingProps({
135
122
  className: `tooltip_tooltip ${placement} visible`,
136
- ref: refs.setFloating,
123
+ ref: floating,
137
124
  role: "tooltip",
138
125
  style: {
139
126
  position: strategy,
@@ -14,6 +14,7 @@ const TooltipDefaultReact = (props) => {
14
14
  >
15
15
  <FlexItem>
16
16
  <Tooltip
17
+ className={"customClassNameHere"}
17
18
  placement='top'
18
19
  text="Whoa. I'm a Tooltip"
19
20
  zIndex={10}
@@ -4,7 +4,6 @@ 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
8
7
 
9
8
  react:
10
9
  - tooltip_default_react: Default
@@ -12,5 +11,3 @@ examples:
12
11
  - tooltip_margin: Margin
13
12
  - tooltip_icon: Tooltip with Icon
14
13
  - tooltip_delay: Delay
15
- - tooltip_truncated: Text Truncation
16
-
@@ -3,4 +3,3 @@ 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'
@@ -54,9 +54,6 @@ export default class PbTooltip extends PbEnhancedElement {
54
54
  }
55
55
 
56
56
  showTooltip(trigger) {
57
- let triggerClasses = [...trigger.classList];
58
- if (triggerClasses.includes("tooltip-disabled")) return
59
-
60
57
  this.popper = createPopper(trigger, this.tooltip, {
61
58
  placement: this.position,
62
59
  modifiers: [
@@ -7,22 +7,3 @@
7
7
  <div class="arrow" id="<%= object.tooltip_id %>-arrow"></div>
8
8
  </div>
9
9
  <% end %>
10
-
11
- <script>
12
- if (<%= object.truncation_enabled %>) {
13
- // only display tooltip if trigger element is truncated
14
- document.addEventListener("DOMContentLoaded", function () {
15
- const formatedTriggerElementId =
16
- "<%= object.trigger_element_selector %>".replace("#", "");
17
- const triggerElement = document.getElementById(formatedTriggerElementId);
18
-
19
- // if scrollWidth is the same as the offsetWidth, the trigger element is not truncated
20
- if (
21
- triggerElement.offsetWidth === triggerElement.scrollWidth ||
22
- triggerElement.scrollWidth === 0
23
- ) {
24
- triggerElement.classList.add("tooltip-disabled");
25
- }
26
- });
27
- }
28
- </script>
@@ -7,7 +7,6 @@ module Playbook
7
7
  prop :trigger_element_selector
8
8
  prop :trigger_element_id, deprecated: true
9
9
  prop :tooltip_id
10
- prop :truncation_enabled, default: false
11
10
  prop :dark, type: Playbook::Props::Boolean,
12
11
  default: false
13
12
 
@@ -104,7 +104,7 @@ import * as UserBadge from 'pb_user_badge/docs'
104
104
  import * as Walkthrough from 'pb_walkthrough/docs'
105
105
  import * as WeekdayStacked from 'pb_weekday_stacked/docs'
106
106
 
107
- WebpackerReact.setup({
107
+ WebpackerReact.registerComponents({
108
108
  ...Avatar,
109
109
  ...AvatarActionButton,
110
110
  ...Background,