From 09092d7b8d7eae39950cbc3209ff8dae5727251e Mon Sep 17 00:00:00 2001 From: Paul Crowder Date: Mon, 22 Jul 2024 10:43:09 -0400 Subject: [PATCH] fix(components/tiles): remove `::ng-deep` from tile styles (#2527) --- .../tile-content-section.component.scss | 24 +++++++++ .../tile-content/tile-content.component.scss | 8 --- .../tile-content/tile-content.component.ts | 1 - .../tile-dashboard.component.scss | 20 -------- .../modules/tiles/tile/tile.component.scss | 50 ++++++++++++------- 5 files changed, 55 insertions(+), 48 deletions(-) delete mode 100644 libs/components/tiles/src/lib/modules/tiles/tile-content/tile-content.component.scss diff --git a/libs/components/tiles/src/lib/modules/tiles/tile-content/tile-content-section.component.scss b/libs/components/tiles/src/lib/modules/tiles/tile-content/tile-content-section.component.scss index aefd647b43..bb4b7fa2f9 100644 --- a/libs/components/tiles/src/lib/modules/tiles/tile-content/tile-content-section.component.scss +++ b/libs/components/tiles/src/lib/modules/tiles/tile-content/tile-content-section.component.scss @@ -1,8 +1,32 @@ @use 'libs/components/theme/src/lib/styles/mixins' as mixins; @use 'libs/components/theme/src/lib/styles/variables' as *; +:host:not(:last-child) .sky-tile-content-section { + @include mixins.sky-border(light); +} + +:host-context(.sky-theme-modern sky-tile-content) { + .sky-tile-content-section { + border-bottom: 1px dotted $sky-theme-modern-color-gray-30; + } + + :host:first-child { + .sky-tile-content-section { + margin-top: $sky-space-lg; + } + } + + :host:last-child { + .sky-tile-content-section { + padding-bottom: 0; + border-bottom: none; + } + } +} + @include mixins.sky-theme-modern { .sky-tile-content-section { + border-bottom: 1px dotted $sky-theme-modern-color-gray-30; padding: $sky-space-lg 0; } } diff --git a/libs/components/tiles/src/lib/modules/tiles/tile-content/tile-content.component.scss b/libs/components/tiles/src/lib/modules/tiles/tile-content/tile-content.component.scss deleted file mode 100644 index e9038957b7..0000000000 --- a/libs/components/tiles/src/lib/modules/tiles/tile-content/tile-content.component.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use 'libs/components/theme/src/lib/styles/mixins' as mixins; - -:host - ::ng-deep - sky-tile-content-section:not(:last-child) - .sky-tile-content-section { - @include mixins.sky-border(light); -} diff --git a/libs/components/tiles/src/lib/modules/tiles/tile-content/tile-content.component.ts b/libs/components/tiles/src/lib/modules/tiles/tile-content/tile-content.component.ts index 2a55fa8c1a..33f951b20c 100644 --- a/libs/components/tiles/src/lib/modules/tiles/tile-content/tile-content.component.ts +++ b/libs/components/tiles/src/lib/modules/tiles/tile-content/tile-content.component.ts @@ -6,7 +6,6 @@ import { Component } from '@angular/core'; @Component({ standalone: true, selector: 'sky-tile-content', - styleUrls: ['./tile-content.component.scss'], templateUrl: 'tile-content.component.html', }) export class SkyTileContentComponent {} diff --git a/libs/components/tiles/src/lib/modules/tiles/tile-dashboard/tile-dashboard.component.scss b/libs/components/tiles/src/lib/modules/tiles/tile-dashboard/tile-dashboard.component.scss index b656f4ebba..319c261a96 100644 --- a/libs/components/tiles/src/lib/modules/tiles/tile-dashboard/tile-dashboard.component.scss +++ b/libs/components/tiles/src/lib/modules/tiles/tile-dashboard/tile-dashboard.component.scss @@ -12,20 +12,9 @@ .sky-tile-dashboard-layout-single { display: block; } - - /* NOTE: This style is here as we only want it when inside a tile dashboard */ - .sky-tile-dashboard-layout-single ::ng-deep .sky-tile, - .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile { - margin-bottom: 0; - } } :host-context(.sky-tile-dashboard-gt-xs) { - .sky-tile-dashboard-layout-single ::ng-deep .sky-tile, - .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile { - margin-bottom: $sky-margin-double; - } - :host-context(.sky-theme-default) { padding-top: $sky-padding-double; } @@ -53,12 +42,3 @@ :host-context(.sky-theme-default) { background-color: $sky-background-color-neutral-light; } - -@include mixins.sky-theme-modern { - :host-context(.sky-tile-dashboard-gt-xs) { - .sky-tile-dashboard-layout-single ::ng-deep .sky-tile, - .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile { - margin-bottom: $sky-theme-modern-space-xl; - } - } -} diff --git a/libs/components/tiles/src/lib/modules/tiles/tile/tile.component.scss b/libs/components/tiles/src/lib/modules/tiles/tile/tile.component.scss index 9839231efa..1bb397d362 100644 --- a/libs/components/tiles/src/lib/modules/tiles/tile/tile.component.scss +++ b/libs/components/tiles/src/lib/modules/tiles/tile/tile.component.scss @@ -6,6 +6,28 @@ margin-bottom: $sky-margin-double; } +/* NOTE: This style is here as we only want it when inside a tile dashboard */ +:host-context( + .sky-tile-dashboard-layout-single, + .sky-tile-dashboard-layout-multi + ) + .sky-tile { + margin-bottom: 0; +} + +:host-context(.sky-tile-dashboard-gt-xs) { + :host-context(.sky-tile-dashboard-layout-single), + :host-context(.sky-tile-dashboard-layout-multi) { + .sky-tile { + margin-bottom: $sky-margin-double; + } + } + + :host-context(.sky-theme-default) { + padding-top: $sky-padding-double; + } +} + .sky-tile-header { border-color: $sky-border-color-neutral-medium; border-style: solid solid none; @@ -108,25 +130,6 @@ font-size: 16px; } - .sky-tile-content { - ::ng-deep .sky-tile-content-section { - border-bottom: 1px dotted $sky-theme-modern-color-gray-30; - } - - ::ng-deep sky-tile-content-section:first-child { - .sky-tile-content-section { - margin-top: $sky-space-lg; - } - } - - ::ng-deep sky-tile-content-section:last-child { - .sky-tile-content-section { - padding-bottom: 0; - border-bottom: none; - } - } - } - @include mixins.sky-host-responsive-container-xs-min() { .sky-tile { border-radius: 0px; @@ -139,3 +142,12 @@ } } } + +:host-context(.sky-theme-modern .sky-tile-dashboard-gt-xs) { + :host-context(.sky-tile-dashboard-layout-single), + :host-context(.sky-tile-dashboard-layout-multi) { + .sky-tile { + margin-bottom: $sky-theme-modern-space-xl; + } + } +}