Skip to content

Commit ecbcbb1

Browse files
simuraisimurai
authored
Import Layout from PVC (#2340)
* Import Layout styles from PVC * Bump `@primer/view-components` to `0.0.115` * Bump `@primer/view-components` to `0.0.115` Again! After solving merge conflicts * Rename `menu_component` import to `alpha/menu` * Create mighty-forks-occur.md
1 parent 4272e5e commit ecbcbb1

File tree

8 files changed

+51
-294
lines changed

8 files changed

+51
-294
lines changed

‎.changeset/mighty-forks-occur.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/css": patch
3+
---
4+
5+
Import `Layout` from PVC

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
},
4444
"dependencies": {
4545
"@primer/primitives": "^7.9.0",
46-
"@primer/view-components": "^0.0.114"
46+
"@primer/view-components": "^0.0.115"
4747
},
4848
"devDependencies": {
4949
"@changesets/changelog-github": "0.4.6",

‎src/layout/index.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
@import '../support/index.scss';
22
@import './app-frame.scss';
3-
@import './mixins.scss';
43
@import './container.scss';
54
@import './grid.scss';
65
@import './grid-offset.scss';

‎src/layout/layout.scss‎

Lines changed: 1 addition & 182 deletions
Original file line numberDiff line numberDiff line change
@@ -1,182 +1 @@
1-
// Layout component
2-
3-
.Layout {
4-
display: grid;
5-
6-
--Layout-sidebar-width: #{map-get($sidebar-width, 'sm')};
7-
--Layout-gutter: 16px;
8-
9-
@media (max-width: calc(#{$width-sm} - 0.02px)) {
10-
@include flow-as-row;
11-
}
12-
13-
&.Layout--flowRow-until-md {
14-
@media (max-width: calc(#{$width-md} - 0.02px)) {
15-
@include flow-as-row;
16-
}
17-
}
18-
19-
&.Layout--flowRow-until-lg {
20-
@media (max-width: calc(#{$width-lg} - 0.02px)) {
21-
@include flow-as-row;
22-
}
23-
}
24-
25-
// Flow as column
26-
27-
grid-auto-flow: column;
28-
grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); // sidebar column, separator, main column
29-
grid-gap: var(--Layout-gutter);
30-
31-
.Layout-sidebar {
32-
grid-column: 1;
33-
}
34-
35-
.Layout-divider {
36-
display: none;
37-
}
38-
39-
.Layout-main {
40-
grid-column: 2 / span 2;
41-
}
42-
43-
// Gutter spacing
44-
45-
@include breakpoint(lg) {
46-
--Layout-gutter: 24px;
47-
}
48-
49-
&.Layout--gutter-none {
50-
// stylelint-disable-next-line length-zero-no-unit
51-
--Layout-gutter: 0px;
52-
}
53-
54-
&.Layout--gutter-condensed {
55-
--Layout-gutter: 16px;
56-
}
57-
58-
&.Layout--gutter-spacious {
59-
@include breakpoint(lg) {
60-
--Layout-gutter: 32px;
61-
}
62-
63-
@include breakpoint(xl) {
64-
--Layout-gutter: 40px;
65-
}
66-
}
67-
68-
// Sidebar width
69-
70-
@each $breakpoint in map-keys($sidebar-width) {
71-
@include breakpoint($breakpoint) {
72-
--Layout-sidebar-width: #{map-get($sidebar-width, $breakpoint)};
73-
}
74-
}
75-
76-
&.Layout--sidebar-narrow {
77-
@each $breakpoint in map-keys($sidebar-narrow-width) {
78-
@include breakpoint($breakpoint) {
79-
--Layout-sidebar-width: #{map-get($sidebar-narrow-width, $breakpoint)};
80-
}
81-
}
82-
}
83-
84-
&.Layout--sidebar-wide {
85-
@each $breakpoint in map-keys($sidebar-wide-width) {
86-
@include breakpoint($breakpoint) {
87-
--Layout-sidebar-width: #{map-get($sidebar-wide-width, $breakpoint)};
88-
}
89-
}
90-
}
91-
92-
// Sidebar position
93-
94-
&.Layout--sidebarPosition-start {
95-
.Layout-sidebar {
96-
grid-column: 1;
97-
}
98-
99-
.Layout-main {
100-
grid-column: 2 / span 2;
101-
}
102-
}
103-
104-
&.Layout--sidebarPosition-end {
105-
grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;
106-
107-
.Layout-main {
108-
grid-column: 1;
109-
}
110-
111-
.Layout-sidebar {
112-
grid-column: 2 / span 2;
113-
}
114-
}
115-
116-
// Sidebar divider
117-
118-
&.Layout--divided {
119-
.Layout-divider {
120-
display: block;
121-
grid-column: 2;
122-
width: 1px;
123-
// stylelint-disable-next-line primer/spacing
124-
margin-right: -1px;
125-
background: var(--color-border-default);
126-
}
127-
128-
.Layout-main {
129-
grid-column: 3 / span 1;
130-
}
131-
132-
&.Layout--sidebarPosition-end {
133-
.Layout-sidebar {
134-
grid-column: 3 / span 1;
135-
}
136-
137-
.Layout-main {
138-
grid-column: 1;
139-
}
140-
}
141-
}
142-
}
143-
144-
.Layout-divider {
145-
display: none;
146-
width: 1px;
147-
}
148-
149-
.Layout-sidebar {
150-
width: var(--Layout-sidebar-width);
151-
}
152-
153-
.Layout-main {
154-
min-width: 0;
155-
156-
// Centered main column
157-
// FIXME: right-aligned sidebar
158-
.Layout-main-centered-md,
159-
.Layout-main-centered-lg,
160-
.Layout-main-centered-xl {
161-
margin-right: auto;
162-
margin-left: auto;
163-
164-
> .container-md,
165-
> .container-lg,
166-
> .container-xl {
167-
margin-left: 0;
168-
}
169-
}
170-
171-
.Layout-main-centered-md {
172-
max-width: calc(#{$container-md} + var(--Layout-sidebar-width) + var(--Layout-gutter));
173-
}
174-
175-
.Layout-main-centered-lg {
176-
max-width: calc(#{$container-lg} + var(--Layout-sidebar-width) + var(--Layout-gutter));
177-
}
178-
179-
.Layout-main-centered-xl {
180-
max-width: calc(#{$container-xl} + var(--Layout-sidebar-width) + var(--Layout-gutter));
181-
}
182-
}
1+
@import '@primer/view-components/app/components/primer/alpha/layout';

‎src/layout/mixins.scss‎

Lines changed: 0 additions & 105 deletions
This file was deleted.

‎src/layout/page-layout.scss‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,32 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
2222
// stylelint-enable length-zero-no-unit
2323
}
2424

25+
// Layout beta mixins
26+
27+
// responsive region dividers
28+
29+
@mixin Layout-line-divider {
30+
position: absolute;
31+
left: calc(var(--Layout-outer-spacing-x) * -1);
32+
display: block;
33+
width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
34+
height: 1px;
35+
content: '';
36+
background-color: $Layout-divider-color;
37+
}
38+
39+
@mixin Layout-filled-divider {
40+
position: absolute;
41+
bottom: calc(#{$spacer-2} * -1); // -8px
42+
left: calc(var(--Layout-outer-spacing-x) * -1);
43+
display: block;
44+
width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
45+
height: #{$spacer-2}; // 8px
46+
content: '';
47+
background-color: var(--color-canvas-inset);
48+
box-shadow: inset 0 1px $Layout-divider-color, inset 0 -1px $Layout-divider-color;
49+
}
50+
2551
.PageLayout {
2652
display: block;
2753
// stylelint-disable-next-line primer/spacing

‎src/navigation/menu.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
@import '@primer/view-components/app/components/primer/menu_component';
1+
@import '@primer/view-components/app/components/primer/alpha/menu';

‎yarn.lock‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -783,6 +783,13 @@
783783
minimatch "^3.1.2"
784784
strip-json-comments "^3.1.1"
785785

786+
"@github/auto-check-element@^5.2.0":
787+
version "5.2.0"
788+
resolved "https://registry.yarnpkg.com/@github/auto-check-element/-/auto-check-element-5.2.0.tgz#293c2240cb3098e7e6ca10c801e4df76d644f6f9"
789+
integrity sha512-YODZZUSeoZVJQ04p73MAohrEK37SJlVRDUTaFiPYse9K3z3bNEm+ekq5qYCIyDKGgX7hUhr3WZF35qHxr/zu0Q==
790+
dependencies:
791+
"@github/mini-throttle" "^1.0.7"
792+
786793
"@github/auto-complete-element@^3.3.4":
787794
version "3.3.4"
788795
resolved "https://registry.yarnpkg.com/@github/auto-complete-element/-/auto-complete-element-3.3.4.tgz#b762f13342b8ea5e03609f75b5a8d417080355eb"
@@ -815,6 +822,11 @@
815822
resolved "https://registry.yarnpkg.com/@github/image-crop-element/-/image-crop-element-5.0.0.tgz#6ae2c31f1e7dc355c41c3140554fb76ca7a71ef7"
816823
integrity sha512-Vgm2OwWAs1ESoib/t5sjxsAYo6YTOxxAjWDRxswX7qrqoyCejTZ3hshdo4Ep5e+Mz/GVTZC3rdMtg06dk/eT4g==
817824

825+
"@github/mini-throttle@^1.0.7":
826+
version "1.0.7"
827+
resolved "https://registry.yarnpkg.com/@github/mini-throttle/-/mini-throttle-1.0.7.tgz#938d6eb45d00d07043a669baabfcafa072833f10"
828+
integrity sha512-1fzCDXpxI4J59pNmO0r0Y1g+R8Sa2B5ersce8AuFu5STMu7b++9osdedK0zWduYowBIgsPQZihJBN19WrAF64g==
829+
818830
"@github/mini-throttle@^2.1.0":
819831
version "2.1.0"
820832
resolved "https://registry.yarnpkg.com/@github/mini-throttle/-/mini-throttle-2.1.0.tgz#583a1d5e383caa21a1c067a649f15f7ab575dccf"
@@ -1198,11 +1210,12 @@
11981210
stylelint-scss "^4.0.0"
11991211
tap-map "^1.0.0"
12001212

1201-
"@primer/view-components@^0.0.114":
1202-
version "0.0.114"
1203-
resolved "https://registry.yarnpkg.com/@primer/view-components/-/view-components-0.0.114.tgz#44b847740dd7cb14209b78d99f25e51077aa14d2"
1204-
integrity sha512-ATDaosRz7/5g2PCZo00dgbz6GRVIg8L43bwyOJ7M/3YQ9uaHkiVjQ9xIc0voRx870HAaGwstRP+qfCsJr/7gNw==
1213+
"@primer/view-components@^0.0.115":
1214+
version "0.0.115"
1215+
resolved "https://registry.yarnpkg.com/@primer/view-components/-/view-components-0.0.115.tgz#79f36c14327742c6eac1b73ff2eb3bb5206984fa"
1216+
integrity sha512-Qo6vNE0/UK6azsu9wTpb9AneHpM2FkA/saZ6UB1kvRttD5M0d/xto8sqq6b45QkKukqIlS4MhzyyvLIvC6rI1g==
12051217
dependencies:
1218+
"@github/auto-check-element" "^5.2.0"
12061219
"@github/auto-complete-element" "^3.3.4"
12071220
"@github/catalyst" "^1.6.0"
12081221
"@github/clipboard-copy-element" "^1.1.2"

0 commit comments

Comments
 (0)