@spaced-out/ui-design-system 0.3.18 → 0.3.20
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/.github/workflows/pages.yml +5 -5
- package/.github/workflows/publish_to_npm.yml +2 -2
- package/.storybook/manager-head.html +24 -4
- package/CHANGELOG.md +20 -0
- package/lib/components/Chip/Chip.js +4 -1
- package/lib/components/Chip/Chip.js.flow +4 -1
- package/lib/components/Chip/Chip.module.css +1 -1
- package/lib/components/Icon/ClickableIcon.js +6 -2
- package/lib/components/Icon/ClickableIcon.js.flow +39 -10
- package/lib/components/Input/Input.js +4 -1
- package/lib/components/Input/Input.js.flow +6 -1
- package/package.json +13 -13
|
@@ -32,8 +32,8 @@ jobs:
|
|
|
32
32
|
runs-on: ubuntu-latest
|
|
33
33
|
steps:
|
|
34
34
|
- name: Checkout
|
|
35
|
-
uses: actions/checkout@
|
|
36
|
-
- uses: actions/setup-node@
|
|
35
|
+
uses: actions/checkout@v4
|
|
36
|
+
- uses: actions/setup-node@v4
|
|
37
37
|
with:
|
|
38
38
|
node-version: '18.20.5'
|
|
39
39
|
- name: Install and Build 🔧
|
|
@@ -47,12 +47,12 @@ jobs:
|
|
|
47
47
|
ls ${{ github.workspace }}
|
|
48
48
|
echo "🍏 This job's status is ${{ job.status }}."
|
|
49
49
|
- name: Setup Pages
|
|
50
|
-
uses: actions/configure-pages@
|
|
50
|
+
uses: actions/configure-pages@v5
|
|
51
51
|
- name: Upload artifact
|
|
52
|
-
uses: actions/upload-pages-artifact@
|
|
52
|
+
uses: actions/upload-pages-artifact@v3
|
|
53
53
|
with:
|
|
54
54
|
# Upload storybook-static folder's content
|
|
55
55
|
path: './storybook-static/'
|
|
56
56
|
- name: Deploy to GitHub Pages
|
|
57
57
|
id: deployment
|
|
58
|
-
uses: actions/deploy-pages@
|
|
58
|
+
uses: actions/deploy-pages@v4
|
|
@@ -32,14 +32,14 @@ jobs:
|
|
|
32
32
|
# Added fetch-depth to fetch complete history of repo. TODO(Nishant): Customize?
|
|
33
33
|
# TODO(Nishant): update with a org bot token instead of personal token
|
|
34
34
|
- name: Checkout
|
|
35
|
-
uses: actions/checkout@
|
|
35
|
+
uses: actions/checkout@v4
|
|
36
36
|
with:
|
|
37
37
|
token: ${{ secrets.NPM_PUBLISH_USER_ACCESS_TOKEN }}
|
|
38
38
|
fetch-depth: '0'
|
|
39
39
|
|
|
40
40
|
# Setup Node.js environment
|
|
41
41
|
- name: Setup Node.js
|
|
42
|
-
uses: actions/setup-node@
|
|
42
|
+
uses: actions/setup-node@v4
|
|
43
43
|
with:
|
|
44
44
|
registry-url: https://registry.npmjs.org/
|
|
45
45
|
node-version: '18.20.5'
|
|
@@ -58,10 +58,6 @@
|
|
|
58
58
|
color: #efebfa !important;
|
|
59
59
|
}
|
|
60
60
|
|
|
61
|
-
.sidebar-item[data-selected='true'] {
|
|
62
|
-
background: #5c34cd !important;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
61
|
.search-field input {
|
|
66
62
|
border-color: #efebfa !important;
|
|
67
63
|
}
|
|
@@ -103,4 +99,28 @@
|
|
|
103
99
|
/* add story ui button immediately following the search bar */
|
|
104
100
|
display: none;
|
|
105
101
|
}
|
|
102
|
+
|
|
103
|
+
.sidebar-item:hover,
|
|
104
|
+
.sidebar-item:focus {
|
|
105
|
+
background: #1f1f36 !important;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.sidebar-item > a,
|
|
109
|
+
.sidebar-item > button {
|
|
110
|
+
color: #d3d2e0 !important;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.sidebar-item:hover > a,
|
|
114
|
+
.sidebar-item:hover > button {
|
|
115
|
+
color: #fff !important;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.sidebar-item[data-selected='true'] {
|
|
119
|
+
background: #5c34cd !important;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.sidebar-item[data-selected='true'] > a,
|
|
123
|
+
.sidebar-item[data-selected='true'] > button {
|
|
124
|
+
color: #fff !important;
|
|
125
|
+
}
|
|
106
126
|
</style>
|
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,26 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
### [0.3.20](https://github.com/spaced-out/ui-design-system/compare/v0.3.19...v0.3.20) (2025-02-03)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* storybook 8.5 upgrade and related changes ([ff1245c](https://github.com/spaced-out/ui-design-system/commit/ff1245cf0e0fe3599fcd92c9078f08238bab80c3))
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Bug Fixes
|
|
14
|
+
|
|
15
|
+
* password toggle icon fix to disallow accessing password ([#318](https://github.com/spaced-out/ui-design-system/issues/318)) ([5ff9b38](https://github.com/spaced-out/ui-design-system/commit/5ff9b3808cd62fd98f655b08b2898f07ec9b5003))
|
|
16
|
+
* upgraded several publish packages ([863857a](https://github.com/spaced-out/ui-design-system/commit/863857a8fb69d1eabf9a2ec70498965834861bf5))
|
|
17
|
+
|
|
18
|
+
### [0.3.19](https://github.com/spaced-out/ui-design-system/compare/v0.3.18...v0.3.19) (2025-01-27)
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
### Bug Fixes
|
|
22
|
+
|
|
23
|
+
* chip outline ([#316](https://github.com/spaced-out/ui-design-system/issues/316)) ([18d8467](https://github.com/spaced-out/ui-design-system/commit/18d8467fbc077dcd9e99ec4d283447e0d31dfb70))
|
|
24
|
+
|
|
5
25
|
### [0.3.18](https://github.com/spaced-out/ui-design-system/compare/v0.3.17...v0.3.18) (2025-01-23)
|
|
6
26
|
|
|
7
27
|
|
|
@@ -100,7 +100,10 @@ const Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
100
100
|
type: iconType,
|
|
101
101
|
size: "small"
|
|
102
102
|
}), /*#__PURE__*/React.createElement(_Truncate.Truncate, null, children), dismissable && size !== 'small' && /*#__PURE__*/React.createElement(_Icon.CloseIcon, {
|
|
103
|
-
|
|
103
|
+
classNames: {
|
|
104
|
+
icon: _ChipModule.default.dismissIcon,
|
|
105
|
+
button: _ChipModule.default.dismissIconWrapper
|
|
106
|
+
},
|
|
104
107
|
type: iconType,
|
|
105
108
|
size: "small",
|
|
106
109
|
ariaLabel: "Dismiss",
|
|
@@ -159,7 +159,10 @@ export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
|
|
|
159
159
|
|
|
160
160
|
{dismissable && size !== 'small' && (
|
|
161
161
|
<CloseIcon
|
|
162
|
-
|
|
162
|
+
classNames={{
|
|
163
|
+
icon: css.dismissIcon,
|
|
164
|
+
button: css.dismissIconWrapper,
|
|
165
|
+
}}
|
|
163
166
|
type={iconType}
|
|
164
167
|
size="small"
|
|
165
168
|
ariaLabel="Dismiss"
|
|
@@ -19,6 +19,9 @@ const ClickableIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
19
19
|
size = 'medium',
|
|
20
20
|
ariaLabel,
|
|
21
21
|
onClick,
|
|
22
|
+
className,
|
|
23
|
+
// Deprecated for Clickable Icon
|
|
24
|
+
classNames,
|
|
22
25
|
...props
|
|
23
26
|
} = _ref;
|
|
24
27
|
const onKeyDownHandler = e => {
|
|
@@ -35,10 +38,11 @@ const ClickableIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
35
38
|
[_ClickableIconModule.default.small]: size === 'small',
|
|
36
39
|
[_ClickableIconModule.default.medium]: size === 'medium',
|
|
37
40
|
[_ClickableIconModule.default.large]: size === 'large'
|
|
38
|
-
}),
|
|
41
|
+
}, classNames?.button),
|
|
39
42
|
ref: ref
|
|
40
43
|
}), /*#__PURE__*/React.createElement(_.Icon, _extends({
|
|
41
|
-
size: size
|
|
44
|
+
size: size,
|
|
45
|
+
className: classNames?.icon || className
|
|
42
46
|
}, props)));
|
|
43
47
|
});
|
|
44
48
|
exports.ClickableIcon = ClickableIcon;
|
|
@@ -13,11 +13,31 @@ import {Icon} from './';
|
|
|
13
13
|
import css from './ClickableIcon.module.css';
|
|
14
14
|
|
|
15
15
|
|
|
16
|
+
type ClassNames = $ReadOnly<{
|
|
17
|
+
icon?: string,
|
|
18
|
+
button?: string,
|
|
19
|
+
}>;
|
|
20
|
+
|
|
21
|
+
export type ClickableIconProps = {
|
|
22
|
+
...IconProps,
|
|
23
|
+
classNames?: ClassNames,
|
|
24
|
+
};
|
|
25
|
+
|
|
16
26
|
export const ClickableIcon: React$AbstractComponent<
|
|
17
|
-
|
|
27
|
+
ClickableIconProps,
|
|
18
28
|
HTMLButtonElement,
|
|
19
|
-
> = React.forwardRef<
|
|
20
|
-
(
|
|
29
|
+
> = React.forwardRef<ClickableIconProps, HTMLButtonElement>(
|
|
30
|
+
(
|
|
31
|
+
{
|
|
32
|
+
size = 'medium',
|
|
33
|
+
ariaLabel,
|
|
34
|
+
onClick,
|
|
35
|
+
className, // Deprecated for Clickable Icon
|
|
36
|
+
classNames,
|
|
37
|
+
...props
|
|
38
|
+
}: ClickableIconProps,
|
|
39
|
+
ref,
|
|
40
|
+
) => {
|
|
21
41
|
const onKeyDownHandler = (e) => {
|
|
22
42
|
if (e.key === 'Enter') {
|
|
23
43
|
e.preventDefault();
|
|
@@ -30,14 +50,22 @@ export const ClickableIcon: React$AbstractComponent<
|
|
|
30
50
|
onClick={onClick}
|
|
31
51
|
onKeyDown={onKeyDownHandler}
|
|
32
52
|
ariaLabel={ariaLabel}
|
|
33
|
-
className={classify(
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
53
|
+
className={classify(
|
|
54
|
+
css.button,
|
|
55
|
+
{
|
|
56
|
+
[css.small]: size === 'small',
|
|
57
|
+
[css.medium]: size === 'medium',
|
|
58
|
+
[css.large]: size === 'large',
|
|
59
|
+
},
|
|
60
|
+
classNames?.button,
|
|
61
|
+
)}
|
|
38
62
|
ref={ref}
|
|
39
63
|
>
|
|
40
|
-
<Icon
|
|
64
|
+
<Icon
|
|
65
|
+
size={size}
|
|
66
|
+
className={classNames?.icon || className}
|
|
67
|
+
{...props}
|
|
68
|
+
/>
|
|
41
69
|
</UnstyledButton>
|
|
42
70
|
);
|
|
43
71
|
},
|
|
@@ -48,8 +76,9 @@ export type CloseIconProps = {
|
|
|
48
76
|
type?: IconType,
|
|
49
77
|
color?: ColorTypes,
|
|
50
78
|
onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
|
|
51
|
-
className?: string,
|
|
79
|
+
className?: string, // Deprecated for Clickable Icon
|
|
52
80
|
ariaLabel?: string,
|
|
81
|
+
classNames?: ClassNames,
|
|
53
82
|
};
|
|
54
83
|
|
|
55
84
|
export const CloseIcon: React$AbstractComponent<
|
|
@@ -60,6 +60,7 @@ const Input_ = (props, ref) => {
|
|
|
60
60
|
onKeyDown,
|
|
61
61
|
disallowExponents,
|
|
62
62
|
hideNumberSpinner,
|
|
63
|
+
hidePasswordToggleIcon,
|
|
63
64
|
...inputProps
|
|
64
65
|
} = props;
|
|
65
66
|
const [showPassword, setShowPassword] = React.useState(false);
|
|
@@ -131,6 +132,7 @@ const Input_ = (props, ref) => {
|
|
|
131
132
|
isEmail: type === 'email',
|
|
132
133
|
isPassword: type === 'password',
|
|
133
134
|
showPassword: showPassword,
|
|
135
|
+
showPasswordToggleIcon: !hidePasswordToggleIcon,
|
|
134
136
|
isLocked: locked,
|
|
135
137
|
isDisabled: disabled,
|
|
136
138
|
onClick: handleRightIconClick,
|
|
@@ -150,6 +152,7 @@ const RightInputIcon = _ref => {
|
|
|
150
152
|
isEmail,
|
|
151
153
|
isPassword,
|
|
152
154
|
showPassword,
|
|
155
|
+
showPasswordToggleIcon,
|
|
153
156
|
isLocked,
|
|
154
157
|
isDisabled,
|
|
155
158
|
iconRightName,
|
|
@@ -171,7 +174,7 @@ const RightInputIcon = _ref => {
|
|
|
171
174
|
type: iconRightType
|
|
172
175
|
}, rightIconProps));
|
|
173
176
|
}
|
|
174
|
-
if (isPassword) {
|
|
177
|
+
if (isPassword && showPasswordToggleIcon) {
|
|
175
178
|
return /*#__PURE__*/React.createElement(_Icon.Icon, _extends({
|
|
176
179
|
name: showPassword ? 'eye-slash' : 'eye',
|
|
177
180
|
color: isDisabled ? 'disabled' : 'secondary',
|
|
@@ -82,6 +82,7 @@ export type InputProps = {
|
|
|
82
82
|
* appropriate default value if neither of those is provided) are valid. */
|
|
83
83
|
step?: string,
|
|
84
84
|
hideNumberSpinner?: boolean,
|
|
85
|
+
hidePasswordToggleIcon?: boolean,
|
|
85
86
|
...
|
|
86
87
|
};
|
|
87
88
|
|
|
@@ -114,6 +115,7 @@ const Input_ = (props: InputProps, ref): React.Node => {
|
|
|
114
115
|
onKeyDown,
|
|
115
116
|
disallowExponents,
|
|
116
117
|
hideNumberSpinner,
|
|
118
|
+
hidePasswordToggleIcon,
|
|
117
119
|
...inputProps
|
|
118
120
|
} = props;
|
|
119
121
|
|
|
@@ -215,6 +217,7 @@ const Input_ = (props: InputProps, ref): React.Node => {
|
|
|
215
217
|
isEmail={type === 'email'}
|
|
216
218
|
isPassword={type === 'password'}
|
|
217
219
|
showPassword={showPassword}
|
|
220
|
+
showPasswordToggleIcon={!hidePasswordToggleIcon}
|
|
218
221
|
isLocked={locked}
|
|
219
222
|
isDisabled={disabled}
|
|
220
223
|
onClick={handleRightIconClick}
|
|
@@ -244,6 +247,7 @@ const RightInputIcon = ({
|
|
|
244
247
|
isEmail,
|
|
245
248
|
isPassword,
|
|
246
249
|
showPassword,
|
|
250
|
+
showPasswordToggleIcon,
|
|
247
251
|
isLocked,
|
|
248
252
|
isDisabled,
|
|
249
253
|
iconRightName,
|
|
@@ -253,6 +257,7 @@ const RightInputIcon = ({
|
|
|
253
257
|
isEmail?: boolean,
|
|
254
258
|
isPassword?: boolean,
|
|
255
259
|
showPassword?: boolean,
|
|
260
|
+
showPasswordToggleIcon?: boolean,
|
|
256
261
|
isLocked?: boolean,
|
|
257
262
|
isDisabled?: boolean,
|
|
258
263
|
onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
|
|
@@ -281,7 +286,7 @@ const RightInputIcon = ({
|
|
|
281
286
|
/>
|
|
282
287
|
);
|
|
283
288
|
}
|
|
284
|
-
if (isPassword) {
|
|
289
|
+
if (isPassword && showPasswordToggleIcon) {
|
|
285
290
|
return (
|
|
286
291
|
<Icon
|
|
287
292
|
name={showPassword ? 'eye-slash' : 'eye'}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spaced-out/ui-design-system",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.20",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"description": "Sense UI components library",
|
|
6
6
|
"author": {
|
|
@@ -64,18 +64,18 @@
|
|
|
64
64
|
"@babel/preset-react": "^7.18.6",
|
|
65
65
|
"@commitlint/cli": "^17.1.2",
|
|
66
66
|
"@commitlint/config-conventional": "^17.1.0",
|
|
67
|
-
"@storybook/addon-a11y": "^8.
|
|
68
|
-
"@storybook/addon-essentials": "^8.
|
|
69
|
-
"@storybook/addon-mdx-gfm": "^8.
|
|
70
|
-
"@storybook/addon-storysource": "^8.
|
|
71
|
-
"@storybook/addon-webpack5-compiler-babel": "^3.0.
|
|
67
|
+
"@storybook/addon-a11y": "^8.5.2",
|
|
68
|
+
"@storybook/addon-essentials": "^8.5.2",
|
|
69
|
+
"@storybook/addon-mdx-gfm": "^8.5.2",
|
|
70
|
+
"@storybook/addon-storysource": "^8.5.2",
|
|
71
|
+
"@storybook/addon-webpack5-compiler-babel": "^3.0.5",
|
|
72
72
|
"@storybook/addons": "^7.6.17",
|
|
73
|
-
"@storybook/blocks": "^8.
|
|
74
|
-
"@storybook/react": "^8.
|
|
75
|
-
"@storybook/react-webpack5": "^8.
|
|
76
|
-
"@storybook/test-runner": "^0.
|
|
73
|
+
"@storybook/blocks": "^8.5.2",
|
|
74
|
+
"@storybook/react": "^8.5.2",
|
|
75
|
+
"@storybook/react-webpack5": "^8.5.2",
|
|
76
|
+
"@storybook/test-runner": "^0.21.0",
|
|
77
77
|
"@storybook/testing-react": "^2.0.1",
|
|
78
|
-
"@storybook/theming": "^8.
|
|
78
|
+
"@storybook/theming": "^8.5.2",
|
|
79
79
|
"@testing-library/react": "^11.2.7",
|
|
80
80
|
"all-contributors-cli": "^6.20.0",
|
|
81
81
|
"babel-eslint": "^10.1.0",
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
"eslint-plugin-react": "^7.30.1",
|
|
94
94
|
"eslint-plugin-react-hooks": "^4.6.0",
|
|
95
95
|
"eslint-plugin-simple-import-sort": "^8.0.0",
|
|
96
|
-
"eslint-plugin-storybook": "^0.11.
|
|
96
|
+
"eslint-plugin-storybook": "^0.11.2",
|
|
97
97
|
"eslint-plugin-unused-imports": "^2.0.0",
|
|
98
98
|
"flow-bin": "^0.184.0",
|
|
99
99
|
"gulp": "^4.0.2",
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
"rimraf": "^3.0.2",
|
|
112
112
|
"simple-git": "^3.12.0",
|
|
113
113
|
"standard-version": "^9.5.0",
|
|
114
|
-
"storybook": "^8.
|
|
114
|
+
"storybook": "^8.5.2",
|
|
115
115
|
"storybook-css-modules": "^1.0.8",
|
|
116
116
|
"storybook-vscode-component": "^1.0.9",
|
|
117
117
|
"style-dictionary": "^3.7.1"
|