pixel-react 1.2.5 → 1.2.7

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.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "pixel-react",
3
3
  "description": "Great for pixel-perfect, design-focused components in React",
4
- "version": "1.2.5",
4
+ "version": "1.2.7",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.esm.js",
7
7
  "types": "lib/index.d.ts",
@@ -11,9 +11,9 @@ const AppHeader: React.FC<AppHeaderProps> = ({
11
11
  logoIconName = 'fireflink_icon',
12
12
  leftContent,
13
13
  rightContent,
14
- projectsList = [{ label: '', value: '', iconName: '' }],
14
+ projectsList,
15
15
  appHeaderMenuItems,
16
- appHeaderHiddenMenuItems = [{ label: '', value: '', icon: '' }],
16
+ appHeaderHiddenMenuItems,
17
17
  selectedMenu,
18
18
  selectedSubMenu,
19
19
  selectedQuickMenu,
@@ -36,7 +36,7 @@ const AppHeader: React.FC<AppHeaderProps> = ({
36
36
  )}
37
37
  </div>
38
38
  <div className="ff-app-header-nav-bar">
39
- {!checkEmpty(projectsList) && (
39
+ {projectsList && !checkEmpty(projectsList) && (
40
40
  <div>
41
41
  {
42
42
  <AllProjectsDropdown
@@ -130,7 +130,7 @@ const AppHeader: React.FC<AppHeaderProps> = ({
130
130
  );
131
131
  })}
132
132
  </div>
133
- {!checkEmpty(appHeaderHiddenMenuItems) && (
133
+ {appHeaderHiddenMenuItems && !checkEmpty(appHeaderHiddenMenuItems) && (
134
134
  <div>
135
135
  <MenuOption
136
136
  iconName="more"
@@ -101,15 +101,13 @@ export const WithCustomFooter: Story = {
101
101
  export const WithTertiaryButtons: Story = {
102
102
  args: {
103
103
  ...defaultArgs,
104
- tertiaryButtonProps: {
105
- left: {
106
- label: 'Help',
107
- onClick: () => {},
108
- },
109
- right: {
110
- label: 'More Info',
111
- onClick: () => {},
112
- },
104
+ leftTertiaryButtonProps: {
105
+ label: 'Help',
106
+ onClick: () => {},
107
+ },
108
+ rightTertiaryButtonProps: {
109
+ label: 'More Info',
110
+ onClick: () => {},
113
111
  },
114
112
  },
115
113
  parameters: {
@@ -117,6 +115,7 @@ export const WithTertiaryButtons: Story = {
117
115
  },
118
116
  };
119
117
 
118
+
120
119
  export const WithCustomZIndex: Story = {
121
120
  args: {
122
121
  ...defaultArgs,
@@ -30,7 +30,8 @@ const Drawer: FC<DrawerProps> = ({
30
30
  onCloseIconClick,
31
31
  customHeader,
32
32
  customFooter,
33
- tertiaryButtonProps = { left: {}, right: {} },
33
+ leftTertiaryButtonProps = {},
34
+ rightTertiaryButtonProps = {},
34
35
  zIndex = 999,
35
36
  }: DrawerProps) => {
36
37
  const [isExpanded, setIsExpanded] = useState(_isExpanded);
@@ -175,18 +176,20 @@ const Drawer: FC<DrawerProps> = ({
175
176
  transparentBackground={true}
176
177
  />
177
178
  )}
178
- {tertiaryButtonProps.left?.label && (
179
+ {leftTertiaryButtonProps?.label && (
179
180
  <Button
180
- {...tertiaryButtonProps.left}
181
+ {...leftTertiaryButtonProps}
182
+ onClick={leftTertiaryButtonProps.onClick}
181
183
  variant="tertiary"
182
184
  transparentBackground={true}
183
185
  />
184
186
  )}
185
187
  </div>
186
188
  <div className="button-container">
187
- {tertiaryButtonProps.right?.label && (
189
+ {rightTertiaryButtonProps?.label && (
188
190
  <Button
189
- {...tertiaryButtonProps.right}
191
+ {...rightTertiaryButtonProps}
192
+ onClick={rightTertiaryButtonProps.onClick}
190
193
  variant="tertiary"
191
194
  transparentBackground={true}
192
195
  />
@@ -69,6 +69,15 @@ export interface DrawerProps {
69
69
  * Left side Secondary | Cancel button props
70
70
  */
71
71
  leftSecondaryButtonProps?: BtnPropsCommon;
72
+ /**
73
+ * Left side Tertiary Button | Help button props
74
+ */
75
+ leftTertiaryButtonProps?: BtnPropsCommon;
76
+
77
+ /**
78
+ * Right side Tertiary Button | More Info button props
79
+ */
80
+ rightTertiaryButtonProps?: BtnPropsCommon;
72
81
  /**
73
82
  * Onclick function for edit button
74
83
  */
@@ -109,13 +118,6 @@ export interface DrawerProps {
109
118
  * If provided, this will render in place of the default footer.
110
119
  */
111
120
  customFooter?: ReactNode;
112
- /**
113
- * Tertiary button properties (optional)
114
- */
115
- tertiaryButtonProps?: {
116
- left?: BtnPropsCommon;
117
- right?: BtnPropsCommon;
118
- };
119
121
  /**
120
122
  * Custom z-index for the drawer
121
123
  */
@@ -17,7 +17,11 @@ const Forms = <T extends Form.FieldValues>({
17
17
 
18
18
  const { handleSubmit } = methods;
19
19
 
20
- return <form onSubmit={handleSubmit(onSubmit)}>{children(methods)}</form>;
20
+ return (
21
+ <form id={id} onSubmit={handleSubmit(onSubmit)}>
22
+ {children(methods)}
23
+ </form>
24
+ );
21
25
  };
22
26
 
23
27
  export default Forms;
@@ -1,7 +1,7 @@
1
1
  @use '../../assets/styles/fonts';
2
2
  @use '../../assets/styles/mixins';
3
3
 
4
- .ff-expandable-chip-menu {
4
+ .ff-Module-chip {
5
5
  width: 75px;
6
6
  height: 32px;
7
7
  border: 0.5px solid;
@@ -9,7 +9,7 @@
9
9
  color: var(--brand-color);
10
10
  cursor: pointer;
11
11
  @include mixins.center-content();
12
- .ff-label-chip {
12
+ .ff-Module-label-chip {
13
13
  &--active {
14
14
  color: var(--ff-header-text-color);
15
15
  }
@@ -10,14 +10,14 @@ const ModuleChip: React.FC<ModuleChipProps> = ({
10
10
  }) => {
11
11
  return (
12
12
  <div
13
- className={classNames('ff-expandable-chip-menu', {
14
- 'ff-expandable-chip-menu--active': isActive,
13
+ className={classNames('ff-Module-chip', {
14
+ 'ff-Module-chip--active': isActive,
15
15
  })}
16
16
  onClick={onClick}
17
17
  >
18
18
  <div
19
- className={classNames(`ff-label-chip `, {
20
- 'ff-label-chip--active': isActive,
19
+ className={classNames(`ff-Module-label-chip `, {
20
+ 'ff-Module-label-chip--active': isActive,
21
21
  })}
22
22
  >
23
23
  <Typography fontSize={'14px'} fontWeight="regular" lineHeight="21px">
@@ -6,6 +6,7 @@ import { ThemeContext } from '../ThemeProvider/ThemeProvider';
6
6
  import classNames from 'classnames';
7
7
  import Button from '../Button';
8
8
  import Typography from '../Typography';
9
+ import Checkbox from '../Checkbox';
9
10
 
10
11
  const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
11
12
  (
@@ -80,9 +81,11 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
80
81
  role="option"
81
82
  className={`dropdown-option-container`}
82
83
  key={info.label}
83
- onClick={() => handleOptionChange(info, !info.isChecked)}
84
+ onClick={() =>
85
+ !info?.isDisabled && handleOptionChange(info, !info.isChecked)
86
+ }
84
87
  >
85
- <input type="checkbox" checked={info.isChecked} readOnly />
88
+ <Checkbox checked={info.isChecked} disabled={info?.isDisabled}/>
86
89
  <Typography
87
90
  as="span"
88
91
  className="dropdown-option-label"
@@ -89,11 +89,12 @@
89
89
  @extend .fontXs;
90
90
  line-height: 14px;
91
91
  color: var(--tooltip-bg-color);
92
- &.pr-2 {
92
+ &.label-padding {
93
93
  padding: 5px 2px;
94
94
  }
95
95
  }
96
96
  .ff-multiselect-chip-close-icon {
97
+ color: var(--brand-color);
97
98
  cursor: pointer;
98
99
  }
99
100
  }
@@ -114,15 +115,15 @@
114
115
  }
115
116
  }
116
117
  }
117
- .ff-multiselect-more-chip {
118
- display: flex;
119
- align-items: center;
120
- width: 1.2rem;
121
- @extend .fontSm;
122
- font-weight: 600;
123
- line-height: 16px;
124
- color: var(--brand-color);
125
- }
118
+ }
119
+ .ff-multiselect-more-chip {
120
+ display: flex;
121
+ align-items: center;
122
+ width: 1rem;
123
+ @extend .fontSm;
124
+ font-weight: 600;
125
+ line-height: 16px;
126
+ color: var(--brand-color);
126
127
  }
127
128
  &__toggle {
128
129
  display: flex;
@@ -6,26 +6,36 @@ import Dropdown from './Dropdown';
6
6
  import Icon from '../Icon';
7
7
  import { MultiSelectProps, Option } from './MultiSelectTypes';
8
8
  import Typography from '../Typography';
9
+ import Tooltip from '../Tooltip';
9
10
 
10
11
  const ChipElement = ({
11
12
  label,
12
13
  onChipCloseClick,
14
+ disableChip,
13
15
  }: {
14
16
  label: string;
15
17
  onChipCloseClick: (e: React.MouseEvent<HTMLDivElement>) => void;
18
+ disableChip: boolean;
16
19
  }) => {
17
20
  if (label) {
18
21
  return (
19
22
  <div className="ff-multiselect-chip">
20
- <span className="ff-multiselect-chip-label"> {label}</span>
21
- <Icon
22
- color="#71347b"
23
- className="ff-multiselect-chip-close-icon"
24
- onClick={onChipCloseClick}
25
- name="close_pill"
26
- height={13} //as per the latest chnages in icon container we have to give this
27
- width={13}
28
- />
23
+ <span className={`ff-multiselect-chip-label ${disableChip && 'label-padding'}`}>
24
+ <Tooltip
25
+ placement="bottom"
26
+ title={label?.length > 25 ? label : ''}
27
+ zIndex={101}
28
+ >
29
+ {label?.length > 25 ? label?.slice(0, 25) + '...' : label}
30
+ </Tooltip>
31
+ </span>
32
+ {!disableChip && (
33
+ <Icon
34
+ className="ff-multiselect-chip-close-icon"
35
+ onClick={onChipCloseClick}
36
+ name="close_pill"
37
+ />
38
+ )}
29
39
  </div>
30
40
  );
31
41
  }
@@ -46,6 +56,7 @@ const MultiSelect = ({
46
56
  withSelectButton = false,
47
57
  onSelect = () => {},
48
58
  displayCount = false,
59
+ placeholderForSearching = 'Search',
49
60
  }: MultiSelectProps) => {
50
61
  const [isOpen, setIsOpen] = useState<boolean>(false);
51
62
  const [allOptions, setAllOptions] = useState(options);
@@ -262,6 +273,7 @@ const MultiSelect = ({
262
273
  key={option?.label}
263
274
  label={option?.label || ''}
264
275
  onChipCloseClick={(e) => handleChipCloseClick(option, e)}
276
+ disableChip={option?.isDisabled || false}
265
277
  />
266
278
  ))}
267
279
  </>
@@ -271,6 +283,7 @@ const MultiSelect = ({
271
283
  key={option?.label}
272
284
  label={option?.label || ''}
273
285
  onChipCloseClick={(e) => handleChipCloseClick(option, e)}
286
+ disableChip={option?.isDisabled || false}
274
287
  />
275
288
  ))
276
289
  )}
@@ -279,7 +292,7 @@ const MultiSelect = ({
279
292
  value={searchedKeyword}
280
293
  type={type}
281
294
  autoComplete="off"
282
- placeholder="search..."
295
+ placeholder={placeholderForSearching}
283
296
  ref={inputRef}
284
297
  onChange={handleSearch}
285
298
  onKeyDown={handleKeyEnter}
@@ -291,16 +304,13 @@ const MultiSelect = ({
291
304
  }}
292
305
  />
293
306
  </div>
294
- {hiddenCount > 0 && (
295
- <div
296
- className="ff-multiselect-more-chip"
297
- onClick={toggleDropdown}
298
- >
299
- +{hiddenCount}
300
- </div>
301
- )}
302
307
  </div>
303
308
  </div>
309
+ {hiddenCount > 0 && displayCount && (
310
+ <div className="ff-multiselect-more-chip" onClick={toggleDropdown}>
311
+ +{hiddenCount}
312
+ </div>
313
+ )}
304
314
  <div onClick={toggleDropdown} className="ff-multiselect__toggle">
305
315
  <Icon
306
316
  name="arrow_down"
@@ -20,6 +20,7 @@ interface MultiSelectProps {
20
20
  withSelectButton?: boolean;
21
21
  onSelect?: () => void;
22
22
  displayCount?: boolean;
23
+ placeholderForSearching?: string;
23
24
  }
24
25
 
25
- export { Option, MultiSelectProps };
26
+ export { Option, MultiSelectProps };
@@ -68,7 +68,6 @@
68
68
  }
69
69
  td:first-child {
70
70
  div {
71
- display: flex;
72
71
  align-items: center;
73
72
  .ff-table-checkbox {
74
73
  padding-right: 8px;
@@ -1,7 +1,7 @@
1
1
  @use '../../assets/styles/fonts';
2
2
 
3
3
  .ff-tooltip-container {
4
- cursor: auto;
4
+ cursor: pointer;
5
5
  display: inline-block;
6
6
  }
7
7