playbook_ui 12.15.0 → 12.16.0.pre.alpha.PLAY693tooltipwrongbg532

Sign up to get free protection for your applications and to get access to all the features.
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 %>