playbook_ui 13.15.0.pre.alpha.1132globalpropdatepickerspacing1929 → 13.16.0.pre.alpha.fonttest1972

Sign up to get free protection for your applications and to get access to all the features.
Files changed (48) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +3 -2
  3. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +1 -43
  4. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -2
  5. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +1 -15
  6. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +40 -33
  7. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +4 -4
  8. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss +2 -1
  9. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +44 -30
  10. data/app/pb_kits/playbook/pb_flex/_flex.tsx +4 -4
  11. data/app/pb_kits/playbook/pb_form_group/_form_group.tsx +3 -2
  12. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +7 -4
  13. data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +10 -10
  14. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +10 -9
  15. data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx +3 -2
  16. data/app/pb_kits/playbook/pb_icon_value/_icon_value.tsx +3 -2
  17. data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +51 -50
  18. data/app/pb_kits/playbook/pb_person_contact/_person_contact.tsx +20 -19
  19. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +4 -3
  20. data/app/pb_kits/playbook/pb_popover/_popover.tsx +6 -4
  21. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx +20 -20
  22. data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.tsx +4 -4
  23. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx +19 -17
  24. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts +1 -1
  25. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx +23 -21
  26. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx +18 -10
  27. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +46 -23
  28. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx +8 -8
  29. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx +7 -7
  30. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +17 -15
  31. data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +9 -7
  32. data/app/pb_kits/playbook/pb_select/_select.scss +13 -4
  33. data/app/pb_kits/playbook/pb_select/_select.tsx +7 -4
  34. data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.html.erb +24 -0
  35. data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx +38 -0
  36. data/app/pb_kits/playbook/pb_select/docs/example.yml +2 -0
  37. data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
  38. data/app/pb_kits/playbook/pb_select/select.rb +6 -1
  39. data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.tsx +25 -24
  40. data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx +27 -26
  41. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx +2 -1
  42. data/app/pb_kits/playbook/pb_source/_source.tsx +15 -15
  43. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +1 -0
  44. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +1 -4
  45. data/app/pb_kits/playbook/pb_text_input/text_input.rb +1 -5
  46. data/dist/playbook-rails.js +3 -3
  47. data/lib/playbook/version.rb +2 -2
  48. metadata +4 -2
@@ -9,11 +9,12 @@ import Caption from '../pb_caption/_caption'
9
9
  import Flex from '../pb_flex/_flex'
10
10
  import IconCircle from '../pb_icon_circle/_icon_circle'
11
11
  import Title from '../pb_title/_title'
12
+ import { GenericObject } from '../types'
12
13
 
13
14
  type IconStatValueProps = {
14
15
  aria?: { [key: string]: string },
15
16
  className?: string,
16
- data?: object,
17
+ data?: GenericObject,
17
18
  dark?: boolean,
18
19
  icon: string,
19
20
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -34,7 +35,7 @@ type IconStatValueProps = {
34
35
  | "green",
35
36
  }
36
37
 
37
- const IconStatValue = (props: IconStatValueProps) => {
38
+ const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
38
39
  const {
39
40
  aria = {},
40
41
  className,
@@ -6,20 +6,21 @@ import { globalProps } from '../utilities/globalProps'
6
6
 
7
7
  import Body from '../pb_body/_body'
8
8
  import Icon from '../pb_icon/_icon'
9
+ import { GenericObject } from '../types'
9
10
 
10
11
  type IconValueProps = {
11
12
  align?: "left" | "center" | "right",
12
13
  aria?: { [key: string]: string; },
13
14
  className?: string,
14
15
  dark?: boolean,
15
- data?: object,
16
+ data?: GenericObject,
16
17
  icon: string,
17
18
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
18
19
  id?: string,
19
20
  text: string,
20
21
  }
21
22
 
22
- const IconValue = (props: IconValueProps) => {
23
+ const IconValue = (props: IconValueProps): React.ReactElement => {
23
24
  const {
24
25
  align = 'left',
25
26
  aria = {},
@@ -13,25 +13,26 @@ import Flex from '../pb_flex/_flex'
13
13
  import Icon from '../pb_icon/_icon'
14
14
  import PbReactPopover from '../pb_popover/_popover'
15
15
  import TextInput from '../pb_text_input/_text_input'
16
+ import { GenericObject } from "../types"
16
17
 
17
18
  type PassphraseProps = {
18
19
  aria?: { [key: string]: string },
19
20
  confirmation?: boolean,
20
21
  className?: string,
21
- data?: object,
22
+ data?: GenericObject,
22
23
  dark?: boolean,
23
24
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
24
25
  id?: string,
25
- inputProps?: {},
26
+ inputProps?: GenericObject,
26
27
  label?: string,
27
- onChange: (inputValue: String) => void,
28
+ onChange: (inputValue: string) => void,
28
29
  showTipsBelow?: "always" | "xs" | "sm" | "md" | "lg" | "xl",
29
30
  tips?: Array<string>,
30
31
  uncontrolled?: boolean,
31
32
  value: string,
32
33
  }
33
34
 
34
- const Passphrase = (props: PassphraseProps) => {
35
+ const Passphrase = (props: PassphraseProps): React.ReactElement => {
35
36
  const {
36
37
  aria = {},
37
38
  className,
@@ -42,7 +43,7 @@ const Passphrase = (props: PassphraseProps) => {
42
43
  id,
43
44
  inputProps = {},
44
45
  label = confirmation ? "Confirm Passphrase" : "Passphrase",
45
- onChange = () => { },
46
+ onChange = () => undefined,
46
47
  showTipsBelow = "always",
47
48
  tips = [],
48
49
  uncontrolled = false,
@@ -84,60 +85,60 @@ const Passphrase = (props: PassphraseProps) => {
84
85
  globalProps(props),
85
86
  className
86
87
  )
87
- const dataProps = buildDataProps(data)
88
- const htmlProps = buildHtmlProps(htmlOptions)
88
+ const dataProps = buildDataProps(data)
89
+ const htmlProps = buildHtmlProps(htmlOptions)
89
90
 
90
91
  const popoverReference = (
91
92
  <CircleIconButton
92
- className={tipClass}
93
- dark={dark}
94
- icon="info-circle"
95
- onClick={toggleShowPopover}
96
- variant="link"
93
+ className={tipClass}
94
+ dark={dark}
95
+ icon="info-circle"
96
+ onClick={toggleShowPopover}
97
+ variant="link"
97
98
  />
98
99
  )
99
100
 
100
101
  return (
101
102
  <div
102
- {...ariaProps}
103
- {...dataProps}
104
- {...htmlProps}
105
- className={classes}
106
- id={id}
103
+ {...ariaProps}
104
+ {...dataProps}
105
+ {...htmlProps}
106
+ className={classes}
107
+ id={id}
107
108
  >
108
109
  <label>
109
110
  <Flex align="baseline">
110
111
  <Caption
111
- className="passphrase-label"
112
- text={label}
112
+ className="passphrase-label"
113
+ text={label}
113
114
  />
114
115
  {tips.length > 0 && !confirmation &&
115
116
  <PbReactPopover
116
- className="passphrase-tips"
117
- closeOnClick="outside"
118
- placement="right"
119
- reference={popoverReference}
120
- shouldClosePopover={handleShouldClosePopover}
121
- show={showPopover}
117
+ className="passphrase-tips"
118
+ closeOnClick="outside"
119
+ placement="right"
120
+ reference={popoverReference}
121
+ shouldClosePopover={handleShouldClosePopover}
122
+ show={showPopover}
122
123
  >
123
124
  <Flex
124
- align="center"
125
- orientation="column"
125
+ align="center"
126
+ orientation="column"
126
127
  >
127
128
  <Caption
128
- marginBottom="xs"
129
- text="Tips for a good passphrase"
129
+ marginBottom="xs"
130
+ text="Tips for a good passphrase"
130
131
  />
131
132
  <div>
132
133
  {tips.map((tip, i) => (
133
134
  <Caption
134
- key={i}
135
- marginBottom="xs"
136
- size="xs"
135
+ key={i}
136
+ marginBottom="xs"
137
+ size="xs"
137
138
  >
138
139
  <Icon
139
- icon="shield-check"
140
- marginRight="xs"
140
+ icon="shield-check"
141
+ marginRight="xs"
141
142
  />
142
143
  {tip}
143
144
  </Caption>
@@ -149,30 +150,30 @@ const Passphrase = (props: PassphraseProps) => {
149
150
  </Flex>
150
151
  <div className="passphrase-text-input-wrapper">
151
152
  <TextInput
152
- className="passphrase-text-input"
153
- dark={dark}
154
- marginBottom="xs"
155
- onChange={handleChange}
156
- placeholder="Enter a passphrase..."
157
- type={showPassphrase ? "text" : "password"}
158
- value={displayValue}
159
- {...inputProps}
153
+ className="passphrase-text-input"
154
+ dark={dark}
155
+ marginBottom="xs"
156
+ onChange={handleChange}
157
+ placeholder="Enter a passphrase..."
158
+ type={showPassphrase ? "text" : "password"}
159
+ value={displayValue}
160
+ {...inputProps}
160
161
  />
161
162
  <span
162
- className="show-passphrase-icon"
163
- onClick={toggleShowPassphrase}
163
+ className="show-passphrase-icon"
164
+ onClick={toggleShowPassphrase}
164
165
  >
165
166
  <Body
166
- className={showPassphrase ? "hide-icon" : ""}
167
- color="light"
168
- dark={dark}
167
+ className={showPassphrase ? "hide-icon" : ""}
168
+ color="light"
169
+ dark={dark}
169
170
  >
170
171
  <Icon icon="eye-slash" />
171
172
  </Body>
172
173
  <Body
173
- className={showPassphrase ? "" : "hide-icon"}
174
- color="light"
175
- dark={dark}
174
+ className={showPassphrase ? "" : "hide-icon"}
175
+ color="light"
176
+ dark={dark}
176
177
  >
177
178
  <Icon icon="eye" />
178
179
  </Body>
@@ -7,6 +7,7 @@ import { globalProps } from '../utilities/globalProps'
7
7
  import Caption from '../pb_caption/_caption'
8
8
  import Contact from '../pb_contact/_contact'
9
9
  import Person from '../pb_person/_person'
10
+ import { GenericObject } from '../types'
10
11
 
11
12
  type ContactItem = {
12
13
  contactType: string,
@@ -17,7 +18,7 @@ type ContactItem = {
17
18
  type PersonContactProps = {
18
19
  aria?: { [key: string]: string },
19
20
  className?: string | string[],
20
- data?: object,
21
+ data?: GenericObject,
21
22
  firstName: string,
22
23
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
23
24
  id?: string,
@@ -25,7 +26,7 @@ type PersonContactProps = {
25
26
  contacts?: ContactItem[],
26
27
  }
27
28
 
28
- const PersonContact = (props: PersonContactProps) => {
29
+ const PersonContact = (props: PersonContactProps): React.ReactElement => {
29
30
  const {
30
31
  aria = {},
31
32
  className,
@@ -60,35 +61,35 @@ const PersonContact = (props: PersonContactProps) => {
60
61
 
61
62
  return (
62
63
  <div
63
- {...ariaProps}
64
- {...dataProps}
65
- {...htmlProps}
66
- className={classes}
67
- id={id}
64
+ {...ariaProps}
65
+ {...dataProps}
66
+ {...htmlProps}
67
+ className={classes}
68
+ id={id}
68
69
  >
69
70
  <Person
70
- firstName={firstName}
71
- lastName={lastName}
71
+ firstName={firstName}
72
+ lastName={lastName}
72
73
  />
73
74
  {validContacts().map((contactObject, index) => (
74
75
  <Contact
75
- contactDetail={contactObject.contactDetail}
76
- contactType={contactObject.contactType}
77
- contactValue={contactObject.contactValue}
78
- key={`valid-contact-${index}`}
76
+ contactDetail={contactObject.contactDetail}
77
+ contactType={contactObject.contactType}
78
+ contactValue={contactObject.contactValue}
79
+ key={`valid-contact-${index}`}
79
80
  />
80
81
  ))}
81
82
  {wrongContacts().map((contactObject, index) => (
82
83
  <div key={`wrong-contact-caption-wrapper-${index}`}>
83
84
  <Caption
84
- className="wrong_numbers"
85
- key={`wrong-contact-caption-${index}`}
86
- text="wrong number"
85
+ className="wrong_numbers"
86
+ key={`wrong-contact-caption-${index}`}
87
+ text="wrong number"
87
88
  />
88
89
  <Contact
89
- contactType={contactObject.contactType}
90
- contactValue={contactObject.contactValue}
91
- key={`wrong-contact-${index}`}
90
+ contactType={contactObject.contactType}
91
+ contactValue={contactObject.contactValue}
92
+ key={`wrong-contact-${index}`}
92
93
  />
93
94
  </div>
94
95
  ))}
@@ -62,6 +62,7 @@ const formatAllCountries = () => {
62
62
  formatAllCountries()
63
63
 
64
64
  const containOnlyNumbers = (value: string) => {
65
+ // eslint-disable-next-line no-useless-escape
65
66
  return /^[()+\-\ .\d]*$/g.test(value)
66
67
  }
67
68
 
@@ -259,9 +260,9 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
259
260
  if (required) textInputProps.required = true
260
261
 
261
262
  return (
262
- <div
263
- {...wrapperProps}
264
- {...htmlProps}
263
+ <div
264
+ {...wrapperProps}
265
+ {...htmlProps}
265
266
  >
266
267
  <TextInput
267
268
  ref={
@@ -1,3 +1,4 @@
1
+ /* eslint-disable react/no-multi-comp */
1
2
  import React, { useEffect, useState } from "react";
2
3
  import ReactDOM from "react-dom";
3
4
  import {
@@ -54,7 +55,7 @@ const popoverModifiers = ({
54
55
  offset,
55
56
  }: {
56
57
  modifiers: Modifier<any> & any;
57
- offset: {};
58
+ offset: boolean;
58
59
  }) => {
59
60
  return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers;
60
61
  };
@@ -143,7 +144,7 @@ const Popover = (props: PbPopoverProps) => {
143
144
  );
144
145
  };
145
146
 
146
- const PbReactPopover = (props: PbPopoverProps) => {
147
+ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
147
148
  const [targetId] = useState(_uniqueId('id-'))
148
149
  const {
149
150
  className,
@@ -226,9 +227,10 @@ const PbReactPopover = (props: PbPopoverProps) => {
226
227
  <PopperReference>
227
228
  {({ ref }) => (
228
229
  <span
229
- id={"reference-" + targetId}
230
230
  className="pb_popover_reference_wrapper"
231
- ref={ref}>
231
+ id={"reference-" + targetId}
232
+ ref={ref}
233
+ >
232
234
  <reference.type {...reference.props} />
233
235
  </span>
234
236
  )}
@@ -20,6 +20,14 @@ type ProgressPillsProps = {
20
20
  value?: string,
21
21
  }
22
22
 
23
+ const ProgressPill = ({ active, dark, steps: step }: ProgressPillsProps) => (
24
+ <div
25
+ className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${dark ? ' dark' : ''
26
+ }`}
27
+ key={step}
28
+ />
29
+ )
30
+
23
31
  const showSteps = (steps: number, active: number, dark: boolean) => {
24
32
  const items = []
25
33
 
@@ -30,14 +38,6 @@ const showSteps = (steps: number, active: number, dark: boolean) => {
30
38
  return items
31
39
  }
32
40
 
33
- const ProgressPill = ({ active, dark, steps: step }: ProgressPillsProps) => (
34
- <div
35
- className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${dark ? ' dark' : ''
36
- }`}
37
- key={step}
38
- />
39
- )
40
-
41
41
  const ProgressPills = (props: ProgressPillsProps) => {
42
42
  const {
43
43
  active = 0,
@@ -59,24 +59,24 @@ const ProgressPills = (props: ProgressPillsProps) => {
59
59
 
60
60
  return (
61
61
  <div
62
- {...ariaProps}
63
- {...dataProps}
64
- {...htmlProps}
65
- className={classes}
66
- id={id}
62
+ {...ariaProps}
63
+ {...dataProps}
64
+ {...htmlProps}
65
+ className={classes}
66
+ id={id}
67
67
  >
68
68
  {title &&
69
69
  <div className="progress_pills_status">
70
70
  <Title
71
- dark={dark}
72
- size={4}
73
- tag="h4"
74
- text={title}
71
+ dark={dark}
72
+ size={4}
73
+ tag="h4"
74
+ text={title}
75
75
  />
76
76
  <Body
77
- color="light"
78
- dark={dark}
79
- text={value}
77
+ color="light"
78
+ dark={dark}
79
+ text={value}
80
80
  />
81
81
  </div>}
82
82
  <div className="progress_pills">{showSteps(steps, active, dark)}</div>
@@ -18,7 +18,7 @@ type ProgressSimpleProps = {
18
18
  width: string,
19
19
  }
20
20
 
21
- const ProgressSimple = (props: ProgressSimpleProps) => {
21
+ const ProgressSimple = (props: ProgressSimpleProps): React.ReactElement => {
22
22
  const {
23
23
  align,
24
24
  className,
@@ -57,9 +57,9 @@ const ProgressSimple = (props: ProgressSimpleProps) => {
57
57
 
58
58
  return (
59
59
  <div
60
- {...dataProps}
61
- {...htmlProps}
62
- className={wrapperClass}
60
+ {...dataProps}
61
+ {...htmlProps}
62
+ className={wrapperClass}
63
63
  >
64
64
  <div
65
65
  className={kitClass}
@@ -7,7 +7,7 @@ import Tooltip from "../../pb_tooltip/_tooltip";
7
7
 
8
8
  type EditorButtonProps = {
9
9
  classname?: string,
10
- onclick?: () => {} | void,
10
+ onclick?: () => undefined | void,
11
11
  icon?: string;
12
12
  text?: string;
13
13
  disable?: boolean
@@ -19,29 +19,31 @@ const EditorButton = ({
19
19
  onclick,
20
20
  icon,
21
21
  text,
22
- }: EditorButtonProps) => {
22
+ }: EditorButtonProps): React.ReactElement => {
23
23
  return (
24
- <Tooltip
25
- delay={{
24
+ <Tooltip
25
+ delay={{
26
26
  open: 2000
27
27
  }}
28
- interaction
29
- placement="top"
30
- text={text}
28
+ interaction
29
+ placement="top"
30
+ text={text}
31
31
  >
32
32
  <button
33
- className={classname}
34
- disabled={disable}
35
- onClick={onclick}
36
- role="button"
37
- type="button"
33
+ className={classname}
34
+ disabled={disable}
35
+ onClick={onclick}
36
+ role="button"
37
+ type="button"
38
38
  >
39
- <Flex
40
- align="center"
41
- className="toolbar_button_icon"
42
- justify="center"
39
+ <Flex
40
+ align="center"
41
+ className="toolbar_button_icon"
42
+ justify="center"
43
43
  >
44
- <Icon icon={icon} size="lg" />
44
+ <Icon icon={icon}
45
+ size="lg"
46
+ />
45
47
  </Flex>
46
48
  </button>
47
49
  </Tooltip>
@@ -3,7 +3,7 @@ export type ToolbarTypes = {
3
3
  icon?: string,
4
4
  isActive?: string | null,
5
5
  text?: string,
6
- onclick?: () => {}
6
+ onclick?: () => undefined
7
7
  classname?: string
8
8
  disable?: boolean
9
9
  }
@@ -20,17 +20,19 @@ const MoreExtensionsDropdown = ({extensions}: any) => {
20
20
 
21
21
  const popoverReference = (
22
22
  <button
23
- className="toolbar_button"
24
- onClick={handleTogglePopover}
25
- role="button"
26
- type="button"
23
+ className="toolbar_button"
24
+ onClick={handleTogglePopover}
25
+ role="button"
26
+ type="button"
27
27
  >
28
28
  <Flex
29
- align="center"
30
- className="toolbar_button_icon"
31
- justify="center"
29
+ align="center"
30
+ className="toolbar_button_icon"
31
+ justify="center"
32
32
  >
33
- <Icon icon="ellipsis" size="lg" />
33
+ <Icon icon="ellipsis"
34
+ size="lg"
35
+ />
34
36
  </Flex>
35
37
  </button>
36
38
 
@@ -46,21 +48,21 @@ const popoverReference = (
46
48
  show={showPopover}
47
49
  >
48
50
  <Nav
49
- paddingTop={extensions.length > 1 ? "xs" : "none"}
50
- paddingBottom={extensions.length > 1 ? "xs" : "none"}
51
- variant="subtle"
51
+ paddingBottom={extensions.length > 1 ? "xs" : "none"}
52
+ paddingTop={extensions.length > 1 ? "xs" : "none"}
53
+ variant="subtle"
52
54
  >
53
- {extensions && extensions.map(({ icon, text, onclick, isActive}:any, index:number) => (
55
+ {extensions && extensions.map(({ icon, text, onclick, isActive}: any, index: number) => (
54
56
  <NavItem
55
- cursor="pointer"
56
- className={`pb_tiptap_toolbar_dropdown_list_item ${isActive ? "is-active" : ""}`}
57
- iconLeft={icon}
58
- key={`${text}_${index}`}
59
- margin='none'
60
- onClick={()=> {onclick(); setShowPopover(false)}}
61
- text={text}
62
- paddingTop='xxs'
63
- paddingBottom='xxs'
57
+ className={`pb_tiptap_toolbar_dropdown_list_item ${isActive ? "is-active" : ""}`}
58
+ cursor="pointer"
59
+ iconLeft={icon}
60
+ key={`${text}_${index}`}
61
+ margin='none'
62
+ onClick={()=> {onclick(); setShowPopover(false)}}
63
+ paddingBottom='xxs'
64
+ paddingTop='xxs'
65
+ text={text}
64
66
  />
65
67
  ))}
66
68
  </Nav>
@@ -11,7 +11,7 @@ import { ToolbarTypes } from "./EditorTypes";
11
11
  import ToolbarHistoryItems from "./ToolbarHistory";
12
12
  import MoreExtensionsDropdown from "./MoreExtensionsDropdown";
13
13
 
14
- const EditorToolbar = ({ editor, extensions }:any) => {
14
+ const EditorToolbar = ({ editor, extensions }: any): React.ReactElement => {
15
15
  const toolbaritems = [
16
16
  {
17
17
  icon: "bold",
@@ -34,19 +34,27 @@ const EditorToolbar = ({ editor, extensions }:any) => {
34
34
  ]
35
35
 
36
36
  return (
37
- <Background backgroundColor="white" className="toolbar">
38
- <Flex flex="0" justify="between" paddingX="sm" paddingY="xxs">
39
- <FlexItem className="toolbar_block" displayFlex>
37
+ <Background backgroundColor="white"
38
+ className="toolbar"
39
+ >
40
+ <Flex flex="0"
41
+ justify="between"
42
+ paddingX="sm"
43
+ paddingY="xxs"
44
+ >
45
+ <FlexItem className="toolbar_block"
46
+ displayFlex
47
+ >
40
48
  <ToolbarDropdown editor={editor}/>
41
49
  <SectionSeparator orientation="vertical" />
42
50
  {toolbaritems && toolbaritems.map(
43
- ({ icon, text, classname, onclick}:ToolbarTypes, index:number) => (
51
+ ({ icon, text, classname, onclick}: ToolbarTypes, index: number) => (
44
52
  <EditorButton
45
- classname={classname}
46
- icon={icon}
47
- key={index}
48
- text={text}
49
- onclick={onclick}
53
+ classname={classname}
54
+ icon={icon}
55
+ key={index}
56
+ onclick={onclick}
57
+ text={text}
50
58
  />
51
59
  )
52
60
  )}