Kamu UI 131 refactor redundant selectors and cast class names to lowercase

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Selected library updates/downgrades to align with Angular 14.3 and Node.JS 16.x
 - GraphQL code generator tuned to produce string type by default for scalars
 - Fixed bug with disabled state for "Run" button after error.
+- Refactor redundant selectors and cast class names to lowercase
 - Fixed bug with updating the list of datasets after deletion
 
 ## [0.8.0] - 2023-08-04

src/app/auth/account/account.component.html

@@ -61,10 +61,11 @@ <h2 class="text-start pt-3 px-3 h6 organization">Organizations</h2>
             </div>
         </div>
         <div class="container-content px-4">
-            <div class="datasetViewTypeToggleGroup border-bottom">
+            <div class="border-bottom">
                 <mat-button-toggle-group
                     name="accountViewType"
                     aria-label="Account View Type"
+                    class="toggle-group"
                     [value]="accountViewType"
                 >
                     <mat-button-toggle

src/app/auth/account/account.component.sass

@@ -4,32 +4,10 @@
 @import 'node_modules/prismjs/plugins/line-numbers/prism-line-numbers'
 @import 'node_modules/prismjs/plugins/line-highlight/prism-line-highlight'
 
-mat-button-toggle-group
-  width: fit-content
-  & .mat-button-toggle-standalone.mat-button-toggle-appearance-standard, .mat-button-toggle-group-appearance-standard
-    border-radius: 0 !important
-
-mat-button-toggle-group
+.toggle-group
   box-shadow: none
   border-radius: 0 !important
-
-mat-button-toggle
-  //border: 1px rgba(0,0,0,0) solid !important
-  margin-top: 5px !important
-  padding: 0 5px !important
-  z-index: 3 !important
-  outline: none !important
-
-mat-button-toggle:hover
-  box-shadow: none !important
-  border-bottom: 1px solid !important
-  border-radius: 0 !important
-  &.mat-button-toggle-checked
-    border-bottom: 2px #000 solid !important
-
-mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay
-  background-color: transparent !important
-  opacity: 0 !important
+  width: fit-content
 
 .mat-button-toggle-checked
   border-left: none
@@ -42,29 +20,27 @@ mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay
 .mat-button-toggle-input
   background-color: none !important
   padding-left: 32px !important
-    
+
     ///////////////
-.custom-container 
-    display: grid
-    grid-template-columns: 300px 1fr
+.custom-container
+  display: grid
+  grid-template-columns: 300px 1fr
 
 .vcard-username
-    font-size: 20px
-    font-style: normal
-    font-weight: 300
-    line-height: 24px
-    color: $app-color-fg-muted
+  font-size: 20px
+  font-style: normal
+  font-weight: 300
+  line-height: 24px
+  color: $app-color-fg-muted
 
 .organization
-    font-weight: 500
+  font-weight: 500
 
 .btn-custom
-    background-color:#f6f8fa
-    border-color:#dee2e6 !important
+  background-color: #f6f8fa
+  border-color: #dee2e6 !important
+  color: $app-dark
+  font-weight: 500
+  &:hover,&:active,&:focus
+    background-color: #ebedf0
     color: $app-dark
-    font-weight: 500 
-    &:hover,&:active,&:focus
-         background-color:#ebedf0
-         color: $app-dark
-
-

src/app/auth/settings/settings.component.sass

@@ -1,26 +1,38 @@
 @import src/assets/styles/var
 
 .p-responsive
-    padding-left: 16px
-    a
-        text-decoration: none
+  padding-left: 16px
+  a
+    text-decoration: none
+
 .fw-bold-custom
-    font-weight: 600
-.ActionList
-    padding: 0
+  font-weight: 600
 
-.ActionList-item
+.action-list
+  padding: 0
+  &-item
     position: relative
     list-style: none
     border-radius: 6px
     text-decoration: none
-
-.ActionList-item a
-    &:hover
+    a
+      &:hover
         cursor: pointer
         text-decoration: none
-
-.ActionList-content
+    &--nav__active
+      background: $app-color-action-list-item-default-selected-bg
+      a
+        font-weight: 600
+      &::after
+        position: absolute
+        top: calc(50% - 12px)
+        left: -8px
+        width: 4px
+        height: 24px
+        content: ""
+        background: $app-color-accent-fg
+        border-radius: 6px
+  &-content
     position: relative
     display: grid
     width: 100%
@@ -40,36 +52,21 @@
     grid-template-columns: min-content max-content
     align-items: start
     &:hover
-        background: $app-color-action-list-item-default-selected-bg
-
-.ActionList-item--navActive
-    background: $app-color-action-list-item-default-selected-bg
-    &::after
-        position: absolute
-        top: calc(50% - 12px)
-        left: -8px
-        width: 4px
-        height: 24px
-        content: ""
-        background: $app-color-accent-fg
-        border-radius: 6px
-
-.ActionList-item--navActive a
-    font-weight: 600
-
-.ActionList-sectionDivider:empty
-    display: block
-    height: 1px
-    padding: 0
-    margin: 7px -8px 8px
-    list-style: none
-    background: $app-color-action-list-item-inline-divider
-    border: 0
-
-.ActionList-sectionDivider:not(:empty)
-    display: flex
-    padding: 6px 8px
-    font-size: 12px
-    font-weight: 500
-    color: $app-color-fg-muted
-    flex-direction: column
+      background: $app-color-action-list-item-default-selected-bg
+  &-section-divider
+    &:not(:empty)
+      display: flex
+      padding: 6px 8px
+      font-size: 12px
+      font-weight: 500
+      color: $app-color-fg-muted
+      flex-direction: column
+  &-section-divider
+    &:empty
+      display: block
+      height: 1px
+      padding: 0
+      margin: 7px -8px 8px
+      list-style: none
+      background: $app-color-action-list-item-inline-divider
+      border: 0

src/app/components/app-header/app-header.component.html

@@ -1,16 +1,16 @@
 <nav
     *ngIf="isVisible"
-    class="navbar navbar-expand-lg navbar-dark bg-dark Header Details px-3 px-md-4 px-lg-5 flex-wrap flex-md-nowrap"
+    class="navbar navbar-expand-lg navbar-dark bg-dark Header details px-3 px-md-4 px-lg-5 flex-wrap flex-md-nowrap"
     id="app-header"
 >
-    <div class="Header-item mt-n1 mb-n1 d-none d-md-flex">
+    <div class="header-item mt-n1 mb-n1 d-none d-md-flex">
         <div [classList]="'app-brand'" id="appHeaderLogo">
             <button (click)="onClickAppLogo()" data-test-id="appLogo">
                 <img [src]="appLogo" alt="Application logo" />
             </button>
         </div>
     </div>
-    <div class="Header-item d-md-none">
+    <div class="header-item d-md-none">
         <button
             #appHeaderMenuButton
             id="appHeaderMenuButton"
@@ -28,7 +28,7 @@
         </button>
     </div>
     <div
-        class="Header-item Header-item--full flex-column flex-md-row width-full flex-order-2 flex-md-order-none mr-0 mr-md-3 mt-3 mt-md-0 Details-content--hidden-not-important d-md-flex"
+        class="header-item header-item--full flex-column flex-md-row width-full flex-order-2 flex-md-order-none mr-0 mr-md-3 mt-3 mt-md-0 details-content--hidden-not-important d-md-flex"
     >
         <div
             class="header-search flex-auto position-relative flex-self-stretch flex-md-self-auto mb-3 mb-md-0 mr-0 mr-md-3"
@@ -38,7 +38,7 @@
                     <ul class="navbar-nav">
                         <li
                             [classList]="
-                                'nav-item searchInputContainer ' + (isSearchActive ? 'active-search-input' : '')
+                                'nav-item search-input-container ' + (isSearchActive ? 'active-search-input' : '')
                             "
                         >
                             <div
@@ -91,7 +91,7 @@
         >
             <div class="d-flex flex-column flex-md-row flex-self-stretch flex-md-self-auto">
                 <a
-                    class="Header-link py-2 py-md-3 mr-0 mr-md-3 border-sm-top border-md-top-0 border-white-fade"
+                    class="header-link py-2 py-md-3 mr-0 mr-md-3 border-sm-top border-md-top-0 border-white-fade"
                     data-ga-click="Header, click, Nav menu - item:explore"
                     data-selected-links="/explore /trending /trending/developers /integrations /integrations/feature/code /integrations/feature/collaborate /integrations/feature/ship showcases showcases_search showcases_landing /explore"
                     href="#"
@@ -100,7 +100,7 @@
                 </a>
 
                 <a
-                    class="Header-link py-2 py-md-3 mr-0 mr-md-3 border-sm-top border-md-top-0 border-white-fade"
+                    class="header-link py-2 py-md-3 mr-0 mr-md-3 border-sm-top border-md-top-0 border-white-fade"
                     data-ga-click="Header, click, Nav menu - item:dashboard:user"
                     aria-label="Dashboard"
                     (click)="onUserDatasets()"
@@ -109,7 +109,7 @@
                 </a>
 
                 <a
-                    class="Header-link d-block d-md-none py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                    class="header-link d-block d-md-none py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                     (click)="onAddNew()"
                     data-test-id="addNewDataset"
                 >
@@ -118,19 +118,19 @@
 
                 <ng-template [ngIf]="!isUserLoggedIn()">
                     <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                        class="header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="openBillingPlanHeader"
                         (click)="onBilling()"
                         >Account & Billing</a
                     >
                     <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                        class="header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="openHelpHeader"
                         (click)="onHelp()"
                         >Help</a
                     >
                     <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                        class="header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="openUserProfileHeader"
                         (click)="onLogin()"
                         >Login</a
@@ -139,37 +139,37 @@
 
                 <ng-template [ngIf]="isUserLoggedIn()">
                     <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                        class="header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="openUserProfileHeader"
                         (click)="onUserProfile()"
                         >Your profile</a
                     >
                     <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                        class="header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="openBillingPlanHeader"
                         (click)="onBilling()"
                         >Account & Billing</a
                     >
                     <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                        class="header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="openAnalyticsHeader"
                         (click)="onAnalytics()"
                         >Analytics</a
                     >
                     <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                        class="header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="openSettingsHeader"
                         (click)="onSettings()"
                         >Settings</a
                     >
                     <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                        class="header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="openHelpHeader"
                         (click)="onHelp()"
                         >Help</a
                     >
                     <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                        class="header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="userNameHeader"
                         href="/kulykivska"
                     >
@@ -184,7 +184,7 @@
                         {{ isUserLoggedIn() ? userInfo.name : defaultUsername }}
                     </a>
                     <button
-                        class="Header-link Header-signout-btn d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-md-top-0 border-white-fade"
+                        class="header-link header-signout-btn d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-md-top-0 border-white-fade"
                         data-test-id="openSignOutHeader"
                         (click)="onLogOut()"
                     >

src/app/components/app-header/app-header.component.spec.ts

@@ -111,8 +111,8 @@ describe("AppHeaderComponent", () => {
             const headerMenu = findNativeElement(fixture, "#app-header");
             emitClickOnElement(fixture, "#appHeaderMenuButton");
             isExpectation
-                ? expect(headerMenu.classList.contains("Details--on")).toBeFalse()
-                : expect(headerMenu.classList.contains("Details--on")).toBeTrue();
+                ? expect(headerMenu.classList.contains("details--on")).toBeFalse()
+                : expect(headerMenu.classList.contains("details--on")).toBeTrue();
         });
     });
 

src/app/components/app-header/app-header.component.ts

@@ -131,9 +131,9 @@ export class AppHeaderComponent extends BaseComponent implements OnInit {
         this.isCollapsedAppHeaderMenu = !this.isCollapsedAppHeaderMenu;
         if (appHeaderButton) {
             if (this.isCollapsedAppHeaderMenu) {
-                appHeaderButton.classList.add("Details--on");
+                appHeaderButton.classList.add("details--on");
             } else {
-                appHeaderButton.classList.remove("Details--on");
+                appHeaderButton.classList.remove("details--on");
             }
         }
     }