Skip to content

Commit

Permalink
Merge branch 'main' into sidenav-toggle-links-to-buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@jmuzina
jmuzina committed May 7, 2024
2 parents 9d71f0b + 2cc257a commit 0d98b7d
Show file tree
Hide file tree
Showing 32 changed files with 1,016 additions and 465 deletions.
10 changes: 5 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,22 +57,22 @@
"devDependencies": {
"@canonical/cookie-policy": "3.6.3",
"@canonical/latest-news": "1.5.0",
"@percy/cli": "1.28.2",
"@percy/cli": "1.28.5",
"@testing-library/cypress": "10.0.1",
"autoprefixer": "10.4.19",
"cypress": "13.7.1",
"cypress": "13.8.1",
"markdown-spellcheck": "1.3.1",
"parker": "0.0.10",
"postcss": "8.4.38",
"postcss-cli": "11.0.0",
"postcss-scss": "4.0.9",
"prettier": "3.2.5",
"sass": "1.72.0",
"stylelint": "16.3.1",
"sass": "1.77.0",
"stylelint": "16.5.0",
"stylelint-config-recommended-scss": "14.0.0",
"stylelint-order": "6.0.4",
"stylelint-prettier": "5.0.0",
"svgo": "3.2.0",
"yaml": "2.4.1"
"yaml": "2.4.2"
}
}
12 changes: 12 additions & 0 deletions releases.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,18 @@
url: /docs/patterns/suru#divider-suru
status: New
notes: We've introduced a new divider variant of the Suru section component.
- component: Table layout
url: /docs/settings/table-layout
status: Updated
notes: We've updated the utility classes (<code>u-table-layout--auto</code> and <code>u-table-layout--fixed</code>) to apply to nested tables.
- component: Hero
url: /docs/patterns/hero
status: New
notes: We've introduced new detailed documenation for the hero pattern.
- component: Equal height row / Dividers
url: /docs/patterns/equal-height-row#cross-column-dividers
status: Updated
notes: We've updated the equal height row component divider class names and removed the dividers from smaller screens.
- version: 4.10.0
features:
- component: Navigation / Themes
Expand Down
1 change: 1 addition & 0 deletions scss/_base_forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@
label {
cursor: pointer;
display: inline-block;
line-height: map-get($line-heights, default-text);
margin-bottom: $spv--large - $spv-nudge;
margin-top: 0;
max-width: $text-max-width;
Expand Down
165 changes: 29 additions & 136 deletions scss/_patterns_equal-height-row.scss
View file
Original file line number Diff line number Diff line change
@@ -1,108 +1,21 @@
@import 'settings';

// wrapper mixin that provides relevant class selectors for 1st, 2nd and 3rd dividers
@mixin position-divider-by-order-in-grid($divider-order, $large-screen: false) {
// for large screens, dividers are positioned as pseudo elements at row level
@if $large-screen {
@if $divider-order == 1 {
&.has-1st-divider::before {
@content;
}
}

@if $divider-order == 2 {
&.has-2nd-divider::after {
@content;
}
}

@if $divider-order == 3 {
// when 3rd-divider is present and 1st-divider is not present
&.has-3rd-divider:not(.has-1st-divider)::before,
// when 3rd-divider is present and 2nd-divider is not present
&.has-3rd-divider:not(.has-2nd-divider)::after {
@content;
}

// when only 3rd-divider is present
&.has-3rd-divider:not(.has-1st-divider):not(.has-2nd-divider)::before {
@content;
}

&.has-3rd-divider:not(.has-1st-divider):not(.has-2nd-divider)::after {
display: none;
}
}
} @else {
// for smaller screens, dividers are positioned as pseudo elements at column level
@if $divider-order == 1 {
&.has-1st-divider .p-equal-height-row__col::before {
@content;
}
}

@if $divider-order == 2 {
&.has-2nd-divider .p-equal-height-row__col::after {
@content;
}
}

@if $divider-order == 3 {
&.has-3rd-divider:not(.has-1st-divider) .p-equal-height-row__col::before,
&.has-3rd-divider:not(.has-2nd-divider) .p-equal-height-row__col::after {
@content;
}

&.has-3rd-divider:not(.has-1st-divider):not(.has-2nd-divider) .p-equal-height-row__col::before {
@content;
}

&.has-3rd-divider:not(.has-1st-divider):not(.has-2nd-divider) .p-equal-height-row__col::after {
display: none;
}
}
}
}

@mixin divider-styles($large-screen: false) {
// For each row or column grid we only have access to two pseudo elements
// if 1st-divider (::before) is present, assume 2nd-divider (::after) isn't, then 3rd-divider must be (::after)
// if 2nd-divider (::after) is present, assume 1st-divider (::before) isn't, then 3rd-divider must be (::before)
@if $large-screen {
&.has-1st-divider::before,
&.has-2nd-divider::after,
&.has-3rd-divider:not(.has-1st-divider)::before,
&.has-3rd-divider:not(.has-2nd-divider)::after {
@content;
}
} @else {
// For smaller screens, the divider pseudo elements are inserted at the column level
&.has-1st-divider .p-equal-height-row__col::before,
&.has-2nd-divider .p-equal-height-row__col::after,
&.has-3rd-divider:not(.has-1st-divider) .p-equal-height-row__col::before,
&.has-3rd-divider:not(.has-2nd-divider) .p-equal-height-row__col::after {
@content;
}
}
}

@mixin vf-p-equal-height-row {
.p-equal-height-row {
@extend %vf-row;
padding-bottom: $spv--strip-regular * 0.5;
position: relative;

.p-equal-height-row__col {
// smaller screens each column will have border top by default
border-top-color: $colors--theme--border-default;
border-top-color: $colors--theme--border-low-contrast;
border-top-style: solid;
border-top-width: 1px;
display: grid;
grid-column: span $grid-columns-small;
grid-row: span 4;
grid-template-rows: subgrid;
margin-bottom: $spv--small;
margin-top: -1px;
padding-bottom: $spv--small;
position: relative;

@media screen and ($breakpoint-small <= width < $breakpoint-large) {
Expand All @@ -123,76 +36,56 @@
@media screen and (width >= $breakpoint-large) {
border: none;
grid-column: span calc($grid-columns / 4);
padding-bottom: 0;
margin-bottom: 0;
}
}

// divider styles
@include divider-styles($large-screen: false) {
@extend %vf-pseudo-border;
}
// DIVIDERS

// remove row level dividers for smaller screen sizes
@include divider-styles($large-screen: true) {
// For each row or column grid we only have access to two pseudo elements
// if 1st-divider (::before) is present, assume 2nd-divider (::after) isn't, then 3rd-divider must be (::after)
// if 2nd-divider (::after) is present, assume 1st-divider (::before) isn't, then 3rd-divider must be (::before)
&.has-divider-1::before,
&.has-divider-2::after,
&.has-divider-3:not(.has-divider-1)::before,
&.has-divider-3:not(.has-divider-2)::after {
// row level dividers are not visible on smaller screen sizes
@extend %vf-pseudo-border;
background-color: $colors--theme--border-low-contrast; // override border color to be low contrast
display: none;
}

@include position-divider-by-order-in-grid(1) {
grid-row: 2;
}

@include position-divider-by-order-in-grid(2) {
grid-row: 3;
}

@include position-divider-by-order-in-grid(3) {
grid-row: 4;
}

@media screen and ($breakpoint-small <= width < $breakpoint-large) {
// We don't need to insert divider below item-1 for medium screen size since item-1 gets positioned on the left
@include position-divider-by-order-in-grid(1) {
display: none;
}

@include position-divider-by-order-in-grid(2) {
grid-column: 4 / 7;
grid-row: 2;
}

@include position-divider-by-order-in-grid(3) {
grid-column: 4 / 7;
grid-row: 3;
}
}

@media screen and (width >= $breakpoint-large) {
padding-bottom: $spv--strip-regular;

// remove column level dividers for large screen sizes
@include divider-styles($large-screen: false) {
display: none;
}

@include divider-styles($large-screen: true) {
&.has-divider-1::before,
&.has-divider-2::after,
&.has-divider-3:not(.has-divider-1)::before,
&.has-divider-3:not(.has-divider-2)::after {
display: block;
grid-column-end: span 12;
grid-column-start: 1;
margin: auto;
}

@include position-divider-by-order-in-grid(1, $large-screen: true) {
&.has-divider-1::before {
grid-row: 2;
}

@include position-divider-by-order-in-grid(2, $large-screen: true) {
&.has-divider-2::after {
grid-row: 3;
}

@include position-divider-by-order-in-grid(3, $large-screen: true) {
// when 3rd-divider is present and 1st-divider is not present
&.has-divider-3:not(.has-divider-1)::before,
// when 3rd-divider is present and 2nd-divider is not present
&.has-divider-3:not(.has-divider-2)::after,
// when only 3rd-divider is present
&.has-divider-3:not(.has-divider-1):not(.has-divider-2)::before {
grid-row: 4;
}

&.has-divider-3:not(.has-divider-1):not(.has-divider-2)::after {
display: none;
}
}
}

Expand Down
74 changes: 39 additions & 35 deletions scss/_patterns_navigation.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -872,50 +872,54 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
}
/* stylelint-enable max-nesting-depth */

.p-navigation--sliding .p-navigation__item--dropdown-close {
.p-navigation__link::after {
left: 1rem;
transform: rotate(90deg);
}
@media (min-width: $breakpoint-navigation-threshold) {
display: none;
}
}
.p-navigation--sliding {
// Default positioning for nested dropdown buttons. Overridden by subsequent styles.
.p-navigation__item--dropdown-toggle {
position: initial;

.p-navigation--sliding .p-navigation__item--dropdown-toggle {
position: initial;
&::after {
content: none;
}

&::after {
content: none;
}
.p-navigation__link::after {
@include vf-icon-chevron-themed;

.p-navigation__link::after {
@include vf-icon-chevron-themed;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
content: '';
display: block;
height: $spv--large;
pointer-events: none;
position: absolute;
right: map-get($grid-margin-widths, small);
text-indent: calc(100% + 10rem);
top: 1rem;
transform: rotate(-90deg);
width: map-get($icon-sizes, default);

background-position: center;
background-repeat: no-repeat;
background-size: contain;
content: '';
display: block;
height: $spv--large;
pointer-events: none;
position: absolute;
right: map-get($grid-margin-widths, small);
text-indent: calc(100% + 10rem);
top: 1rem;
transform: rotate(-90deg);
width: map-get($icon-sizes, default);
@media (min-width: $breakpoint-navigation-threshold) {
right: 0.5rem;
top: 1.2rem;
transform: none;
}
}

@media (min-width: $breakpoint-navigation-threshold) {
right: 0.5rem;
top: 1.2rem;
transform: none;
&.is-active > .p-navigation__link::after {
@media (min-width: $breakpoint-navigation-threshold) {
transform: rotate(180deg);
}
}
}

&.is-active > .p-navigation__link::after {
// Style for the "go back" button that closes the current level of the sidenav dropdown. Overrides base style from above
.p-navigation__item--dropdown-close {
.p-navigation__link::after {
left: 1rem;
transform: rotate(90deg);
}
@media (min-width: $breakpoint-navigation-threshold) {
transform: rotate(180deg);
display: none;
}
}
}
Expand Down
14 changes: 10 additions & 4 deletions scss/_utilities_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,19 @@
@extend %fixed-width-container;
}

@if ($table-layout-fixed) {
.u-table-layout--auto {
// stylelint-disable selector-max-type -- table elements can use selector types
.u-table-layout--auto {
&,
table {
table-layout: auto !important;
}
} @else {
.u-table-layout--fixed {
}

.u-table-layout--fixed {
&,
table {
table-layout: fixed !important;
}
}
// stylelint-enable selector-max-type
}
3 changes: 3 additions & 0 deletions scss/standalone/patterns_hero.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@import '../vanilla';
// hero is a pattern built with multiple components and utilities, there is no point in including them in isolation
@include vanilla;

0 comments on commit 0d98b7d

Please sign in to comment.