pixel-react 1.5.5 → 1.5.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/lib/components/DatePicker/types.d.ts +4 -0
  2. package/lib/components/Excel/ExcelContextMenu/ExcelContextMenu.d.ts +1 -7
  3. package/lib/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.d.ts +1 -1
  4. package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.d.ts +1 -0
  5. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +1 -0
  6. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +5 -0
  7. package/lib/components/FileDropzone/types.d.ts +3 -0
  8. package/lib/components/StateDropdown/StateDropdown.d.ts +1 -1
  9. package/lib/components/StateDropdown/StateDropdownTypes.d.ts +3 -0
  10. package/lib/index.d.ts +49 -2
  11. package/lib/index.esm.js +899 -550
  12. package/lib/index.esm.js.map +1 -1
  13. package/lib/index.js +899 -549
  14. package/lib/index.js.map +1 -1
  15. package/package.json +1 -1
  16. package/src/assets/icons/dashboard_icon.svg +31 -0
  17. package/src/assets/styles/_colors.scss +1 -0
  18. package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +1 -1
  19. package/src/components/DatePicker/DatePicker.scss +4 -3
  20. package/src/components/DatePicker/DatePicker.stories.tsx +27 -14
  21. package/src/components/DatePicker/DatePicker.tsx +62 -49
  22. package/src/components/DatePicker/types.ts +5 -0
  23. package/src/components/Excel/ColorBarSelector/ColorBarSelector.scss +8 -4
  24. package/src/components/Excel/ColorBarSelector/ColorBarSelector.tsx +2 -2
  25. package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.scss +23 -35
  26. package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.tsx +3 -12
  27. package/src/components/Excel/ExcelFile/ExcelFile.scss +31 -25
  28. package/src/components/Excel/ExcelFile/ExcelFile.tsx +157 -47
  29. package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +5 -4
  30. package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +3 -3
  31. package/src/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.tsx +40 -1
  32. package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +3 -3
  33. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +10 -0
  34. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +9 -45
  35. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +43 -2
  36. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +40 -5
  37. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +3 -1
  38. package/src/components/Excel/ExcelFile.stories.tsx +42 -43
  39. package/src/components/Excel/ExcelToolBar/ExcelToolBar.scss +80 -20
  40. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +171 -159
  41. package/src/components/FileDropzone/Dropzone.tsx +2 -0
  42. package/src/components/FileDropzone/FileDropzone.scss +1 -2
  43. package/src/components/FileDropzone/FileDropzone.stories.tsx +3 -0
  44. package/src/components/FileDropzone/FileDropzone.tsx +11 -3
  45. package/src/components/FileDropzone/types.ts +5 -0
  46. package/src/components/Icon/Icon.stories.tsx +5 -4
  47. package/src/components/Icon/iconList.ts +2 -0
  48. package/src/components/MultiSelect/MultiSelect.scss +41 -50
  49. package/src/components/MultiSelect/MultiSelect.tsx +48 -48
  50. package/src/components/Select/Select.scss +11 -1
  51. package/src/components/Select/Select.tsx +2 -2
  52. package/src/components/StateDropdown/StateDropdown.stories.tsx +5 -0
  53. package/src/components/StateDropdown/StateDropdown.tsx +27 -12
  54. package/src/components/StateDropdown/StateDropdownTypes.tsx +6 -0
  55. package/src/components/TableTree/TableTree.scss +17 -15
  56. package/src/components/TableTree/TableTree.tsx +42 -40
  57. package/src/index.ts +2 -0
@@ -6,7 +6,6 @@ import Icon from '../../Icon';
6
6
  import Select from '../../Select';
7
7
  import { CellBase } from '../ExcelFile/ExcelFileComponents';
8
8
  import * as Matrix from '../ExcelFile/ExcelFileComponents/matrix';
9
- import { Col, Row } from '../../GridLayout/GridLayout';
10
9
  import ColorBarSelector from '../ColorBarSelector/ColorBarSelector';
11
10
 
12
11
  interface ExcelToolBarProps {
@@ -46,17 +45,21 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
46
45
  setBorderType,
47
46
  setFormatePainter,
48
47
  }) => {
49
- const [border, setBorder] = useState<string>('border-all-sides');
48
+ const [border, setBorder] = useState<string>('border-none');
50
49
  const [underLine, setUnderLine] = useState<string>('underline');
50
+ const [selectedFontFamily, setSelectedFontFamily] = useState<{
51
+ label: string;
52
+ value: string;
53
+ }>({
54
+ label: 'Times New Roman',
55
+ value: '"Times New Roman"',
56
+ });
51
57
  const [colorContainer, setColorPicker] = useState<ColorContainer>({
52
58
  color: 'var(--error-light)',
53
59
  backgroundColor: 'var(--error-light)',
54
60
  borderColor: 'var(--text-color)',
55
61
  });
56
62
 
57
- const [formatePainterState, setFormatePainterState] =
58
- useState<boolean>(false);
59
-
60
63
  const borderTypeIcon = [
61
64
  { value: 'border-all-sides', label: 'All Border', icon: 'all_borders' },
62
65
  { value: 'border-bottom', label: 'Border Bottom', icon: 'border_bottom' },
@@ -148,194 +151,203 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
148
151
  };
149
152
  }, [colorContainer.backgroundColor]);
150
153
 
154
+ let getUnderlineIcon = () => {
155
+ const selectedIcon = underlineTypeIcon.find((e) => e.value === underLine);
156
+ return selectedIcon ? selectedIcon.icon : '';
157
+ };
158
+
159
+ let getBorderIcon = () => {
160
+ const selectedIcon = borderTypeIcon.find((e) => e.value === border);
161
+ return selectedIcon ? selectedIcon.icon : '';
162
+ };
163
+
151
164
  return (
152
- <Row className="excel-row" gap="40px">
153
- <Col size={3}>
154
- <div className="excel-toolbar">
155
- <Select
156
- className="textType"
157
- onChange={(e) => {
158
- setFontFamily(data, e.value as string);
159
- }}
160
- optionsList={fontFamily}
161
- selectedOption={{
162
- label: 'Times New Roman',
163
- value: '"Times New Roman"',
164
- }}
165
- />
166
- <Select
167
- className="selectTag"
168
- onChange={(e) => {
169
- setFontSize(data, e.value as string);
170
- }}
171
- optionsList={fontSize}
172
- />
173
- </div>
174
- </Col>
175
- <Col size={2}>
176
- <div className="excel-toolbar-center">
165
+ <div className="ff-excel-toolbar">
166
+ <div className="ff-excel-toolbar-font ">
167
+ <Tooltip placement="top" title={'Font Family'}>
168
+ <div className="ff-excel-toolbar-font-family">
169
+ <Select
170
+ onChange={(e) => {
171
+ setSelectedFontFamily({ label: e.label, value: e.value });
172
+ setFontFamily(data, e.label);
173
+ }}
174
+ required={false}
175
+ optionsList={fontFamily}
176
+ label=""
177
+ selectedOption={selectedFontFamily}
178
+ />
179
+ </div>
180
+ </Tooltip>
181
+ <Tooltip placement="top" title={'Font Size'}>
182
+ <div className="ff-excel-toolbar-font-size">
183
+ <Select
184
+ required={false}
185
+ label=""
186
+ onChange={(e) => setFontSize(data, e.value)}
187
+ optionsList={fontSize}
188
+ selectedOption={{
189
+ label: '11',
190
+ value: '11',
191
+ }}
192
+ />
193
+ </div>
194
+ </Tooltip>
195
+ </div>
196
+ <div className="ff-excel-toolbar-divider"></div>
197
+ <div className="ff-excel-toolbar-icon">
198
+ <Tooltip placement="top" title={'Text Left'}>
177
199
  <Icon
178
200
  hoverEffect
179
201
  disabled={toolbar === 'disable'}
180
- onClick={() => {
181
- setTextAlign(data, 'left');
182
- }}
202
+ onClick={() => setTextAlign(data, 'left')}
183
203
  name="text_align_left"
184
204
  />
205
+ </Tooltip>
206
+ <Tooltip placement="top" title={'Text Center'}>
185
207
  <Icon
186
208
  hoverEffect
187
209
  disabled={toolbar === 'disable'}
188
- onClick={() => {
189
- setTextAlign(data, 'center');
190
- }}
210
+ onClick={() => setTextAlign(data, 'center')}
191
211
  name="text_align_center"
192
212
  />
213
+ </Tooltip>
214
+
215
+ <Tooltip placement="top" title={'Text Right'}>
193
216
  <Icon
194
217
  hoverEffect
195
218
  disabled={toolbar === 'disable'}
196
- onClick={() => {
197
- setTextAlign(data, 'right');
198
- }}
219
+ onClick={() => setTextAlign(data, 'right')}
199
220
  name="text_align_right"
200
221
  />
201
- </div>
202
- </Col>
203
- <Col size={2}>
204
- <div className="excel-toolbar-center">
205
- <Tooltip placement="top" title={'Bold'}>
222
+ </Tooltip>
223
+ </div>
224
+ <div className="ff-excel-toolbar-divider"></div>
225
+ <div className="ff-excel-toolbar-text">
226
+ <Tooltip placement="top" title={'Bold'}>
227
+ <Icon
228
+ hoverEffect
229
+ disabled={toolbar === 'disable'}
230
+ onClick={() => onBold(data)}
231
+ name="bold"
232
+ />
233
+ </Tooltip>
234
+ <Tooltip placement="top" title={'Italic'}>
235
+ <Icon
236
+ hoverEffect
237
+ disabled={toolbar === 'disable'}
238
+ onClick={() => onItalic(data)}
239
+ name="italic"
240
+ />
241
+ </Tooltip>
242
+ <Tooltip placement="top" title={'Underline Type'}>
243
+ <div className="ff-excel-toolbar-icon-underline">
206
244
  <Icon
207
245
  hoverEffect
208
246
  disabled={toolbar === 'disable'}
209
- onClick={() => {
210
- onBold(data);
247
+ onClick={() => setUnderlineType(data, underLine, true)}
248
+ name={getUnderlineIcon()}
249
+ />
250
+ <MenuOption
251
+ iconName="arrow_down"
252
+ iconSize={12}
253
+ options={underlineTypeIcon}
254
+ tooltipPlacement="top"
255
+ variant="light"
256
+ onOptionClick={(e) => {
257
+ let selectedValue = e.value as string;
258
+ setUnderlineType(data, selectedValue, true);
259
+ setUnderLine(selectedValue);
211
260
  }}
212
- name="bold"
213
261
  />
214
- </Tooltip>
215
- <Tooltip placement="top" title={'Italic'}>
262
+ </div>
263
+ </Tooltip>
264
+ </div>
265
+ <div className="ff-excel-toolbar-divider"></div>
266
+ <div className="ff-excel-toolbar-icon">
267
+ <Tooltip placement="top" title={'Format Painter'}>
268
+ <Icon
269
+ hoverEffect
270
+ disabled={toolbar === 'disable'}
271
+ onClick={() => {
272
+ setFormatePainter(data);
273
+ }}
274
+ name="formate_painter"
275
+ />
276
+ </Tooltip>
277
+ <Tooltip placement="top" title={'Text Color'}>
278
+ <div className="ff-excel-toolbar-icon-color">
216
279
  <Icon
217
280
  hoverEffect
281
+ width={12}
282
+ height={12}
218
283
  disabled={toolbar === 'disable'}
219
284
  onClick={() => {
220
- onItalic(data);
285
+ setColor(data, colorContainer.color);
221
286
  }}
222
- name="italic"
287
+ name="text_color"
288
+ />
289
+ <ColorBarSelector
290
+ disabled={toolbar === 'disable'}
291
+ getColorValue={getTextColor}
223
292
  />
224
- </Tooltip>
225
- <Tooltip placement="top" title={'Underline'}>
226
- <div className="excel-toolbar-menu">
227
- <Tooltip placement="top" title={'Formate Painter'}>
228
- <div
229
- className={
230
- formatePainterState ? 'formate-painter-active' : ''
231
- }
232
- >
233
- <Icon
234
- hoverEffect
235
- disabled={toolbar === 'disable'}
236
- onClick={() => {
237
- setUnderlineType(data, underLine, true);
238
- }}
239
- name="underline"
240
- />
241
- </div>
242
- </Tooltip>
243
- <MenuOption
244
- iconName="arrow_down"
245
- options={underlineTypeIcon}
246
- tooltipTitle="Border Type"
247
- tooltipPlacement="top"
248
- variant="light"
249
- onOptionClick={(e) => {
250
- setUnderlineType(data, e.value as string, true);
251
- setUnderLine(e.value as string);
252
- }}
253
- />
254
- </div>
255
- </Tooltip>
256
- </div>
257
- </Col>
258
- <Col size={2}>
259
- <div className="excel-toolbar-center">
260
- <Tooltip placement="top" title={'Formate Painter'}>
261
- <div
262
- className={formatePainterState ? 'formate-painter-active' : ''}
263
- >
264
- <Icon
265
- hoverEffect
266
- disabled={toolbar === 'disable'}
267
- onClick={() => {
268
- setFormatePainter(data);
269
- setFormatePainterState((prev) => !prev);
270
- }}
271
- name="formate_painter"
272
- />
273
- </div>
274
- </Tooltip>
275
- <div className="menu-option">
276
- <Tooltip placement="top" title={'Text Color'}>
277
- <Icon
278
- hoverEffect
279
- disabled={toolbar === 'disable'}
280
- onClick={() => {
281
- setColor(data, colorContainer.color);
282
- }}
283
- name="text_color"
284
- />
285
- <ColorBarSelector
286
- disabled={toolbar === 'disable'}
287
- getColorValue={getTextColor}
288
- />
289
- </Tooltip>
290
293
  </div>
291
- <div className="menu-option">
292
- <Tooltip placement="top" title={'Background Color'}>
293
- <Icon
294
- hoverEffect
295
- disabled={toolbar === 'disable'}
296
- onClick={() => {
297
- setBackgroundColor(data, colorContainer.backgroundColor);
298
- }}
299
- name="fill_color"
300
- />
301
- </Tooltip>
294
+ </Tooltip>
295
+ <Tooltip placement="top" title={'Background Color'}>
296
+ <div className="ff-excel-toolbar-icon-color">
297
+ <Icon
298
+ hoverEffect
299
+ width={12}
300
+ height={12}
301
+ disabled={toolbar === 'disable'}
302
+ onClick={() =>
303
+ setBackgroundColor(data, colorContainer.backgroundColor)
304
+ }
305
+ name="fill_color"
306
+ />
302
307
  <ColorBarSelector
303
308
  disabled={toolbar === 'disable'}
304
309
  getColorValue={getBackgroundColor}
305
310
  />
306
311
  </div>
307
- </div>
308
- </Col>
309
- <Col size={1}>
310
- <div className="excel-toolbar-menu">
311
- <Tooltip placement="top" title={'Formate Painter'}>
312
- <div
313
- className={formatePainterState ? 'formate-painter-active' : ''}
314
- >
315
- <Icon
316
- hoverEffect
317
- disabled={toolbar === 'disable'}
318
- onClick={() => {
319
- setBorderType(data, border, 'black');
320
- }}
321
- name="all_borders"
322
- />
323
- </div>
324
- </Tooltip>
325
- <MenuOption
326
- iconName="arrow_down"
327
- options={borderTypeIcon}
328
- tooltipTitle="Border Type"
329
- tooltipPlacement="top"
330
- variant="light"
331
- onOptionClick={(e) => {
332
- setBorder(e.value as string);
333
- setBorderType(data, e.value as string, 'black');
334
- }}
312
+ </Tooltip>
313
+ </div>
314
+ <div className="ff-excel-toolbar-divider"></div>
315
+ <div className="ff-excel-toolbar-menu">
316
+ <Tooltip placement="top" title={'Border Type'}>
317
+ <div className="ff-excel-toolbar-menu-option">
318
+ <Icon
319
+ hoverEffect
320
+ disabled={toolbar === 'disable'}
321
+ onClick={() => setBorderType(data, border, 'black')}
322
+ name={getBorderIcon()}
323
+ />
324
+ <MenuOption
325
+ iconName="arrow_down"
326
+ iconSize={12}
327
+ options={borderTypeIcon}
328
+ tooltipPlacement="top"
329
+ variant="light"
330
+ onOptionClick={(e) => {
331
+ let selectedValue = e.value as string;
332
+ setBorderType(data, selectedValue, 'black');
333
+ setBorder(selectedValue);
334
+ }}
335
+ />
336
+ </div>
337
+ </Tooltip>
338
+ </div>
339
+ <div className="ff-excel-toolbar-divider"></div>
340
+ <div className="ff-excel-toolbar-menu">
341
+ <Tooltip placement="top" title={'Formula'}>
342
+ <Icon
343
+ hoverEffect
344
+ disabled={toolbar === 'disable'}
345
+ onClick={() => setBorderType(data, border, 'black')}
346
+ name="formula_icon"
335
347
  />
336
- </div>
337
- </Col>
338
- </Row>
348
+ </Tooltip>
349
+ </div>
350
+ </div>
339
351
  );
340
352
  };
341
353
 
@@ -13,6 +13,7 @@ const Dropzone: FC<DroppableProps> = ({
13
13
  getRootProps,
14
14
  getInputProps,
15
15
  isDragActive = false,
16
+ height = 188,
16
17
  }) => {
17
18
  return (
18
19
  <div
@@ -20,6 +21,7 @@ const Dropzone: FC<DroppableProps> = ({
20
21
  className={classNames('ff-file-dropzone', {
21
22
  'ff-file-dropzone--active': isDragActive,
22
23
  })}
24
+ style={{height: height}}
23
25
  >
24
26
  <div className="ff-file-dropzone-content__icon">{icon}</div>
25
27
  <div className="ff-file-dropzone-content__labels">
@@ -16,10 +16,9 @@
16
16
 
17
17
  .ff-file-dropzone-wrapper {
18
18
  @include column-flex-gap(10px);
19
+
19
20
 
20
21
  .ff-file-dropzone {
21
- width: 640px;
22
- height: 188px;
23
22
  padding: 16px 0;
24
23
  border-radius: 8px;
25
24
  background: var(--file-dropzone-default-color);
@@ -2,6 +2,7 @@ import { StoryObj, Meta } from '@storybook/react';
2
2
  import FileDropzone from './FileDropzone';
3
3
  import Toaster from '../Toast';
4
4
  import { useState } from 'react';
5
+ import React from 'react';
5
6
 
6
7
  const meta: Meta<typeof FileDropzone> = {
7
8
  title: 'Components/FileDropzone',
@@ -22,6 +23,8 @@ const defaultArgs = {
22
23
  maxSizeErrorMessage: 'Max file size limit of 5MB exceeded',
23
24
  invalidFileMessage: 'Invalid file format',
24
25
  fileExistMessage: 'File already exist with same name and type',
26
+ width: 700,
27
+ height: 350,
25
28
  };
26
29
 
27
30
  export const Primary: Story = {
@@ -8,7 +8,9 @@ import Dropzone from './Dropzone';
8
8
  import FilePreview from './FilePreview';
9
9
 
10
10
  const FileDropzone: React.FC<FileDropzoneProps> = ({
11
- icon = <Icon name="dropzone_icon" height={80} width={80} hoverEffect={false} />,
11
+ icon = (
12
+ <Icon name="dropzone_icon" height={80} width={80} hoverEffect={false} />
13
+ ),
12
14
  primaryLabel = 'Drag & drop your file to upload',
13
15
  secondaryLabel = 'Or',
14
16
  buttonLabel = 'Choose File to upload',
@@ -21,6 +23,8 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
21
23
  invalidFileMessage = '',
22
24
  fileExistMessage = '',
23
25
  validateMIMEType = false,
26
+ width = 640,
27
+ height = 188,
24
28
  }) => {
25
29
  const {
26
30
  getRootProps,
@@ -71,7 +75,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
71
75
  );
72
76
 
73
77
  return (
74
- <div className="ff-file-dropzone-wrapper">
78
+ <div className="ff-file-dropzone-wrapper" style={{ width: `${width}px` }}>
75
79
  <Dropzone
76
80
  icon={icon}
77
81
  primaryLabel={primaryLabel}
@@ -80,9 +84,13 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
80
84
  getRootProps={getRootProps}
81
85
  getInputProps={getInputProps}
82
86
  isDragActive={isDragActive}
87
+ height={`${height}px`}
83
88
  />
84
89
 
85
- <div className={'ff-file-details-wrapper'}>
90
+ <div
91
+ className={'ff-file-details-wrapper'}
92
+ style={{ width: `${width}px` }}
93
+ >
86
94
  {!checkEmpty(acceptedFiles) && (
87
95
  <div className="ff-file-details">{acceptedFilesList}</div>
88
96
  )}
@@ -53,6 +53,10 @@ export interface FileDropzoneProps {
53
53
  * To validate file type based on MIME type but mandatorily need to pass MIME type in accept props
54
54
  **/
55
55
  validateMIMEType?: boolean;
56
+
57
+ width?: number | string;
58
+
59
+ height?: number | string;
56
60
  }
57
61
  export interface FileState {
58
62
  accepted: File[];
@@ -103,6 +107,7 @@ export interface DroppableProps {
103
107
  getRootProps: () => any;
104
108
  getInputProps: () => any;
105
109
  isDragActive: boolean;
110
+ height: number | string;
106
111
  }
107
112
 
108
113
  export interface FilePreviewProps {
@@ -45,11 +45,14 @@ export const DarkVariantIcons: Story = {
45
45
  name: 'hamburger_menu',
46
46
  color: 'var(--ff-icon-color-dark-variant)',
47
47
  variant: 'dark',
48
- hoverEffect: true,
48
+ hoverEffect: true,
49
49
  },
50
50
  render: (args) => {
51
51
  const backgroundColor = args.variant === 'dark' ? '#000' : '#fff';
52
- const iconColor = args.variant === 'dark' ? 'var(--ff-icon-color-dark-variant)' : 'var(--brand-color)';
52
+ const iconColor =
53
+ args.variant === 'dark'
54
+ ? 'var(--ff-icon-color-dark-variant)'
55
+ : 'var(--brand-color)';
53
56
 
54
57
  return (
55
58
  <div style={{ backgroundColor, padding: '20px' }}>
@@ -59,6 +62,4 @@ export const DarkVariantIcons: Story = {
59
62
  },
60
63
  };
61
64
 
62
-
63
-
64
65
  export default meta;
@@ -219,6 +219,7 @@ import NoData from '../../assets/icons/no_data.svg?react';
219
219
  import AddUser from '../../assets/icons/add_user.svg?react';
220
220
  import RemoveUser from '../../assets/icons/remove_user.svg?react';
221
221
  import AddToArchive from '../../assets/icons/add_archive.svg?react';
222
+ import DashboardIcon from '../../assets/icons/dashboard_icon.svg?react'; //TODO:this is temporary icon
222
223
 
223
224
  Components['success'] = ToastSuccessIcon;
224
225
  Components['alert'] = Alert;
@@ -434,5 +435,6 @@ Components['no_data'] = NoData;
434
435
  Components['add_user'] = AddUser;
435
436
  Components['add_to_archive'] = AddToArchive;
436
437
  Components['remove_user'] = RemoveUser;
438
+ Components['dashboard_icon'] = DashboardIcon;//TODO:this is temporary icon
437
439
 
438
440
  export default Components;
@@ -79,64 +79,55 @@
79
79
  top: -6px;
80
80
  pointer-events: none;
81
81
  }
82
- .ff-multiselect-chip-parent-container{
83
- width: 100%;
82
+ .ff-multiselect-chip-container {
84
83
  display: flex;
85
- justify-content: space-between;
86
- .ff-multiselect-chip-container {
87
- display: flex;
88
- flex-wrap: wrap;
89
- align-items: center;
90
- gap: 5px;
91
- .ff-multiselect-chip {
92
- @include flex-center;
93
- box-sizing: border-box;
94
- border: 0.5px solid #f1ebf2;
95
- padding: 0 1px 0 4px;
96
- gap: 4px;
97
- height: 16px;
98
- border-radius: 15px;
99
- .ff-multiselect-chip-label {
100
- @extend .fontXs;
101
- line-height: 14px;
102
- color: var(--tooltip-bg-color);
103
- &.label-padding {
104
- padding: 5px 2px;
105
- }
106
- }
107
- .ff-multiselect-chip-close-icon {
108
- color: var(--brand-color);
109
- cursor: pointer;
84
+ flex-wrap: wrap;
85
+ align-items: center;
86
+ gap: 5px;
87
+ .ff-multiselect-chip {
88
+ @include flex-center;
89
+ box-sizing: border-box;
90
+ border: 0.5px solid var(--tabs-border-color);
91
+ padding-left: 4px;
92
+ gap: 4px;
93
+ height: 16px;
94
+ border-radius: 15px;
95
+ .ff-multiselect-chip-label {
96
+ line-height: 14px;
97
+ color: var(--tooltip-bg-color);
98
+ &.label-padding {
99
+ padding-right: 3px;
110
100
  }
111
101
  }
112
- .ff-multiselect-input-container {
113
- flex: 1;
114
- min-width: 20px;
115
- input {
116
- width: 100%;
117
- min-width: 30px;
118
- max-width: calc(100% - 0px);
119
- padding: 2px;
120
- box-sizing: border-box;
121
- border: none;
122
- font-size: 12px;
123
- &:focus {
124
- outline: none;
125
- }
126
- }
102
+ .ff-multiselect-chip-close-icon {
103
+ color: var(--brand-color);
104
+ cursor: pointer;
105
+ padding: 0px;
127
106
  }
128
107
  }
129
- .ff-multiselect-more-chip {
130
- display: flex;
131
- align-items: center;
132
- width: 16px;
133
- @extend .fontSm;
134
- font-weight: 600;
135
- line-height: 16px;
136
- color: var(--brand-color);
108
+ .ff-multiselect-input-container {
109
+ flex: 1;
110
+ min-width: 20px;
111
+ input {
112
+ width: 100%;
113
+ min-width: 30px;
114
+ max-width: calc(100% - 0px);
115
+ padding: 2px;
116
+ box-sizing: border-box;
117
+ border: none;
118
+ font-size: 12px;
119
+ &:focus {
120
+ outline: none;
121
+ }
122
+ }
137
123
  }
138
124
  }
139
125
  }
126
+ .ff-multiselect-more-chip {
127
+ display: flex;
128
+ align-items: center;
129
+ width: 16px;
130
+ }
140
131
  &__toggle {
141
132
  display: flex;
142
133
  align-items: center;