superdesk-ui-framework 6.1.4 → 6.1.5
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/_avatar.scss +2 -0
- package/app/styles/_buttons.scss +6 -4
- package/app/styles/_sd-tag-input.scss +0 -1
- package/app/styles/components/_list-item.scss +17 -5
- package/app/styles/form-elements/_inputs.scss +2 -1
- package/app-typescript/components/TreeSelect/TreeSelect.tsx +13 -0
- package/dist/examples.bundle.js +1 -1
- package/dist/storybook/iframe.html +1 -1
- package/dist/storybook/main.dda7bbd4.iframe.bundle.js +1 -0
- package/dist/storybook/manifests/components.html +1 -1
- package/dist/storybook/manifests/components.json +1 -1
- package/dist/storybook/project.json +1 -1
- package/dist/superdesk-ui.bundle.css +1 -1
- package/dist/superdesk-ui.bundle.js +1 -1
- package/package.json +1 -1
- package/react/components/TreeSelect/TreeSelect.js +14 -0
- package/storybook-static/iframe.html +1 -1
- package/storybook-static/main.dda7bbd4.iframe.bundle.js +1 -0
- package/storybook-static/manifests/components.html +1 -1
- package/storybook-static/manifests/components.json +1 -1
- package/storybook-static/project.json +1 -1
- package/dist/storybook/main.2713e2b2.iframe.bundle.js +0 -1
- package/storybook-static/main.2713e2b2.iframe.bundle.js +0 -1
package/app/styles/_avatar.scss
CHANGED
package/app/styles/_buttons.scss
CHANGED
|
@@ -7,7 +7,7 @@ $button-opacity-disabled: 0.60 !default;
|
|
|
7
7
|
$icn-button-opacity-disabled: 0.40 !default;
|
|
8
8
|
|
|
9
9
|
// /// transitions for buttons.
|
|
10
|
-
$button-transition: all 0.2s ease
|
|
10
|
+
$button-transition: all 0.2s ease, color 0.1s ease !default;
|
|
11
11
|
$button-focus-box-shadow: 0 0 0 3px colors.$sd-colour--focus-shadow;
|
|
12
12
|
$icn-button-focus-box-shadow: 0 0 0 2px colors.$sd-colour--focus-shadow;
|
|
13
13
|
|
|
@@ -59,9 +59,11 @@ $icn-button-focus-box-shadow: 0 0 0 2px colors.$sd-colour--focus-shadow;
|
|
|
59
59
|
box-shadow: var(--new-button-active-shadow);
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
-
&:
|
|
63
|
-
|
|
64
|
-
|
|
62
|
+
&:not(:disabled) {
|
|
63
|
+
&:focus-visible {
|
|
64
|
+
outline: 2px solid var(--color-interactive-highlight);
|
|
65
|
+
outline-offset: 1px;
|
|
66
|
+
}
|
|
65
67
|
}
|
|
66
68
|
|
|
67
69
|
[class^="icon-"], [class*=" icon-"] {
|
|
@@ -85,16 +85,21 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
|
|
|
85
85
|
}
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
-
.sd-list-item--active,
|
|
88
|
+
.sd-list-item--active,
|
|
89
|
+
.sd-list-item.active {
|
|
89
90
|
background-color: $sd-ListItem-background-activated;
|
|
90
91
|
}
|
|
91
92
|
|
|
92
|
-
.sd-list-item--selected,
|
|
93
|
+
.sd-list-item--selected,
|
|
94
|
+
.sd-list-item--selected:hover,
|
|
95
|
+
.sd-list-item.selected,
|
|
96
|
+
.sd-list-item.selected:hover {
|
|
93
97
|
background-color: $sd-ListItem-background-selected;
|
|
94
98
|
outline: 1px solid var(--sd-colour-interactive--alpha-50);
|
|
95
99
|
}
|
|
96
100
|
|
|
97
|
-
.sd-list-item--activated,
|
|
101
|
+
.sd-list-item--activated,
|
|
102
|
+
.sd-list-item--activated:hover {
|
|
98
103
|
background-color: $sd-ListItem-background-activated;
|
|
99
104
|
}
|
|
100
105
|
|
|
@@ -108,6 +113,11 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
|
|
|
108
113
|
cursor: default;
|
|
109
114
|
}
|
|
110
115
|
}
|
|
116
|
+
.sd-list-item--focusable {
|
|
117
|
+
&:focus-within {
|
|
118
|
+
outline: 1px solid var(--color-interactive-highlight);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
111
121
|
|
|
112
122
|
.sd-list-item--inactive {
|
|
113
123
|
background-color: transparent;
|
|
@@ -136,11 +146,13 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
|
|
|
136
146
|
background: transparent;
|
|
137
147
|
}
|
|
138
148
|
|
|
139
|
-
.sd-list-item__border--locked,
|
|
149
|
+
.sd-list-item__border--locked,
|
|
150
|
+
.sd-list-item__border--error {
|
|
140
151
|
background: colors.$red;
|
|
141
152
|
}
|
|
142
153
|
|
|
143
|
-
.sd-list-item__border--success,
|
|
154
|
+
.sd-list-item__border--success,
|
|
155
|
+
.sd-list-item__border--active {
|
|
144
156
|
background: colors.$green;
|
|
145
157
|
}
|
|
146
158
|
|
|
@@ -34,7 +34,8 @@
|
|
|
34
34
|
background-color: var(--color-input-bg--hover);
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
&:focus
|
|
37
|
+
&:focus,
|
|
38
|
+
&:focus-within {
|
|
38
39
|
box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
|
|
39
40
|
border-color: var(--sd-colour-interactive);
|
|
40
41
|
background-color: var(--sd-colour-interactive--alpha-20);
|
|
@@ -192,6 +192,19 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
|
|
|
192
192
|
element.focus();
|
|
193
193
|
}
|
|
194
194
|
}
|
|
195
|
+
} else if (
|
|
196
|
+
e.key === 'Delete' &&
|
|
197
|
+
!this.state.openDropdown &&
|
|
198
|
+
!this.props.readOnly &&
|
|
199
|
+
!this.props.disabled &&
|
|
200
|
+
this.props.clearable !== false &&
|
|
201
|
+
this.treeSelectRef.current?.contains(document.activeElement) === true
|
|
202
|
+
) {
|
|
203
|
+
if (e.ctrlKey) {
|
|
204
|
+
this.setState({value: []});
|
|
205
|
+
} else if (this.state.value.length > 0) {
|
|
206
|
+
this.setState({value: this.state.value.slice(0, -1)});
|
|
207
|
+
}
|
|
195
208
|
}
|
|
196
209
|
};
|
|
197
210
|
|