primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-26 02:38:32 +03:00
Code Issues Projects Releases Wiki Activity

Prevent .show-on-focus to change width/height (#2391)

Browse Source 
* Update `.show-on-focus` to not reset width/height

* Add `ShowOnFocus` story

* Create .changeset/shy-pumpkins-walk.md
This commit is contained in:
simurai 2023-02-28 15:00:42 +09:00 committed by GitHub
parent 5dc4feadff
commit 95ab0d0f48
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/shy-pumpkins-walk.md Normal file
View File

@ -0,0 +1,5 @@
---
"@primer/css": patch
---
Prevent `.show-on-focus` to change width/height

7
docs/src/stories/utilities/Layout.stories.jsx
View File

@ -285,6 +285,13 @@ export const ScreenReaderOnly = ({}) => (
</div> </div>
) )
export const ShowOnFocus = ({}) => (
<div>
<div class="mb-2">Click here and press tab to make the ".show-on-focus" element appear</div>
<button type="button" class="btn show-on-focus">.show-on-focus</button>
</div>
)
export const MediaObject = ({}) => ( export const MediaObject = ({}) => (
<div class="clearfix p-3 border"> <div class="clearfix p-3 border">
<div class="float-left p-3 mr-3 color-bg-subtle"> <div class="float-left p-3 mr-3 color-bg-subtle">

19
src/utilities/visibility-display.scss
View File

@ -107,17 +107,18 @@
// Only display content on focus // Only display content on focus
.show-on-focus { .show-on-focus {
position: absolute; position: absolute !important;
width: 1px;
height: 1px; &:not(:focus) {
margin: 0; width: 1px !important;
overflow: hidden; height: 1px !important;
clip: rect(1px, 1px, 1px, 1px); padding: 0 !important;
overflow: hidden !important;
clip: rect(1px, 1px, 1px, 1px) !important;
border: 0 !important;
}
&:focus { &:focus {
z-index: 999; z-index: 999;
width: auto;
height: auto;
clip: auto;
} }
} }