@jetbrains/ring-ui 7.0.19 → 7.0.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/components/avatar/avatar.d.ts +2 -0
- package/components/avatar/avatar.js +8 -0
- package/components/avatar-stack/avatar-stack.css +121 -0
- package/components/avatar-stack/avatar-stack.d.ts +15 -0
- package/components/avatar-stack/avatar-stack.js +12 -0
- package/components/avatar-stack/avatar-stack.mask-20.svg +3 -0
- package/components/avatar-stack/avatar-stack.mask-24.svg +3 -0
- package/components/avatar-stack/avatar-stack.mask-28.svg +3 -0
- package/components/avatar-stack/avatar-stack.mask-32.svg +3 -0
- package/components/avatar-stack/avatar-stack.mask-40.svg +3 -0
- package/components/avatar-stack/avatar-stack.mask-56.svg +3 -0
- package/package.json +12 -12
- package/typings.d.ts +5 -0
- package/components/alert-service/alert-service.stories.css +0 -17
- package/components/collapse/collapse.stories.css +0 -25
- package/components/form/form.stories.js +0 -119
- package/components/input-size/input-size.stories.js +0 -92
- package/components/list/list.stories.css +0 -3
- package/components/table/table.stories.json +0 -74
|
@@ -3,12 +3,14 @@ import { PureComponent, ImgHTMLAttributes } from 'react';
|
|
|
3
3
|
* @name Avatar
|
|
4
4
|
*/
|
|
5
5
|
export declare enum Size {
|
|
6
|
+
/** @deprecated */
|
|
6
7
|
Size18 = 18,
|
|
7
8
|
Size20 = 20,
|
|
8
9
|
Size24 = 24,
|
|
9
10
|
Size28 = 28,
|
|
10
11
|
Size32 = 32,
|
|
11
12
|
Size40 = 40,
|
|
13
|
+
/** @deprecated */
|
|
12
14
|
Size48 = 48,
|
|
13
15
|
Size56 = 56
|
|
14
16
|
}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { PureComponent } from 'react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
|
+
import deprecate from 'util-deprecate';
|
|
4
5
|
import { encodeURL, isDataURI, parseQueryString } from '../global/url';
|
|
5
6
|
import { getPixelRatio } from '../global/dom';
|
|
7
|
+
import memoize from '../global/memoize';
|
|
6
8
|
import styles from './avatar.css';
|
|
7
9
|
import FallbackAvatar from './fallback-avatar';
|
|
8
10
|
/**
|
|
@@ -10,15 +12,18 @@ import FallbackAvatar from './fallback-avatar';
|
|
|
10
12
|
*/
|
|
11
13
|
export var Size;
|
|
12
14
|
(function (Size) {
|
|
15
|
+
/** @deprecated */
|
|
13
16
|
Size[Size["Size18"] = 18] = "Size18";
|
|
14
17
|
Size[Size["Size20"] = 20] = "Size20";
|
|
15
18
|
Size[Size["Size24"] = 24] = "Size24";
|
|
16
19
|
Size[Size["Size28"] = 28] = "Size28";
|
|
17
20
|
Size[Size["Size32"] = 32] = "Size32";
|
|
18
21
|
Size[Size["Size40"] = 40] = "Size40";
|
|
22
|
+
/** @deprecated */
|
|
19
23
|
Size[Size["Size48"] = 48] = "Size48";
|
|
20
24
|
Size[Size["Size56"] = 56] = "Size56";
|
|
21
25
|
})(Size || (Size = {}));
|
|
26
|
+
const warnSize = memoize((size) => deprecate(() => { }, `Avatar: Size${size} is deprecated and will be removed in 8.0. The supported sizes are: Size20, Size24, Size28, Size32, Size40.`));
|
|
22
27
|
export default class Avatar extends PureComponent {
|
|
23
28
|
static defaultProps = {
|
|
24
29
|
dpr: getPixelRatio(),
|
|
@@ -37,6 +42,9 @@ export default class Avatar extends PureComponent {
|
|
|
37
42
|
};
|
|
38
43
|
render() {
|
|
39
44
|
const { size, url, dpr, style, round, subavatar, subavatarSize, username, skipParams, ...restProps } = this.props;
|
|
45
|
+
if ([Size.Size18, Size.Size48].includes(size)) {
|
|
46
|
+
warnSize(size)();
|
|
47
|
+
}
|
|
40
48
|
const sizeString = `${size}px`;
|
|
41
49
|
const subavatarSizeString = `${subavatarSize}px`;
|
|
42
50
|
const borderRadius = size <= Size.Size18 ? 'var(--ring-border-radius-small)' : 'var(--ring-border-radius)';
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
.size20 {
|
|
2
|
+
--ring-avatar-stack-offset: 12px;
|
|
3
|
+
--ring-avatar-stack-mask-image: url('avatar-stack.mask-20.svg');
|
|
4
|
+
--ring-avatar-stack-extra-font-size: 9px
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.size24 {
|
|
8
|
+
--ring-avatar-stack-offset: 16px;
|
|
9
|
+
--ring-avatar-stack-mask-image: url('avatar-stack.mask-24.svg');
|
|
10
|
+
--ring-avatar-stack-extra-font-size: 11px;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.size28 {
|
|
14
|
+
--ring-avatar-stack-offset: 18px;
|
|
15
|
+
--ring-avatar-stack-mask-image: url('avatar-stack.mask-28.svg');
|
|
16
|
+
--ring-avatar-stack-extra-font-size: var(--ring-font-size-smaller);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.size32 {
|
|
20
|
+
--ring-avatar-stack-offset: 20px;
|
|
21
|
+
--ring-avatar-stack-mask-image: url('avatar-stack.mask-32.svg');
|
|
22
|
+
--ring-avatar-stack-extra-font-size: var(--ring-font-size);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.size40 {
|
|
26
|
+
--ring-avatar-stack-offset: 26px;
|
|
27
|
+
--ring-avatar-stack-mask-image: url('avatar-stack.mask-40.svg');
|
|
28
|
+
--ring-avatar-stack-extra-font-size: var(--ring-font-size-larger);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.size56 {
|
|
32
|
+
--ring-avatar-stack-offset: 42px;
|
|
33
|
+
--ring-avatar-stack-mask-image: url('avatar-stack.mask-56.svg');
|
|
34
|
+
--ring-avatar-stack-extra-font-size: 22px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.avatarStack {
|
|
38
|
+
position: relative;
|
|
39
|
+
|
|
40
|
+
display: inline-flex;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.item {
|
|
44
|
+
position: relative;
|
|
45
|
+
|
|
46
|
+
margin-left: calc(var(--ring-avatar-stack-offset) * -1);
|
|
47
|
+
|
|
48
|
+
transition: transform var(--ring-fast-ease);
|
|
49
|
+
mask-image: var(--ring-avatar-stack-mask-image);
|
|
50
|
+
mask-position: calc(var(--ring-avatar-stack-offset) - 4px) -1px;
|
|
51
|
+
mask-repeat: no-repeat;
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
/* make the gaps hoverable */
|
|
55
|
+
&::before {
|
|
56
|
+
position: absolute;
|
|
57
|
+
top: 0;
|
|
58
|
+
right: -1px;
|
|
59
|
+
bottom: 0;
|
|
60
|
+
left: -1px;
|
|
61
|
+
|
|
62
|
+
content: '';
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.item:nth-child(1) {
|
|
67
|
+
--ring-avatar-stack-index: 0;
|
|
68
|
+
--ring-avatar-stack-offset: 0;
|
|
69
|
+
|
|
70
|
+
mask: none;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.hovered .item,
|
|
74
|
+
.avatarStack:hover .item,
|
|
75
|
+
.avatarStack:focus-within .item {
|
|
76
|
+
mask: none;
|
|
77
|
+
|
|
78
|
+
transform: translateX(calc((var(--ring-avatar-stack-offset) + 2px) * var(--ring-avatar-stack-index)));
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.extra {
|
|
82
|
+
composes: item;
|
|
83
|
+
|
|
84
|
+
color: var(--ring-secondary-color);
|
|
85
|
+
|
|
86
|
+
border-radius: var(--ring-border-radius);
|
|
87
|
+
|
|
88
|
+
background-color: var(--ring-disabled-background-color);
|
|
89
|
+
|
|
90
|
+
font-size: var(--ring-avatar-stack-extra-font-size);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.extraText {
|
|
94
|
+
composes: resetButton from "../global/global.css";
|
|
95
|
+
|
|
96
|
+
display: block;
|
|
97
|
+
|
|
98
|
+
width: 100%;
|
|
99
|
+
height: 100%;
|
|
100
|
+
|
|
101
|
+
cursor: pointer;
|
|
102
|
+
transition: opacity var(--ring-fast-ease);
|
|
103
|
+
text-align: center;
|
|
104
|
+
|
|
105
|
+
opacity: 0;
|
|
106
|
+
|
|
107
|
+
border-radius: var(--ring-border-radius);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.extraText:focus-visible {
|
|
111
|
+
outline: none;
|
|
112
|
+
box-shadow: 0 0 0 2px var(--ring-border-hover-color);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.hovered .extraText,
|
|
116
|
+
.avatarStack:hover .extraText,
|
|
117
|
+
.avatarStack:focus-within .extraText {
|
|
118
|
+
opacity: 1;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
import { ListDataItem } from '../list/consts';
|
|
3
|
+
import { DropdownMenuProps } from '../dropdown-menu/dropdown-menu';
|
|
4
|
+
import { Size } from '../avatar/avatar';
|
|
5
|
+
declare module 'csstype' {
|
|
6
|
+
interface Properties {
|
|
7
|
+
'--ring-avatar-stack-index'?: number;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
export interface AvatarProps<T = unknown> extends HTMLAttributes<HTMLDivElement> {
|
|
11
|
+
size?: Size | undefined;
|
|
12
|
+
extraItems?: readonly ListDataItem<T>[] | null | undefined;
|
|
13
|
+
dropdownMenuProps?: DropdownMenuProps<T> | null | undefined;
|
|
14
|
+
}
|
|
15
|
+
export default function AvatarStack({ children, className, size, extraItems, dropdownMenuProps, ...restProps }: AvatarProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Children, useState } from 'react';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
import DropdownMenu from '../dropdown-menu/dropdown-menu';
|
|
5
|
+
import { Size } from '../avatar/avatar';
|
|
6
|
+
import styles from './avatar-stack.css';
|
|
7
|
+
export default function AvatarStack({ children, className, size = Size.Size20, extraItems, dropdownMenuProps, ...restProps }) {
|
|
8
|
+
const [dropdownOpen, setDropdownOpen] = useState(false);
|
|
9
|
+
return (_jsxs("div", { className: classNames(styles.avatarStack, className, styles[`size${size}`], {
|
|
10
|
+
[styles.hovered]: dropdownOpen,
|
|
11
|
+
}), ...restProps, children: [Children.map(children, (child, index) => (_jsx("div", { className: styles.item, style: { '--ring-avatar-stack-index': index }, children: child }))), extraItems?.length && (_jsx(DropdownMenu, { hoverMode: true, hoverShowTimeOut: 10, onShow: () => setDropdownOpen(true), onHide: () => setDropdownOpen(false), className: styles.extra, style: { width: size, height: size, '--ring-avatar-stack-index': Children.count(children) }, anchor: _jsx("button", { type: "button", className: styles.extraText, children: `+${extraItems.length}` }), data: extraItems, menuProps: { offset: 4, ...dropdownMenuProps?.menuProps }, ...dropdownMenuProps }))] }));
|
|
12
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jetbrains/ring-ui",
|
|
3
|
-
"version": "7.0.
|
|
3
|
+
"version": "7.0.20",
|
|
4
4
|
"description": "JetBrains UI library",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "JetBrains"
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"figma-connect-publish-local": "dotenv -- npm run figma-connect-publish",
|
|
55
55
|
"figma-connect-unpublish": "npx figma connect unpublish --token=$FIGMA_CODE_CONNECT_TOKEN",
|
|
56
56
|
"figma-connect-unpublish-local": "dotenv -- npm run figma-connect-unpublish",
|
|
57
|
-
"prebuild": "rimraf components && tsc --project tsconfig-build.json && cpy './**/*' '!**/*.ts' '!**/*.tsx' '!**/__mocks__/**' ../components --parents --cwd=src/",
|
|
57
|
+
"prebuild": "rimraf components && tsc --project tsconfig-build.json && cpy './**/*' '!**/*.stories.*' '!**/*.ts' '!**/*.tsx' '!**/__mocks__/**' ../components --parents --cwd=src/",
|
|
58
58
|
"build": "./node_modules/.bin/rollup -c --bundleConfigAsCjs",
|
|
59
59
|
"postbuild": "cpy './**/*.d.ts' ../dist --parents --cwd=components/",
|
|
60
60
|
"serve": "http-server storybook-dist/ -p 9999",
|
|
@@ -136,14 +136,14 @@
|
|
|
136
136
|
"acorn": "^8.14.0",
|
|
137
137
|
"axe-playwright": "^2.0.3",
|
|
138
138
|
"babel-plugin-require-context-hook": "^1.0.0",
|
|
139
|
-
"caniuse-lite": "^1.0.
|
|
139
|
+
"caniuse-lite": "^1.0.30001692",
|
|
140
140
|
"chai": "^5.1.2",
|
|
141
141
|
"chai-as-promised": "^8.0.1",
|
|
142
142
|
"chai-dom": "^1.10.0",
|
|
143
143
|
"chai-enzyme": "1.0.0-beta.1",
|
|
144
144
|
"cheerio": "^1.0.0-rc.12",
|
|
145
|
-
"chromatic": "^11.
|
|
146
|
-
"core-js": "^3.
|
|
145
|
+
"chromatic": "^11.22.2",
|
|
146
|
+
"core-js": "^3.40.0",
|
|
147
147
|
"cpy-cli": "^5.0.0",
|
|
148
148
|
"dotenv-cli": "^8.0.0",
|
|
149
149
|
"enzyme": "^3.11.0",
|
|
@@ -156,9 +156,9 @@
|
|
|
156
156
|
"eslint-plugin-prettier": "^5.2.1",
|
|
157
157
|
"eslint-plugin-react": "^7.37.3",
|
|
158
158
|
"eslint-plugin-react-hooks": "^5.1.0",
|
|
159
|
-
"eslint-plugin-storybook": "^0.11.
|
|
159
|
+
"eslint-plugin-storybook": "^0.11.2",
|
|
160
160
|
"events": "^3.3.0",
|
|
161
|
-
"glob": "^11.0.
|
|
161
|
+
"glob": "^11.0.1",
|
|
162
162
|
"globals": "^15.14.0",
|
|
163
163
|
"html-webpack-plugin": "^5.6.3",
|
|
164
164
|
"http-server": "^14.1.1",
|
|
@@ -178,7 +178,7 @@
|
|
|
178
178
|
"react-test-renderer": "^19.0.0",
|
|
179
179
|
"regenerator-runtime": "^0.14.1",
|
|
180
180
|
"rimraf": "^6.0.1",
|
|
181
|
-
"rollup": "^4.
|
|
181
|
+
"rollup": "^4.30.1",
|
|
182
182
|
"rollup-plugin-clear": "^2.0.7",
|
|
183
183
|
"sinon": "^19.0.2",
|
|
184
184
|
"sinon-chai": "^4.0.0",
|
|
@@ -188,8 +188,8 @@
|
|
|
188
188
|
"svg-inline-loader": "^0.8.2",
|
|
189
189
|
"teamcity-service-messages": "^0.1.14",
|
|
190
190
|
"terser-webpack-plugin": "^5.3.11",
|
|
191
|
-
"typescript": "~5.7.
|
|
192
|
-
"typescript-eslint": "^8.19.
|
|
191
|
+
"typescript": "~5.7.3",
|
|
192
|
+
"typescript-eslint": "^8.19.1",
|
|
193
193
|
"vitest": "^2.1.8",
|
|
194
194
|
"vitest-teamcity-reporter": "^0.3.1",
|
|
195
195
|
"wallaby-webpack": "^3.9.16",
|
|
@@ -228,7 +228,7 @@
|
|
|
228
228
|
"@types/util-deprecate": "^1.0.4",
|
|
229
229
|
"babel-loader": "9.2.1",
|
|
230
230
|
"babel-plugin-transform-define": "^2.1.4",
|
|
231
|
-
"browserslist": "^4.24.
|
|
231
|
+
"browserslist": "^4.24.4",
|
|
232
232
|
"change-case": "^4.1.1",
|
|
233
233
|
"classnames": "^2.5.1",
|
|
234
234
|
"combokeys": "^3.0.1",
|
|
@@ -245,7 +245,7 @@
|
|
|
245
245
|
"just-debounce-it": "^3.2.0",
|
|
246
246
|
"memoize-one": "^6.0.0",
|
|
247
247
|
"postcss": "^8.4.49",
|
|
248
|
-
"postcss-calc": "^10.0
|
|
248
|
+
"postcss-calc": "^10.1.0",
|
|
249
249
|
"postcss-flexbugs-fixes": "^5.0.2",
|
|
250
250
|
"postcss-font-family-system-ui": "^5.0.0",
|
|
251
251
|
"postcss-loader": "^8.1.1",
|
package/typings.d.ts
CHANGED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
@import "../global/variables.css";
|
|
2
|
-
|
|
3
|
-
@value icon from "../button/button.css";
|
|
4
|
-
|
|
5
|
-
.customAlert {
|
|
6
|
-
color: var(--ring-white-text-color);
|
|
7
|
-
background: var(--ring-main-color);
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.closeButton .icon,
|
|
11
|
-
.closeButton:hover .icon {
|
|
12
|
-
color: var(--ring-white-text-color);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.closeButton:hover {
|
|
16
|
-
opacity: 0.8;
|
|
17
|
-
}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
.container {
|
|
2
|
-
width: 400px;
|
|
3
|
-
padding: 10px;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
.border {
|
|
7
|
-
border: 1px solid var(--ring-line-color);
|
|
8
|
-
border-radius: 5px;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.loaderWrapper {
|
|
12
|
-
display: flex;
|
|
13
|
-
align-items: center;
|
|
14
|
-
justify-content: center;
|
|
15
|
-
|
|
16
|
-
min-height: 200px;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.content {
|
|
20
|
-
display: flex;
|
|
21
|
-
align-items: center;
|
|
22
|
-
justify-content: center;
|
|
23
|
-
|
|
24
|
-
height: 500px;
|
|
25
|
-
}
|
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
import '../input/input-legacy.css';
|
|
2
|
-
import './form.css';
|
|
3
|
-
import '../input-size/input-size.css';
|
|
4
|
-
import '../error-bubble/error-bubble-legacy.css';
|
|
5
|
-
|
|
6
|
-
export default {
|
|
7
|
-
title: 'Style-only/Form',
|
|
8
|
-
|
|
9
|
-
parameters: {
|
|
10
|
-
notes: 'Helps create forms with various types of controls.',
|
|
11
|
-
},
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
export const basic = () => (
|
|
15
|
-
<div style={{width: 700}}>
|
|
16
|
-
<form className="ring-form">
|
|
17
|
-
<span className="ring-form__title">Form Title</span>
|
|
18
|
-
|
|
19
|
-
<div className="ring-form__group">
|
|
20
|
-
<label htmlFor="ring-form-1" className="ring-form__label">
|
|
21
|
-
Full-Width Input
|
|
22
|
-
</label>
|
|
23
|
-
<div className="ring-form__control">
|
|
24
|
-
<input className="ring-input" id="ring-form-1" type="text" />
|
|
25
|
-
</div>
|
|
26
|
-
</div>
|
|
27
|
-
|
|
28
|
-
<div className="ring-form__group">
|
|
29
|
-
<label htmlFor="ring-form-2" className="ring-form__label">
|
|
30
|
-
Medium Input
|
|
31
|
-
</label>
|
|
32
|
-
<div className="ring-form__control">
|
|
33
|
-
<input className="ring-input ring-input-size_m" id="ring-form-2" type="text" />
|
|
34
|
-
</div>
|
|
35
|
-
</div>
|
|
36
|
-
|
|
37
|
-
<div className="ring-form__group">
|
|
38
|
-
<label htmlFor="ring-form-3" className="ring-form__label">
|
|
39
|
-
Medium Input & Error
|
|
40
|
-
</label>
|
|
41
|
-
<div className="ring-form__control">
|
|
42
|
-
<input className="ring-input ring-input_error ring-input-size_m" id="ring-form-3" type="text" />
|
|
43
|
-
<div className="ring-error-bubble active">Error bubble</div>
|
|
44
|
-
</div>
|
|
45
|
-
</div>
|
|
46
|
-
|
|
47
|
-
<div className="ring-form__group">
|
|
48
|
-
<label htmlFor="ring-form-4" className="ring-form__label">
|
|
49
|
-
Long Input
|
|
50
|
-
</label>
|
|
51
|
-
<div className="ring-form__control">
|
|
52
|
-
<input className="ring-input ring-input-size_l" id="ring-form-4" type="text" />
|
|
53
|
-
<div className="ring-error-bubble active">Error bubble for a long control</div>
|
|
54
|
-
</div>
|
|
55
|
-
</div>
|
|
56
|
-
|
|
57
|
-
<div className="ring-form__group">
|
|
58
|
-
<label htmlFor="ring-form-5" className="ring-form__label">
|
|
59
|
-
Full-Width Control
|
|
60
|
-
</label>
|
|
61
|
-
<div className="ring-form__control">
|
|
62
|
-
<input className="ring-input" id="ring-form-5" type="text" />
|
|
63
|
-
<div className="ring-error-bubble active">Error bubble for a full-width control</div>
|
|
64
|
-
</div>
|
|
65
|
-
</div>
|
|
66
|
-
|
|
67
|
-
<div className="ring-form__group">
|
|
68
|
-
<label htmlFor="ring-form-7" className="ring-form__label">
|
|
69
|
-
Textarea
|
|
70
|
-
</label>
|
|
71
|
-
<div className="ring-form__control">
|
|
72
|
-
<textarea className="ring-input ring-input-size_m" id="ring-form-7" />
|
|
73
|
-
</div>
|
|
74
|
-
</div>
|
|
75
|
-
|
|
76
|
-
<div className="ring-form__group">
|
|
77
|
-
<label htmlFor="ring-form-8" className="ring-form__label">
|
|
78
|
-
Long Textarea
|
|
79
|
-
</label>
|
|
80
|
-
<div className="ring-form__control">
|
|
81
|
-
<textarea className="ring-input ring-input-size_l" id="ring-form-8" />
|
|
82
|
-
</div>
|
|
83
|
-
</div>
|
|
84
|
-
|
|
85
|
-
<div className="ring-form__group">
|
|
86
|
-
<label htmlFor="ring-form-9" className="ring-form__label">
|
|
87
|
-
Full-Width Textarea
|
|
88
|
-
</label>
|
|
89
|
-
<div className="ring-form__control">
|
|
90
|
-
<textarea className="ring-input" id="ring-form-9" />
|
|
91
|
-
</div>
|
|
92
|
-
</div>
|
|
93
|
-
|
|
94
|
-
<div className="ring-form__group">
|
|
95
|
-
<label htmlFor="ring-form-11" className="ring-form__label">
|
|
96
|
-
Input in a small container
|
|
97
|
-
</label>
|
|
98
|
-
<div className="ring-form__control ring-form__control_small">
|
|
99
|
-
<input className="ring-input ring-input-size_m" id="ring-form-11" type="text" />
|
|
100
|
-
</div>
|
|
101
|
-
</div>
|
|
102
|
-
|
|
103
|
-
<div className="ring-form__group">
|
|
104
|
-
<label htmlFor="ring-form-12" className="ring-form__label">
|
|
105
|
-
Textarea in a small container
|
|
106
|
-
</label>
|
|
107
|
-
<div className="ring-form__control ring-form__control_small">
|
|
108
|
-
<textarea className="ring-input ring-input-size_m" id="ring-form-12" />
|
|
109
|
-
</div>
|
|
110
|
-
</div>
|
|
111
|
-
|
|
112
|
-
<div className="ring-form__footer">
|
|
113
|
-
<rg-button mode="primary">Save</rg-button> <rg-button>Cancel</rg-button>
|
|
114
|
-
</div>
|
|
115
|
-
</form>
|
|
116
|
-
</div>
|
|
117
|
-
);
|
|
118
|
-
|
|
119
|
-
basic.storyName = 'Form';
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
import '../input/input-legacy.css';
|
|
2
|
-
import '../form/form.css';
|
|
3
|
-
import './input-size.css';
|
|
4
|
-
import '../error-bubble/error-bubble-legacy.css';
|
|
5
|
-
|
|
6
|
-
export default {
|
|
7
|
-
title: 'Style-only/Input Sizes',
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
export const basic = () => (
|
|
11
|
-
<div>
|
|
12
|
-
<h3 className="example-block">Inputs</h3>
|
|
13
|
-
<div className="example-block">
|
|
14
|
-
<div className="ring-error-bubble-wrapper">
|
|
15
|
-
<input id="extra-short-input" type="number" className="ring-input ring-input-size_xs" />
|
|
16
|
-
<label htmlFor="extra-short-input" className="ring-error-bubble active">
|
|
17
|
-
Extra-short Input
|
|
18
|
-
</label>
|
|
19
|
-
</div>
|
|
20
|
-
<div className="ring-error-bubble-wrapper">
|
|
21
|
-
<input id="short-input" type="number" className="ring-input ring-input-size_s" />
|
|
22
|
-
<label htmlFor="short-input" className="ring-error-bubble active">
|
|
23
|
-
Short Input
|
|
24
|
-
</label>
|
|
25
|
-
</div>
|
|
26
|
-
<div className="ring-error-bubble-wrapper">
|
|
27
|
-
<input id="medium-input" type="number" className="ring-input ring-input-size_m" />
|
|
28
|
-
<label htmlFor="medium-input" className="ring-error-bubble active">
|
|
29
|
-
Medium Input
|
|
30
|
-
</label>
|
|
31
|
-
</div>
|
|
32
|
-
<div className="ring-error-bubble-wrapper">
|
|
33
|
-
<input id="long-input" type="number" className="ring-input ring-input-size_l" />
|
|
34
|
-
<label htmlFor="long-input" className="ring-error-bubble active">
|
|
35
|
-
Long Input
|
|
36
|
-
</label>
|
|
37
|
-
</div>
|
|
38
|
-
<div className="ring-error-bubble-wrapper">
|
|
39
|
-
<input id="full-width-input" type="number" className="ring-input" />
|
|
40
|
-
<label htmlFor="full-width-input" className="ring-error-bubble active">
|
|
41
|
-
Full-width Input
|
|
42
|
-
</label>
|
|
43
|
-
</div>
|
|
44
|
-
</div>
|
|
45
|
-
|
|
46
|
-
<h3 className="example-block">Textareas</h3>
|
|
47
|
-
<div className="example-block">
|
|
48
|
-
<div className="ring-error-bubble-wrapper">
|
|
49
|
-
<textarea id="extra-short-textarea" className="ring-input ring-input-size_xs" />
|
|
50
|
-
<label htmlFor="extra-short-textarea" className="ring-error-bubble active">
|
|
51
|
-
Extra-short Textarea
|
|
52
|
-
</label>
|
|
53
|
-
</div>
|
|
54
|
-
<div className="ring-error-bubble-wrapper">
|
|
55
|
-
<textarea id="short-textarea" className="ring-input ring-input-size_s" />
|
|
56
|
-
<label htmlFor="short-textarea" className="ring-error-bubble active">
|
|
57
|
-
Short Textarea
|
|
58
|
-
</label>
|
|
59
|
-
</div>
|
|
60
|
-
<div className="ring-error-bubble-wrapper">
|
|
61
|
-
<textarea id="medium-textarea" className="ring-input ring-input-size_m" />
|
|
62
|
-
<label htmlFor="medium-textarea" className="ring-error-bubble active">
|
|
63
|
-
Medium Textarea
|
|
64
|
-
</label>
|
|
65
|
-
</div>
|
|
66
|
-
<div className="ring-error-bubble-wrapper">
|
|
67
|
-
<textarea id="long-textarea" className="ring-input ring-input-size_l" />
|
|
68
|
-
<label htmlFor="long-textarea" className="ring-error-bubble active">
|
|
69
|
-
Long Textarea
|
|
70
|
-
</label>
|
|
71
|
-
</div>
|
|
72
|
-
<div className="ring-error-bubble-wrapper">
|
|
73
|
-
<textarea id="full-width-textarea" className="ring-input" />
|
|
74
|
-
<label htmlFor="full-width-textarea" className="ring-error-bubble active">
|
|
75
|
-
Full-width Textarea
|
|
76
|
-
</label>
|
|
77
|
-
</div>
|
|
78
|
-
</div>
|
|
79
|
-
</div>
|
|
80
|
-
);
|
|
81
|
-
|
|
82
|
-
basic.storyName = 'Input Sizes';
|
|
83
|
-
|
|
84
|
-
basic.parameters = {
|
|
85
|
-
storyStyles: `
|
|
86
|
-
<style>
|
|
87
|
-
.example-block {
|
|
88
|
-
margin: 16px;
|
|
89
|
-
max-width: 600px;
|
|
90
|
-
}
|
|
91
|
-
</style>`,
|
|
92
|
-
};
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
[
|
|
2
|
-
{
|
|
3
|
-
"id": 1,
|
|
4
|
-
"country": "Russia",
|
|
5
|
-
"city": "Moscow",
|
|
6
|
-
"url": "https://en.wikipedia.org/wiki/Russia",
|
|
7
|
-
"children": [
|
|
8
|
-
{"id": 11, "country": "Tatarstan", "city": "Kazan", "url": "https://en.wikipedia.org/wiki/Tatarstan"},
|
|
9
|
-
{"id": 12, "country": "Chechnya", "city": "Grosniy", "url": "https://en.wikipedia.org/wiki/Chechnya"}
|
|
10
|
-
]
|
|
11
|
-
},
|
|
12
|
-
{"id": 2, "country": "France", "city": "Paris", "url": "https://en.wikipedia.org/wiki/France"},
|
|
13
|
-
{"id": 3, "country": "Sweden", "city": "Stockholm", "url": "https://en.wikipedia.org/wiki/Sweden"},
|
|
14
|
-
{
|
|
15
|
-
"id": 4,
|
|
16
|
-
"country": "USA",
|
|
17
|
-
"city": "NYC",
|
|
18
|
-
"url": "https://en.wikipedia.org/wiki/USA",
|
|
19
|
-
"children": [
|
|
20
|
-
{"id": 41, "country": "California", "city": "Los Angeles", "url": "https://en.wikipedia.org/wiki/California"},
|
|
21
|
-
{
|
|
22
|
-
"id": 42,
|
|
23
|
-
"country": "New York",
|
|
24
|
-
"city": "NYC",
|
|
25
|
-
"url": "https://en.wikipedia.org/wiki/New York",
|
|
26
|
-
"children": [
|
|
27
|
-
{
|
|
28
|
-
"id": 421,
|
|
29
|
-
"country": "NYC",
|
|
30
|
-
"city": "NYC",
|
|
31
|
-
"url": "https://en.wikipedia.org/wiki/NYC",
|
|
32
|
-
"children": [
|
|
33
|
-
{"id": 4211, "country": "Manhattan", "city": "NYC", "url": "https://en.wikipedia.org/wiki/Manhattan"},
|
|
34
|
-
{"id": 4212, "country": "Brooklyn", "city": "NYC", "url": "https://en.wikipedia.org/wiki/Brooklyn"},
|
|
35
|
-
{"id": 4213, "country": "Queens", "city": "NYC", "url": "https://en.wikipedia.org/wiki/Queens"}
|
|
36
|
-
]
|
|
37
|
-
}
|
|
38
|
-
]
|
|
39
|
-
},
|
|
40
|
-
{"id": 43, "country": "Texas", "city": "Houston", "url": "https://en.wikipedia.org/wiki/Texas"}
|
|
41
|
-
]
|
|
42
|
-
},
|
|
43
|
-
{"id": 5, "country": "South Africa", "city": "Johannesburg", "url": "https://en.wikipedia.org/wiki/South Africa"},
|
|
44
|
-
{"id": 6, "country": "Finland", "city": "Helsinki", "url": "https://en.wikipedia.org/wiki/Finland"},
|
|
45
|
-
{"id": 7, "country": "Latvia", "city": "Riga", "url": "https://en.wikipedia.org/wiki/Latvia"},
|
|
46
|
-
{"id": 8, "country": "Norway", "city": "Oslo", "url": "https://en.wikipedia.org/wiki/Norway"},
|
|
47
|
-
{"id": 9, "country": "Brazil", "city": "Rio", "url": "https://en.wikipedia.org/wiki/Brazil"},
|
|
48
|
-
{"id": 11, "country": "China", "city": "Beijing", "url": "https://en.wikipedia.org/wiki/China"},
|
|
49
|
-
{"id": 12, "country": "Germany", "city": "Berlin", "url": "https://en.wikipedia.org/wiki/Germany"},
|
|
50
|
-
{"id": 13, "country": "Luxembourg", "city": "Luxembourg", "url": "https://en.wikipedia.org/wiki/Luxembourg"},
|
|
51
|
-
{
|
|
52
|
-
"id": 14,
|
|
53
|
-
"country": "Belgium",
|
|
54
|
-
"city": "Brussels",
|
|
55
|
-
"url": "http://statbel.fgov.be/fr/statistiques/chiffres/population/structure/natact/beletr/"
|
|
56
|
-
},
|
|
57
|
-
{"id": 15, "country": "Italy", "city": "Rome", "url": "https://en.wikipedia.org/wiki/Italy"},
|
|
58
|
-
{"id": 16, "country": "Spain", "city": "Madrid", "url": "https://en.wikipedia.org/wiki/Spain"},
|
|
59
|
-
{"id": 17, "country": "Portugal", "city": "Lisbon", "url": "https://en.wikipedia.org/wiki/Portugal"},
|
|
60
|
-
{"id": 18, "country": "Greece", "city": "Athens", "url": "https://en.wikipedia.org/wiki/Greece"},
|
|
61
|
-
{"id": 19, "country": "Israel", "city": "Tel Aviv", "url": "https://en.wikipedia.org/wiki/Israel"},
|
|
62
|
-
{"id": 20, "country": "Poland", "city": "Warsaw", "url": "https://en.wikipedia.org/wiki/Poland"},
|
|
63
|
-
{"id": 21, "country": "Bulgaria", "city": "Sofia", "url": "https://en.wikipedia.org/wiki/Bulgaria"},
|
|
64
|
-
{"id": 22, "country": "Japan", "city": "Tokio", "url": "https://en.wikipedia.org/wiki/Japan"},
|
|
65
|
-
{"id": 23, "country": "Thailand", "city": "Bangkok", "url": "https://en.wikipedia.org/wiki/Thailand"},
|
|
66
|
-
{"id": 24, "country": "Vietnam", "city": "Hanoi", "url": "https://en.wikipedia.org/wiki/Vietnam"},
|
|
67
|
-
{"id": 25, "country": "Iraq", "city": "Baghdad", "url": "https://en.wikipedia.org/wiki/Iraq"},
|
|
68
|
-
{"id": 26, "country": "Iran", "city": "Tehran", "url": "https://en.wikipedia.org/wiki/Iran"},
|
|
69
|
-
{"id": 27, "country": "Syria", "city": "Damask", "url": "https://en.wikipedia.org/wiki/Syria"},
|
|
70
|
-
{"id": 28, "country": "Turkey", "city": "Ankara", "url": "https://en.wikipedia.org/wiki/Turkey"},
|
|
71
|
-
{"id": 29, "country": "Australia", "city": "Sydney", "url": "https://en.wikipedia.org/wiki/Australia"},
|
|
72
|
-
{"id": 30, "country": "UK", "city": "London", "url": "https://en.wikipedia.org/wiki/UK"},
|
|
73
|
-
{"id": 31, "country": "India", "city": "Deli", "url": "https://en.wikipedia.org/wiki/India"}
|
|
74
|
-
]
|