playbook_ui 14.4.0.pre.alpha.PBNTR550typeaheadformpilltruncate3895 → 14.4.0.pre.alpha.PLAY1486highchartscssdrivenPOC3921

Sign up to get free protection for your applications and to get access to all the features.
Files changed (66) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +1 -1
  4. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.scss +25 -0
  5. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +5 -184
  6. data/app/pb_kits/playbook/pb_bar_graph/barGraph.test.js +1 -1
  7. data/app/pb_kits/playbook/pb_button/_button.tsx +6 -2
  8. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +5 -216
  9. data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js +1 -1
  10. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +2 -6
  11. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +2 -7
  12. data/app/pb_kits/playbook/pb_drawer/_close_icon.tsx +25 -0
  13. data/app/pb_kits/playbook/pb_drawer/_drawer.scss +465 -0
  14. data/app/pb_kits/playbook/pb_drawer/_drawer.tsx +195 -0
  15. data/app/pb_kits/playbook/pb_drawer/_drawer_context.tsx +3 -0
  16. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx +117 -0
  17. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx +43 -0
  18. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb +1 -0
  19. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx +63 -0
  20. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx +55 -0
  21. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx +113 -0
  22. data/app/pb_kits/playbook/pb_drawer/docs/example.yml +12 -0
  23. data/app/pb_kits/playbook/pb_drawer/docs/index.js +5 -0
  24. data/app/pb_kits/playbook/pb_drawer/drawer.html.erb +12 -0
  25. data/app/pb_kits/playbook/pb_drawer/drawer.rb +8 -0
  26. data/app/pb_kits/playbook/pb_drawer/drawer.test.jsx +77 -0
  27. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +10 -2
  28. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.html.erb +5 -1
  29. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.html.erb +5 -1
  30. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb +5 -1
  31. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb +5 -1
  32. data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb +5 -1
  33. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +5 -1
  34. data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb +5 -1
  35. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +1 -9
  36. data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx +3 -64
  37. data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +5 -203
  38. data/app/pb_kits/playbook/pb_gauge/gauge.test.js +1 -1
  39. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +5 -154
  40. data/app/pb_kits/playbook/pb_line_graph/lineGraph.test.js +1 -1
  41. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb +14 -13
  42. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx +4 -4
  43. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb +2 -0
  44. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx +5 -2
  45. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +17 -13
  46. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +5 -113
  47. data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js +1 -1
  48. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +1 -4
  49. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +1 -3
  50. data/app/pb_kits/playbook/utilities/icons/allicons.tsx +13 -13
  51. data/dist/chunks/_typeahead-BywvWGAm.js +22 -0
  52. data/dist/chunks/_weekday_stacked-5OGZKZeo.js +45 -0
  53. data/dist/chunks/lib-DMOmCoAX.js +29 -0
  54. data/dist/chunks/{pb_form_validation-D9zkwt2b.js → pb_form_validation-Dna2I7fw.js} +1 -1
  55. data/dist/chunks/vendor.js +1 -1
  56. data/dist/menu.yml +3 -1
  57. data/dist/playbook-doc.js +1 -1
  58. data/dist/playbook-rails-react-bindings.js +1 -1
  59. data/dist/playbook-rails.js +1 -1
  60. data/dist/playbook.css +1 -1
  61. data/lib/playbook/pagination_renderer.rb +10 -2
  62. data/lib/playbook/version.rb +1 -1
  63. metadata +21 -6
  64. data/dist/chunks/_typeahead-Ctc4yCCN.js +0 -22
  65. data/dist/chunks/_weekday_stacked-B4Xs5p_U.js +0 -45
  66. data/dist/chunks/lib-CEpcaI8y.js +0 -29
@@ -47,13 +47,9 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
47
47
 
48
48
  const iconClass = icon ? "_icon" : ""
49
49
  const closeIconSize = size === "small" ? "xs" : "sm"
50
-
51
- const filteredProps: FormPillProps = {...props}
52
- delete filteredProps.truncate
53
-
54
50
  const css = classnames(
55
51
  `pb_form_pill_kit_${color}${iconClass}`,
56
- globalProps(filteredProps),
52
+ globalProps(props),
57
53
  className,
58
54
  size === 'small' ? 'small' : null,
59
55
  textTransform,
@@ -81,7 +77,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
81
77
  className="pb_form_pill_text"
82
78
  size={4}
83
79
  text={name}
84
- truncate={props.truncate}
85
80
  />
86
81
  </>
87
82
  )}
@@ -97,7 +92,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
97
92
  className="pb_form_pill_text"
98
93
  size={4}
99
94
  text={name}
100
- truncate={props.truncate}
101
95
  />
102
96
  <Icon
103
97
  className="pb_form_pill_icon"
@@ -117,7 +111,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
117
111
  className="pb_form_pill_tag"
118
112
  size={4}
119
113
  text={text}
120
- truncate={props.truncate}
121
114
  />
122
115
  </>
123
116
  )}
@@ -126,7 +119,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
126
119
  className="pb_form_pill_tag"
127
120
  size={4}
128
121
  text={text}
129
- truncate={props.truncate}
130
122
  />
131
123
  )}
132
124
  <div
@@ -1,70 +1,9 @@
1
- import React, { useState, useEffect } from "react";
2
- import classnames from "classnames";
3
- import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
4
- import { globalProps } from "../utilities/globalProps";
5
- import HighchartsReact from "highcharts-react-official";
6
- import Highcharts from "highcharts/highcharts-gantt";
7
-
8
- import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
9
- import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
10
-
11
- type GanttChartProps = {
12
- aria?: { [key: string]: string };
13
- className?: string;
14
- customOptions: Partial<Highcharts.Options>;
15
- dark?: boolean;
16
- data?: { [key: string]: string };
17
- htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
18
- id?: string;
19
- };
20
-
21
- const GanttChart = (props: GanttChartProps) => {
22
- const {
23
- aria = {},
24
- className,
25
- customOptions = {},
26
- dark = false,
27
- data = {},
28
- htmlOptions = {},
29
- id,
30
- } = props;
31
-
32
- const ariaProps = buildAriaProps(aria);
33
- const dataProps = buildDataProps(data);
34
- const htmlProps = buildHtmlProps(htmlOptions);
35
- const classes = classnames(
36
- buildCss("pb_gantt_chart"),
37
- globalProps(props),
38
- className
39
- );
40
-
41
- const [options, setOptions] = useState<Highcharts.Options | undefined>(customOptions);
42
-
43
- useEffect(() => {
44
- setOptions(customOptions);
45
- }, [customOptions]);
46
-
47
- const setupTheme = () => {
48
- dark
49
- ? Highcharts.setOptions(highchartsDarkTheme)
50
- : Highcharts.setOptions(highchartsTheme);
51
- };
52
- setupTheme();
1
+ import React from 'react';
53
2
 
3
+ const GanttChart: React.FC = () => {
54
4
  return (
55
5
  <div>
56
- <HighchartsReact
57
- constructorType={"ganttChart"}
58
- containerProps={{
59
- className: classnames(globalProps(props), classes),
60
- id: id,
61
- ...ariaProps,
62
- ...dataProps,
63
- ...htmlProps,
64
- }}
65
- highcharts={Highcharts}
66
- options={options}
67
- />
6
+ This is a simple div component.
68
7
  </div>
69
8
  );
70
9
  };
@@ -1,208 +1,10 @@
1
- import React, { useState, useEffect } from "react";
2
- import classnames from "classnames";
3
- import HighchartsReact from "highcharts-react-official";
4
- import Highcharts from "highcharts";
5
- import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
6
- import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
7
- import mapColors from "../pb_dashboard/pbChartsColorsHelper";
8
- import highchartsMore from "highcharts/highcharts-more";
9
- import solidGauge from "highcharts/modules/solid-gauge";
10
- import defaultColors from "../tokens/exports/_colors.module.scss";
11
- import typography from "../tokens/exports/_typography.module.scss";
12
-
13
- import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
14
- import { globalProps } from "../utilities/globalProps";
15
- import { GenericObject } from "../types";
16
- import { merge } from 'lodash'
17
-
18
- type GaugeProps = {
19
- aria: { [key: string]: string };
20
- className?: string;
21
- chartData?: { name: string; value: number[] | number }[];
22
- customOptions?: Partial<Highcharts.Options>;
23
- dark?: boolean;
24
- data?: { [key: string]: string };
25
- disableAnimation?: boolean;
26
- fullCircle?: boolean;
27
- height?: string;
28
- htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
29
- id?: string;
30
- max?: number;
31
- min?: number;
32
- prefix?: string;
33
- showLabels?: boolean;
34
- style?: string;
35
- suffix?: string;
36
- title?: string;
37
- tooltipHtml?: string;
38
- colors: string[];
39
- minorTickInterval?: number;
40
- circumference: number[];
41
- };
42
-
43
- const Gauge = ({
44
- aria = {},
45
- chartData,
46
- customOptions = {},
47
- dark = false,
48
- data = {},
49
- disableAnimation = false,
50
- fullCircle = false,
51
- height = null,
52
- htmlOptions = {},
53
- id,
54
- max = 100,
55
- min = 0,
56
- prefix = "",
57
- showLabels = false,
58
- style = "solidgauge",
59
- suffix = "",
60
- title = "",
61
- tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
62
- "<b>{point.y}</b>",
63
- colors = [],
64
- minorTickInterval = null,
65
- circumference = fullCircle ? [0, 360] : [-100, 100],
66
- ...props
67
- }: GaugeProps): React.ReactElement => {
68
- const ariaProps = buildAriaProps(aria);
69
- const dataProps = buildDataProps(data)
70
- const htmlProps = buildHtmlProps(htmlOptions);
71
- highchartsMore(Highcharts);
72
- solidGauge(Highcharts);
73
- const setupTheme = () => {
74
- dark
75
- ? Highcharts.setOptions(highchartsDarkTheme)
76
- : Highcharts.setOptions(highchartsTheme);
77
- };
78
- setupTheme();
79
-
80
- //set tooltip directly to prevent being overriden by Highcharts defaults
81
- Highcharts.setOptions({
82
- tooltip: {
83
- pointFormat: tooltipHtml,
84
- followPointer: true,
85
- },
86
- });
87
-
88
- const css = buildCss({
89
- pb_gauge_kit: true,
90
- });
91
-
92
- const [options, setOptions] = useState({});
93
-
94
- useEffect(() => {
95
- const formattedChartData = chartData.map((obj: GenericObject) => {
96
- obj.y = obj.value;
97
- delete obj.value;
98
- return obj;
99
- });
100
-
101
- const staticOptions = {
102
- chart: {
103
- events: {
104
- load() {
105
- setTimeout(this.reflow.bind(this), 0);
106
- },
107
- },
108
- type: style,
109
- height: height,
110
- },
111
- title: {
112
- text: title,
113
- },
114
- yAxis: {
115
- min: min,
116
- max: max,
117
- lineWidth: 0,
118
- tickWidth: 0,
119
- minorTickInterval: minorTickInterval,
120
- tickAmount: 2,
121
- tickPositions: [min, max],
122
- labels: {
123
- y: 26,
124
- enabled: showLabels,
125
- },
126
- },
127
- credits: false,
128
- series: [
129
- {
130
- data: formattedChartData,
131
- },
132
- ],
133
- pane: {
134
- center: ["50%", "50%"],
135
- size: "90%",
136
- startAngle: circumference[0],
137
- endAngle: circumference[1],
138
- background: {
139
- borderWidth: 20,
140
- innerRadius: "90%",
141
- outerRadius: "90%",
142
- shape: "arc",
143
- className: "gauge-pane",
144
- },
145
- },
146
- colors:
147
- colors !== undefined && colors.length > 0
148
- ? mapColors(colors)
149
- : highchartsTheme.colors,
150
- plotOptions: {
151
- series: {
152
- animation: !disableAnimation,
153
- },
154
- solidgauge: {
155
- borderColor:
156
- colors !== undefined && colors.length === 1
157
- ? mapColors(colors).join()
158
- : highchartsTheme.colors[0],
159
- borderWidth: 20,
160
- radius: 90,
161
- innerRadius: "90%",
162
- dataLabels: {
163
- borderWidth: 0,
164
- color: defaultColors.text_lt_default,
165
- enabled: true,
166
- format:
167
- `<span class="prefix">${prefix}</span>` +
168
- '<span class="fix">{y:,f}</span>' +
169
- `<span class="suffix">${suffix}</span>`,
170
- style: {
171
- fontFamily: typography.font_family_base,
172
- fontWeight: typography.regular,
173
- fontSize: typography.heading_2,
174
- },
175
- y: -26,
176
- },
177
- },
178
- },
179
- };
180
-
181
- setOptions(merge(staticOptions, customOptions));
182
-
183
- if (document.querySelector(".prefix")) {
184
- document.querySelectorAll(".prefix").forEach((prefix) => {
185
- prefix.setAttribute("y", "28");
186
- });
187
- document
188
- .querySelectorAll(".fix")
189
- .forEach((fix) => fix.setAttribute("y", "38"));
190
- }
191
- // eslint-disable-next-line react-hooks/exhaustive-deps
192
- }, [chartData]);
1
+ import React from 'react';
193
2
 
3
+ const Gauge: React.FC = () => {
194
4
  return (
195
- <HighchartsReact
196
- containerProps={{
197
- className: classnames(css, globalProps(props)),
198
- id: id,
199
- ...ariaProps,
200
- ...dataProps,
201
- ...htmlProps,
202
- }}
203
- highcharts={Highcharts}
204
- options={options}
205
- />
5
+ <div>
6
+ This is a simple div component.
7
+ </div>
206
8
  );
207
9
  };
208
10
 
@@ -17,7 +17,7 @@ afterEach(() => {
17
17
 
18
18
  const testId = 'gauge1';
19
19
 
20
- test('uses exact classname', () => {
20
+ test.skip('uses exact classname', () => {
21
21
  const data = [
22
22
  { name: 'Name', value: 45 },
23
23
  ]
@@ -1,159 +1,10 @@
1
- import React, { useState, useEffect } from "react";
2
- import classnames from "classnames";
3
- import { globalProps } from "../utilities/globalProps";
4
- import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
5
-
6
- import HighchartsReact from "highcharts-react-official";
7
- import Highcharts from "highcharts";
8
- import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
9
- import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
10
- import mapColors from "../pb_dashboard/pbChartsColorsHelper";
11
- import { merge } from 'lodash'
12
-
13
- type LineGraphProps = {
14
- align?: "left" | "right" | "center";
15
- axisTitle?: string;
16
- dark?: boolean;
17
- xAxisCategories: [];
18
- yAxisMin: number;
19
- yAxisMax: number;
20
- className?: string;
21
- chartData: {
22
- name: string;
23
- data: number[];
24
- }[];
25
- customOptions?: Partial<Highcharts.Options>;
26
- gradient?: boolean;
27
- htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
28
- id: string;
29
- pointStart: number;
30
- subTitle?: string;
31
- title: string;
32
- type?: string;
33
- legend?: boolean;
34
- toggleLegendClick?: boolean;
35
- height?: string;
36
- colors: string[];
37
- layout?: "horizontal" | "vertical" | "proximate";
38
- verticalAlign?: "top" | "middle" | "bottom";
39
- x?: number;
40
- y?: number;
41
- aria?: { [key: string]: string };
42
- data?: { [key: string]: string };
43
- };
44
-
45
- const LineGraph = ({
46
- aria = {},
47
- data = {},
48
- align = "center",
49
- className = "pb_bar_graph",
50
- customOptions = {},
51
- dark = false,
52
- gradient = false,
53
- type = "line",
54
- htmlOptions = {},
55
- id,
56
- legend = false,
57
- toggleLegendClick = true,
58
- layout = "horizontal",
59
- verticalAlign = "bottom",
60
- x = 0,
61
- y = 0,
62
- axisTitle,
63
- xAxisCategories,
64
- yAxisMin,
65
- yAxisMax,
66
- chartData,
67
- pointStart,
68
- subTitle,
69
- title,
70
- height,
71
- colors = [],
72
- ...props
73
- }: LineGraphProps) => {
74
-
75
- const ariaProps = buildAriaProps(aria)
76
- const dataProps = buildDataProps(data)
77
- const htmlProps = buildHtmlProps(htmlOptions)
78
-
79
- const setupTheme = () => {
80
- dark
81
- ? Highcharts.setOptions(highchartsDarkTheme)
82
- : Highcharts.setOptions(highchartsTheme);
83
- };
84
- setupTheme();
85
-
86
- const staticOptions = {
87
- title: {
88
- text: title,
89
- },
90
- chart: {
91
- height: height,
92
- type: type,
93
- },
94
- subtitle: {
95
- text: subTitle,
96
- },
97
- yAxis: {
98
- min: yAxisMin,
99
- max: yAxisMax,
100
- title: {
101
- text: axisTitle,
102
- },
103
- },
104
- xAxis: {
105
- categories: xAxisCategories,
106
- },
107
- legend: {
108
- enabled: legend,
109
- align: align,
110
- verticalAlign: verticalAlign,
111
- layout: layout,
112
- x: x,
113
- y: y,
114
- },
115
- colors:
116
- colors !== undefined && colors.length > 0
117
- ? mapColors(colors)
118
- : highchartsTheme.colors,
119
- plotOptions: {
120
- series: {
121
- pointStart: pointStart,
122
- events: {},
123
- dataLabels: {
124
- enabled: false,
125
- },
126
- },
127
- },
128
- series: chartData,
129
- credits: false,
130
- };
131
-
132
- if (!toggleLegendClick) {
133
- staticOptions.plotOptions.series.events = { legendItemClick: () => false };
134
- }
135
-
136
- const filteredProps: any = {...props};
137
- delete filteredProps.verticalAlign;
138
-
139
- const [options, setOptions] = useState({});
140
-
141
- useEffect(() => {
142
- setOptions(merge(staticOptions, customOptions));
143
- }, [chartData]);
1
+ import React from 'react';
144
2
 
3
+ const LineGraph: React.FC = () => {
145
4
  return (
146
- <HighchartsReact
147
- containerProps={{
148
- className: classnames(globalProps(filteredProps), className),
149
- id: id,
150
- ...ariaProps,
151
- ...dataProps,
152
- ...htmlProps
153
- }}
154
- highcharts={Highcharts}
155
- options={options}
156
- />
5
+ <div>
6
+ This is a simple div component.
7
+ </div>
157
8
  );
158
9
  };
159
10
 
@@ -17,7 +17,7 @@ afterEach(() => {
17
17
 
18
18
  const testId = 'linechart1';
19
19
 
20
- test('uses exact classname', () => {
20
+ test.skip('uses exact classname', () => {
21
21
  const data = [{
22
22
  name: 'Installation',
23
23
  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
@@ -1,8 +1,10 @@
1
1
  <%= pb_rails("button", props: { variant: "secondary", id: 'list' }) do %>
2
2
  <%= pb_rails("flex", props: {align: "center"}) do %>
3
- Filter By
3
+ Filter By
4
4
  <%= pb_rails("flex/flex_item", props: {margin_left: "xxs"}) do %>
5
- <div id="arrow-icon" style="display: flex"></div>
5
+ <div id="arrow-icon" style="display: flex">
6
+ <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true }) %>
7
+ </div>
6
8
  <% end %>
7
9
  <% end %>
8
10
  <% end %>
@@ -18,18 +20,17 @@
18
20
 
19
21
 
20
22
  <script type="text/javascript">
21
- const button = document.querySelector("#list")
22
- let buttonClicked = false
23
+ const popoverButton = document.querySelector("#list")
24
+ let buttonClicked = false
23
25
 
24
- const arrowDiv = document.querySelector("#arrow-icon")
25
- arrowDiv.innerHTML = '<i class="far fa-angle-down"></i>'
26
+ const arrowDiv = document.querySelector("#arrow-icon")
26
27
 
27
- button.onclick = () => {
28
- buttonClicked = !buttonClicked
29
- if (buttonClicked) {
30
- arrowDiv.innerHTML = '<i class="far fa-angle-up"></i>'
31
- } else {
32
- arrowDiv.innerHTML = '<i class="far fa-angle-down"></i>'
28
+ popoverButton.onclick = () => {
29
+ buttonClicked = !buttonClicked
30
+ if (buttonClicked) {
31
+ arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 31 25" fill="none" class="pb_custom_icon svg-inline--fa pb_icon_kit svg_fw" id="" data="{}" aria="{}" tabindex=""><path d="M14.2031 5.70312C14.625 5.28125 15.3281 5.28125 15.75 5.70312L24.7969 14.7031C25.2188 15.1719 25.2188 15.875 24.7969 16.2969C24.3281 16.7656 23.625 16.7656 23.2031 16.2969L15 8.09375L6.79688 16.2969C6.32812 16.7656 5.625 16.7656 5.20312 16.2969C4.73438 15.875 4.73438 15.1719 5.20312 14.75L14.2031 5.70312Z" fill="currentColor"/></svg>'
32
+ } else {
33
+ arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 31 25" fill="none" class="pb_custom_icon svg-inline--fa pb_icon_kit svg_fw" id="" data="{}" aria="{}" tabindex=""><path d="M14.2031 19.2969L5.20312 10.2969C4.73438 9.875 4.73438 9.17188 5.20312 8.70312C5.625 8.28125 6.32812 8.28125 6.79688 8.70312L15 16.9531L23.2031 8.75C23.625 8.28125 24.3281 8.28125 24.7969 8.75C25.2188 9.17188 25.2188 9.875 24.7969 10.2969L15.75 19.2969C15.3281 19.7656 14.625 19.7656 14.2031 19.2969Z" fill="currentColor"/></svg>'
34
+ }
33
35
  }
34
- }
35
36
  </script>
@@ -26,10 +26,10 @@ const PopoverWithButton = (props) => {
26
26
  className={showPopover ? "fa-flip-vertical" : ""}
27
27
  display="inline_flex"
28
28
  >
29
- <Icon
30
- fixedWidth
31
- icon="angle-down"
32
- margin-left="xxs"
29
+ <Icon
30
+ fixedWidth
31
+ icon="angle-down"
32
+ margin-left="xxs"
33
33
  />
34
34
  </Flex>
35
35
  </Flex>
@@ -10,6 +10,7 @@
10
10
  <%= pb_rails("radio", props: {
11
11
  custom_children: true,
12
12
  label: "Select",
13
+ margin_bottom: "sm",
13
14
  name: "Group1",
14
15
  value: "Select",
15
16
  }) do %>
@@ -22,6 +23,7 @@
22
23
  <%= pb_rails("radio", props: {
23
24
  custom_children: true,
24
25
  label: "Typeahead",
26
+ margin_bottom: "sm",
25
27
  name: "Group1",
26
28
  value: "Typeahead",
27
29
  }) do %>
@@ -19,12 +19,14 @@ const RadioChildren = (props) => {
19
19
  <Radio
20
20
  customChildren
21
21
  label="Select"
22
+ marginBottom="sm"
22
23
  name="Group1"
23
24
  tabIndex={0}
24
25
  value="Select"
25
26
  {...props}
26
27
  >
27
- <Select
28
+ <Select
29
+ marginBottom="none"
28
30
  minWidth="xs"
29
31
  options={options}
30
32
  />
@@ -32,17 +34,18 @@ const RadioChildren = (props) => {
32
34
  <Radio
33
35
  customChildren
34
36
  label="Typeahead"
37
+ marginBottom="sm"
35
38
  name="Group1"
36
39
  tabIndex={0}
37
40
  value="Typeahead"
38
41
  {...props}
39
42
  >
40
43
  <Typeahead
44
+ marginBottom="none"
41
45
  minWidth="xs"
42
46
  options={options}
43
47
  />
44
48
  </Radio>
45
- <br />
46
49
  <Radio
47
50
  customChildren
48
51
  defaultChecked={false}