playbook_ui 12.8.0 → 12.9.1.pre.alpha.PLAY689bugtxtinputlabel346

Sign up to get free protection for your applications and to get access to all the features.
Files changed (28) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +1 -0
  3. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +24 -2
  4. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +24 -2
  5. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +55 -1
  6. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +16 -14
  7. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx +6 -4
  8. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx +8 -6
  9. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.jsx +2 -1
  10. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx +2 -1
  11. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +1 -0
  12. data/app/pb_kits/playbook/pb_progress_step/{_progress_step.jsx → _progress_step.tsx} +15 -7
  13. data/app/pb_kits/playbook/pb_progress_step/{_progress_step_item.jsx → _progress_step_item.tsx} +18 -11
  14. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx +2 -2
  15. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.jsx +1 -1
  16. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker_click_events.jsx +1 -1
  17. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.jsx +2 -2
  18. data/app/pb_kits/playbook/pb_progress_step/progress_step.test.js +109 -0
  19. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +6 -4
  20. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_no_label.html.erb +4 -0
  21. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_no_label.jsx +23 -0
  22. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +2 -0
  23. data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
  24. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.scss +14 -0
  25. data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +7 -1
  26. data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +15 -0
  27. data/lib/playbook/version.rb +2 -2
  28. metadata +13 -9
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: e61686e64326d8bafc8d5026acff177fcd2667833ab25ca2f33f86b6841e1d4f
4
- data.tar.gz: b729d6e415dd1d43c15c95071d7829c34e83174847bc4e43249f878f3c7528f3
3
+ metadata.gz: 969cff053238e0cdd3ab39c8e80aeed6f36e04fc853a18838e5301fc1c0f4fc2
4
+ data.tar.gz: fd281ea5d8c16b9fbe5eb8d9a4d556c8a801510282a309bc29777d6e2fb861f3
5
5
  SHA512:
6
- metadata.gz: b68af3a28e10aeffe6a12b2840d4081181de02f844e221c49e233f26003680bddb3eca5a99b9419346e67e8f3a63563ed1ddb294db6ac4c0cad65d25888fa082
7
- data.tar.gz: 5ec07a544011a23e8987157f8b693d71e64b62ea5a03ec16dc5b4779bab8d66c04c32af75fbba60ed7f0bf8a1a7d54d461971368a779f4b21a531a1dc604cd03
6
+ metadata.gz: b87e2aebe7c5ba530cac6c24e1a3f6ec201a0910e2b1916fe8b2d975837c3137e301f6559a6db539b3c6ded899dbb7226724ea78b3f2f87e1495175ce3b0b098
7
+ data.tar.gz: 885e36256d35b2d99d799af8e8d729efac2ac72386b3700adcaea17a26402490124270b113e6a02b1f0ec3db80187c0f8483cc7dafcee6449f1ae31f5ccb91a0
@@ -90,6 +90,7 @@
90
90
  @import 'pb_title_detail/title_detail';
91
91
  @import 'pb_toggle/toggle';
92
92
  @import 'pb_tooltip/tooltip';
93
+ @import 'pb_treemap_chart/treemap_chart';
93
94
  @import 'pb_typeahead/typeahead';
94
95
  @import 'pb_user/user';
95
96
  @import 'pb_user_badge/user_badge';
@@ -5,6 +5,7 @@ import { ThemeProps } from './themeTypes'
5
5
 
6
6
  import Highcharts from 'highcharts'
7
7
 
8
+ const pbButtonHoverColor = '#004ebb'
8
9
  const highchartsDarkTheme: ThemeProps = {
9
10
  lang: {
10
11
  thousandsSep: ',',
@@ -227,8 +228,29 @@ const highchartsDarkTheme: ThemeProps = {
227
228
  },
228
229
  ],
229
230
  traverseUpButton: {
230
- position: { y: -40 },
231
- }
231
+ position: { y: -50 },
232
+ text: '< Back',
233
+ theme: {
234
+ r: 4,
235
+ states: {
236
+ hover: {
237
+ style: {
238
+ fill: pbButtonHoverColor,
239
+ },
240
+ },
241
+ },
242
+ style: {
243
+ fill: colors.royal,
244
+ color: colors.white,
245
+ fontSize: `${typography.text_small}`,
246
+ fontWeight: typography.bold,
247
+ fontFamily: `${typography.font_family_base}`,
248
+ },
249
+ stroke: colors.royal,
250
+ height: 24,
251
+ width: 90,
252
+ },
253
+ },
232
254
  },
233
255
  },
234
256
  credits: {
@@ -5,6 +5,7 @@ import { ThemeProps } from './themeTypes'
5
5
 
6
6
  import Highcharts from 'highcharts'
7
7
 
8
+ const pbButtonHoverColor = '#004ebb'
8
9
  const highchartsTheme: ThemeProps = {
9
10
  lang: {
10
11
  thousandsSep: ',',
@@ -225,8 +226,29 @@ const highchartsTheme: ThemeProps = {
225
226
  },
226
227
  ],
227
228
  traverseUpButton: {
228
- position: { y: -40 },
229
- }
229
+ position: { y: -50 },
230
+ text: '< Back',
231
+ theme: {
232
+ r: 4,
233
+ states: {
234
+ hover: {
235
+ style: {
236
+ fill: pbButtonHoverColor,
237
+ },
238
+ },
239
+ },
240
+ style: {
241
+ fill: colors.royal,
242
+ color: colors.white,
243
+ fontSize: `${typography.text_small}`,
244
+ fontWeight: typography.bold,
245
+ fontFamily: `${typography.font_family_base}`,
246
+ },
247
+ stroke: colors.royal,
248
+ height: 24,
249
+ width: 90,
250
+ },
251
+ },
230
252
  },
231
253
  },
232
254
  credits: {
@@ -47,7 +47,7 @@ $flag-min-resolution: 192dpi;
47
47
  background-color: $hover_light;
48
48
 
49
49
  .iti__country-name, .iti__dial-code {
50
- color: $primary
50
+ color: $primary;
51
51
  }
52
52
  }
53
53
 
@@ -129,6 +129,60 @@ $flag-min-resolution: 192dpi;
129
129
  .iti__divider {
130
130
  border-bottom: 1px solid $border_light;
131
131
  }
132
+
133
+ &.dark {
134
+ .iti--allow-dropdown .iti__flag-container {
135
+ background-color: rgba($white, 0);
136
+
137
+ &:hover {
138
+ background-color: rgba($white, 0);
139
+
140
+ &+ .text_input {
141
+ background-color: rgba($white, 0.15);
142
+ }
143
+
144
+ .iti__selected-flag {
145
+ background-color: rgba($white, 0);
146
+ }
147
+ }
148
+ }
149
+
150
+ .iti__selected-flag {
151
+ background-color: rgba($white, 0);
152
+ color: $white;
153
+ }
154
+
155
+ .iti__country-list {
156
+ background-color: $bg_dark;
157
+ border: 1px solid $border_dark;
158
+
159
+ .iti__highlight {
160
+ background-color: $hover_dark;
161
+
162
+ .iti__country-name {
163
+ color: $text_dk_default;
164
+ }
165
+
166
+ .iti__dial-code {
167
+ color: $text_lt_lighter;
168
+ }
169
+ }
170
+ }
171
+
172
+ .iti__divider {
173
+ border-bottom: 1px solid $border_dark;
174
+ }
175
+
176
+ .iti__arrow.iti__arrow--up::before {
177
+ color: $slate;
178
+ }
179
+
180
+ .dropdown_open {
181
+ .text_input {
182
+ background-color: rgba($white, 0.025) !important;
183
+ }
184
+ }
185
+ }
132
186
 
133
187
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
134
188
  .iti__flag {
@@ -1,4 +1,3 @@
1
- /* @flow */
2
1
  import React, { useEffect, useRef, useState } from 'react'
3
2
  import classnames from 'classnames'
4
3
  import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -15,19 +14,20 @@ declare global {
15
14
  }
16
15
 
17
16
  type PhoneNumberInputProps = {
18
- aria?: { [key: string]: string }
19
- className?: string
20
- data?: { [key: string]: string }
21
- disabled?: boolean
22
- id?: string
23
- initialCountry?: string
24
- isValid?: (valid: boolean) => void
25
- label?: string
26
- name?: string
27
- onChange?: (e: React.FormEvent<HTMLInputElement>) => void
28
- onlyCountries: string[]
29
- preferredCountries?: string[]
30
- value?: string
17
+ aria?: { [key: string]: string },
18
+ className?: string,
19
+ dark?: boolean,
20
+ data?: { [key: string]: string },
21
+ disabled?: boolean,
22
+ id?: string,
23
+ initialCountry?: string,
24
+ isValid?: (valid: boolean) => void,
25
+ label?: string,
26
+ name?: string,
27
+ onChange?: (e: React.FormEvent<HTMLInputElement>) => void,
28
+ onlyCountries: string[],
29
+ preferredCountries?: string[],
30
+ value?: string,
31
31
  }
32
32
 
33
33
  enum ValidationError {
@@ -58,6 +58,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
58
58
  const {
59
59
  aria = {},
60
60
  className,
61
+ dark = false,
61
62
  data = {},
62
63
  disabled = false,
63
64
  id = "",
@@ -154,6 +155,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
154
155
  <div {...ariaProps} {...dataProps} className={classes}>
155
156
  <TextInput
156
157
  className={dropDownIsOpen ? 'dropdown_open' : ''}
158
+ dark={dark}
157
159
  disabled={disabled}
158
160
  error={error}
159
161
  id={id}
@@ -1,10 +1,12 @@
1
1
  import React from 'react'
2
2
  import { PhoneNumberInput } from '../../'
3
3
 
4
- const PhoneNumberInputDefault = () => (
5
- <>
6
- <PhoneNumberInput id='default' />
7
- </>
4
+ const PhoneNumberInputDefault = (props) => (
5
+ <>
6
+ <PhoneNumberInput
7
+ id='default'
8
+ {...props} />
9
+ </>
8
10
  )
9
11
 
10
12
  export default PhoneNumberInputDefault
@@ -1,12 +1,14 @@
1
1
  import React from 'react'
2
2
  import { PhoneNumberInput } from '../../'
3
3
 
4
- const PhoneNumberInitialCountry = () => (
5
- <>
6
- <PhoneNumberInput id='initial'
7
- initialCountry='br'
8
- />
9
- </>
4
+ const PhoneNumberInitialCountry = (props) => (
5
+ <>
6
+ <PhoneNumberInput
7
+ id='initial'
8
+ initialCountry='br'
9
+ {...props}
10
+ />
11
+ </>
10
12
  )
11
13
 
12
14
  export default PhoneNumberInitialCountry
@@ -1,11 +1,12 @@
1
1
  import React from 'react'
2
2
  import { PhoneNumberInput } from '../../'
3
3
 
4
- const PhoneNumberInputOnlyCountries = () => (
4
+ const PhoneNumberInputOnlyCountries = (props) => (
5
5
  <>
6
6
  <PhoneNumberInput
7
7
  id='only'
8
8
  onlyCountries={['us', 'br']}
9
+ {...props}
9
10
  />
10
11
  </>
11
12
  )
@@ -1,11 +1,12 @@
1
1
  import React from 'react'
2
2
  import { PhoneNumberInput } from '../../'
3
3
 
4
- const PhoneNumberInputPreferredCountries = () => (
4
+ const PhoneNumberInputPreferredCountries = (props) => (
5
5
  <>
6
6
  <PhoneNumberInput
7
7
  id='preferred'
8
8
  preferredCountries={['us', 'br', 'ph', 'gb']}
9
+ {...props}
9
10
  />
10
11
  </>
11
12
  )
@@ -27,6 +27,7 @@ module Playbook
27
27
  def phone_number_input_options
28
28
  {
29
29
  id: id,
30
+ dark: dark,
30
31
  disabled: disabled,
31
32
  initialCountry: initial_country,
32
33
  isValid: is_valid,
@@ -1,15 +1,14 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import classnames from 'classnames'
5
- import { buildCss } from '../utilities/props'
3
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
6
4
  import { globalProps } from '../utilities/globalProps'
7
5
 
8
6
  type ProgressStepProps = {
7
+ aria?: { [key: string]: string },
9
8
  className?: string,
10
- data?: string,
9
+ data?: { [key: string]: string },
11
10
  id?: string,
12
- children?: array<React.ReactChild>,
11
+ children?: React.ReactChild[] | React.ReactChild,
13
12
  orientation?: "horizontal" | "vertical",
14
13
  icon?: boolean,
15
14
  showIcon?: boolean,
@@ -17,16 +16,21 @@ type ProgressStepProps = {
17
16
  color?: string,
18
17
  }
19
18
 
20
- const ProgressStep = (props: ProgressStepProps) => {
19
+ const ProgressStep = (props: ProgressStepProps): React.ReactElement => {
21
20
  const {
21
+ aria = {},
22
22
  className,
23
23
  children,
24
24
  color,
25
+ data = {},
25
26
  orientation = 'horizontal',
26
27
  icon = false,
27
28
  showIcon = false,
28
29
  variant,
29
30
  } = props
31
+
32
+ const ariaProps = buildAriaProps(aria)
33
+ const dataProps = buildDataProps(data)
30
34
  const iconStyle = icon === true || showIcon === true ? 'icon' : ''
31
35
  const progressStepCss = buildCss(
32
36
  'pb_progress_step_kit',
@@ -37,7 +41,11 @@ const ProgressStep = (props: ProgressStepProps) => {
37
41
  )
38
42
 
39
43
  return (
40
- <ul className={classnames(progressStepCss, globalProps(props), className)}>
44
+ <ul
45
+ {...ariaProps}
46
+ {...dataProps}
47
+ className={classnames(progressStepCss, globalProps(props), className)}
48
+ >
41
49
  {children}
42
50
  </ul>
43
51
  )
@@ -1,29 +1,35 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import classnames from 'classnames'
5
3
 
6
- import { buildCss } from '../utilities/props'
4
+ import { buildCss, buildDataProps } from '../utilities/props'
7
5
 
8
6
  import Icon from '../pb_icon/_icon'
9
7
 
10
8
  type ProgressStepItemProps = {
11
9
  className?: string,
10
+ data?: { [key: string]: string },
12
11
  status?: "complete" | "active" | "inactive" | "hidden",
13
- children?: React.Node,
12
+ children?: React.ReactNode | React.ReactNode[],
14
13
  icon?: string,
15
14
  }
16
15
 
17
- const ProgressStepItem = ({
18
- className,
19
- status = 'inactive',
20
- children,
21
- icon = 'check',
22
- }: ProgressStepItemProps) => {
16
+ const ProgressStepItem = (props: ProgressStepItemProps): React.ReactElement => {
17
+ const {
18
+ className,
19
+ data = {},
20
+ status = 'inactive',
21
+ children,
22
+ icon = 'check',
23
+ } = props
24
+
23
25
  const progressStepItem = buildCss('pb_progress_step_item', status)
26
+ const dataProps = buildDataProps(data)
24
27
 
25
28
  return (
26
- <li className={classnames(progressStepItem, className)}>
29
+ <li
30
+ {...dataProps}
31
+ className={classnames(progressStepItem, className)}
32
+ >
27
33
  <div className="box">
28
34
  <div className="circle">
29
35
  <Icon icon={icon} />
@@ -33,4 +39,5 @@ const ProgressStepItem = ({
33
39
  </li>
34
40
  )
35
41
  }
42
+
36
43
  export default ProgressStepItem
@@ -1,7 +1,7 @@
1
1
  import React from 'react'
2
2
 
3
- import ProgressStep from '../_progress_step.jsx'
4
- import ProgressStepItem from '../_progress_step_item.jsx'
3
+ import ProgressStep from '../_progress_step.tsx'
4
+ import ProgressStepItem from '../_progress_step_item.tsx'
5
5
 
6
6
  const ProgressStepDefault = (props) => (
7
7
  <div>
@@ -1,6 +1,6 @@
1
1
  import React from 'react'
2
2
 
3
- import ProgressStep from '../_progress_step.jsx'
3
+ import ProgressStep from '../_progress_step.tsx'
4
4
  import ProgressStepItem from '../_progress_step_item'
5
5
 
6
6
  import Caption from '../../pb_caption/_caption'
@@ -1,6 +1,6 @@
1
1
  import React, { useState } from 'react'
2
2
 
3
- import ProgressStep from '../_progress_step.jsx'
3
+ import ProgressStep from '../_progress_step.tsx'
4
4
  import ProgressStepItem from '../_progress_step_item'
5
5
 
6
6
  import Caption from '../../pb_caption/_caption'
@@ -1,7 +1,7 @@
1
1
  import React from 'react'
2
2
 
3
- import ProgressStep from '../_progress_step.jsx'
4
- import ProgressStepItem from '../_progress_step_item.jsx'
3
+ import ProgressStep from '../_progress_step.tsx'
4
+ import ProgressStepItem from '../_progress_step_item.tsx'
5
5
 
6
6
  const ProgressStepVertical = (props) => (
7
7
  <div>
@@ -0,0 +1,109 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../utilities/test-utils'
3
+
4
+ import ProgressStep from './_progress_step.tsx'
5
+ import ProgressStepItem from './_progress_step_item.tsx'
6
+
7
+ const testId = 'progressStepId'
8
+ const step1Id = 'step1Id'
9
+ const step2Id = 'step2Id'
10
+ const step3Id = 'step3Id'
11
+
12
+ const ProgressStepTest = () => {
13
+ return (
14
+ <>
15
+ <ProgressStep
16
+ aria={{ label: testId }}
17
+ className={'custom-class'}
18
+ data={{ testid: testId }}
19
+ >
20
+ <ProgressStepItem
21
+ data={{ testid: step1Id }}
22
+ status="complete"
23
+ >
24
+ {'Step 1'}
25
+ </ProgressStepItem>
26
+ <ProgressStepItem
27
+ data={{ testid: step2Id }}
28
+ status="active"
29
+ >
30
+ {'Step 2'}
31
+ </ProgressStepItem>
32
+ <ProgressStepItem
33
+ data={{ testid: step3Id }}
34
+ status="inactive"
35
+ >
36
+ {'Step 3'}
37
+ </ProgressStepItem>
38
+ </ProgressStep>
39
+ </>
40
+ )
41
+ }
42
+
43
+ test('should render custom class and data', () => {
44
+ render(<ProgressStepTest/>)
45
+
46
+ const kit = screen.getByTestId(testId)
47
+ expect(kit).toHaveClass('custom-class')
48
+ })
49
+
50
+ test('should render aria-label', () => {
51
+ render(<ProgressStepTest />)
52
+
53
+ const kit = screen.getByTestId(testId)
54
+ expect(kit).toHaveAttribute('aria-label', testId)
55
+ })
56
+
57
+ test('should render the horizontal variant', () => {
58
+ render(<ProgressStepTest />)
59
+
60
+ const kit = screen.getByTestId(testId)
61
+ expect(kit).toHaveClass('pb_progress_step_kit_horizontal')
62
+ })
63
+
64
+ test('should render the vertical variant', () => {
65
+ render(
66
+ <ProgressStep
67
+ aria={{ label: testId }}
68
+ data={{ testid: testId }}
69
+ orientation="vertical"
70
+ >
71
+ <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
72
+ <ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
73
+ <ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
74
+ </ProgressStep>
75
+ )
76
+
77
+ const kit = screen.getByTestId(testId)
78
+ expect(kit).toHaveClass('pb_progress_step_kit_vertical')
79
+ })
80
+
81
+ test('should render the tracker variant', () => {
82
+ render(
83
+ <ProgressStep
84
+ aria={{ label: testId }}
85
+ data={{ testid: testId }}
86
+ variant="tracker"
87
+ >
88
+ <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
89
+ <ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
90
+ <ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
91
+ </ProgressStep>
92
+ )
93
+
94
+ const kit = screen.getByTestId(testId)
95
+ expect(kit).toHaveClass('pb_progress_step_kit_horizontal_tracker')
96
+ })
97
+
98
+
99
+ test('should render the children elements', () => {
100
+ render(<ProgressStepTest />)
101
+
102
+ const step1Kit = screen.getByTestId(step1Id)
103
+ const step2Kit = screen.getByTestId(step2Id)
104
+ const step3Kit = screen.getByTestId(step3Id)
105
+
106
+ expect(step1Kit).toHaveClass('pb_progress_step_item_complete')
107
+ expect(step2Kit).toHaveClass('pb_progress_step_item_active')
108
+ expect(step3Kit).toHaveClass('pb_progress_step_item_inactive')
109
+ })
@@ -140,10 +140,12 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
140
140
  {...dataProps}
141
141
  className={css}
142
142
  >
143
- <Caption
144
- className="pb_text_input_kit_label"
145
- text={label}
146
- />
143
+ {label &&
144
+ <Caption
145
+ className="pb_text_input_kit_label"
146
+ text={label}
147
+ />
148
+ }
147
149
  <div className={`${addOnCss} text_input_wrapper`}>
148
150
  {render}
149
151
 
@@ -0,0 +1,4 @@
1
+ <%= pb_rails("text_input", props: {
2
+ placeholder: "Enter email address",
3
+ type: "email"
4
+ }) %>
@@ -0,0 +1,23 @@
1
+ import React, { useState } from 'react'
2
+
3
+ import TextInput from '../_text_input'
4
+
5
+ const TextInputNoLabel = (props) => {
6
+ const [email, setEmail] = useState('')
7
+
8
+ const handleUpdateEmail = ({ target }) => {
9
+ setEmail(target.value)
10
+ }
11
+ return (
12
+ <div>
13
+ <TextInput
14
+ onChange={handleUpdateEmail}
15
+ placeholder="Enter email address"
16
+ type="email"
17
+ value={email}
18
+ {...props}
19
+ />
20
+ </div>
21
+ )
22
+ }
23
+ export default TextInputNoLabel
@@ -6,6 +6,7 @@ examples:
6
6
  - text_input_disabled: Disabled
7
7
  - text_input_add_on: Add On
8
8
  - text_input_inline: Inline
9
+ - text_input_no_label: No Label
9
10
  react:
10
11
  - text_input_default: Default
11
12
  - text_input_error: With Error
@@ -13,3 +14,4 @@ examples:
13
14
  - text_input_disabled: Disabled
14
15
  - text_input_add_on: Add On
15
16
  - text_input_inline: Inline
17
+ - text_input_no_label: No Label
@@ -4,3 +4,4 @@ export { default as TextInputError } from './_text_input_error.jsx'
4
4
  export { default as TextInputDisabled } from './_text_input_disabled.jsx'
5
5
  export { default as TextInputAddOn } from './_text_input_add_on.jsx'
6
6
  export { default as TextInputInline } from './_text_input_inline.jsx'
7
+ export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
@@ -0,0 +1,14 @@
1
+ .pb_treemap_chart {
2
+ .highcharts-drillup-button {
3
+ .highcharts-button-box {
4
+ fill: $primary;
5
+ &:hover {
6
+ fill: #004ebb;
7
+ }
8
+ }
9
+ text {
10
+ transform: translateX(25px);
11
+ fill: $white;
12
+ }
13
+ }
14
+ }
@@ -29,6 +29,7 @@ import { noop, buildDataProps } from '../utilities/props'
29
29
 
30
30
  type TypeaheadProps = {
31
31
  async?: boolean,
32
+ className?: string,
32
33
  components?: object,
33
34
  createable?: boolean,
34
35
  dark?: boolean,
@@ -49,6 +50,7 @@ type TypeaheadProps = {
49
50
 
50
51
  const Typeahead = ({
51
52
  async,
53
+ className,
52
54
  components = {},
53
55
  createable,
54
56
  error = "",
@@ -111,8 +113,12 @@ const Typeahead = ({
111
113
  }
112
114
 
113
115
  const dataProps = buildDataProps(data)
116
+ const classes = classnames(
117
+ 'pb_typeahead_kit react-select',
118
+ globalProps(props),
119
+ className
120
+ )
114
121
 
115
- const classes = `pb_typeahead_kit react-select ${globalProps(props)}`
116
122
  const inlineClass = selectProps.inline ? 'inline' : null
117
123
 
118
124
  return (
@@ -93,3 +93,18 @@ test('typeahead multi select with badges and small pills', () => {
93
93
  expect(badge).toBeInTheDocument()
94
94
  })
95
95
 
96
+ test('should pass className prop', () => {
97
+ const className = 'custom-class-name'
98
+ render(
99
+ <Typeahead
100
+ className={className}
101
+ data={{ testid: 'typeahead-test' }}
102
+ defaultValue={[options[0]]}
103
+ label="Colors"
104
+ options={options}
105
+ />
106
+ )
107
+
108
+ const kit = screen.getByTestId('typeahead-test')
109
+ expect(kit).toHaveClass(className)
110
+ })
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "12.7.1"
5
- VERSION = "12.8.0"
4
+ PREVIOUS_VERSION = "12.9.1"
5
+ VERSION = "12.9.1.pre.alpha.PLAY689bugtxtinputlabel346"
6
6
  end
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.8.0
4
+ version: 12.9.1.pre.alpha.PLAY689bugtxtinputlabel346
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-03-14 00:00:00.000000000 Z
12
+ date: 2023-03-21 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -1666,9 +1666,9 @@ files:
1666
1666
  - app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb
1667
1667
  - app/pb_kits/playbook/pb_progress_simple/progress_simple.rb
1668
1668
  - app/pb_kits/playbook/pb_progress_simple/progress_simple.test.js
1669
- - app/pb_kits/playbook/pb_progress_step/_progress_step.jsx
1670
1669
  - app/pb_kits/playbook/pb_progress_step/_progress_step.scss
1671
- - app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx
1670
+ - app/pb_kits/playbook/pb_progress_step/_progress_step.tsx
1671
+ - app/pb_kits/playbook/pb_progress_step/_progress_step_item.tsx
1672
1672
  - app/pb_kits/playbook/pb_progress_step/docs/_description.md
1673
1673
  - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.html.erb
1674
1674
  - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb
@@ -1683,6 +1683,7 @@ files:
1683
1683
  - app/pb_kits/playbook/pb_progress_step/docs/index.js
1684
1684
  - app/pb_kits/playbook/pb_progress_step/progress_step.html.erb
1685
1685
  - app/pb_kits/playbook/pb_progress_step/progress_step.rb
1686
+ - app/pb_kits/playbook/pb_progress_step/progress_step.test.js
1686
1687
  - app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb
1687
1688
  - app/pb_kits/playbook/pb_progress_step/progress_step_item.rb
1688
1689
  - app/pb_kits/playbook/pb_radio/_radio.scss
@@ -1999,6 +2000,8 @@ files:
1999
2000
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_error.md
2000
2001
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.html.erb
2001
2002
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.jsx
2003
+ - app/pb_kits/playbook/pb_text_input/docs/_text_input_no_label.html.erb
2004
+ - app/pb_kits/playbook/pb_text_input/docs/_text_input_no_label.jsx
2002
2005
  - app/pb_kits/playbook/pb_text_input/docs/example.yml
2003
2006
  - app/pb_kits/playbook/pb_text_input/docs/index.js
2004
2007
  - app/pb_kits/playbook/pb_text_input/text_input.html.erb
@@ -2186,6 +2189,7 @@ files:
2186
2189
  - app/pb_kits/playbook/pb_tooltip/tooltip.html.erb
2187
2190
  - app/pb_kits/playbook/pb_tooltip/tooltip.rb
2188
2191
  - app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx
2192
+ - app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.scss
2189
2193
  - app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx
2190
2194
  - app/pb_kits/playbook/pb_treemap_chart/docs/_description.md
2191
2195
  - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb
@@ -2443,7 +2447,7 @@ homepage: http://playbook.powerapp.cloud
2443
2447
  licenses:
2444
2448
  - ISC
2445
2449
  metadata: {}
2446
- post_install_message:
2450
+ post_install_message:
2447
2451
  rdoc_options: []
2448
2452
  require_paths:
2449
2453
  - lib
@@ -2454,12 +2458,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
2454
2458
  version: '0'
2455
2459
  required_rubygems_version: !ruby/object:Gem::Requirement
2456
2460
  requirements:
2457
- - - ">="
2461
+ - - ">"
2458
2462
  - !ruby/object:Gem::Version
2459
- version: '0'
2463
+ version: 1.3.1
2460
2464
  requirements: []
2461
2465
  rubygems_version: 3.3.7
2462
- signing_key:
2466
+ signing_key:
2463
2467
  specification_version: 4
2464
2468
  summary: Playbook Design System
2465
2469
  test_files: []