playbook_ui 12.15.0 → 12.16.0.pre.alpha.PLAY693tooltipwrongbg532

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_background/_background.tsx +1 -1
  3. data/app/pb_kits/playbook/pb_background/background.rb +1 -1
  4. data/app/pb_kits/playbook/pb_badge/_badge.scss +1 -0
  5. data/app/pb_kits/playbook/pb_badge/_badge.tsx +1 -1
  6. data/app/pb_kits/playbook/pb_badge/badge.rb +5 -1
  7. data/app/pb_kits/playbook/pb_badge/badge.test.js +16 -1
  8. data/app/pb_kits/playbook/pb_body/_body_mixins.scss +3 -3
  9. data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +2 -2
  10. data/app/pb_kits/playbook/pb_docs/kit_api.html.erb +295 -8
  11. data/app/pb_kits/playbook/pb_docs/kit_api.rb +42 -0
  12. data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +33 -0
  13. data/app/pb_kits/playbook/pb_docs/kit_example.rb +14 -1
  14. data/app/pb_kits/playbook/pb_enhanced_element/index.ts +1 -1
  15. data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx +5 -5
  16. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb +1 -1
  17. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +0 -5
  18. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +0 -4
  19. data/app/pb_kits/playbook/pb_table/{_table.jsx → _table.tsx} +9 -11
  20. data/app/pb_kits/playbook/pb_table/{_table_row.jsx → _table_row.tsx} +7 -8
  21. data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb +41 -0
  22. data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx +62 -0
  23. data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
  24. data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
  25. data/app/pb_kits/playbook/pb_table/{index.js → index.ts} +4 -4
  26. data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +129 -0
  27. data/app/pb_kits/playbook/pb_textarea/{index.js → index.tsx} +2 -0
  28. data/app/pb_kits/playbook/pb_textarea/textarea.test.js +213 -0
  29. data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +11 -6
  30. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +0 -1
  31. data/app/pb_kits/playbook/tokens/_colors.scss +16 -1
  32. data/lib/playbook/version.rb +2 -2
  33. metadata +15 -14
  34. data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +0 -41
  35. data/app/pb_kits/playbook/pb_textarea/_textarea.jsx +0 -135
  36. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb +0 -9
metadata CHANGED
@@ -1,15 +1,15 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 12.15.0
4
+ version: 12.16.0.pre.alpha.PLAY693tooltipwrongbg532
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
8
8
  - Power Devs
9
- autorequire:
9
+ autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2023-04-12 00:00:00.000000000 Z
12
+ date: 2023-04-25 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -979,7 +979,6 @@ files:
979
979
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js
980
980
  - app/pb_kits/playbook/pb_flex/_flex.scss
981
981
  - app/pb_kits/playbook/pb_flex/_flex.tsx
982
- - app/pb_kits/playbook/pb_flex/_flex_item.jsx
983
982
  - app/pb_kits/playbook/pb_flex/_flex_item.scss
984
983
  - app/pb_kits/playbook/pb_flex/_flex_item.tsx
985
984
  - app/pb_kits/playbook/pb_flex/docs/_description.md
@@ -1916,9 +1915,9 @@ files:
1916
1915
  - app/pb_kits/playbook/pb_stat_value/stat_value.html.erb
1917
1916
  - app/pb_kits/playbook/pb_stat_value/stat_value.rb
1918
1917
  - app/pb_kits/playbook/pb_stat_value/stat_value.test.js
1919
- - app/pb_kits/playbook/pb_table/_table.jsx
1920
1918
  - app/pb_kits/playbook/pb_table/_table.scss
1921
- - app/pb_kits/playbook/pb_table/_table_row.jsx
1919
+ - app/pb_kits/playbook/pb_table/_table.tsx
1920
+ - app/pb_kits/playbook/pb_table/_table_row.tsx
1922
1921
  - app/pb_kits/playbook/pb_table/docs/_description.md
1923
1922
  - app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb
1924
1923
  - app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx
@@ -1973,9 +1972,11 @@ files:
1973
1972
  - app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.html.erb
1974
1973
  - app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.jsx
1975
1974
  - app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.md
1975
+ - app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb
1976
+ - app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx
1976
1977
  - app/pb_kits/playbook/pb_table/docs/example.yml
1977
1978
  - app/pb_kits/playbook/pb_table/docs/index.js
1978
- - app/pb_kits/playbook/pb_table/index.js
1979
+ - app/pb_kits/playbook/pb_table/index.ts
1979
1980
  - app/pb_kits/playbook/pb_table/styles/_alignment.scss
1980
1981
  - app/pb_kits/playbook/pb_table/styles/_all.scss
1981
1982
  - app/pb_kits/playbook/pb_table/styles/_content.scss
@@ -2024,8 +2025,8 @@ files:
2024
2025
  - app/pb_kits/playbook/pb_text_input/text_input.html.erb
2025
2026
  - app/pb_kits/playbook/pb_text_input/text_input.rb
2026
2027
  - app/pb_kits/playbook/pb_text_input/text_input.test.js
2027
- - app/pb_kits/playbook/pb_textarea/_textarea.jsx
2028
2028
  - app/pb_kits/playbook/pb_textarea/_textarea.scss
2029
+ - app/pb_kits/playbook/pb_textarea/_textarea.tsx
2029
2030
  - app/pb_kits/playbook/pb_textarea/_textarea_mixin.scss
2030
2031
  - app/pb_kits/playbook/pb_textarea/docs/_description.md
2031
2032
  - app/pb_kits/playbook/pb_textarea/docs/_footer.md
@@ -2044,9 +2045,10 @@ files:
2044
2045
  - app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.jsx
2045
2046
  - app/pb_kits/playbook/pb_textarea/docs/example.yml
2046
2047
  - app/pb_kits/playbook/pb_textarea/docs/index.js
2047
- - app/pb_kits/playbook/pb_textarea/index.js
2048
+ - app/pb_kits/playbook/pb_textarea/index.tsx
2048
2049
  - app/pb_kits/playbook/pb_textarea/textarea.html.erb
2049
2050
  - app/pb_kits/playbook/pb_textarea/textarea.rb
2051
+ - app/pb_kits/playbook/pb_textarea/textarea.test.js
2050
2052
  - app/pb_kits/playbook/pb_time/_time.scss
2051
2053
  - app/pb_kits/playbook/pb_time/_time.tsx
2052
2054
  - app/pb_kits/playbook/pb_time/docs/_description.md
@@ -2198,7 +2200,6 @@ files:
2198
2200
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.md
2199
2201
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.html.erb
2200
2202
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.md
2201
- - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb
2202
2203
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb
2203
2204
  - app/pb_kits/playbook/pb_tooltip/docs/example.yml
2204
2205
  - app/pb_kits/playbook/pb_tooltip/docs/index.js
@@ -2466,7 +2467,7 @@ homepage: http://playbook.powerapp.cloud
2466
2467
  licenses:
2467
2468
  - ISC
2468
2469
  metadata: {}
2469
- post_install_message:
2470
+ post_install_message:
2470
2471
  rdoc_options: []
2471
2472
  require_paths:
2472
2473
  - lib
@@ -2477,12 +2478,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
2477
2478
  version: '0'
2478
2479
  required_rubygems_version: !ruby/object:Gem::Requirement
2479
2480
  requirements:
2480
- - - ">="
2481
+ - - ">"
2481
2482
  - !ruby/object:Gem::Version
2482
- version: '0'
2483
+ version: 1.3.1
2483
2484
  requirements: []
2484
2485
  rubygems_version: 3.3.7
2485
- signing_key:
2486
+ signing_key:
2486
2487
  specification_version: 4
2487
2488
  summary: Playbook Design System
2488
2489
  test_files: []
@@ -1,41 +0,0 @@
1
- /* @flow */
2
- import React from 'react'
3
- import classnames from 'classnames'
4
- import { buildCss } from '../utilities/props'
5
- import { globalProps } from '../utilities/globalProps'
6
- type FlexItemPropTypes = {
7
- children: array<React.ReactNode> | React.ReactNode,
8
- fixedSize: string,
9
- grow: boolean,
10
- shrink: boolean,
11
- flex: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none',
12
- className: string,
13
- overflow?: "auto" | "hidden" | "initial" | "inherit" | "scroll" | "visible",
14
- order?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'none',
15
- alignSelf?: "start" | "end" | "center" | "stretch",
16
- displayFlex: boolean
17
- }
18
-
19
- const FlexItem = (props: FlexItemPropTypes) => {
20
- const { children, className, fixedSize, grow, overflow = null, shrink, flex = 'none', order = 'none', alignSelf = null, displayFlex } = props
21
- const growClass = grow === true ? 'grow' : ''
22
- const displayFlexClass = displayFlex === true ? `display_flex_${displayFlex}` : ''
23
- const flexClass = flex !== 'none' ? `flex_${flex}` : ''
24
- const overflowClass = overflow ? `overflow_${overflow}` : ''
25
- const shrinkClass = shrink === true ? 'shrink' : ''
26
- const alignSelfClass = alignSelf ? `align_self_${alignSelf}` : ''
27
- const fixedStyle =
28
- fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
29
- const orderClass = order !== 'none' ? `order_${order}` : null
30
-
31
- return (
32
- <div
33
- className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), overflowClass, orderClass, alignSelfClass, globalProps(props), className)}
34
- style={fixedStyle}
35
- >
36
- {children}
37
- </div>
38
- )
39
- }
40
-
41
- export default FlexItem
@@ -1,135 +0,0 @@
1
- /* @flow */
2
- /* eslint-disable react-hooks/rules-of-hooks */
3
-
4
- import React, { forwardRef, useEffect, useRef } from 'react'
5
- import classnames from 'classnames'
6
-
7
- import PbTextarea from './'
8
- import type { InputCallback } from '../types.js'
9
-
10
- import { globalProps } from '../utilities/globalProps'
11
-
12
- import Body from '../pb_body/_body'
13
- import Caption from '../pb_caption/_caption'
14
- import Flex from '../pb_flex/_flex'
15
- import FlexItem from '../pb_flex/_flex_item'
16
-
17
- type TextareaProps = {
18
- characterCount?: string,
19
- className?: string,
20
- children?: array<React.ReactChild>,
21
- disabled?: boolean,
22
- error?: string,
23
- id?: string,
24
- inline?: boolean,
25
- object?: string,
26
- method?: string,
27
- label?: string,
28
- maxCharacters?: string,
29
- placeholder?: string,
30
- value?: string,
31
- name?: string,
32
- required?: boolean,
33
- rows?: number,
34
- resize: 'none' | 'both' | 'horizontal' | 'vertical' | 'auto',
35
- onChange?: InputCallback<HTMLTextAreaElement>,
36
- }
37
-
38
- const Textarea = ({
39
- characterCount,
40
- className,
41
- children,
42
- disabled,
43
- inline = false,
44
- resize = 'none',
45
- error,
46
- label,
47
- maxCharacters,
48
- name,
49
- onChange = () => {},
50
- placeholder,
51
- required,
52
- rows = 4,
53
- value,
54
- ...props
55
- }: TextareaProps, ref: React.ElementRef<"textarea">) => {
56
- ref = ref || useRef(false)
57
- useEffect(() => {
58
- if (ref.current && resize === 'auto') {
59
- PbTextarea.addMatch(ref.current)
60
- }
61
- })
62
-
63
- const errorClass = error ? 'error' : null
64
- const inlineClass = inline ? 'inline' : ''
65
- const resizeClass = `resize_${resize}`
66
- const classes = classnames('pb_textarea_kit', errorClass, inlineClass, resizeClass, globalProps(props), className)
67
-
68
- const characterCounter = () => {
69
- return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : checkIfZero(characterCount)
70
- }
71
-
72
- const checkIfZero = (characterCount) => {
73
- return characterCount == 0 ? characterCount.toString() : characterCount
74
- }
75
-
76
- return (
77
- <div className={classes}>
78
- <Caption
79
- text={label}
80
- />
81
- <If condition={children}>
82
- {children}
83
- <Else />
84
- <textarea
85
- className="pb_textarea_kit"
86
- disabled={disabled}
87
- name={name}
88
- onChange={onChange}
89
- placeholder={placeholder}
90
- ref={ref}
91
- required={required}
92
- rows={rows}
93
- value={value}
94
- {...props}
95
- />
96
- <If condition={error}>
97
- <If condition={characterCount}>
98
- <Flex
99
- spacing="between"
100
- vertical="center"
101
- >
102
- <FlexItem>
103
- <Body
104
- margin="none"
105
- status="negative"
106
- text={error}
107
- />
108
- </FlexItem>
109
- <FlexItem>
110
- <Caption
111
- margin="none"
112
- size="xs"
113
- text={characterCounter()}
114
- />
115
- </FlexItem>
116
- </Flex>
117
- <Else />
118
- <Body
119
- status="negative"
120
- text={error}
121
- />
122
- </If>
123
- <Else />
124
- <Caption
125
- margin="none"
126
- size="xs"
127
- text={characterCounter()}
128
- />
129
- </If>
130
- </If>
131
- </div>
132
- )
133
- }
134
-
135
- export default forwardRef(Textarea)
@@ -1,9 +0,0 @@
1
- <span id='regular-tooltip-5'>I am a white tooltip.</span>
2
-
3
- <%= pb_rails("tooltip", props: {
4
- trigger_element_id: "regular-tooltip-5",
5
- tooltip_id: "tooltip-5",
6
- position: 'top'
7
- }) do %>
8
- Whoa. I'm a white tooltip.
9
- <% end %>