Skip to content

Commit

Permalink
feat(splitview)!: migrate to spectrum tokens (#2103)
Browse files Browse the repository at this point in the history 
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 <[email protected]>
  • Loading branch information
@mlogsdon18 @pfulton
mlogsdon18 and pfulton authored Sep 5, 2023
1 parent 16e8239 commit 4f39c5d
Show file tree
Hide file tree
Showing 11 changed files with 209 additions and 146 deletions.
2 changes: 1 addition & 1 deletion components/splitview/gulpfile.js
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
module.exports = require("@spectrum-css/component-builder");
module.exports = require("@spectrum-css/component-builder-simple");
205 changes: 140 additions & 65 deletions components/splitview/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,69 +15,93 @@ governing permissions and limitations under the License.
--spectrum-splitview-vertical-gripper-width: 50%;
--spectrum-splitview-vertical-gripper-outer-width: 100%;
--spectrum-splitview-vertical-gripper-reset: 0;

--spectrum-splitview-background-color: var(--spectrum-gray-100);
--spectrum-splitview-handle-background-color: var(--spectrum-gray-300);
--spectrum-splitview-handle-background-color-hover: var(--spectrum-gray-400);
--spectrum-splitview-handle-background-color-down: var(--spectrum-gray-800);
--spectrum-splitview-handle-background-color-focus: var(--spectrum-focus-indicator-color);
--spectrum-splitview-handle-width: var(--spectrum-border-width-200);

--spectrum-splitview-gripper-border-radius: var(--spectrum-corner-radius-75);
--spectrum-splitview-gripper-width: var(--spectrum-border-width-400);
--spectrum-splitview-gripper-height: 16px; /* No good token to use for this */
--spectrum-splitview-gripper-border-width-horizontal: 3px; /* No good token to use for this */
--spectrum-splitview-gripper-border-width-vertical: var(--spectrum-border-width-400);

}


.spectrum-SplitView {
display: flex;
overflow: hidden;
}

.spectrum-SplitView-pane {
block-size: 100%;
background-color: var(--mod-splitview-background-color, var(--spectrum-splitview-background-color));
}

.spectrum-SplitView-gripper {
content: "";
display: block;
position: absolute;
border-style: solid;
border-radius: var(--spectrum-dragbar-gripper-border-radius);
border-radius: var(--mod-splitview-gripper-border-radius, var(--spectrum-splitview-gripper-border-radius));
border-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));

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

/* Prevent touch-action on handle */
touch-action: none;

/* half of (width + horizontal border - handle width) * -1 (for negative opposite) */
inset-inline-start: calc(
(
(
var(--spectrum-dragbar-gripper-width) +
(2 * var(--spectrum-dragbar-gripper-border-width-horizontal)) -
var(--spectrum-dragbar-handle-width)
var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) +
(2 * var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical))) -
var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width))
) / 2
) * -1
);
inline-size: var(--spectrum-dragbar-gripper-width);
block-size: var(--spectrum-dragbar-gripper-height);
border-block-width: var(--spectrum-dragbar-gripper-border-width-vertical);
border-inline-width: var(--spectrum-dragbar-gripper-border-width-horizontal);
inline-size: var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width));
block-size: var(--mod-splitview-gripper-height, var(--spectrum-splitview-gripper-height));
border-block-width: var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical));
border-inline-width: var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal));

&::before {
background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));
}
}

.spectrum-SplitView-splitter {
/* Contain the gripper */
/* Contains the gripper */
position: relative;

background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));

/* Prevent text selection while dragging */
user-select: none;

inline-size: var(--spectrum-dragbar-handle-width);
inline-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
block-size: 100%;
z-index: 1;

&.is-collapsed-start,
&.is-collapsed-end {
.spectrum-SplitView-gripper {
/* make the center line of the gripper */
&:before {
content: "";
position: absolute;

inset-block-start: 0;
inset-inline-start: calc(
50% - calc(var(--spectrum-dragbar-handle-width) / 2)
);
inline-size: var(--spectrum-dragbar-handle-width);
block-size: 100%;
}
/* make the center line of the gripper */
.spectrum-SplitView-gripper::before {
content: "";
position: absolute;

inset-block-start: 0;
inset-inline-start: calc(
50% - calc(var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)) / 2)
);
inline-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
block-size: 100%;
}
}

Expand All @@ -95,76 +119,127 @@ governing permissions and limitations under the License.
}
}

.spectrum-SplitView-splitter.is-draggable {
&:hover,
&.is-hovered {
background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));

.spectrum-SplitView-gripper {
border-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
}

.spectrum-SplitView-gripper::before {
background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
}
}

&:active,
&.is-active {
background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));

.spectrum-SplitView-gripper {
border-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
}

/* Center line of gripper */
.spectrum-SplitView-gripper::before {
background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
}
}

&:focus {
outline: none;
}

&:focus-visible {
outline: none;
background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));

.spectrum-SplitView-gripper {
border-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
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)));
}
.spectrum-SplitView-gripper::before {
background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
}
}
}

.spectrum-SplitView--vertical {
flex-direction: column;

.spectrum-SplitView-pane {
block-size: auto;
inline-size: var(--spectrum-splitview-vertical-width);
inline-size: var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width));
}

.spectrum-SplitView-gripper {
/* half of (height + vertical border - handle width) * -1 (for negative opposite) */
inset-block-start: calc(
(
(
var(--spectrum-dragbar-gripper-width) +
(2 * var(--spectrum-dragbar-gripper-border-width-horizontal)) -
var(--spectrum-dragbar-handle-width)
var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) +
(2 * var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical))) -
var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width))
) / 2
) * -1
);

transform: translate(
calc(-1 * var(--spectrum-splitview-vertical-gripper-width)),
calc(-1 * var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width))),
0
);
inset-inline-start: var(--spectrum-splitview-vertical-gripper-width);
inline-size: var(
--spectrum-dragbar-gripper-height
); /* same as default height */
block-size: var(
--spectrum-dragbar-gripper-width
); /* same as default width */
inset-inline-start: var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width));
inline-size: var(--mod-splitview-gripper-height, var(--spectrum-splitview-gripper-height));
block-size: var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width));

/* opposite of default border-width */
border-block-width: var(--spectrum-dragbar-gripper-border-width-horizontal);
border-inline-width: var(--spectrum-dragbar-gripper-border-width-vertical);
border-block-width: var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal));
border-inline-width: var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical));
}

.spectrum-SplitView-splitter {
inline-size: var(--spectrum-splitview-vertical-width);
block-size: var(--spectrum-dragbar-handle-width);

&.is-collapsed-start,
&.is-collapsed-end {
.spectrum-SplitView-gripper {
inset-inline-start: var(--spectrum-splitview-vertical-gripper-width);

/* make the center line of the gripper */
&:before {
inset-block-start: calc(
var(--spectrum-splitview-vertical-gripper-width) -
calc(var(--spectrum-dragbar-handle-width) / 2)
);
inset-inline-start: var(--spectrum-splitview-vertical-gripper-reset);
inline-size: var(--spectrum-splitview-vertical-gripper-outer-width);
block-size: var(--spectrum-dragbar-handle-width);
}
}
inline-size: var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width));
block-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
}

.spectrum-SplitView-splitter.is-collapsed-start,
.spectrum-SplitView-splitter.is-collapsed-end {
.spectrum-SplitView-gripper {
inset-inline-start: var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width));
}

/* make the center line of the gripper */
.spectrum-SplitView-gripper::before {
inset-block-start: calc(
var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width)) -
calc(var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)) / 2)
);
inset-inline-start: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
inline-size: var(--mod-splitview-vertical-gripper-outer-width, var(--spectrum-splitview-vertical-gripper-outer-width));
block-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
}
}

&.is-collapsed-start {
.spectrum-SplitView-gripper {
inset-block-start: var(--spectrum-splitview-vertical-gripper-reset);
}
.spectrum-SplitView-splitter.is-collapsed-start {
.spectrum-SplitView-gripper {
inset-block-start: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
}
}

&.is-collapsed-end {
.spectrum-SplitView-gripper {
inset-block-start: auto;
inset-block-end: var(--spectrum-splitview-vertical-gripper-reset);
}
.spectrum-SplitView-splitter.is-collapsed-end {
.spectrum-SplitView-gripper {
inset-block-start: auto;
inset-block-end: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
}
}
}

@media (forced-colors: active) {
.spectrum-SplitView {
--highcontrast-splitview-handle-background-color: CanvasText;
--highcontrast-splitview-handle-background-color-hover: CanvasText;
--highcontrast-splitview-handle-background-color-down: CanvasText;
--highcontrast-splitview-handle-background-color-focus: Highlight;
}
}
17 changes: 17 additions & 0 deletions components/splitview/metadata/mods.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
| Modifiable Custom Properties |
| ------------------------------------------------- |
| `--mod-splitview-background-color` |
| `--mod-splitview-gripper-border-radius` |
| `--mod-splitview-gripper-border-width-horizontal` |
| `--mod-splitview-gripper-border-width-vertical` |
| `--mod-splitview-gripper-height` |
| `--mod-splitview-gripper-width` |
| `--mod-splitview-handle-background-color` |
| `--mod-splitview-handle-background-color-down` |
| `--mod-splitview-handle-background-color-focus` |
| `--mod-splitview-handle-background-color-hover` |
| `--mod-splitview-handle-width` |
| `--mod-splitview-vertical-gripper-outer-width` |
| `--mod-splitview-vertical-gripper-reset` |
| `--mod-splitview-vertical-gripper-width` |
| `--mod-splitview-vertical-width` |
6 changes: 3 additions & 3 deletions components/splitview/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@
"build": "gulp"
},
"peerDependencies": {
"@spectrum-css/vars": ">=9"
"@spectrum-css/tokens": ">=11"
},
"devDependencies": {
"@spectrum-css/component-builder": "^4.0.14",
"@spectrum-css/vars": "^9.0.8",
"@spectrum-css/component-builder-simple": "^2.0.17",
"@spectrum-css/tokens": "^11.3.3",
"gulp": "^4.0.0"
},
"publishConfig": {
Expand Down
74 changes: 0 additions & 74 deletions components/splitview/skin.css
View file

This file was deleted.

Loading

0 comments on commit 4f39c5d

Please sign in to comment.