Skip to content

Commit 4f39c5d

Browse files
mlogsdon18pfulton
mlogsdon18
and
pfulton
authored
feat(splitview)!: migrate to spectrum tokens (#2103)
BREAKING CHANGE: migrates SplitView to use `@adobe/spectrum-tokens` Additionally: * fix(splitview): remove touch-action from gripper * refactor(splitview): combine skin.css with index.css and delete skin.css * feat(splitview)!: updating to use core tokens * chore(splitview): update mods * style(splitview): add whcm styling * chore(splitview): fix linter errors use two colon pseudo elements fix max nesting depth * chore(splitview): working on adding focus story * chore(splitview): add storybook interaction add-on * chore(splitview): use latest version of tokens * fix(splitview): use vertical gripper width for vertical gripper --------- Co-authored-by: Patrick Fulton <pfulton@adobe.com>
1 parent 16e8239 commit 4f39c5d

File tree

11 files changed

+209
-146
lines changed

11 files changed

+209
-146
lines changed

‎components/splitview/gulpfile.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
module.exports = require("@spectrum-css/component-builder");
1+
module.exports = require("@spectrum-css/component-builder-simple");

‎components/splitview/index.css

Lines changed: 140 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -15,69 +15,93 @@ governing permissions and limitations under the License.
1515
--spectrum-splitview-vertical-gripper-width: 50%;
1616
--spectrum-splitview-vertical-gripper-outer-width: 100%;
1717
--spectrum-splitview-vertical-gripper-reset: 0;
18+
19+
--spectrum-splitview-background-color: var(--spectrum-gray-100);
20+
--spectrum-splitview-handle-background-color: var(--spectrum-gray-300);
21+
--spectrum-splitview-handle-background-color-hover: var(--spectrum-gray-400);
22+
--spectrum-splitview-handle-background-color-down: var(--spectrum-gray-800);
23+
--spectrum-splitview-handle-background-color-focus: var(--spectrum-focus-indicator-color);
24+
--spectrum-splitview-handle-width: var(--spectrum-border-width-200);
25+
26+
--spectrum-splitview-gripper-border-radius: var(--spectrum-corner-radius-75);
27+
--spectrum-splitview-gripper-width: var(--spectrum-border-width-400);
28+
--spectrum-splitview-gripper-height: 16px; /* No good token to use for this */
29+
--spectrum-splitview-gripper-border-width-horizontal: 3px; /* No good token to use for this */
30+
--spectrum-splitview-gripper-border-width-vertical: var(--spectrum-border-width-400);
31+
1832
}
1933

34+
2035
.spectrum-SplitView {
2136
display: flex;
2237
overflow: hidden;
2338
}
2439

2540
.spectrum-SplitView-pane {
2641
block-size: 100%;
42+
background-color: var(--mod-splitview-background-color, var(--spectrum-splitview-background-color));
2743
}
2844

2945
.spectrum-SplitView-gripper {
3046
content: "";
3147
display: block;
3248
position: absolute;
3349
border-style: solid;
34-
border-radius: var(--spectrum-dragbar-gripper-border-radius);
50+
border-radius: var(--mod-splitview-gripper-border-radius, var(--spectrum-splitview-gripper-border-radius));
51+
border-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));
3552

3653
inset-block-start: 50%;
3754
transform: translate(0, -50%);
3855

56+
/* Prevent touch-action on handle */
57+
touch-action: none;
58+
3959
/* half of (width + horizontal border - handle width) * -1 (for negative opposite) */
4060
inset-inline-start: calc(
4161
(
4262
(
43-
var(--spectrum-dragbar-gripper-width) +
44-
(2 * var(--spectrum-dragbar-gripper-border-width-horizontal)) -
45-
var(--spectrum-dragbar-handle-width)
63+
var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) +
64+
(2 * var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical))) -
65+
var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width))
4666
) / 2
4767
) * -1
4868
);
49-
inline-size: var(--spectrum-dragbar-gripper-width);
50-
block-size: var(--spectrum-dragbar-gripper-height);
51-
border-block-width: var(--spectrum-dragbar-gripper-border-width-vertical);
52-
border-inline-width: var(--spectrum-dragbar-gripper-border-width-horizontal);
69+
inline-size: var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width));
70+
block-size: var(--mod-splitview-gripper-height, var(--spectrum-splitview-gripper-height));
71+
border-block-width: var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical));
72+
border-inline-width: var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal));
73+
74+
&::before {
75+
background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));
76+
}
5377
}
5478

5579
.spectrum-SplitView-splitter {
56-
/* Contain the gripper */
80+
/* Contains the gripper */
5781
position: relative;
5882

83+
background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));
84+
5985
/* Prevent text selection while dragging */
6086
user-select: none;
6187

62-
inline-size: var(--spectrum-dragbar-handle-width);
88+
inline-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
6389
block-size: 100%;
6490
z-index: 1;
6591

6692
&.is-collapsed-start,
6793
&.is-collapsed-end {
68-
.spectrum-SplitView-gripper {
69-
/* make the center line of the gripper */
70-
&:before {
71-
content: "";
72-
position: absolute;
73-
74-
inset-block-start: 0;
75-
inset-inline-start: calc(
76-
50% - calc(var(--spectrum-dragbar-handle-width) / 2)
77-
);
78-
inline-size: var(--spectrum-dragbar-handle-width);
79-
block-size: 100%;
80-
}
94+
/* make the center line of the gripper */
95+
.spectrum-SplitView-gripper::before {
96+
content: "";
97+
position: absolute;
98+
99+
inset-block-start: 0;
100+
inset-inline-start: calc(
101+
50% - calc(var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)) / 2)
102+
);
103+
inline-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
104+
block-size: 100%;
81105
}
82106
}
83107

@@ -95,76 +119,127 @@ governing permissions and limitations under the License.
95119
}
96120
}
97121

122+
.spectrum-SplitView-splitter.is-draggable {
123+
&:hover,
124+
&.is-hovered {
125+
background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
126+
127+
.spectrum-SplitView-gripper {
128+
border-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
129+
}
130+
131+
.spectrum-SplitView-gripper::before {
132+
background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
133+
}
134+
}
135+
136+
&:active,
137+
&.is-active {
138+
background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
139+
140+
.spectrum-SplitView-gripper {
141+
border-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
142+
}
143+
144+
/* Center line of gripper */
145+
.spectrum-SplitView-gripper::before {
146+
background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
147+
}
148+
}
149+
150+
&:focus {
151+
outline: none;
152+
}
153+
154+
&:focus-visible {
155+
outline: none;
156+
background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
157+
158+
.spectrum-SplitView-gripper {
159+
border-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
160+
box-shadow: 0 0 0 1px var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
161+
}
162+
.spectrum-SplitView-gripper::before {
163+
background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
164+
}
165+
}
166+
}
167+
98168
.spectrum-SplitView--vertical {
99169
flex-direction: column;
100170

101171
.spectrum-SplitView-pane {
102172
block-size: auto;
103-
inline-size: var(--spectrum-splitview-vertical-width);
173+
inline-size: var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width));
104174
}
105175

106176
.spectrum-SplitView-gripper {
107177
/* half of (height + vertical border - handle width) * -1 (for negative opposite) */
108178
inset-block-start: calc(
109179
(
110180
(
111-
var(--spectrum-dragbar-gripper-width) +
112-
(2 * var(--spectrum-dragbar-gripper-border-width-horizontal)) -
113-
var(--spectrum-dragbar-handle-width)
181+
var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) +
182+
(2 * var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical))) -
183+
var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width))
114184
) / 2
115185
) * -1
116186
);
117187

118188
transform: translate(
119-
calc(-1 * var(--spectrum-splitview-vertical-gripper-width)),
189+
calc(-1 * var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width))),
120190
0
121191
);
122-
inset-inline-start: var(--spectrum-splitview-vertical-gripper-width);
123-
inline-size: var(
124-
--spectrum-dragbar-gripper-height
125-
); /* same as default height */
126-
block-size: var(
127-
--spectrum-dragbar-gripper-width
128-
); /* same as default width */
192+
inset-inline-start: var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width));
193+
inline-size: var(--mod-splitview-gripper-height, var(--spectrum-splitview-gripper-height));
194+
block-size: var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width));
129195

130196
/* opposite of default border-width */
131-
border-block-width: var(--spectrum-dragbar-gripper-border-width-horizontal);
132-
border-inline-width: var(--spectrum-dragbar-gripper-border-width-vertical);
197+
border-block-width: var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal));
198+
border-inline-width: var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical));
133199
}
134200

135201
.spectrum-SplitView-splitter {
136-
inline-size: var(--spectrum-splitview-vertical-width);
137-
block-size: var(--spectrum-dragbar-handle-width);
138-
139-
&.is-collapsed-start,
140-
&.is-collapsed-end {
141-
.spectrum-SplitView-gripper {
142-
inset-inline-start: var(--spectrum-splitview-vertical-gripper-width);
143-
144-
/* make the center line of the gripper */
145-
&:before {
146-
inset-block-start: calc(
147-
var(--spectrum-splitview-vertical-gripper-width) -
148-
calc(var(--spectrum-dragbar-handle-width) / 2)
149-
);
150-
inset-inline-start: var(--spectrum-splitview-vertical-gripper-reset);
151-
inline-size: var(--spectrum-splitview-vertical-gripper-outer-width);
152-
block-size: var(--spectrum-dragbar-handle-width);
153-
}
154-
}
202+
inline-size: var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width));
203+
block-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
204+
}
205+
206+
.spectrum-SplitView-splitter.is-collapsed-start,
207+
.spectrum-SplitView-splitter.is-collapsed-end {
208+
.spectrum-SplitView-gripper {
209+
inset-inline-start: var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width));
210+
}
211+
212+
/* make the center line of the gripper */
213+
.spectrum-SplitView-gripper::before {
214+
inset-block-start: calc(
215+
var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width)) -
216+
calc(var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)) / 2)
217+
);
218+
inset-inline-start: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
219+
inline-size: var(--mod-splitview-vertical-gripper-outer-width, var(--spectrum-splitview-vertical-gripper-outer-width));
220+
block-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
155221
}
222+
}
156223

157-
&.is-collapsed-start {
158-
.spectrum-SplitView-gripper {
159-
inset-block-start: var(--spectrum-splitview-vertical-gripper-reset);
160-
}
224+
.spectrum-SplitView-splitter.is-collapsed-start {
225+
.spectrum-SplitView-gripper {
226+
inset-block-start: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
161227
}
228+
}
162229

163-
&.is-collapsed-end {
164-
.spectrum-SplitView-gripper {
165-
inset-block-start: auto;
166-
inset-block-end: var(--spectrum-splitview-vertical-gripper-reset);
167-
}
230+
.spectrum-SplitView-splitter.is-collapsed-end {
231+
.spectrum-SplitView-gripper {
232+
inset-block-start: auto;
233+
inset-block-end: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
168234
}
169235
}
170236
}
237+
238+
@media (forced-colors: active) {
239+
.spectrum-SplitView {
240+
--highcontrast-splitview-handle-background-color: CanvasText;
241+
--highcontrast-splitview-handle-background-color-hover: CanvasText;
242+
--highcontrast-splitview-handle-background-color-down: CanvasText;
243+
--highcontrast-splitview-handle-background-color-focus: Highlight;
244+
}
245+
}

‎components/splitview/metadata/mods.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
| Modifiable Custom Properties |
2+
| ------------------------------------------------- |
3+
| `--mod-splitview-background-color` |
4+
| `--mod-splitview-gripper-border-radius` |
5+
| `--mod-splitview-gripper-border-width-horizontal` |
6+
| `--mod-splitview-gripper-border-width-vertical` |
7+
| `--mod-splitview-gripper-height` |
8+
| `--mod-splitview-gripper-width` |
9+
| `--mod-splitview-handle-background-color` |
10+
| `--mod-splitview-handle-background-color-down` |
11+
| `--mod-splitview-handle-background-color-focus` |
12+
| `--mod-splitview-handle-background-color-hover` |
13+
| `--mod-splitview-handle-width` |
14+
| `--mod-splitview-vertical-gripper-outer-width` |
15+
| `--mod-splitview-vertical-gripper-reset` |
16+
| `--mod-splitview-vertical-gripper-width` |
17+
| `--mod-splitview-vertical-width` |

‎components/splitview/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@
1818
"build": "gulp"
1919
},
2020
"peerDependencies": {
21-
"@spectrum-css/vars": ">=9"
21+
"@spectrum-css/tokens": ">=11"
2222
},
2323
"devDependencies": {
24-
"@spectrum-css/component-builder": "^4.0.14",
25-
"@spectrum-css/vars": "^9.0.8",
24+
"@spectrum-css/component-builder-simple": "^2.0.17",
25+
"@spectrum-css/tokens": "^11.3.3",
2626
"gulp": "^4.0.0"
2727
},
2828
"publishConfig": {

‎components/splitview/skin.css

Lines changed: 0 additions & 74 deletions
This file was deleted.

0 commit comments

Comments
 (0)