Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Move dropdown styles to PVC #1600

Merged
merged 4 commits into from Nov 14, 2022
Merged

Move dropdown styles to PVC #1600

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9ef4210
Add `dropdown` styles from PCSS
simurai Nov 11, 2022
a4dd209
Convert .scss to .pcss
simurai Nov 11, 2022
5a4eca7
Create twelve-dancers-retire.md
simurai Nov 11, 2022
8aec239
Merge branch 'main' into dropdown-pcss
jonrohan Nov 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/twelve-dancers-retire.md
View file
Open in desktop
@@ -0,0 +1,5 @@
---
"@primer/view-components": patch
---

Move `dropdown` styles to PVC
260 changes: 260 additions & 0 deletions app/components/primer/dropdown.pcss
View file
Open in desktop
@@ -0,0 +1,260 @@
/* dropdown */

.dropdown {
position: relative;
}

.dropdown-caret {
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
content: '';
border-style: solid;
border-width: var(--primer-borderWidth-thicker, 4px) var(--primer-borderWidth-thicker, 4px) 0;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}

/* Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which
** way the menu should render from the element triggering it. */

.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 100;
width: 160px;
padding-top: var(--primer-control-small-paddingBlock, 4px);
padding-bottom: var(--primer-control-small-paddingBlock, 4px);
margin-top: 2px;
list-style: none;
background-color: var(--color-canvas-overlay);
background-clip: padding-box;
border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
border-radius: var(--primer-borderRadius-medium, 6px);
box-shadow: var(--color-shadow-large);

&::before,
&::after {
position: absolute;
display: inline-block;
content: '';
}

/* caret border */
&::before {
border: 8px solid transparent;
border-bottom-color: var(--color-border-default);
}

/* caret background (should match dropdown background) */
&::after {
border: 7px solid transparent;
border-bottom-color: var(--color-canvas-overlay);
}

& > ul {
list-style: none;
}
}

.dropdown-menu-no-overflow {
width: auto;

& .dropdown-item {
padding: var(--primer-control-small-paddingBlock, 4px) var(--primer-control-medium-paddingInline-spacious, 16px);
overflow: visible;
text-overflow: inherit;
}
}

/* Dropdown items (can be links or buttons) */
.dropdown-item {
display: block;
padding: var(--primer-control-small-paddingBlock, 4px) var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-small-paddingBlock, 4px) var(--primer-control-medium-paddingInline-spacious, 16px);
overflow: hidden;
color: var(--color-fg-default);
text-overflow: ellipsis;
white-space: nowrap;

&:hover {
color: var(--color-fg-on-emphasis);
text-decoration: none;
background-color: var(--color-accent-emphasis);

& > .octicon {
color: inherit;
opacity: 1;
}

& [class*='color-text-'] {
color: inherit !important;
}

& > .Label {
color: inherit !important;
border-color: currentcolor;
}
}

&.btn-link {
width: 100%;
text-align: left;
}
}

.dropdown-signout {
width: 100%;
text-align: left;
background: none;
border: 0;
}

.dropdown-divider {
display: block;
height: 0;
margin: var(--primer-stack-gap-condensed, 8px) 0;
border-top: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
}

.dropdown-header {
padding: var(--primer-control-small-paddingBlock, 4px) var(--primer-control-medium-paddingInline-spacious, 16px);
font-size: var(--primer-text-body-size-small, 12px);
color: var(--color-fg-muted);
}

.dropdown-item[aria-checked='false'] .octicon-check {
display: none;
}

/* Directional classes
**
** Move the menu and the caret attached to it. Requires at least one of these on
** the `.dropdown-menu` element. */

.dropdown-menu-w {
top: 0;
right: 100%;
left: auto;
width: auto;
margin-top: 0;
margin-right: 8px;

&::before {
top: 10px;
right: -16px;
left: auto;
border-color: transparent;
border-left-color: var(--color-border-default);
}

&::after {
top: 11px;
right: -14px;
left: auto;
border-color: transparent;
border-left-color: var(--color-canvas-overlay);
}
}

.dropdown-menu-e {
top: 0;
left: 100%;
width: auto;
margin-top: 0;
margin-left: 8px;

&::before {
top: 10px;
left: -16px;
border-color: transparent;
border-right-color: var(--color-border-default);
}

&::after {
top: 11px;
left: -14px;
border-color: transparent;
border-right-color: var(--color-canvas-overlay);
}
}

.dropdown-menu-ne {
top: auto;
bottom: 100%;
left: 0;
margin-bottom: 3px;

&::before,
&::after {
top: auto;
right: auto;
}

&::before {
bottom: -8px;
left: 9px;
border-top: 8px solid var(--color-border-default);
border-right: 8px solid transparent;
border-bottom: 0;
border-left: 8px solid transparent;
}

&::after {
bottom: -7px;
left: 10px;
border-top: 7px solid var(--color-canvas-overlay);
border-right: 7px solid transparent;
border-bottom: 0;
border-left: 7px solid transparent;
}
}

.dropdown-menu-s {
right: 50%;
left: auto;
transform: translateX(50%);

&::before {
top: -16px;
right: 50%;
transform: translateX(50%);
}

&::after {
top: -14px;
right: 50%;
transform: translateX(50%);
}
}

.dropdown-menu-sw {
right: 0;
left: auto;

&::before {
top: -16px;
right: 9px;
left: auto;
}

&::after {
top: -14px;
right: 10px;
left: auto;
}
}

.dropdown-menu-se {
&::before {
top: -16px;
left: 9px;
}

&::after {
top: -14px;
left: 10px;
}
}
1 change: 1 addition & 0 deletions app/components/primer/primer.pcss
View file
Open in desktop
Expand Up @@ -10,6 +10,7 @@
@import "./beta/blankslate.pcss";
@import "./beta/progress_bar.pcss";
@import "./beta/truncate.pcss";
@import "./dropdown.pcss";
@import "./popover_component.pcss";
@import "./state_component.pcss";
@import "./subhead_component.pcss";
Expand Down
1 change: 0 additions & 1 deletion demo/app/assets/stylesheets/application.css
View file
Open in desktop
Expand Up @@ -19,7 +19,6 @@
*= require @primer/css/dist/autocomplete.css
*= require @primer/css/dist/avatars.css
*= require @primer/css/dist/branch-name.css
*= require @primer/css/dist/dropdown.css
*= require @primer/css/dist/header.css
*= require @primer/css/dist/loaders.css
*= require @primer/css/dist/markdown.css
Expand Down