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/lib/components/Drawer/Types.d.ts +8 -7
- package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
- package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
- package/lib/index.d.ts +10 -8
- package/lib/index.esm.js +122 -124
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +122 -124
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/AppHeader/AppHeader.tsx +4 -4
- package/src/components/Drawer/Drawer.stories.tsx +8 -9
- package/src/components/Drawer/Drawer.tsx +8 -5
- package/src/components/Drawer/Types.ts +9 -7
- package/src/components/Form/Forms.tsx +5 -1
- package/src/components/ModulesChip/ModuleChip.scss +2 -2
- package/src/components/ModulesChip/ModuleChip.tsx +4 -4
- package/src/components/MultiSelect/Dropdown.tsx +5 -2
- package/src/components/MultiSelect/MultiSelect.scss +11 -10
- package/src/components/MultiSelect/MultiSelect.tsx +28 -18
- package/src/components/MultiSelect/MultiSelectTypes.ts +2 -1
- package/src/components/Table/Table.scss +0 -1
- package/src/components/Tooltip/Tooltip.scss +1 -1
package/package.json
CHANGED
@@ -11,9 +11,9 @@ const AppHeader: React.FC<AppHeaderProps> = ({
|
|
11
11
|
logoIconName = 'fireflink_icon',
|
12
12
|
leftContent,
|
13
13
|
rightContent,
|
14
|
-
projectsList
|
14
|
+
projectsList,
|
15
15
|
appHeaderMenuItems,
|
16
|
-
appHeaderHiddenMenuItems
|
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
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
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
|
-
|
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
|
-
{
|
179
|
+
{leftTertiaryButtonProps?.label && (
|
179
180
|
<Button
|
180
|
-
{...
|
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
|
-
{
|
189
|
+
{rightTertiaryButtonProps?.label && (
|
188
190
|
<Button
|
189
|
-
{...
|
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
|
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-
|
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-
|
14
|
-
'ff-
|
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={() =>
|
84
|
+
onClick={() =>
|
85
|
+
!info?.isDisabled && handleOptionChange(info, !info.isChecked)
|
86
|
+
}
|
84
87
|
>
|
85
|
-
<
|
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
|
-
&.
|
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
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
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=
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
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=
|
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"
|