playbook_ui 12.17.0 → 12.18.0.pre.alpha.PLAY785typeaheadts607

Sign up to get free protection for your applications and to get access to all the features.
Files changed (69) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +1 -1
  3. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb +1 -2
  4. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +2 -2
  5. data/app/pb_kits/playbook/pb_docs/kit_api.html.erb +48 -36
  6. data/app/pb_kits/playbook/pb_docs/kit_api.rb +97 -9
  7. data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +1 -1
  8. data/app/pb_kits/playbook/pb_docs/kit_example.rb +9 -5
  9. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +3 -0
  10. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx +5 -1
  11. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx +1 -1
  12. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx +5 -1
  13. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx +5 -1
  14. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.md +1 -1
  15. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx +5 -1
  16. data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx +5 -1
  17. data/app/pb_kits/playbook/pb_nav/_item.tsx +6 -6
  18. data/app/pb_kits/playbook/pb_nav/_nav.tsx +4 -4
  19. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx +49 -0
  20. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts +9 -0
  21. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx +62 -0
  22. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +139 -0
  23. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx +45 -0
  24. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx +59 -0
  25. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +1 -1
  26. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +28 -12
  27. data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +231 -0
  28. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_description.md +1 -0
  29. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx +36 -0
  30. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.md +4 -0
  31. data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +1 -0
  32. data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +1 -0
  33. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +185 -0
  34. data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.test.js +85 -0
  35. data/app/pb_kits/playbook/pb_title/_title.tsx +1 -1
  36. data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx +45 -0
  37. data/app/pb_kits/playbook/pb_title_detail/title_detail.test.js +71 -0
  38. data/app/pb_kits/playbook/pb_toggle/{_toggle.jsx → _toggle.tsx} +20 -22
  39. data/app/pb_kits/playbook/pb_toggle/toggle.test.js +67 -0
  40. data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +11 -6
  41. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +4 -4
  42. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb +1 -2
  43. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +0 -1
  44. data/app/pb_kits/playbook/pb_typeahead/{_typeahead.jsx → _typeahead.tsx} +22 -12
  45. data/app/pb_kits/playbook/pb_typeahead/components/{ClearIndicator.jsx → ClearIndicator.tsx} +2 -4
  46. data/app/pb_kits/playbook/pb_typeahead/components/{Control.jsx → Control.tsx} +5 -7
  47. data/app/pb_kits/playbook/pb_typeahead/components/{IndicatorsContainer.jsx → IndicatorsContainer.tsx} +2 -4
  48. data/app/pb_kits/playbook/pb_typeahead/components/{MenuList.jsx → MenuList.tsx} +0 -2
  49. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +66 -0
  50. data/app/pb_kits/playbook/pb_typeahead/components/Option.tsx +37 -0
  51. data/app/pb_kits/playbook/pb_typeahead/components/{Placeholder.jsx → Placeholder.tsx} +7 -9
  52. data/app/pb_kits/playbook/pb_typeahead/components/{ValueContainer.jsx → ValueContainer.tsx} +3 -5
  53. data/app/pb_kits/playbook/pb_typeahead/{index.js → index.ts} +37 -29
  54. data/app/pb_kits/playbook/pb_typeahead/types.d.ts +2 -0
  55. data/app/pb_kits/playbook/pb_user/_user.tsx +2 -2
  56. data/lib/playbook/markdown/helper.rb +50 -71
  57. data/lib/playbook/markdown.rb +0 -1
  58. data/lib/playbook/number_spacing.rb +10 -10
  59. data/lib/playbook/position.rb +10 -10
  60. data/lib/playbook/spacing.rb +10 -10
  61. data/lib/playbook/version.rb +2 -2
  62. data/lib/playbook/z_index.rb +10 -10
  63. metadata +36 -24
  64. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx +0 -172
  65. data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx +0 -44
  66. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb +0 -9
  67. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +0 -62
  68. data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx +0 -39
  69. data/lib/playbook/markdown/template_handler.rb +0 -47
@@ -0,0 +1,185 @@
1
+ import React from 'react'
2
+ import classnames from 'classnames'
3
+
4
+ import DateTime from '../pb_kit/dateTime'
5
+ import { globalProps, GlobalProps } from '../utilities/globalProps'
6
+ import { buildAriaProps, buildDataProps } from '../utilities/props'
7
+
8
+ import Body from '../pb_body/_body'
9
+ import Caption from '../pb_caption/_caption'
10
+ import Icon from '../pb_icon/_icon'
11
+
12
+ type TimeRangeInlineProps = {
13
+ aria?: { [key: string]: string },
14
+ className?: string,
15
+ id?: string,
16
+ data?: { [key: string]: string },
17
+ alignment?: "left" | "center" | "vertical",
18
+ size?: "sm" | "xs",
19
+ dark?: boolean,
20
+ icon?: boolean,
21
+ timezone?: boolean,
22
+ startTime: string,
23
+ endTime: string,
24
+ } & GlobalProps
25
+
26
+ const timezoneString = (dateValue: string) => {
27
+ const date = new DateTime({ value: dateValue })
28
+ return `${date.convertToTimezone()}`
29
+ }
30
+
31
+ const dateTimestamp = (dateValue: string) => {
32
+ const date = new DateTime({ value: dateValue })
33
+ return `${date.toHour()}:${date.toMinute()}${date.toMeridian()}`
34
+ }
35
+
36
+ const dateTimeIso = (dateValue: string) => {
37
+ const date = new DateTime({ value: dateValue })
38
+ return date.toIso()
39
+ }
40
+
41
+ const TimeRangeInline = (props: TimeRangeInlineProps) => {
42
+ const {
43
+ aria = {},
44
+ className,
45
+ data = {},
46
+ alignment = 'left',
47
+ size = 'sm',
48
+ dark = false,
49
+ icon = false,
50
+ timezone = false,
51
+ startTime,
52
+ endTime,
53
+ id,
54
+ } = props
55
+
56
+ const dataProps: { [key: string]: string } = buildDataProps(data)
57
+ const ariaProps: { [key: string]: string } = buildAriaProps(aria)
58
+
59
+ const separator = (
60
+ <Body color="light">
61
+ <Icon
62
+ className="pb_time_range_inline_arrow"
63
+ dark={dark}
64
+ fixedWidth
65
+ icon="long-arrow-right"
66
+ />
67
+ </Body>
68
+ )
69
+
70
+ const iconContent = () => {
71
+ return (
72
+ icon &&
73
+ <Body
74
+ color="light"
75
+ tag="span"
76
+ >
77
+ <Icon
78
+ className="pb_time_range_inline_icon"
79
+ dark={dark}
80
+ fixedWidth
81
+ icon="clock"
82
+ size={size}
83
+ tag="span"
84
+ />
85
+ </Body>
86
+ )
87
+ }
88
+
89
+ return (
90
+ <div
91
+ {...ariaProps}
92
+ {...dataProps}
93
+ className={classnames('pb_time_range_inline_kit_' + alignment, globalProps(props), className)}
94
+ id={id}
95
+ >
96
+ <div className="pb_time_range_inline_wrapper">
97
+ {size == 'xs' &&
98
+ <>
99
+ <Caption
100
+ dark={dark}
101
+ tag="span"
102
+ >
103
+ {iconContent()}
104
+ <time dateTime={dateTimeIso(startTime)}>
105
+ {` ${dateTimestamp(
106
+ startTime
107
+ )} `}
108
+ </time>
109
+ </Caption>
110
+ <Caption
111
+ className="pb_time_range_inline_arrow"
112
+ dark={dark}
113
+ tag="span"
114
+ >
115
+ {separator}
116
+ </Caption>
117
+ <Caption
118
+ dark={dark}
119
+ tag="span"
120
+ >
121
+ <time dateTime={dateTimeIso(endTime)}>
122
+ {` ${dateTimestamp(
123
+ endTime
124
+ )} `}
125
+ </time>
126
+ </Caption>
127
+ {timezone &&
128
+ <Caption
129
+ className="pb_time_range_inline_timezone"
130
+ dark={dark}
131
+ tag="span"
132
+ >
133
+ {timezoneString(endTime)}
134
+ </Caption>
135
+ }
136
+ </>
137
+ }
138
+ {size == 'sm' &&
139
+ <>
140
+ <Body
141
+ dark={dark}
142
+ tag="span"
143
+ >
144
+ {iconContent()}
145
+ <time dateTime={dateTimeIso(startTime)}>
146
+ {` ${dateTimestamp(
147
+ startTime
148
+ )} `}
149
+ </time>
150
+ </Body>
151
+ <Body
152
+ className="pb_time_range_inline_arrow"
153
+ dark={dark}
154
+ tag="span"
155
+ >
156
+ {separator}
157
+ </Body>
158
+ <Body
159
+ dark={dark}
160
+ tag="span"
161
+ >
162
+ <time dateTime={dateTimeIso(endTime)}>
163
+ {` ${dateTimestamp(
164
+ endTime
165
+ )} `}
166
+ </time>
167
+ </Body>
168
+ {timezone &&
169
+ <Body
170
+ className="pb_time_range_inline_timezone"
171
+ color="light"
172
+ dark={dark}
173
+ tag="span"
174
+ >
175
+ {timezoneString(endTime)}
176
+ </Body>
177
+ }
178
+ </>
179
+ }
180
+ </div>
181
+ </div>
182
+ )
183
+ }
184
+
185
+ export default TimeRangeInline
@@ -0,0 +1,85 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../utilities/test-utils'
3
+
4
+ import TimeRangeInline from './_time_range_inline'
5
+
6
+ const testId = 'timeRangeInline'
7
+ const className = 'custom-class-name'
8
+
9
+ const TimeRangeInlineDefault = (props) => (
10
+ <>
11
+ <TimeRangeInline
12
+ aria={{ label: testId }}
13
+ className={className}
14
+ data={{ testid: testId }}
15
+ endTime="2012-08-02T17:49:29Z"
16
+ icon="true"
17
+ id={testId}
18
+ size="sm"
19
+ startTime="2012-08-02T15:49:29Z"
20
+ timezone="true"
21
+ {...props}
22
+ />
23
+ </>
24
+ )
25
+
26
+ test('should pass data prop', () => {
27
+ render(<TimeRangeInlineDefault />)
28
+ const kit = screen.getByTestId(testId)
29
+ expect(kit).toBeInTheDocument()
30
+ })
31
+
32
+ test('should pass className prop', () => {
33
+ render(<TimeRangeInlineDefault />)
34
+ const kit = screen.getByTestId(testId)
35
+ expect(kit).toHaveClass(className)
36
+ })
37
+
38
+ test('should pass aria prop', () => {
39
+ render(<TimeRangeInlineDefault />)
40
+ const kit = screen.getByTestId(testId)
41
+ expect(kit).toHaveAttribute('aria-label', testId)
42
+ })
43
+
44
+ test('should pass id prop', () => {
45
+ render(<TimeRangeInlineDefault />)
46
+ const kit = screen.getByTestId(testId)
47
+ expect(kit).toHaveProperty('id', testId)
48
+ })
49
+
50
+ test('should have left alignment by default', () => {
51
+ render(<TimeRangeInlineDefault />)
52
+ const kit = screen.getByTestId(testId)
53
+ expect(kit).toHaveClass('pb_time_range_inline_kit_left')
54
+ })
55
+
56
+ test('should pass alignment prop', () => {
57
+ render(<TimeRangeInlineDefault alignment="right" />)
58
+ const kit = screen.getByTestId(testId)
59
+ expect(kit).toHaveClass('pb_time_range_inline_kit_right')
60
+ })
61
+
62
+ test('should have icon', () => {
63
+ render(<TimeRangeInlineDefault />)
64
+ const kit = screen.getByTestId(testId)
65
+ const icon = kit.querySelector('.pb_time_range_inline_icon')
66
+ expect(icon).toBeInTheDocument()
67
+ })
68
+
69
+ test('should have timezone', () => {
70
+ render(<TimeRangeInlineDefault />)
71
+ const kit = screen.getByTestId(testId)
72
+ expect(kit.querySelector('.pb_time_range_inline_timezone')).toBeInTheDocument()
73
+ })
74
+
75
+ test('should render startTime', () => {
76
+ render(<TimeRangeInlineDefault />)
77
+ const kit = screen.getByTestId(testId)
78
+ expect(kit).toHaveTextContent('11:49a')
79
+ })
80
+
81
+ test('should render endTime', () => {
82
+ render(<TimeRangeInlineDefault />)
83
+ const kit = screen.getByTestId(testId)
84
+ expect(kit).toHaveTextContent('1:49p')
85
+ })
@@ -39,7 +39,7 @@ const Title = (props: TitleProps): React.ReactElement => {
39
39
  const classes = classnames(
40
40
  buildCss('pb_title_kit', `size_${size}`, variant, color, getBold),
41
41
  globalProps(props),
42
- className,
42
+ className
43
43
  )
44
44
  const Tag: React.ReactElement | any = `${tag}`
45
45
 
@@ -0,0 +1,45 @@
1
+ import React from 'react'
2
+ import classnames from 'classnames'
3
+
4
+ import { GlobalProps, globalProps } from '../utilities/globalProps'
5
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
6
+
7
+ import Body from '../pb_body/_body'
8
+ import Title from '../pb_title/_title'
9
+
10
+ type TitleDetailProps = {
11
+ align?: "left" | "center" | "right",
12
+ aria?: { [key: string]: string },
13
+ className?: string,
14
+ data?: { [key: string]: string },
15
+ detail: string,
16
+ id?: string,
17
+ title: string,
18
+ } & GlobalProps
19
+
20
+ const TitleDetail = (props: TitleDetailProps) => {
21
+ const { align = 'left', aria = {}, className, data = {}, detail, id, title } = props
22
+ const ariaProps = buildAriaProps(aria)
23
+ const dataProps = buildDataProps(data)
24
+ const pbCss = buildCss('pb_title_detail_kit', align)
25
+
26
+ return (
27
+ <div
28
+ {...ariaProps}
29
+ {...dataProps}
30
+ className={classnames(pbCss, globalProps(props), className)}
31
+ id={id}
32
+ >
33
+ <Title
34
+ size={4}
35
+ text={title}
36
+ />
37
+ <Body
38
+ color="light"
39
+ text={detail}
40
+ />
41
+ </div>
42
+ )
43
+ }
44
+
45
+ export default TitleDetail
@@ -0,0 +1,71 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../utilities/test-utils'
3
+
4
+ import TitleDetail from './_title_detail'
5
+
6
+ const testId = 'titleDetail'
7
+ const className = 'custom-class-name'
8
+ const detail = 'Commits data and history'
9
+ const title = 'Email Notifications'
10
+
11
+ const TitleDetailDefault = (props) => (
12
+ <>
13
+ <TitleDetail
14
+ aria={{ label: testId }}
15
+ className={className}
16
+ data={{ testid: testId }}
17
+ detail={detail}
18
+ id={testId}
19
+ title={title}
20
+ {...props}
21
+ />
22
+ </>
23
+ )
24
+
25
+ test('should pass data prop', () => {
26
+ render(<TitleDetailDefault />)
27
+ const kit = screen.getByTestId(testId)
28
+ expect(kit).toBeInTheDocument()
29
+ })
30
+
31
+ test('should pass className prop', () => {
32
+ render(<TitleDetailDefault />)
33
+ const kit = screen.getByTestId(testId)
34
+ expect(kit).toHaveClass(className)
35
+ })
36
+
37
+ test('should pass aria prop', () => {
38
+ render(<TitleDetailDefault />)
39
+ const kit = screen.getByTestId(testId)
40
+ expect(kit).toHaveAttribute('aria-label', testId)
41
+ })
42
+
43
+ test('should pass id prop', () => {
44
+ render(<TitleDetailDefault />)
45
+ const kit = screen.getByTestId(testId)
46
+ expect(kit).toHaveProperty('id', testId)
47
+ })
48
+
49
+ test('should have left align by default', () => {
50
+ render(<TitleDetailDefault />)
51
+ const kit = screen.getByTestId(testId)
52
+ expect(kit).toHaveClass('pb_title_detail_kit_left')
53
+ })
54
+
55
+ test('should pass align prop', () => {
56
+ render(<TitleDetailDefault align="right" />)
57
+ const kit = screen.getByTestId(testId)
58
+ expect(kit).toHaveClass('pb_title_detail_kit_right')
59
+ })
60
+
61
+ test('should render detail', () => {
62
+ render(<TitleDetailDefault />)
63
+ const kit = screen.getByTestId(testId)
64
+ expect(kit).toHaveTextContent(detail)
65
+ })
66
+
67
+ test('should render title', () => {
68
+ render(<TitleDetailDefault />)
69
+ const kit = screen.getByTestId(testId)
70
+ expect(kit).toHaveTextContent(title)
71
+ })
@@ -1,5 +1,3 @@
1
- // @flow
2
-
3
1
  import React from 'react'
4
2
  import classnames from 'classnames'
5
3
  import type { InputCallback } from '../types'
@@ -10,20 +8,20 @@ import {
10
8
  buildDataProps,
11
9
  } from '../utilities/props'
12
10
 
13
- import { globalProps } from '../utilities/globalProps'
11
+ import { GlobalProps, globalProps } from '../utilities/globalProps'
14
12
 
15
13
  type Props = {
16
- aria?: object,
14
+ aria?: { [key: string]: string },
17
15
  checked?: boolean,
18
- children?: React.Node,
16
+ children?: React.ReactNode | React.ReactNode[],
19
17
  className?: string,
20
- data?: object,
18
+ data?: { [key: string]: string },
21
19
  id?: string,
22
20
  name?: string,
23
21
  onChange?: InputCallback<HTMLInputElement>,
24
22
  size?: "sm" | "md",
25
23
  value?: string,
26
- }
24
+ } & GlobalProps
27
25
 
28
26
  const Toggle = ({
29
27
  aria = {},
@@ -33,7 +31,7 @@ const Toggle = ({
33
31
  data = {},
34
32
  id,
35
33
  name,
36
- onChange = () => {},
34
+ onChange = () => { },
37
35
  size = 'sm',
38
36
  value,
39
37
  ...props
@@ -51,24 +49,24 @@ const Toggle = ({
51
49
 
52
50
  return (
53
51
  <div
54
- {...ariaProps}
55
- {...dataProps}
56
- className={classnames(css, globalProps(props), className)}
57
- id={id}
52
+ {...ariaProps}
53
+ {...dataProps}
54
+ className={classnames(css, globalProps(props), className)}
55
+ id={id}
58
56
  >
59
57
  <label className="pb_toggle_wrapper">
60
- <If condition={children}>
61
- {children}
62
- <Else />
58
+ {children && children}
59
+
60
+ {!children &&
63
61
  <input
64
- {...props}
65
- defaultChecked={checked}
66
- name={name}
67
- onChange={onChange}
68
- type="checkbox"
69
- value={value}
62
+ {...props}
63
+ defaultChecked={checked}
64
+ name={name}
65
+ onChange={onChange}
66
+ type="checkbox"
67
+ value={value}
70
68
  />
71
- </If>
69
+ }
72
70
  <div className="pb_toggle_control" />
73
71
  </label>
74
72
  </div>
@@ -0,0 +1,67 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../utilities/test-utils'
3
+
4
+ import Toggle from './_toggle'
5
+
6
+ const testId = 'toggle'
7
+ const className = 'custom-class-name'
8
+
9
+ const ToggleDefault = (props) => (
10
+ <>
11
+ <Toggle
12
+ aria={{ label: testId }}
13
+ className={className}
14
+ data={{ testid: testId }}
15
+ id={testId}
16
+ {...props}
17
+ />
18
+ </>
19
+ )
20
+
21
+ test('should pass data prop', () => {
22
+ render(<ToggleDefault />)
23
+ const kit = screen.getByTestId(testId)
24
+ expect(kit).toBeInTheDocument()
25
+ })
26
+
27
+ test('should pass className prop', () => {
28
+ render(<ToggleDefault />)
29
+ const kit = screen.getByTestId(testId)
30
+ expect(kit).toHaveClass(className)
31
+ })
32
+
33
+ test('should pass aria prop', () => {
34
+ render(<ToggleDefault />)
35
+ const kit = screen.getByTestId(testId)
36
+ expect(kit).toHaveAttribute('aria-label', testId)
37
+ })
38
+
39
+ test('should pass id prop', () => {
40
+ render(<ToggleDefault />)
41
+ const kit = screen.getByTestId(testId)
42
+ expect(kit).toHaveProperty('id', testId)
43
+ })
44
+
45
+ test('should not be checked by default', () => {
46
+ render(<ToggleDefault />)
47
+ const kit = screen.getByTestId(testId)
48
+ expect(kit).toHaveClass('pb_toggle_kit_sm_off')
49
+ })
50
+
51
+ test('should pass checked prop', () => {
52
+ render(<ToggleDefault checked />)
53
+ const kit = screen.getByTestId(testId)
54
+ expect(kit).toHaveClass('pb_toggle_kit_sm_on')
55
+ })
56
+
57
+ test('should have sm size by default', () => {
58
+ render(<ToggleDefault />)
59
+ const kit = screen.getByTestId(testId)
60
+ expect(kit).toHaveClass('pb_toggle_kit_sm_off')
61
+ })
62
+
63
+ test('should pass size prop', () => {
64
+ render(<ToggleDefault size='md' />)
65
+ const kit = screen.getByTestId(testId)
66
+ expect(kit).toHaveClass('pb_toggle_kit_md_off')
67
+ })
@@ -88,13 +88,18 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
88
88
  &.show {
89
89
  opacity: 1;
90
90
  margin-bottom: $space_sm;
91
- background-color: $white;
91
+ color: $white;
92
+ background-color: rgba($black, $opacity_9);
92
93
  &.fade_out {
93
94
  animation-name: fadeOut;
94
95
  animation-duration: 150ms;
95
96
  animation-timing-function: linear;
96
97
  animation-fill-mode: forwards;
97
98
  }
99
+ .arrow {
100
+ border-color: $black transparent transparent transparent;
101
+ opacity: $opacity_9;
102
+ }
98
103
  }
99
104
  }
100
105
 
@@ -109,12 +114,12 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
109
114
  }
110
115
  //rails
111
116
  &.show {
112
- color: $white;
113
- background-color: rgba($black, $opacity_9);
117
+ color: $charcoal;
118
+ background-color: $white;
114
119
  }
115
- .arrow {
116
- border-color: $black transparent transparent transparent;
117
- opacity: $opacity_9;
120
+ .arrow {
121
+ border-color: $white transparent transparent transparent;
122
+ opacity: $opacity_10;
118
123
  }
119
124
  // react arrow
120
125
  .arrow_bg {
@@ -1,4 +1,4 @@
1
- <%= pb_rails("flex", props: { horizontal: "center", orientation: "column" }) do %>
1
+ <%= pb_rails("flex", props: { gap: "md", justify: "center", wrap: true }) do %>
2
2
  <%= pb_rails("flex/flex_item") do %>
3
3
  <span id='regular-tooltip-1'>Hover here (Top)</span>
4
4
 
@@ -11,7 +11,7 @@
11
11
  <% end %>
12
12
  <% end %>
13
13
 
14
- <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
14
+ <%= pb_rails("flex/flex_item") do %>
15
15
  <span id='regular-tooltip-2'>Hover here (Bottom)</span>
16
16
  <%= pb_rails("tooltip", props: {
17
17
  trigger_element_selector: "#regular-tooltip-2",
@@ -22,7 +22,7 @@
22
22
  <% end %>
23
23
  <% end %>
24
24
 
25
- <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
25
+ <%= pb_rails("flex/flex_item") do %>
26
26
  <span id='regular-tooltip-3'>Hover here (Right)</span>
27
27
  <%= pb_rails("tooltip", props: {
28
28
  trigger_element_selector: "#regular-tooltip-3",
@@ -33,7 +33,7 @@
33
33
  <% end %>
34
34
  <% end %>
35
35
 
36
- <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
36
+ <%= pb_rails("flex/flex_item") do %>
37
37
  <span id='regular-tooltip-4'>Hover here (Left)</span>
38
38
  <%= pb_rails("tooltip", props: {
39
39
  trigger_element_selector: "#regular-tooltip-4",
@@ -3,8 +3,7 @@
3
3
  <%= pb_rails("tooltip", props: {
4
4
  trigger_element_id: "result-1-sample-email-link",
5
5
  tooltip_id: "sample-email-tooltip-result-1",
6
- position: "top",
7
- dark: true
6
+ position: "top"
8
7
  }) do %>
9
8
  Send Email
10
9
  <% end %>
@@ -3,7 +3,6 @@ examples:
3
3
  rails:
4
4
  - tooltip_default: Default
5
5
  - tooltip_selectors: Using Common Selectors
6
- - tooltip_white: White
7
6
  - tooltip_with_icon_circle: Icon Circle Tooltip
8
7
 
9
8
  react: