From 33ab674a07fba5425655902fe0bc18dd2f679bf4 Mon Sep 17 00:00:00 2001 From: Bartek Szopka <83575+bartaz@users.noreply.github.com> Date: Tue, 4 Feb 2025 15:30:29 +0100 Subject: [PATCH 1/2] chore: Remove old Vanilla 2.0 related workarounds (#5012) * chore: Remove custom p-logo-link styles (from first snap flow) * chore: remove old Vanilla 2.0 workaround for code snippets * chore: Remove u-flex utility and its references * chore: Remove unnecessary z-index --- static/sass/_patterns_logo-links.scss | 95 --------------- static/sass/_snapcraft_release.scss | 2 - static/sass/_utilities_flex.scss | 7 -- static/sass/styles.scss | 11 -- templates/first-snap/install-snapcraft.html | 26 ++-- templates/publisher/_header.html | 125 -------------------- templates/publisher/_noscript.html | 13 -- 7 files changed, 10 insertions(+), 269 deletions(-) delete mode 100644 static/sass/_patterns_logo-links.scss delete mode 100644 static/sass/_utilities_flex.scss delete mode 100644 templates/publisher/_header.html delete mode 100644 templates/publisher/_noscript.html diff --git a/static/sass/_patterns_logo-links.scss b/static/sass/_patterns_logo-links.scss deleted file mode 100644 index 8eca51d3d1..0000000000 --- a/static/sass/_patterns_logo-links.scss +++ /dev/null @@ -1,95 +0,0 @@ -@mixin p-logo-link { - .p-logo-link { - border: 1px solid transparent; - border-radius: 2px; - display: block; - margin-top: 0; - - // override for Vanilla 2.0 adding border - // possibly we should revisit this styling at some point - .p-card__header { - border: 0; - padding: 0; - } - - img { - display: block; - margin: 0 auto; - } - - &:hover, - &.is-selected { - border-color: $color-mid-light; - text-decoration: none; - } - - &:visited { - color: inherit; - } - - // first snap flow details link styles - &.is-open { - border-bottom: 1px solid $color-mid-light; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - overflow: visible; - position: relative; - } - - // bordered arrow - &.is-open::after, - &.is-open::before { - border-style: solid; - content: ""; - display: block; - height: 0; - left: 100%; - position: absolute; - width: 0; - } - - &.is-open::after { - border-color: transparent transparent $color-x-light; - border-width: 0.75rem; - bottom: -1px; - left: 50%; - margin-left: -0.75rem; - } - - &.is-open::before { - border-color: transparent transparent $color-mid-light; - border-width: 0.75rem; - bottom: 0; - left: 50%; - margin-left: -0.75rem; - } - - // disable focus outline on open link to make border more visible - &.is-open:focus { - outline: none; - } - - &.is-disabled { - opacity: 0.6; - - &::after { - content: "Coming soon"; - display: block; - font-size: 0.875rem; - } - - &:hover { - border-color: transparent; - } - - img { - filter: grayscale(1); - } - } - } - - .p-logo-image { - align-items: center; - display: flex; - } -} diff --git a/static/sass/_snapcraft_release.scss b/static/sass/_snapcraft_release.scss index 5916d9f0b7..19f837ad7f 100644 --- a/static/sass/_snapcraft_release.scss +++ b/static/sass/_snapcraft_release.scss @@ -414,10 +414,8 @@ white-space: nowrap; } - // TODO[epic=vanilla]: LINK contextual menu .p-contextual-menu__dropdown { overflow: visible; // allow tooltips inside menu - z-index: 2; // workaround for https://github.com/canonical-web-and-design/vanilla-framework/issues/2577 .p-tooltip { display: block; diff --git a/static/sass/_utilities_flex.scss b/static/sass/_utilities_flex.scss deleted file mode 100644 index 4ca37d2dc1..0000000000 --- a/static/sass/_utilities_flex.scss +++ /dev/null @@ -1,7 +0,0 @@ -@mixin u-flex { - // There are several issues with using floats for layout in Vanilla 2.0 - // This utility tries to give tools to overcome some of them - .u-flex { - display: flex; - } -} diff --git a/static/sass/styles.scss b/static/sass/styles.scss index 3947666846..175fc55d4e 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -69,8 +69,6 @@ $color-social-icon-foreground: $color-light; @include vf-p-testimonial; @import "button-overrides"; @include button-overrides; -@import "patterns_logo-links"; -@include p-logo-link; @import "snapcraft_market_screenshots"; @include snapcraft-market-screenshots; @@ -141,8 +139,6 @@ $color-social-icon-foreground: $color-light; @include snapcraft-p-table; @import "utilities_no-limit"; @include u-no-limit; -@import "utilities_flex"; -@include u-flex; @import "utilities_disabled"; @include u-disabled; @import "utilities_text-wrap"; @@ -224,13 +220,6 @@ dl { text-overflow: ellipsis; } -// This should be removed once vanilla is upgraded to v2.22.2 -.p-code-snippet__block--icon.is-wrapped, -.p-code-snippet__block--numbered.is-wrapped, -.p-code-snippet__block.is-wrapped { - white-space: pre-wrap; -} - .p-modal__dialog { @media only screen and (min-width: $breakpoint-small) { min-width: 400px; diff --git a/templates/first-snap/install-snapcraft.html b/templates/first-snap/install-snapcraft.html index bd913e2d28..3605f26df9 100644 --- a/templates/first-snap/install-snapcraft.html +++ b/templates/first-snap/install-snapcraft.html @@ -8,28 +8,22 @@

What operating system are you developing on?

diff --git a/templates/publisher/_header.html b/templates/publisher/_header.html deleted file mode 100644 index cc1d9ec2d6..0000000000 --- a/templates/publisher/_header.html +++ /dev/null @@ -1,125 +0,0 @@ -{% include "publisher/_noscript.html" %} - -
- {% if from in ["first-snap", "first-snap-unpublished"] %} -
-
-
-
Congratulations
-

- {% if from == "first-snap" %} - {{ snap_name }} is pushed to the Store. Modify its public information, include screenshots then visit your published Snap. - {% else %} - You can now modify {{ snap_name }} public information. - {% endif %} -

-
-
-
- {% endif %} -
- {% if snap_link %} - ‹ {% if snap_title %}{{ snap_title }}{% else %}{{ snap_name }}{% endif %} - {{snap_link}} - {% else %} - ‹ My snaps - {% endif %} - {% if not suppress_title %} -
-

- {% if snap_title %}{{ snap_title }}{% else %}{{ snap_name }}{% endif %} -

- {% if publisher_name and publisher_name != user_name %} -

by {{publisher_name}}

- {% endif %} -
- {% endif %} - {% if not suppress_nav %} - - {% endif %} -
-
diff --git a/templates/publisher/_noscript.html b/templates/publisher/_noscript.html deleted file mode 100644 index 2132112a4a..0000000000 --- a/templates/publisher/_noscript.html +++ /dev/null @@ -1,13 +0,0 @@ - From 5672a67856bd11f909bfdbe06edab7681c1d4a5a Mon Sep 17 00:00:00 2001 From: Bartek Szopka <83575+bartaz@users.noreply.github.com> Date: Wed, 5 Feb 2025 15:24:07 +0100 Subject: [PATCH 2/2] chore: Clean-up button style overrides (#5013) * chore: Remove old button overrides file * chore: Remove unused spinner button styles * chore: Remove unused button group styles * chore: Clean-up button margin overrides --- static/sass/_button-overrides.scss | 48 ------------ static/sass/_pattern_p-button-group.scss | 74 ------------------- static/sass/_patterns_button_spinner.scss | 21 ------ static/sass/_patterns_carousel.scss | 8 +- static/sass/_patterns_maas_modal.scss | 4 +- static/sass/styles.scss | 12 +-- templates/first-snap/upload.html | 9 +-- .../publisher/_repo-disconnect-modal.html | 26 ------- 8 files changed, 8 insertions(+), 194 deletions(-) delete mode 100644 static/sass/_button-overrides.scss delete mode 100644 static/sass/_pattern_p-button-group.scss delete mode 100644 static/sass/_patterns_button_spinner.scss delete mode 100644 templates/publisher/_repo-disconnect-modal.html diff --git a/static/sass/_button-overrides.scss b/static/sass/_button-overrides.scss deleted file mode 100644 index caaf765c87..0000000000 --- a/static/sass/_button-overrides.scss +++ /dev/null @@ -1,48 +0,0 @@ -@use 'sass:color'; - -@mixin button-overrides { - .p-button--outline { - @extend %vf-button-base; - - border-color: $color-x-light; - color: $color-x-light; - - &:visited { - color: $color-x-light; - } - - &:hover, - &:active:hover { - background-color: rgba($color-mid-x-light, 0.2); - } - } - - .is-inline--right { - margin-right: $sp-medium; - } - - .p-icon--github { - @extend %icon; - - background-image: url("#{$assets-path}61d83c7e-icon-github.svg"); - } - - // propose to vanilla when two buttons are next to each other - [class^="p-button"] + [class^="p-button"]:not(span) { - margin-right: $sph--large; - } - - // new button style for dark strip - // TODO: propose as new pattern (or amendment?) to vanilla - .p-strip--accent { - .p-button--base { - border-color: $color-x-light; - color: $color-x-light; - margin-top: 0; - - &:hover { - background-color: color.adjust($color-x-light, $alpha: -0.8); - } - } - } -} diff --git a/static/sass/_pattern_p-button-group.scss b/static/sass/_pattern_p-button-group.scss deleted file mode 100644 index 568515a651..0000000000 --- a/static/sass/_pattern_p-button-group.scss +++ /dev/null @@ -1,74 +0,0 @@ -@mixin p-snapcraft-button-group { - .p-button-group { - align-content: center; - column-gap: 1rem; - display: flex; - - button:hover { - border-color: $color-mid-light; - } - - a:visited { - color: $color-dark; - } - - a:hover { - @include vf-animation(#{background-color, border-color}, fast, in); - - background-color: #f2f2f2; - text-decoration: none; - } - - &__label { - margin-right: 0.5rem; - - @media (width <= 768px) { - display: none; - } - } - - &__buttons { - border: 1px solid $color-mid-dark; - border-radius: 0.125rem; - display: flex; - margin-bottom: 1rem; - width: auto; - } - - &__inner { - display: flex; - width: 100%; - } - - &__button { - align-items: center; - border: none; - border-right: 1px solid $color-mid-dark; - color: $color-dark; - display: flex; - flex: 1; - height: 100%; - line-height: 1.5; - margin: 0 !important; // Required to override Vanilla button:not(:last-of-type):not(:only-of-type) - padding: calc(0.4rem - 1px) 1rem; - text-align: center; - white-space: nowrap; - - &.is-smaller { - padding: 0.25rem 0.5rem; - } - - &.is-selected { - background: $color-mid-x-light; - } - - &:last-child { - border: 0; - } - - [class^="p-icon"] { - margin-inline-end: 0.5rem; - } - } - } -} diff --git a/static/sass/_patterns_button_spinner.scss b/static/sass/_patterns_button_spinner.scss deleted file mode 100644 index a28e05687a..0000000000 --- a/static/sass/_patterns_button_spinner.scss +++ /dev/null @@ -1,21 +0,0 @@ -@mixin p-button-spinner { - .has-spinner { - position: relative; - } - - // fighting with Vanilla specificity - [class*="p-button-"] .p-button__spinner { - display: none; - left: calc(50% - 0.5rem); - position: absolute; - top: calc(50% - 11px); - } - - .has-spinner .p-button__spinner { - display: block; - } - - .has-spinner .p-button__text { - opacity: 0; - } -} diff --git a/static/sass/_patterns_carousel.scss b/static/sass/_patterns_carousel.scss index c0cd6cb161..a15c1f313c 100644 --- a/static/sass/_patterns_carousel.scss +++ b/static/sass/_patterns_carousel.scss @@ -72,19 +72,13 @@ box-sizing: content-box; cursor: pointer; height: 3rem; + margin: 0; overflow: hidden; padding: 0; text-indent: -999px; transition: opacity 0.165s; width: 3rem; z-index: 10; - margin: { - bottom: 0; - left: 0; - - // Overrides a rule in vanilla that adds margin to the right of buttons - right: 0 !important; - } &.swiper-button-disabled { cursor: default; diff --git a/static/sass/_patterns_maas_modal.scss b/static/sass/_patterns_maas_modal.scss index dc0016ef50..394f4688c8 100644 --- a/static/sass/_patterns_maas_modal.scss +++ b/static/sass/_patterns_maas_modal.scss @@ -120,6 +120,7 @@ $color-modal-controls: rgba($color-x-dark, 0.2); box-sizing: content-box; cursor: pointer; height: 3rem; + margin: 0; margin-top: -1.5rem; overflow: hidden; padding: 0; @@ -136,9 +137,6 @@ $color-modal-controls: rgba($color-x-dark, 0.2); .vbox-next { background-image: url("#{$assets-path}9716bbab-chevron.svg"); - - // Overrides a rule in vanilla that adds margin to the right of buttons - margin-right: 0 !important; right: 1rem; } diff --git a/static/sass/styles.scss b/static/sass/styles.scss index 175fc55d4e..e7ae4d1d21 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -30,16 +30,12 @@ $breakpoint-medium: 619px; // make social icons match footer p-strip--light color $color-social-icon-foreground: $color-light; +// TODO[epic=styles]: comment? // vanilla layouts @import "patterns_icons"; @import "snapcraft_custom-cols"; @include snapcraft-custom-cols; -// No drop-in replacement from vanilla, but perhaps we could use -// p-button has-icon? -@import "patterns_button_spinner"; -@include p-button-spinner; - // Needs some TLC with the new code styling @import "patterns_annotated_code"; @include p-annotated-code; @@ -50,6 +46,7 @@ $color-social-icon-foreground: $color-light; @import "search-form"; @include search-form; +// TODO[epic=styles]: sticky footer // The footer pattern has been removed from vanilla // so there is little possibility this will be added @import "patterns_sticky_footer"; @@ -67,8 +64,6 @@ $color-social-icon-foreground: $color-light; @include snapcraft-market; @import "patterns_testimonial"; @include vf-p-testimonial; -@import "button-overrides"; -@include button-overrides; @import "snapcraft_market_screenshots"; @include snapcraft-market-screenshots; @@ -161,8 +156,6 @@ $color-social-icon-foreground: $color-light; @include snapcraft-p-release-details-row; @import "snapcraft-p-videos"; @include snapcraft-p-videos; -@import "pattern_p-button-group"; -@include p-snapcraft-button-group; @import "snapcraft_p-action-form"; @include snapcraft-action-form; @import "snapcraft_custom-checkboxes"; @@ -426,6 +419,7 @@ dl { max-width: 100%; } +// TODO[epic=styles]: breadcrumb // Vanilla override .p-breadcrumbs__item:not(:first-of-type)::before { margin-left: -0.5rem; diff --git a/templates/first-snap/upload.html b/templates/first-snap/upload.html index 3f1bc6c025..e492ec01c4 100644 --- a/templates/first-snap/upload.html +++ b/templates/first-snap/upload.html @@ -69,12 +69,9 @@

Make sure the name matches what has been used previously (i.e {{ snap_name }})

- + diff --git a/templates/publisher/_repo-disconnect-modal.html b/templates/publisher/_repo-disconnect-modal.html deleted file mode 100644 index 383e1e02a6..0000000000 --- a/templates/publisher/_repo-disconnect-modal.html +++ /dev/null @@ -1,26 +0,0 @@ -