playbook_ui 12.14.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 (51) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_avatar/_avatar.tsx +1 -1
  3. data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +1 -1
  4. data/app/pb_kits/playbook/pb_avatar/avatar.rb +4 -0
  5. data/app/pb_kits/playbook/pb_avatar/avatar.test.js +14 -0
  6. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.html.erb +0 -1
  7. data/app/pb_kits/playbook/pb_background/_background.tsx +1 -1
  8. data/app/pb_kits/playbook/pb_background/background.rb +1 -1
  9. data/app/pb_kits/playbook/pb_badge/_badge.scss +1 -0
  10. data/app/pb_kits/playbook/pb_badge/_badge.tsx +1 -1
  11. data/app/pb_kits/playbook/pb_badge/badge.rb +5 -1
  12. data/app/pb_kits/playbook/pb_badge/badge.test.js +16 -1
  13. data/app/pb_kits/playbook/pb_body/_body_mixins.scss +3 -3
  14. data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +2 -2
  15. data/app/pb_kits/playbook/pb_card/_card.scss +13 -0
  16. data/app/pb_kits/playbook/pb_card/_card.tsx +3 -2
  17. data/app/pb_kits/playbook/pb_card/card_header.rb +9 -1
  18. data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +11 -0
  19. data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx +169 -139
  20. data/app/pb_kits/playbook/pb_docs/kit_api.html.erb +295 -8
  21. data/app/pb_kits/playbook/pb_docs/kit_api.rb +42 -0
  22. data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +33 -0
  23. data/app/pb_kits/playbook/pb_docs/kit_example.rb +14 -1
  24. data/app/pb_kits/playbook/pb_enhanced_element/index.ts +1 -1
  25. data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx +5 -5
  26. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb +1 -1
  27. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +0 -5
  28. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +0 -4
  29. data/app/pb_kits/playbook/pb_star_rating/{_star_rating.jsx → _star_rating.tsx} +18 -22
  30. data/app/pb_kits/playbook/pb_star_rating/star_rating.test.js +71 -0
  31. data/app/pb_kits/playbook/pb_table/{_table.jsx → _table.tsx} +9 -11
  32. data/app/pb_kits/playbook/pb_table/{_table_row.jsx → _table_row.tsx} +7 -8
  33. data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb +41 -0
  34. data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx +62 -0
  35. data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
  36. data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
  37. data/app/pb_kits/playbook/pb_table/{index.js → index.ts} +4 -4
  38. data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +129 -0
  39. data/app/pb_kits/playbook/pb_textarea/{index.js → index.tsx} +2 -0
  40. data/app/pb_kits/playbook/pb_textarea/textarea.test.js +213 -0
  41. data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +11 -6
  42. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +0 -1
  43. data/app/pb_kits/playbook/tokens/_colors.scss +16 -1
  44. data/app/pb_kits/playbook/utilities/_cursor.scss +141 -1
  45. data/app/pb_kits/playbook/utilities/globalProps.ts +5 -2
  46. data/lib/playbook/cursor.rb +2 -2
  47. data/lib/playbook/version.rb +2 -2
  48. metadata +17 -15
  49. data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +0 -41
  50. data/app/pb_kits/playbook/pb_textarea/_textarea.jsx +0 -135
  51. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb +0 -9
@@ -1,19 +1,17 @@
1
- /* @flow */
2
-
3
- import React, { useEffect, type Node } from 'react'
1
+ import React, { useEffect } from 'react'
4
2
  import classnames from 'classnames'
5
3
  import { buildAriaProps, buildDataProps } from '../utilities/props'
6
4
  import { globalProps } from '../utilities/globalProps'
7
- import PbTable from './'
5
+ import PbTable from '.'
8
6
 
9
7
  type TableProps = {
10
- aria?: object,
11
- children: array<Node> | Node,
8
+ aria?: { [key: string]: string },
9
+ children: React.ReactNode[] | React.ReactNode,
12
10
  className: string,
13
11
  collapse?: "sm" | "md" | "lg",
14
12
  container: boolean,
15
13
  dark?: boolean,
16
- data?: object,
14
+ data?: { [key: string]: string },
17
15
  dataTable: boolean,
18
16
  disableHover: boolean,
19
17
  id?: string,
@@ -52,9 +50,9 @@ const Table = (props: TableProps) => {
52
50
 
53
51
  return (
54
52
  <table
55
- {...ariaProps}
56
- {...dataProps}
57
- className={classnames(
53
+ {...ariaProps}
54
+ {...dataProps}
55
+ className={classnames(
58
56
  'pb_table',
59
57
  `table-${size}`,
60
58
  `table-responsive-${responsive}`,
@@ -70,7 +68,7 @@ const Table = (props: TableProps) => {
70
68
  tableCollapseCss,
71
69
  className
72
70
  )}
73
- id={id}
71
+ id={id}
74
72
  >
75
73
  {children}
76
74
  </table>
@@ -1,14 +1,13 @@
1
- /* @flow */
2
1
  import React from 'react'
3
2
  import classnames from 'classnames'
4
3
  import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
5
4
  import { globalProps } from '../utilities/globalProps'
6
5
 
7
6
  type TableRowPropTypes = {
8
- aria?: object,
9
- children: array<React.ReactNode> | React.ReactNode,
7
+ aria?: { [key: string]: string },
8
+ children: React.ReactNode[] | React.ReactNode,
10
9
  className: string,
11
- data?: object,
10
+ data?: { [key: string]: string },
12
11
  id?: string,
13
12
  sideHighlightColor: string,
14
13
  }
@@ -31,10 +30,10 @@ const TableRow = (props: TableRowPropTypes) => {
31
30
 
32
31
  return (
33
32
  <tr
34
- {...ariaProps}
35
- {...dataProps}
36
- className={classes}
37
- id={id}
33
+ {...ariaProps}
34
+ {...dataProps}
35
+ className={classes}
36
+ id={id}
38
37
  >
39
38
  {children}
40
39
  </tr>
@@ -0,0 +1,41 @@
1
+ <%= pb_rails("table", props: { size: "sm", margin_bottom: "lg" }) do %>
2
+ <thead>
3
+ <tr>
4
+ <th>Column 1</th>
5
+ <th>Column 2</th>
6
+ <th>Column 3</th>
7
+ </tr>
8
+ </thead>
9
+ <tbody>
10
+ <tr>
11
+ <td>Value 1</td>
12
+ <td>Value 2</td>
13
+ <td>Value 3</td>
14
+ </tr>
15
+ <%= pb_rails("background", props: { background_color: "error_subtle", tag: "tr" }) do %>
16
+ <td>Value 1</td>
17
+ <td>Value 2</td>
18
+ <td>Value 3</td>
19
+ <% end %>
20
+ <tr>
21
+ <td>Value 1</td>
22
+ <td>Value 2</td>
23
+ <td>Value 3</td>
24
+ </tr>
25
+ <tr>
26
+ <td>Value 1</td>
27
+ <td>Value 2</td>
28
+ <td>Value 3</td>
29
+ </tr>
30
+ <%= pb_rails("background", props: { background_color: "warning_subtle", tag: "tr" }) do %>
31
+ <td>Value 1</td>
32
+ <td>Value 2</td>
33
+ <td>Value 3</td>
34
+ <% end %>
35
+ <tr>
36
+ <td>Value 1</td>
37
+ <td>Value 2</td>
38
+ <td>Value 3</td>
39
+ </tr>
40
+ </tbody>
41
+ <% end %>
@@ -0,0 +1,62 @@
1
+ import React from 'react'
2
+
3
+ import Table from '../_table'
4
+ import Background from "../../pb_background/_background"
5
+
6
+ const TableWithBackgroundKit = (props) => {
7
+ return (
8
+ <div>
9
+ <Table
10
+ {...props}
11
+ >
12
+ <thead>
13
+ <tr>
14
+ <th>{'Column 1'}</th>
15
+ <th>{'Column 2'}</th>
16
+ <th>{'Column 3'}</th>
17
+ </tr>
18
+ </thead>
19
+ <tbody>
20
+ <tr>
21
+ <td>{'Value 1'}</td>
22
+ <td>{'Value 2'}</td>
23
+ <td>{'Value 3'}</td>
24
+ </tr>
25
+ <Background
26
+ backgroundColor="error_subtle"
27
+ tag='tr'
28
+ >
29
+ <td>{'Value 1'}</td>
30
+ <td>{'Value 2'}</td>
31
+ <td>{'Value 3'}</td>
32
+ </Background>
33
+ <tr>
34
+ <td>{'Value 1'}</td>
35
+ <td>{'Value 2'}</td>
36
+ <td>{'Value 3'}</td>
37
+ </tr>
38
+ <tr>
39
+ <td>{'Value 1'}</td>
40
+ <td>{'Value 2'}</td>
41
+ <td>{'Value 3'}</td>
42
+ </tr>
43
+ <Background
44
+ backgroundColor="warning_subtle"
45
+ tag='tr'
46
+ >
47
+ <td>{'Value 1'}</td>
48
+ <td>{'Value 2'}</td>
49
+ <td>{'Value 3'}</td>
50
+ </Background>
51
+ <tr>
52
+ <td>{'Value 1'}</td>
53
+ <td>{'Value 2'}</td>
54
+ <td>{'Value 3'}</td>
55
+ </tr>
56
+ </tbody>
57
+ </Table>
58
+ </div>
59
+ )
60
+ }
61
+
62
+ export default TableWithBackgroundKit
@@ -20,6 +20,7 @@ examples:
20
20
  - table_two_plus_actions: Table with 2+ Actions
21
21
  - table_action_middle: Table with Actions in the Middle
22
22
  - table_icon_buttons: Table with Icon Buttons
23
+ - table_with_background_kit: Table With Background Kit
23
24
 
24
25
 
25
26
  react:
@@ -43,4 +44,5 @@ examples:
43
44
  - table_two_plus_actions: Table with 2+ Actions
44
45
  - table_action_middle: Table with Actions in the Middle
45
46
  - table_icon_buttons: Table with Icon Buttons
47
+ - table_with_background_kit: Table With Background Kit
46
48
 
@@ -18,3 +18,4 @@ export { default as TableAlignmentColumn } from './_table_alignment_column.jsx'
18
18
  export { default as TableAlignmentRow } from './_table_alignment_row.jsx'
19
19
  export { default as TableAlignmentShiftRow } from './_table_alignment_shift_row.jsx'
20
20
  export { default as TableAlignmentShiftData } from './_table_alignment_shift_data.jsx'
21
+ export { default as TableWithBackgroundKit } from './_table_with_background_kit.jsx'
@@ -9,16 +9,16 @@ export default class PbTable extends PbEnhancedElement {
9
9
  const tables = document.querySelectorAll('.table-responsive-collapse');
10
10
 
11
11
  // Each Table
12
- [].forEach.call(tables, (table) => {
12
+ [].forEach.call(tables, (table: HTMLTableElement) => {
13
13
  // Header Titles
14
- var headers = [].map.call(table.querySelectorAll('th'), (header) => {
14
+ var headers = [].map.call(table.querySelectorAll('th'), (header: Element) => {
15
15
  return header.textContent.replace(/\r?\n|\r/, '')
16
16
  });
17
17
 
18
18
  // for each row in tbody
19
- [].forEach.call(table.querySelectorAll('tbody tr'), (row) => {
19
+ [].forEach.call(table.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
20
20
  // for each cell
21
- [].forEach.call(row.cells, (cell, headerIndex) => {
21
+ [].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
22
22
  // apply the attribute
23
23
  cell.setAttribute('data-title', headers[headerIndex])
24
24
  })
@@ -0,0 +1,129 @@
1
+ /* eslint-disable react-hooks/rules-of-hooks */
2
+
3
+ import React, { forwardRef, useEffect, useRef } from 'react'
4
+ import classnames from 'classnames'
5
+
6
+ import PbTextarea from '.'
7
+ import type { InputCallback } from '../types'
8
+
9
+ import { buildAriaProps, buildDataProps } from '../utilities/props'
10
+ import { globalProps, 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
+ aria?: {[key: string]: string},
19
+ characterCount?: string,
20
+ className?: string,
21
+ children?: React.ReactChild[],
22
+ data?: {[key: string]: string},
23
+ disabled?: boolean,
24
+ error?: string,
25
+ id?: string,
26
+ inline?: boolean,
27
+ object?: string,
28
+ method?: string,
29
+ label?: string,
30
+ maxCharacters?: string,
31
+ placeholder?: string,
32
+ value?: string,
33
+ name?: string,
34
+ required?: boolean,
35
+ rows?: number,
36
+ resize: "none" | "both" | "horizontal" | "vertical" | "auto",
37
+ onChange?: InputCallback<HTMLTextAreaElement>,
38
+ } & GlobalProps
39
+
40
+ const Textarea = ({
41
+ aria = {},
42
+ characterCount,
43
+ className,
44
+ children,
45
+ data = {},
46
+ disabled,
47
+ inline = false,
48
+ resize = 'none',
49
+ error,
50
+ label,
51
+ maxCharacters,
52
+ name,
53
+ onChange = () => {},
54
+ placeholder,
55
+ required,
56
+ rows = 4,
57
+ value,
58
+ ...props
59
+ }: TextareaProps, ref: any) => {
60
+ ref = useRef<HTMLTextAreaElement>(null)
61
+ useEffect(() => {
62
+ if (ref.current && resize === 'auto') {
63
+ PbTextarea.addMatch(ref.current)
64
+ }
65
+ })
66
+
67
+ const errorClass = error ? 'error' : null
68
+ const inlineClass = inline ? 'inline' : ''
69
+ const resizeClass = `resize_${resize}`
70
+ const classes = classnames('pb_textarea_kit', errorClass, inlineClass, resizeClass, globalProps(props), className)
71
+ const noCount = typeof characterCount !== 'undefined'
72
+ const ariaProps: {[key: string]: any} = buildAriaProps(aria)
73
+ const dataProps: {[key: string]: any} = buildDataProps(data)
74
+
75
+ const characterCounter = () => {
76
+ return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : `${checkIfZero(characterCount)}`
77
+ }
78
+
79
+ const checkIfZero = (characterCount: string | number) => {
80
+ return characterCount == 0 ? characterCount.toString() : characterCount
81
+ }
82
+
83
+ return (
84
+ <div
85
+ {...ariaProps}
86
+ {...dataProps}
87
+ className={classes}
88
+ >
89
+ <Caption text={label} />
90
+ {children || (
91
+ <textarea
92
+ className="pb_textarea_kit"
93
+ disabled={disabled}
94
+ name={name}
95
+ onChange={onChange}
96
+ placeholder={placeholder}
97
+ ref={ref}
98
+ required={required}
99
+ rows={rows}
100
+ value={value}
101
+ {...props}
102
+ />
103
+ )}
104
+
105
+ {error ? (
106
+ <>
107
+ {characterCount ? (
108
+ <Flex spacing="between" vertical="center">
109
+ <FlexItem>
110
+ <Body margin="none" status="negative" text={error} />
111
+ </FlexItem>
112
+ <FlexItem>
113
+ <Caption margin="none" size="xs" text={characterCounter()} />
114
+ </FlexItem>
115
+ </Flex>
116
+ ) : (
117
+ <Body status="negative" text={error} />
118
+ )}
119
+ </>
120
+ ) : (
121
+ noCount && (
122
+ <Caption margin="none" size="xs" text={characterCounter()} />
123
+ )
124
+ )}
125
+ </div>
126
+ );
127
+ }
128
+
129
+ export default forwardRef(Textarea)
@@ -1,6 +1,8 @@
1
1
  import PbEnhancedElement from '../pb_enhanced_element'
2
2
 
3
3
  export default class PbTextarea extends PbEnhancedElement {
4
+ style: {[key: string]: string}
5
+ scrollHeight: string
4
6
  static get selector() {
5
7
  return '.resize_auto textarea'
6
8
  }
@@ -0,0 +1,213 @@
1
+ import React from "react"
2
+ import { render, screen } from "../utilities/test-utils"
3
+
4
+ import Textarea from "./_textarea"
5
+
6
+ const testId = "textarea-kit"
7
+
8
+ describe("TextArea Kit Props", () => {
9
+ test("Expects to have correct classname", () => {
10
+ render(
11
+ <Textarea
12
+ data={{ testid: testId }}
13
+ label="Label"
14
+ />
15
+ )
16
+
17
+ const kit = screen.getByTestId(testId)
18
+ expect(kit).toHaveClass("pb_textarea_kit")
19
+ })
20
+
21
+ test("should render aria-label", () => {
22
+ render(
23
+ <Textarea
24
+ aria={{ label: testId }}
25
+ data={{ testid: testId }}
26
+ />
27
+ )
28
+
29
+ const kit = screen.getByTestId(testId)
30
+ expect(kit).toHaveAttribute("aria-label", testId)
31
+ })
32
+
33
+ test("should render custom classname", () => {
34
+ render(
35
+ <Textarea
36
+ className={"text_class"}
37
+ data={{ testid: testId }}
38
+ />
39
+ )
40
+
41
+ const kit = screen.getByTestId(testId)
42
+
43
+ expect(kit).toHaveClass("text_class")
44
+ })
45
+
46
+ test("should render value", () => {
47
+ render(
48
+ <Textarea
49
+ data={{ testid: testId }}
50
+ value={"Default Value"}
51
+ />
52
+ )
53
+
54
+ const kit = screen.getByTestId(testId)
55
+ const textarea = kit.querySelector("textarea")
56
+
57
+ expect(textarea.innerHTML).toBe("Default Value")
58
+ })
59
+
60
+ test("should render disabled", () => {
61
+ render(
62
+ <Textarea
63
+ data={{ testid: testId }}
64
+ disabled={false}
65
+ />
66
+ )
67
+
68
+ const kit = screen.getByTestId(testId)
69
+ const textarea = kit.querySelector("textarea")
70
+
71
+ expect(textarea.disabled).toBe(false)
72
+ })
73
+
74
+ test("should render rows", () => {
75
+ render(
76
+ <Textarea
77
+ data={{ testid: testId }}
78
+ rows={7}
79
+ />
80
+ )
81
+
82
+ const kit = screen.getByTestId(testId)
83
+ const textarea = kit.querySelector("textarea")
84
+
85
+ expect(textarea.rows).toBe(7)
86
+ })
87
+
88
+ test("should render character count", () => {
89
+ render(
90
+ <Textarea
91
+ characterCount={50}
92
+ data={{ testid: testId }}
93
+ />
94
+ )
95
+
96
+ const kit = screen.getByTestId(testId)
97
+ const counter = kit.querySelector(".pb_caption_kit_xs")
98
+
99
+ expect(counter.innerHTML).toBe("50")
100
+ })
101
+
102
+ test("should have inline class", () => {
103
+ render(
104
+ <Textarea
105
+ data={{ testid: testId }}
106
+ inline
107
+ />
108
+ )
109
+
110
+ const kit = screen.getByTestId(testId)
111
+
112
+ expect(kit).toHaveClass("inline")
113
+ })
114
+
115
+ test("should have resize class", () => {
116
+ render(
117
+ <Textarea
118
+ data={{ testid: testId }}
119
+ resize={"none"}
120
+ />
121
+ )
122
+
123
+ const kit = screen.getByTestId(testId)
124
+
125
+ expect(kit).toHaveClass("resize_none")
126
+ })
127
+
128
+ test("should render error", () => {
129
+ render(
130
+ <Textarea
131
+ data={{ testid: testId }}
132
+ error={"error message"}
133
+ />
134
+ )
135
+
136
+ const kit = screen.getByTestId(testId)
137
+ const error = kit.querySelector(".pb_body_kit_negative")
138
+
139
+ expect(kit).toHaveClass("error")
140
+ expect(error.innerHTML).toBe("error message")
141
+ })
142
+
143
+ test("should render label", () => {
144
+ render(
145
+ <Textarea
146
+ data={{ testid: testId }}
147
+ label={"Test Label"}
148
+ />
149
+ )
150
+
151
+ const kit = screen.getByTestId(testId)
152
+ const error = kit.querySelector(".pb_caption_kit_md")
153
+
154
+ expect(error.innerHTML).toBe("Test Label")
155
+ })
156
+
157
+ test("should render max character display", () => {
158
+ render(
159
+ <Textarea
160
+ characterCount={"11"}
161
+ data={{ testid: testId }}
162
+ maxCharacters={"10"}
163
+ />
164
+ )
165
+
166
+ const kit = screen.getByTestId(testId)
167
+ const error = kit.querySelector(".pb_caption_kit_xs")
168
+
169
+ expect(error.innerHTML).toBe("11 / 10")
170
+ })
171
+
172
+ test("should render max character display", () => {
173
+ render(
174
+ <Textarea
175
+ data={{ testid: testId }}
176
+ name={"TestName"}
177
+ />
178
+ )
179
+
180
+ const kit = screen.getByTestId(testId)
181
+ const textarea = kit.querySelector("textarea")
182
+
183
+ expect(textarea.name).toBe("TestName")
184
+ })
185
+
186
+ test("should render placeholder", () => {
187
+ render(
188
+ <Textarea
189
+ data={{ testid: testId }}
190
+ placeholder={"Test Placeholder"}
191
+ />
192
+ )
193
+
194
+ const kit = screen.getByTestId(testId)
195
+ const textarea = kit.querySelector("textarea")
196
+
197
+ expect(textarea.placeholder).toBe("Test Placeholder")
198
+ })
199
+
200
+ test("should be required", () => {
201
+ render(
202
+ <Textarea
203
+ data={{ testid: testId }}
204
+ required
205
+ />
206
+ )
207
+
208
+ const kit = screen.getByTestId(testId)
209
+ const textarea = kit.querySelector("textarea")
210
+
211
+ expect(textarea.required).toBeTruthy()
212
+ })
213
+ })
@@ -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 {
@@ -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:
@@ -63,7 +63,7 @@ $bg_dark_card: #231E3D !default;
63
63
  $background_colors: (
64
64
  bg_light: $bg_light,
65
65
  bg_dark: $bg_dark,
66
- bg_dark_card: $bg_dark_card
66
+ bg_dark_card: $bg_dark_card
67
67
  );
68
68
 
69
69
  /* Card colors ------------------*/
@@ -125,9 +125,11 @@ $shadow_colors: (
125
125
  $text_lt_default: $charcoal !default;
126
126
  $text_lt_light: #687887 !default;
127
127
  $text_lt_lighter: $slate !default;
128
+ $text_lt_success_sm: #157F48 !default;
128
129
  $text_dk_default: $white !default;
129
130
  $text_dk_light: rgba($white, $opacity_6) !default;
130
131
  $text_dk_lighter: rgba($white, $opacity_4) !default;
132
+ $text_dk_success_sm: #00CA74 !default;
131
133
  $text_colors: (
132
134
  text_lt_default: $text_lt_default,
133
135
  text_lt_light: $text_lt_light,
@@ -181,6 +183,7 @@ $primary_secondary: lighten($primary, 10%) !default;
181
183
  $status_colors: (
182
184
  success: $success,
183
185
  success_secondary: $success_secondary,
186
+ success_sm: $text_lt_success_sm,
184
187
  success_subtle: $success_subtle,
185
188
  warning: $warning,
186
189
  warning_secondary: $warning_secondary,
@@ -202,6 +205,18 @@ $status_colors: (
202
205
 
203
206
  $status_color_text: (
204
207
  success: $success,
208
+ success_sm: $text_lt_success_sm,
209
+ warning: darken($warning, 10%),
210
+ error: $error,
211
+ info: $info,
212
+ neutral: darken($neutral, 15%),
213
+ primary: $primary
214
+ );
215
+
216
+ // as we add more dark text colors we can update this variable
217
+ $status_color_text_dark: (
218
+ success: $success,
219
+ success_sm: $text_dk_success_sm,
205
220
  warning: darken($warning, 10%),
206
221
  error: $error,
207
222
  info: $info,