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 Box styles to PVC #1618

Merged
merged 5 commits into from
Nov 21, 2022
Merged

Move Box styles to PVC #1618

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5ac6c7f
Add `Box` styles from PCSS
simurai Nov 18, 2022
195ea23
Convert .scss to .pcss
simurai Nov 18, 2022
57706a5
Update BorderBox preview
simurai Nov 18, 2022
71e7cc8
Create long-pots-lay.md
simurai Nov 18, 2022
142a170
Merge branch 'main' into box-pcss
simurai Nov 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/long-pots-lay.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/view-components": patch
---

Move`Box` styles to PVC
284 changes: 284 additions & 0 deletions app/components/primer/beta/border_box.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,284 @@
/* BorderBox */

/* TODO: Rename to BorderBox to match PVC */
.Box {
background-color: var(--color-canvas-default);
border-color: var(--color-border-default);
border-style: solid;
border-width: var(--primer-borderWidth-thin, 1px);
border-radius: var(--primer-borderRadius-medium, 6px);
}

/* Box padding density options */
.Box--condensed {
line-height: 1.25;

& .Box-header {
padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);
}

& .Box-body {
padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);
}

& .Box-footer {
padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);
}

& .Box-btn-octicon {
&.btn-octicon {
padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);
margin: calc(var(--primer-controlStack-medium-gap-condensed, 8px) * -1) calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1);
line-height: 1.25;
}
}

& .Box-row {
padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);
}
}

.Box--spacious {
& .Box-header {
padding: var(--primer-stack-padding-spacious, 24px);
line-height: 1.25;
}

& .Box-title {
font-size: var(--primer-text-title-size-medium, 20px);
}

& .Box-body {
padding: var(--primer-stack-padding-spacious, 24px);
}

& .Box-footer {
padding: var(--primer-stack-padding-spacious, 24px);
}

& .Box-btn-octicon {
&.btn-octicon {
padding: var(--primer-stack-padding-spacious, 24px);
margin: calc(var(--primer-stack-gap-spacious, 24px) * -1) calc(var(--primer-stack-gap-spacious, 24px) * -1);
}
}

& .Box-row {
padding: var(--primer-stack-padding-spacious, 24px);
}
}

.Box-header {
padding: var(--primer-stack-padding-normal, 16px);
margin: calc(var(--primer-borderWidth-thin, 1px) * -1) calc(var(--primer-borderWidth-thin, 1px) * -1) 0;
background-color: var(--color-canvas-subtle);
border-color: var(--color-border-default);
border-style: solid;
border-width: var(--primer-borderWidth-thin, 1px);
border-top-left-radius: var(--primer-borderRadius-medium, 6px);
border-top-right-radius: var(--primer-borderRadius-medium, 6px);
}

.Box-title {
font-size: var(--primer-text-body-size-medium, 14px);
font-weight: var(--base-text-weight-semibold, 600);
}

.Box-body {
padding: var(--primer-stack-padding-normal, 16px);
border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);

/* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */
&:last-of-type {
margin-bottom: calc(var(--primer-borderWidth-thin, 1px) * -1);
border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
}
}

/* Box rows */
.Box-row {
padding: var(--primer-stack-padding-normal, 16px);
margin-top: calc(var(--primer-borderWidth-thin, 1px) * -1);
list-style-type: none; /* To account for applying Box component to a list */
border-top-color: var(--color-border-muted);
border-top-style: solid;
border-top-width: var(--primer-borderWidth-thin, 1px);

&:first-of-type {
border-top-left-radius: var(--primer-borderRadius-medium, 6px);
border-top-right-radius: var(--primer-borderRadius-medium, 6px);
}

&:last-of-type {
border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
}

/* Adds a blue vertical line to the left of the row
** For indicating a row item is unread */
&.Box-row--unread,
/* .unread to be deprecated with .Box-row-unread */
&.unread {
box-shadow: inset 2px 0 0 var(--color-accent-emphasis);
}

&.navigation-focus {
/* Focus styles for when drag icon */
& .Box-row--drag-button {
color: var(--color-accent-fg);
cursor: grab;
opacity: 100;
}

/* Grabbing while row is dragged */
&.is-dragging .Box-row--drag-button {
cursor: grabbing;
}

/* Row dragging styles */
&.sortable-chosen {
background-color: var(--color-canvas-subtle);
}

/* Makes dragging row background gray */
&.sortable-ghost {
background-color: var(--color-canvas-subtle);

/* Hides contents of row while dragging so row looks solid gray */
& .Box-row--drag-hide {
opacity: 0;
}
}
}
}

.Box-row--focus-gray {
&.navigation-focus {
background-color: var(--color-canvas-subtle);
}
}

.Box-row--focus-blue {
&.navigation-focus {
background-color: var(--color-accent-subtle);
}
}

.Box-row--hover-gray {
&:hover {
background-color: var(--color-canvas-subtle);
}
}

.Box-row--hover-blue {
&:hover {
background-color: var(--color-accent-subtle);
}
}

/* Optional link style
** Makes links on mobile blue since they don't have hover state,
** and links are dark-gray with blue hover on desktop. */
.Box-row-link {
@media (min-width: 768px) {
color: var(--color-fg-default);
text-decoration: none;

&:hover {
color: var(--color-accent-fg);
text-decoration: none;
}
}
}

/* Optional drag icon styles for reordering items
** Focus styles included in .Box-row above */
.Box-row--drag-button {
opacity: 0;
}

.Box-footer {
padding: var(--primer-stack-padding-normal, 16px);
margin-top: calc(var(--primer-borderWidth-thin, 1px) * -1); /* prevents double border when used with .Box-body */
border-top-color: var(--color-border-default);
border-top-style: solid;
border-top-width: var(--primer-borderWidth-thin, 1px);
border-radius: 0 0 var(--primer-borderRadius-medium, 6px) var(--primer-borderRadius-medium, 6px);
}

/* Option for a box with scrolling content */
.Box--scrollable {
max-height: 324px;
overflow: scroll;
}

/* Box themes */

.Box--blue {
border-color: var(--color-accent-muted);

& .Box-header {
background-color: var(--color-accent-subtle);
border-color: var(--color-accent-muted);
}

& .Box-body {
border-color: var(--color-accent-muted);
}

& .Box-row {
border-color: var(--color-accent-muted);
}

& .Box-footer {
border-color: var(--color-accent-muted);
}
}

/* Applies and red border to the outside of the box,
** but not to the border separating rows. */
.Box--danger {
border-color: var(--color-danger-emphasis);

& .Box-row {
&:first-of-type {
border-color: var(--color-danger-emphasis);
}
}

& .Box-body {
&:last-of-type {
border-color: var(--color-danger-emphasis);
}
}
}

.Box-header--blue {
background-color: var(--color-accent-subtle);
border-color: var(--color-accent-muted);
}

/* Box row highlight themes */

.Box-row--yellow {
background-color: var(--color-attention-subtle);
}

.Box-row--blue {
background-color: var(--color-accent-subtle);
}

.Box-row--gray {
background-color: var(--color-canvas-subtle);
}

/* Box with btn-octicon */
.Box-btn-octicon {
/* Increase specificity when btn-octicon is used because comes after .Box in the cascade */
&.btn-octicon {
padding: var(--primer-control-medium-paddingInline-spacious, 16px) var(--primer-control-medium-paddingInline-spacious, 16px);
margin: calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1) calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1);
line-height: 1.5; /* override btn-octicon line-height */
}
}
1 change: 1 addition & 0 deletions app/components/primer/primer.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
@import "./alpha/segmented_control.pcss";
@import "./beta/avatar.pcss";
@import "./beta/avatar_stack.pcss";
@import "./beta/border_box.pcss";
@import "./beta/breadcrumbs.pcss";
@import "./beta/button.pcss";
@import "./beta/counter.pcss";
Expand Down
1 change: 0 additions & 1 deletion demo/app/assets/stylesheets/application.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
*= require @primer/css/dist/primitives.css
*= require @primer/css/dist/color-modes.css
*= require @primer/css/dist/base.css
*= require @primer/css/dist/box.css
*= require @primer/css/dist/buttons.css
*= require @primer/css/dist/forms.css
*= require @primer/css/dist/layout.css
Expand Down
Loading