diff --git a/package.json b/package.json
index d59aac2cc8..2f6b4e30f0 100644
--- a/package.json
+++ b/package.json
@@ -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"
}
}
diff --git a/releases.yml b/releases.yml
index 9569b7d4a5..5de4d2b068 100644
--- a/releases.yml
+++ b/releases.yml
@@ -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 ( H2: 5-15 words, up to 3 rows of copy... Multi-cloud (also referred to as multi cloud or multicloud) is a concept that refers to using multiple clouds from more than one cloud service provider at the same time. The term is also used to refer to the simultaneous running of bare metal, virtualised and containerised workloads. H2: 5-13 words, up to 3 rows of copy... Multi-cloud (also referred to as multi cloud or multicloud) is a concept that refers to using multiple clouds from more than one cloud service provider at the same time. The term is also used to refer to the simultaneous running of bare metal, virtualised and containerised workloads. In conjunction with a hybrid cloud architecture, the multi-cloud approach enables organisations to optimise their infrastructure costs. Multi-cloud reflects the reality of most organisations today and is expected to become the standard for cloud infrastructure in the coming years. H2: 5-15 words, up to 3 rows of copy... Multi-cloud (also referred to as multi cloud or multicloud) is a concept that refers to using multiple clouds from more than one cloud service provider at the same time. The term is also used to refer to the simultaneous running of bare metal, virtualised and containerised workloads. In conjunction with a hybrid cloud architecture, the multi-cloud approach enables organisations to optimise their infrastructure costs. Multi-cloud reflects the reality of most organisations today and is expected to become the standard for cloud infrastructure in the coming years.u-table-layout--auto
and u-table-layout--fixed
) 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
diff --git a/scss/_base_forms.scss b/scss/_base_forms.scss
index 99704a1814..155bd8e807 100644
--- a/scss/_base_forms.scss
+++ b/scss/_base_forms.scss
@@ -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;
diff --git a/scss/_patterns_equal-height-row.scss b/scss/_patterns_equal-height-row.scss
index 86cf518b56..71623ed67c 100644
--- a/scss/_patterns_equal-height-row.scss
+++ b/scss/_patterns_equal-height-row.scss
@@ -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) {
@@ -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;
+ }
}
}
diff --git a/scss/_patterns_navigation.scss b/scss/_patterns_navigation.scss
index 541b054963..126748bfc5 100644
--- a/scss/_patterns_navigation.scss
+++ b/scss/_patterns_navigation.scss
@@ -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;
}
}
}
diff --git a/scss/_utilities_layout.scss b/scss/_utilities_layout.scss
index 2366e22b6a..fe0b4f4d10 100644
--- a/scss/_utilities_layout.scss
+++ b/scss/_utilities_layout.scss
@@ -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
}
diff --git a/scss/standalone/patterns_hero.scss b/scss/standalone/patterns_hero.scss
new file mode 100644
index 0000000000..14e33a7b9d
--- /dev/null
+++ b/scss/standalone/patterns_hero.scss
@@ -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;
diff --git a/side-navigation.yaml b/side-navigation.yaml
index 9a56582130..45e56fb509 100644
--- a/side-navigation.yaml
+++ b/side-navigation.yaml
@@ -11,6 +11,7 @@
- title: Migrating to v4
url: /docs/migration-guide-to-v4
- heading: Base elements
+ ordering: alphabetical
subheadings:
- title: Code
url: /docs/base/code
@@ -26,7 +27,9 @@
url: /docs/base/typography
- title: Paper background
url: /docs/base/paper
+
- heading: Components
+ ordering: alphabetical
subheadings:
- title: Accordion
url: /docs/patterns/accordion
@@ -52,6 +55,8 @@
url: /docs/patterns/grid
- title: Heading icon
url: /docs/patterns/heading-icon
+ - title: Hero
+ url: /docs/patterns/hero
- title: Icons
url: /docs/patterns/icons
- title: Images
@@ -107,6 +112,7 @@
- title: Tooltips
url: /docs/patterns/tooltips
- heading: Utilities
+ ordering: alphabetical
subheadings:
- title: Align
url: /docs/utilities/align
@@ -151,6 +157,7 @@
- title: Vertically center
url: /docs/utilities/vertically-center
- heading: Layouts
+ ordering: alphabetical
subheadings:
- title: Application
url: /docs/layouts/application
@@ -165,6 +172,7 @@
- title: Sticky footer
url: /docs/layouts/sticky-footer
- heading: Settings
+ ordering: alphabetical
subheadings:
- title: Animations
url: /docs/settings/animation-settings
@@ -185,6 +193,7 @@
- title: Table layout
url: /docs/settings/table-layout
- heading: Resources
+ ordering: alphabetical
subheadings:
- title: Component examples
url: /docs/examples
diff --git a/templates/docs/examples/brochure/hero-25-75.html b/templates/docs/examples/brochure/hero-25-75.html
deleted file mode 100644
index 3754c65527..0000000000
--- a/templates/docs/examples/brochure/hero-25-75.html
+++ /dev/null
@@ -1,44 +0,0 @@
-{% extends "_layouts/examples.html" %}
-{% block title %}Hero / 25/75{% endblock %}
-
-{% block style %}
-{% endblock %}
-
-{% set is_paper = True %}
-{% block content %}
-
-H1: 2-3 words
-
-
H1: 3-8 words
- H1: 3-5 words
-
- CTA up to 3 words
- Optional button
- Link CTA up to 5 words
-
-
404
+We can't find the page you're looking for. + File a bug if you think this might be an error.
+
+
+ Canonical
+
+
+ on 13 December 2023
+
Be where the cutting edge is established.
+All the latest news and featured stories from Canonical.
+For the Canonical Communications team, email pr@canonical.com.
+Kubeflow is the open source machine learning MLOps platform
+Kubeflow enables you to develop and deploy machine learning models at any scale. It is a cloud-native application that runs on any cloud.
+Charmed Kubeflow is Canonical’s distribution. It is secure and seamlessly integrated with other leading tools such as MLflow.
+Data flows better with the right tools.
+Canonical’s open source enterprise Data Fabric suite delivers better ROI across clouds. Engineered for the most critical workloads.
+Canonical's network of Ubuntu partners spans the full range of our product suite. We offer partner programmes for public clouds, IHVs/OEMs, desktop, channel/resellers and global systems integrators.
+At Canonical, we have embarked on a comprehensive, long-term project to transform documentation. Our aim is to create and maintain documentation product and practice that will represent a standard of excellence. We want documentation to be the best it possibly can be.
+Secure and automate the deployment, maintenance and upgrades of Spark on Kubernetes. Run your big data clusters across private and public clouds.
+Attribute name | +Value | +
---|---|
table-layout | +auto | +
Attribute name | +Value | +
---|---|
table-layout | +auto | +
Below we present a few examples of how the sections can be used in practice. The examples are not meant to be exhaustive, but rather to give you a sense of how some commonly used sections can be built.
-The most common hero variant based on 25/75 grid with empty first column. Sub-heading, paragraph text section and CTA section are optional. This kind of hero is usually followed by a suru, and in such case the last content section of the hero should not have bottom spacing of its own.
-Hero based on 25/75 grid should be used for hero sections with shorter main title or more complicated content structure (including longer text or additional images).
-Hero 50/50 can be used on pages where the 50/50 split is used predominantely. Usually it will not be followed by suru, as the default suru is aligned with 25/75 grid split.
-