superdesk-ui-framework 4.0.28 → 4.0.30
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/app/styles/editor/_editor-buttons.scss +12 -9
- package/app/styles/editor/_editor-themes.scss +129 -108
- package/app-typescript/components/Alert.tsx +11 -1
- package/app-typescript/components/Button.tsx +46 -18
- package/app-typescript/components/Tooltip.tsx +22 -6
- package/dist/components/Buttons.tsx +6 -6
- package/dist/examples.bundle.js +36662 -36597
- package/dist/superdesk-ui.bundle.css +133 -114
- package/dist/superdesk-ui.bundle.js +36659 -36594
- package/examples/pages/components/Buttons.tsx +6 -6
- package/package.json +1 -1
- package/react/components/Alert.d.ts +1 -0
- package/react/components/Alert.js +5 -1
- package/react/components/Button.js +35 -4
- package/react/components/Tooltip.d.ts +9 -1
- package/react/components/Tooltip.js +40 -10
|
@@ -5,47 +5,50 @@ $editor-neutral-color: var(--sd-editor-colour__txt);
|
|
|
5
5
|
|
|
6
6
|
$editor-styleButton-color: var(--sd-editor-colour__txt);
|
|
7
7
|
$editor-styleButton-active-color: var(--sd-editor-colour__button-txt--active);
|
|
8
|
-
$editor-styleButton-size:
|
|
8
|
+
$editor-styleButton-size: 3.2rem;
|
|
9
9
|
|
|
10
10
|
.Editor3-styleButton {
|
|
11
|
-
color:
|
|
11
|
+
color: inherit;
|
|
12
12
|
cursor: pointer;
|
|
13
13
|
margin: 0.4rem 0.2rem;
|
|
14
14
|
height: $editor-styleButton-size;
|
|
15
15
|
min-width: $editor-styleButton-size;
|
|
16
16
|
padding: 0.6rem;
|
|
17
17
|
display: inline-block;
|
|
18
|
-
border-radius:
|
|
18
|
+
border-radius: var(--b-radius--medium);
|
|
19
19
|
text-align: center;
|
|
20
20
|
line-height: 1.6rem;
|
|
21
|
+
transition: all 0.2s ease;
|
|
21
22
|
|
|
22
23
|
[class*="icon-"] {
|
|
24
|
+
transition: opacity 0.2s ease;
|
|
23
25
|
color: inherit;
|
|
24
|
-
opacity: 0.
|
|
26
|
+
opacity: 0.8;
|
|
25
27
|
vertical-align: middle;
|
|
26
28
|
}
|
|
27
29
|
|
|
28
30
|
&:hover {
|
|
31
|
+
background-color: hsla(214, 13%, 60%, 0.25);
|
|
29
32
|
[class*="icon-"] {
|
|
30
33
|
color: inherit;
|
|
31
|
-
opacity:
|
|
34
|
+
opacity: 1;
|
|
32
35
|
}
|
|
33
36
|
}
|
|
34
37
|
|
|
35
38
|
.inactive {
|
|
36
39
|
[class*="icon-"] {
|
|
37
|
-
opacity: 0.
|
|
40
|
+
opacity: 0.4;
|
|
38
41
|
}
|
|
39
42
|
&:hover {
|
|
40
43
|
[class*="icon-"] {
|
|
41
|
-
opacity: 0.
|
|
44
|
+
opacity: 0.4;
|
|
42
45
|
}
|
|
43
46
|
}
|
|
44
47
|
}
|
|
45
48
|
|
|
46
49
|
&.Editor3-activeButton, &.Editor3-activeButton:hover {
|
|
47
|
-
color:
|
|
48
|
-
background-color:
|
|
50
|
+
color: var(--color-text-ondark);
|
|
51
|
+
background-color: var(--color-interactive-default);
|
|
49
52
|
[class*="icon-"] {
|
|
50
53
|
opacity: 1;
|
|
51
54
|
}
|
|
@@ -1,119 +1,140 @@
|
|
|
1
1
|
// EDITOR Themes
|
|
2
2
|
|
|
3
|
-
:root
|
|
4
|
-
|
|
5
|
-
--sd-editor-colour__main-bg
|
|
6
|
-
--sd-editor-colour__main-border:
|
|
7
|
-
--sd-editor-colour__txt:
|
|
8
|
-
--sd-editor-colour__txt--accent: var(--
|
|
9
|
-
--sd-editor-colour__quote-border:
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
--sd-editor-colour__button-
|
|
14
|
-
--sd-editor-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
--sd-editor-
|
|
18
|
-
|
|
19
|
-
--sd-editor-colour__comment-bg:
|
|
20
|
-
--sd-editor-colour__annotation:
|
|
21
|
-
--sd-editor-colour__removing:
|
|
22
|
-
--sd-editor-colour__removing-bg:
|
|
23
|
-
--sd-editor-colour__adding:
|
|
24
|
-
--sd-editor-colour__adding-bg:
|
|
25
|
-
|
|
3
|
+
:root,
|
|
4
|
+
[data-theme="dark-ui"] {
|
|
5
|
+
--sd-editor-colour__main-bg: var(--color-surface-base);
|
|
6
|
+
--sd-editor-colour__main-border: var(--color-line-medium);
|
|
7
|
+
--sd-editor-colour__txt: var(--color-text-default);
|
|
8
|
+
--sd-editor-colour__txt--accent: var(--color-interactive-default);
|
|
9
|
+
--sd-editor-colour__quote-border: var(--color-line-strong);
|
|
10
|
+
--sd-editor-colour__controls-border: var(--color-line-light);
|
|
11
|
+
--sd-editor-colour__controls-bg: var(--color-surface-subdued);
|
|
12
|
+
|
|
13
|
+
--sd-editor-colour__button-bg--active: hsl(214 13% 96% / 0.2);
|
|
14
|
+
--sd-editor-colour__button-txt--active: var(--color-interactive-default);
|
|
15
|
+
|
|
16
|
+
--sd-editor-colour__field-label-bg: hsl(214 13% 4% / 0.5);
|
|
17
|
+
--sd-editor-colour__field-label-txt: hsl(214 13% 96% / 1);
|
|
18
|
+
|
|
19
|
+
--sd-editor-colour__comment-bg: hsl(54 88% 55% / 0.35);
|
|
20
|
+
--sd-editor-colour__annotation: hsl(91 100% 40% / 0.6);
|
|
21
|
+
--sd-editor-colour__removing: var(--color-highlight-text);
|
|
22
|
+
--sd-editor-colour__removing-bg: var(--color-highlight-translucent);
|
|
23
|
+
--sd-editor-colour__adding: var(--color-success-text);
|
|
24
|
+
--sd-editor-colour__adding-bg: var(--color-success-translucent);
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
.sd-editor--theme-default {
|
|
28
|
+
--theme-color-base: hsl(0 0% 100%);
|
|
29
|
+
--sd-editor-colour__main-bg: var(--theme-color-base);
|
|
30
|
+
--sd-editor-colour__main-bg--alt: hsl(214 13% 96%);
|
|
31
|
+
--sd-editor-colour__main-border: hsl(214 13% 12% / 0.2);
|
|
32
|
+
--sd-editor-colour__txt: var(--color-text-onlight);
|
|
33
|
+
--sd-editor-colour__txt--accent: var(--color-interactive-default);
|
|
34
|
+
--sd-editor-colour__quote-border: hsl(214 13% 55% / 0.5);
|
|
35
|
+
--sd-editor-colour__controls-bg: hsl(214 13% 94%);
|
|
36
|
+
--sd-editor-colour__controls-border: hsl(214 13% 12% / 0.2);
|
|
37
|
+
--sd-editor-colour__button-bg--active: hsl(214 13% 99% / 0.9);
|
|
38
|
+
|
|
39
|
+
--sd-editor-colour__removing: var(--blissful-berry-600);
|
|
40
|
+
--sd-editor-colour__removing-bg: var(--blissful-berry-500-a12);
|
|
41
|
+
--sd-editor-colour__adding: var(--green-brier-600);
|
|
42
|
+
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
43
|
+
}
|
|
26
44
|
|
|
27
|
-
.sd-editor--theme-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
45
|
+
.sd-editor--theme-dark {
|
|
46
|
+
--theme-color-base: hsl(214 13% 12%);
|
|
47
|
+
--sd-editor-colour__main-bg: var(--theme-color-base);
|
|
48
|
+
--sd-editor-colour__main-bg--alt: lch(from var(--theme-color-base) calc(l - 5) c h);
|
|
49
|
+
--sd-editor-colour__main-border: lch(from var(--theme-color-base) calc(l + 55) c h / 0.3);
|
|
50
|
+
--sd-editor-colour__txt: var(--color-text-ondark);
|
|
51
|
+
--sd-editor-colour__txt--accent: var(--color-interactive-text);
|
|
52
|
+
--sd-editor-colour__quote-border: lch(from var(--theme-color-base) calc(l + 55) c h / 0.5);
|
|
53
|
+
--sd-editor-colour__controls-bg: lch(from var(--theme-color-base) calc(l - 5) c h);
|
|
54
|
+
--sd-editor-colour__controls-border: lch(from var(--theme-color-base) calc(l + 65) c h / 0.2);
|
|
55
|
+
|
|
56
|
+
--sd-editor-colour__field-label-bg: lch(from var(--theme-color-base) calc(l - 10) c h);
|
|
57
|
+
|
|
58
|
+
--sd-editor-colour__removing: var(--blissful-berry-300);
|
|
59
|
+
--sd-editor-colour__removing-bg: var(--blissful-berry-500-a16);
|
|
60
|
+
--sd-editor-colour__adding: var(--green-brier-300);
|
|
61
|
+
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
62
|
+
}
|
|
38
63
|
|
|
39
|
-
.sd-editor--theme-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
--sd-editor-colour__adding: hsla(82, 90%, 32%, 1);
|
|
58
|
-
--sd-editor-colour__adding-bg: hsla(82, 90%, 32%, 0.16);
|
|
59
|
-
}
|
|
64
|
+
.sd-editor--theme-blue {
|
|
65
|
+
--theme-color-base: hsl(212 91% 18%);
|
|
66
|
+
--sd-editor-colour__main-bg: var(--theme-color-base);
|
|
67
|
+
--sd-editor-colour__main-bg--alt: lch(from var(--theme-color-base) calc(l - 5) c h);
|
|
68
|
+
--sd-editor-colour__main-border: lch(from var(--theme-color-base) calc(l + 55) c h / 0.3);
|
|
69
|
+
--sd-editor-colour__txt: var(--color-text-ondark);
|
|
70
|
+
--sd-editor-colour__txt--accent: hsl(307 100% 50%);
|
|
71
|
+
--sd-editor-colour__quote-border: lch(from var(--theme-color-base) calc(l + 55) calc(c - 20) h / 0.5);
|
|
72
|
+
--sd-editor-colour__controls-bg: lch(from var(--theme-color-base) calc(l - 5) c h);
|
|
73
|
+
--sd-editor-colour__controls-border: lch(from var(--theme-color-base) calc(l + 65) calc(c - 50) h / 0.2);
|
|
74
|
+
|
|
75
|
+
--sd-editor-colour__field-label-bg: lch(from var(--theme-color-base) calc(l - 10) c h);
|
|
76
|
+
|
|
77
|
+
--sd-editor-colour__removing: var(--blissful-berry-300);
|
|
78
|
+
--sd-editor-colour__removing-bg: var(--blissful-berry-500-a16);
|
|
79
|
+
--sd-editor-colour__adding: var(--green-brier-300);
|
|
80
|
+
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
81
|
+
}
|
|
60
82
|
|
|
61
|
-
.sd-editor--theme-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
83
|
+
.sd-editor--theme-turquoise {
|
|
84
|
+
--theme-color-base: hsl(179 49% 65%);
|
|
85
|
+
--sd-editor-colour__main-bg: var(--theme-color-base);
|
|
86
|
+
--sd-editor-colour__main-bg--alt: lch(from var(--theme-color-base) calc(l - 5) c h);
|
|
87
|
+
--sd-editor-colour__main-border: lch(from var(--theme-color-base) calc(l + 55) c h / 0.3);
|
|
88
|
+
--sd-editor-colour__txt: var(--color-text-onlight);
|
|
89
|
+
--sd-editor-colour__txt--accent: hsl(307 100% 50%);
|
|
90
|
+
--sd-editor-colour__quote-border: lch(from var(--theme-color-base) calc(l - 40) c h / 0.5);
|
|
91
|
+
--sd-editor-colour__controls-bg: lch(from var(--theme-color-base) calc(l + 3) c h);
|
|
92
|
+
--sd-editor-colour__controls-border: lch(from var(--theme-color-base) calc(l - 47) c h / 0.2);
|
|
93
|
+
|
|
94
|
+
--sd-editor-colour__comment-bg: hsl(54 90% 80% / 0.5);
|
|
95
|
+
--sd-editor-colour__annotation: hsl(91 100% 60% / 0.8);
|
|
96
|
+
--sd-editor-colour__removing: var(--blissful-berry-600);
|
|
97
|
+
--sd-editor-colour__removing-bg: var(--blissful-berry-500-a12);
|
|
98
|
+
--sd-editor-colour__adding: var(--green-brier-600);
|
|
99
|
+
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
100
|
+
}
|
|
71
101
|
|
|
72
|
-
.sd-editor--theme-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
102
|
+
.sd-editor--theme-military {
|
|
103
|
+
--theme-color-base: hsl(69 25% 65%);
|
|
104
|
+
--sd-editor-colour__main-bg: var(--theme-color-base);
|
|
105
|
+
--sd-editor-colour__main-bg--alt: lch(from var(--theme-color-base) calc(l - 5) c h);
|
|
106
|
+
--sd-editor-colour__main-border: lch(from var(--theme-color-base) calc(l + 55) c h / 0.3);
|
|
107
|
+
--sd-editor-colour__txt: var(--color-text-onlight);
|
|
108
|
+
--sd-editor-colour__txt--accent: hsl(307 100% 50%);
|
|
109
|
+
--sd-editor-colour__quote-border: lch(from var(--theme-color-base) calc(l - 40) c h / 0.5);
|
|
110
|
+
--sd-editor-colour__controls-bg: lch(from var(--theme-color-base) calc(l + 3) c h);
|
|
111
|
+
--sd-editor-colour__controls-border: lch(from var(--theme-color-base) calc(l - 47) c h / 0.2);
|
|
112
|
+
|
|
113
|
+
--sd-editor-colour__comment-bg: hsl(54 90% 80% / 0.5);
|
|
114
|
+
--sd-editor-colour__annotation: hsl(91 100% 60% / 0.8);
|
|
115
|
+
--sd-editor-colour__removing: var(--blissful-berry-600);
|
|
116
|
+
--sd-editor-colour__removing-bg: var(--blissful-berry-500-a12);
|
|
117
|
+
--sd-editor-colour__adding: var(--green-brier-600);
|
|
118
|
+
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
119
|
+
}
|
|
89
120
|
|
|
90
|
-
.sd-editor--theme-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
}
|
|
121
|
+
.sd-editor--theme-natural {
|
|
122
|
+
--theme-color-base: hsl(51 50% 89%);
|
|
123
|
+
--sd-editor-colour__main-bg: var(--theme-color-base);
|
|
124
|
+
--sd-editor-colour__main-bg--alt: lch(from var(--theme-color-base) calc(l - 5) c h);
|
|
125
|
+
--sd-editor-colour__main-border: lch(from var(--theme-color-base) calc(l + 55) c h / 0.3);
|
|
126
|
+
--sd-editor-colour__txt: var(--color-text-onlight);
|
|
127
|
+
--sd-editor-colour__txt--accent: var(--color-interactive-text);
|
|
128
|
+
--sd-editor-colour__quote-border: lch(from var(--theme-color-base) calc(l - 40) c h / 0.5);
|
|
129
|
+
--sd-editor-colour__controls-bg: lch(from var(--theme-color-base) calc(l + 3) c h);
|
|
130
|
+
--sd-editor-colour__controls-border: lch(from var(--theme-color-base) calc(l - 69) c h / 0.2);
|
|
131
|
+
|
|
132
|
+
--sd-editor-colour__removing: var(--blissful-berry-600);
|
|
133
|
+
--sd-editor-colour__removing-bg: var(--blissful-berry-500-a12);
|
|
134
|
+
--sd-editor-colour__adding: var(--green-brier-600);
|
|
135
|
+
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
136
|
+
}
|
|
107
137
|
|
|
108
|
-
.sd-editor--theme-natural {
|
|
109
|
-
--sd-editor-colour__main-bg: hsla(51, 57%, 85%, 1);
|
|
110
|
-
--sd-editor-colour__main-bg--alt: hsla(51, 57%, 79%, 1);
|
|
111
|
-
--sd-editor-colour__main-border: hsla(214, 13%, 12%, 0.2);
|
|
112
|
-
--sd-editor-colour__txt: hsla(0, 18%, 10%, 1);
|
|
113
|
-
--sd-editor-colour__txt--accent: var(--sd-colour-interactive);
|
|
114
|
-
--sd-editor-colour__quote-border: hsla(0, 18%, 10%, .5);
|
|
115
|
-
--sd-editor-colour__controls-bg: hsla(51, 57%, 82%, 1);
|
|
116
|
-
--sd-editor-colour__controls-border: hsla(214, 13%, 85%, 0.2);
|
|
117
138
|
}
|
|
118
139
|
|
|
119
140
|
$color-swatch-border-color: transparent;
|
|
@@ -10,6 +10,7 @@ interface IProps {
|
|
|
10
10
|
icon?: string;
|
|
11
11
|
banner?: boolean;
|
|
12
12
|
margin?: 'none' | 'small' | 'normal' | 'large';
|
|
13
|
+
fullWidth?: boolean;
|
|
13
14
|
}
|
|
14
15
|
|
|
15
16
|
interface IState {
|
|
@@ -47,8 +48,17 @@ export class Alert extends React.PureComponent<IProps, IState> {
|
|
|
47
48
|
'sd-alert__info-btn--hidden': this.state.open,
|
|
48
49
|
});
|
|
49
50
|
|
|
51
|
+
const styles: React.CSSProperties = {};
|
|
52
|
+
|
|
53
|
+
if (this.props.fullWidth) {
|
|
54
|
+
styles.width = '100%';
|
|
55
|
+
}
|
|
56
|
+
|
|
50
57
|
return (
|
|
51
|
-
<div
|
|
58
|
+
<div
|
|
59
|
+
className='sd-alert__container'
|
|
60
|
+
style={styles}
|
|
61
|
+
>
|
|
52
62
|
<div className={classesAlert}>
|
|
53
63
|
{this.props.icon ?
|
|
54
64
|
<span className="sd-alert__icon">
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import {Icon} from './Icon';
|
|
4
|
+
import {Spinner} from './Spinner';
|
|
5
|
+
import {WithTooltip} from './Tooltip';
|
|
5
6
|
|
|
6
7
|
interface IPropsButton {
|
|
7
8
|
text: string;
|
|
@@ -42,22 +43,49 @@ export class Button extends React.PureComponent<IPropsButton> {
|
|
|
42
43
|
});
|
|
43
44
|
|
|
44
45
|
return (
|
|
45
|
-
<
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
46
|
+
<TooltipWrapper tooltipText={this.props.tooltip}>
|
|
47
|
+
{({attributes}) => (
|
|
48
|
+
<button
|
|
49
|
+
{...attributes}
|
|
50
|
+
id={this.props.id}
|
|
51
|
+
className={classes}
|
|
52
|
+
tabIndex={0}
|
|
53
|
+
disabled={this.props.disabled || this.props.isLoading}
|
|
54
|
+
data-loading={this.props.isLoading}
|
|
55
|
+
onClick={this.props.disabled ? () => false : (event) => this.props.onClick(event)}
|
|
56
|
+
aria-label={this.props.iconOnly ? this.props.text : ''}
|
|
57
|
+
data-test-id={this.props['data-test-id']}
|
|
58
|
+
style={this.props.noMargin ? {margin: 0} : undefined}
|
|
59
|
+
>
|
|
60
|
+
{this.props.isLoading ? <Spinner size="mini" /> : null}
|
|
61
|
+
{this.props.icon && !this.props.isLoading ? <Icon ariaHidden name={this.props.icon} /> : null}
|
|
62
|
+
{this.props.iconOnly ? null : this.props.text}
|
|
63
|
+
</button>
|
|
64
|
+
)}
|
|
65
|
+
</TooltipWrapper>
|
|
61
66
|
);
|
|
62
67
|
}
|
|
63
68
|
}
|
|
69
|
+
|
|
70
|
+
interface ITooltipWrapperProps {
|
|
71
|
+
tooltipText: string | null | undefined;
|
|
72
|
+
children: React.ComponentProps<typeof WithTooltip>['children'];
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
class TooltipWrapper extends React.PureComponent<ITooltipWrapperProps> {
|
|
76
|
+
render() {
|
|
77
|
+
const {tooltipText, children} = this.props;
|
|
78
|
+
|
|
79
|
+
return (tooltipText ?? '').length > 0
|
|
80
|
+
? (
|
|
81
|
+
<WithTooltip text={tooltipText}>
|
|
82
|
+
{({attributes}) => children({attributes})}
|
|
83
|
+
</WithTooltip>
|
|
84
|
+
)
|
|
85
|
+
: (
|
|
86
|
+
<>
|
|
87
|
+
{children({attributes: {}})}
|
|
88
|
+
</>
|
|
89
|
+
);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import nextId from "react-id-generator";
|
|
2
3
|
import tippy, {Instance, Placement} from 'tippy.js';
|
|
3
4
|
import {assertNever} from '../helpers';
|
|
4
5
|
|
|
5
6
|
interface IProps {
|
|
6
7
|
text: string | undefined | null;
|
|
7
8
|
flow?: 'top' | 'left' | 'right' | 'down'; // defaults to 'top'
|
|
9
|
+
children(options: {attributes: {[name: string]: string}}): React.ReactNode;
|
|
8
10
|
}
|
|
9
11
|
|
|
10
12
|
function flowToPlacement(flow: IProps['flow']): Placement | undefined {
|
|
@@ -24,14 +26,18 @@ function flowToPlacement(flow: IProps['flow']): Placement | undefined {
|
|
|
24
26
|
}
|
|
25
27
|
}
|
|
26
28
|
|
|
27
|
-
|
|
29
|
+
const tooltipAttributeName = 'data-with-tooltip';
|
|
30
|
+
const getTooltipSelector = (value: string) => `[${tooltipAttributeName}=${value}]`;
|
|
31
|
+
|
|
32
|
+
export class WithTooltip extends React.PureComponent<IProps> {
|
|
28
33
|
private id: string;
|
|
29
34
|
private instance: Instance | null;
|
|
30
35
|
|
|
31
36
|
constructor(props: IProps) {
|
|
32
37
|
super(props);
|
|
33
38
|
|
|
34
|
-
this.id =
|
|
39
|
+
this.id = nextId();
|
|
40
|
+
|
|
35
41
|
this.instance = null;
|
|
36
42
|
}
|
|
37
43
|
|
|
@@ -40,7 +46,7 @@ export class Tooltip extends React.PureComponent<IProps> {
|
|
|
40
46
|
const content = this.props.text;
|
|
41
47
|
|
|
42
48
|
if (this.instance == null) {
|
|
43
|
-
this.instance = tippy(
|
|
49
|
+
this.instance = tippy(getTooltipSelector(this.id), {
|
|
44
50
|
placement: placement,
|
|
45
51
|
})[0];
|
|
46
52
|
|
|
@@ -82,11 +88,21 @@ export class Tooltip extends React.PureComponent<IProps> {
|
|
|
82
88
|
this.setupTooltip();
|
|
83
89
|
}
|
|
84
90
|
|
|
91
|
+
render() {
|
|
92
|
+
return this.props.children({attributes: {[tooltipAttributeName]: this.id}});
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
export class Tooltip extends React.PureComponent<Omit<IProps, 'children'>> {
|
|
85
97
|
render() {
|
|
86
98
|
return (
|
|
87
|
-
<
|
|
88
|
-
{
|
|
89
|
-
|
|
99
|
+
<WithTooltip text={this.props.text} flow={this.props.flow}>
|
|
100
|
+
{({attributes}) => (
|
|
101
|
+
<div {...attributes} style={{display: 'inline-flex'}}>
|
|
102
|
+
{this.props.children}
|
|
103
|
+
</div>
|
|
104
|
+
)}
|
|
105
|
+
</WithTooltip>
|
|
90
106
|
);
|
|
91
107
|
}
|
|
92
108
|
}
|
|
@@ -17,7 +17,7 @@ export default class ButtonsDoc extends React.Component {
|
|
|
17
17
|
<Markup.ReactMarkup>
|
|
18
18
|
<Markup.ReactMarkupPreview>
|
|
19
19
|
<div className="docs-page__content-row">
|
|
20
|
-
<Button text="default" onClick={()=> false} />
|
|
20
|
+
<Button text="default" onClick={()=> false} tooltip="test tooltip" />
|
|
21
21
|
<Button text="primary" type="primary" onClick={()=> false} />
|
|
22
22
|
</div>
|
|
23
23
|
<p className="docs-page__paragraph">// Other colour options</p>
|
|
@@ -101,8 +101,8 @@ export default class ButtonsDoc extends React.Component {
|
|
|
101
101
|
|
|
102
102
|
<h3 className="docs-page__h3">Sizing</h3>
|
|
103
103
|
<p className="docs-page__paragraph">
|
|
104
|
-
For the default button, no size has to be specified.
|
|
105
|
-
To change the default size set the <code>size</code> value either to <code>small</code> or <code>large</code>.
|
|
104
|
+
For the default button, no size has to be specified.
|
|
105
|
+
To change the default size set the <code>size</code> value either to <code>small</code> or <code>large</code>.
|
|
106
106
|
For the button to take the full width of the container add <code>expand={'{true}'}</code>.
|
|
107
107
|
</p>
|
|
108
108
|
<Markup.ReactMarkup>
|
|
@@ -120,7 +120,7 @@ export default class ButtonsDoc extends React.Component {
|
|
|
120
120
|
</div>
|
|
121
121
|
<div className="docs-page__content-row">
|
|
122
122
|
<Button text="small expanded button" expand={true} size="small" onClick={()=> false} />
|
|
123
|
-
</div>
|
|
123
|
+
</div>
|
|
124
124
|
</Markup.ReactMarkupPreview>
|
|
125
125
|
<Markup.ReactMarkupCode>{`
|
|
126
126
|
<Button text="button large" size="large" onClick={()=> false} />
|
|
@@ -201,7 +201,7 @@ export default class ButtonsDoc extends React.Component {
|
|
|
201
201
|
<Button text="success" type="success" icon="ok" onClick={()=> false} />
|
|
202
202
|
<Button text="warning" type="warning" icon="exclamation-sign" onClick={()=> false} />
|
|
203
203
|
<Button text="alert" type="alert" icon="warning-sign" onClick={()=> false} />
|
|
204
|
-
|
|
204
|
+
|
|
205
205
|
<Button text="default" icon="info-sign" style="hollow" onClick={()=> false} />
|
|
206
206
|
<Button text="primary" type="primary" icon="plus-sign" style="hollow" onClick={()=> false} />
|
|
207
207
|
<Button text="success" type="success" icon="ok" style="hollow" onClick={()=> false} />
|
|
@@ -217,7 +217,7 @@ export default class ButtonsDoc extends React.Component {
|
|
|
217
217
|
</Markup.ReactMarkup>
|
|
218
218
|
|
|
219
219
|
<h3 className="docs-page__h3">Buttons with icon font only</h3>
|
|
220
|
-
<p className="docs-page__paragraph">Buttons can also contain only an icon, without any visible text. To achieve this specify the <code>icon</code> value and set <code>iconOnly={true}</code>.
|
|
220
|
+
<p className="docs-page__paragraph">Buttons can also contain only an icon, without any visible text. To achieve this specify the <code>icon</code> value and set <code>iconOnly={true}</code>.
|
|
221
221
|
The specified text value will be used for the <code>aria-label</code>.</p>
|
|
222
222
|
<Markup.ReactMarkup>
|
|
223
223
|
<Markup.ReactMarkupPreview>
|