Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Adds .user-select-* utils from v5 - Adds button role attribute util, one of the top requested features in our issues for adding pointer cursors - Adds new docs page to demonstrate both - Includes Sass list for customizing user select
- Loading branch information
Showing
4 changed files
with
41 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
// stylelint-disable declaration-no-important | ||
|
||
@each $value in $user-selects { | ||
.user-select-#{$value} { user-select: $value !important; } | ||
} | ||
|
||
[role="button"] { | ||
cursor: pointer; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
--- | ||
layout: docs | ||
title: Interactions | ||
description: Utility classes that change how users interact with contents of a website. | ||
group: utilities | ||
--- | ||
|
||
## Text selection | ||
|
||
Change the way in which the content is selected when the user interacts with it. | ||
|
||
{% capture example %} | ||
<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p> | ||
<p class="user-select-auto">This paragraph has the default select behavior.</p> | ||
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p> | ||
{% endcapture %} | ||
{% include example.html content=example %} | ||
|
||
Customize the available classes by changing the `$user-selects` Sass list in `_variables.scss`. | ||
|
||
## Cursors | ||
|
||
Change the cursor from a default value to `pointer` with our built-in attribute utility, `role="button"`. Add this attribute to an element to convey semantics to your visitors and add an explicit pointer cursor to help indicate elements are interactive. | ||
|
||
{% capture example %} | ||
<span role="button">Non-button element button</span> | ||
{% endcapture %} | ||
{% include example.html content=example %} | ||
|
||
Customize the available classes by changing the `$cursors` Sass list in `_variables.scss`. |