Fix #25862: UI Issues after CSS changes (#25864)

* fix (storybook): wrong import in searchable dropdown story * fix (searchable dropdown component): Add overflow support for long texts * fix (jsp components): change styles that were off after css changes * fix (dot template thumbnail field style): button and input styles were off * fix (comboBox styles): height of input needs to be 100% * fix (general styles): modifying styles that were off * dev (chips styles): create chips common extend * fix (chip extend): general cleanup * fix (tags and textarea dojo): general cleanup * fix (dojo styles and components): general clean up * fix (dojo menu): wrong height setting * fix (dojo calendar styles): increment/decrement arrows were missing * fix (item disable extend): delete unnecessary color
dotCMS · Aug 25, 2023 · 29f5721 · 29f5721
1 parent 7e2f633
commit 29f5721
Show file tree

Hide file tree

Showing 19 changed files with 390 additions and 309 deletions.
diff --git a/...t-template-props/dot-template-thumbnail-field/dot-template-thumbnail-field.component.scss b/...t-template-props/dot-template-thumbnail-field/dot-template-thumbnail-field.component.scss
@@ -1,5 +1,6 @@
 @use "variables" as *;
 @import "dotcms-theme/components/form/common";
+@import "dotcms-theme/components/buttons/common";
 
 dot-binary-file {
     display: block;
@@ -10,9 +11,6 @@ dot-binary-file {
 
             input {
                 @extend #form-field-extend;
-                border-top-left-radius: $border-radius-xs;
-                border-bottom-left-radius: $border-radius-xs;
-                padding: 1.07rem;
                 width: 100%;
             }
         }
@@ -22,8 +20,17 @@ dot-binary-file {
         }
 
         button {
-            border-top-right-radius: $border-radius-xs;
-            border-bottom-right-radius: $border-radius-xs;
+            all: unset;
+            @extend #main-primary-severity;
+            background-color: $color-palette-primary;
+            display: block;
+            height: $field-height-md;
+            font-size: $font-size-md;
+            color: $white;
+            border-radius: $border-radius-md;
+            padding: 0 $spacing-3;
+            text-transform: capitalize;
+            margin-left: $spacing-0;
         }
 
         .dot-file-preview__info {

diff --git a/.../view/components/_common/searchable-dropdown/component/searchable-dropdown.component.scss b/.../view/components/_common/searchable-dropdown/component/searchable-dropdown.component.scss
@@ -8,24 +8,32 @@
     position: relative;
 
     ::ng-deep .p-element.p-button:enabled {
-        justify-content: space-between;
+        gap: $spacing-1;
         text-align: left;
         padding: 0;
         padding-left: $spacing-1;
         border: $field-border-size solid $color-palette-gray-400;
 
         .p-button-label {
+            @include truncate-text;
             text-transform: none;
             color: $black;
         }
 
         .p-button-icon {
             @extend #field-trigger;
             @extend #field-trigger-icon;
-            height: 100%;
             display: flex;
             align-items: center;
             justify-content: center;
+
+            &:before {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: $field-height-md;
+                aspect-ratio: 1/1;
+            }
         }
 
         &:hover {

diff --git a/...components/_common/searchable-dropdown/component/searchable-dropdown.component.stories.ts b/...components/_common/searchable-dropdown/component/searchable-dropdown.component.stories.ts
@@ -28,7 +28,7 @@ export default {
     },
     decorators: [
         moduleMetadata({
-            declarations: [DotMessagePipe, SearchableDropdownComponent],
+            declarations: [SearchableDropdownComponent],
             imports: [
                 BrowserAnimationsModule,
                 ButtonModule,
@@ -37,7 +37,8 @@ export default {
                 DotIconModule,
                 FormsModule,
                 InputTextModule,
-                OverlayPanelModule
+                OverlayPanelModule,
+                DotMessagePipe
             ]
         })
     ],
@@ -71,7 +72,7 @@ export default {
         },
         data: [
             {
-                label: 'This is an option',
+                label: 'This is a really long option to test the power of the ellipsis in this component',
                 value: 'option1'
             },
             {

diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/buttons/_button.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/buttons/_button.scss
@@ -51,8 +51,7 @@
 }
 
 // Severity for basic button
-.p-button:enabled,
-.p-button.p-element {
+.p-button.p-element:enabled {
     @extend #main-primary-severity;
 
     &.p-button-secondary {

diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_autocomplete.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_autocomplete.scss
@@ -23,9 +23,19 @@
         }
     }
 
+    .p-autocomplete-dropdown.p-button.p-element {
+        &:hover,
+        &:focus,
+        &:active {
+            outline: none;
+            background-color: $color-palette-gray-200;
+        }
+    }
+
     &.p-autocomplete-multiple {
         .p-autocomplete-multiple-container {
-            padding: 0.375rem $spacing-2;
+            display: flex;
+            align-items: center;
             max-height: 13rem; // 208px
             overflow: auto; // Make it scrollable
 
@@ -35,16 +45,12 @@
                 border: none;
             }
 
+            &:has(> .p-autocomplete-token) {
+                padding: $spacing-1 0;
+            }
+
             .p-autocomplete-token {
-                padding: 0.375rem $spacing-2;
-                margin-right: $spacing-1;
-                background: $color-palette-primary-200;
-                color: $color-palette-primary;
-                border-radius: $field-border-radius;
-
-                .p-autocomplete-token-icon {
-                    margin-left: $spacing-1;
-                }
+                @extend #field-chip;
             }
 
             .p-autocomplete-input-token {

diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_multiselect.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_multiselect.scss
@@ -6,6 +6,8 @@
     @extend #form-field-base;
     min-width: 13rem;
     padding-right: 0;
+    min-height: $field-height-md;
+    height: auto;
 
     &:not(.p-multiselect-open):hover {
         @extend #form-field-hover;
@@ -17,16 +19,26 @@
     }
 
     .p-multiselect-label-container {
-        padding: $spacing-1 0;
+        display: flex;
+        align-items: center;
         padding-right: $spacing-1;
+
         .p-multiselect-label:not(.p-placeholder) {
             color: $black;
             @include truncate-text;
+
+            &:has(> .p-multiselect-token) {
+                padding: $spacing-1 0;
+                height: auto;
+                flex-wrap: wrap;
+                overflow: visible;
+            }
         }
     }
 
     .p-multiselect-trigger {
         @extend #field-trigger;
+        height: auto;
 
         .p-multiselect-trigger-icon {
             @extend #field-trigger-icon;
@@ -51,24 +63,11 @@
         color: $color-palette-gray-800;
 
         .p-multiselect-label {
-            gap: $spacing-1;
-            padding: $spacing-1;
-        }
-
-        .p-multiselect-label.p-placeholder {
-            padding: $spacing-3;
+            gap: $spacing-0;
         }
 
         .p-multiselect-token {
-            align-items: center;
-            background: $color-palette-primary-op-10;
-            border-radius: $border-radius-sm;
-            color: $color-palette-primary;
-            display: flex;
-            gap: $spacing-1;
-            justify-content: center;
-            margin-right: $spacing-1;
-            padding: $spacing-1;
+            @extend #field-chip;
         }
     }
 }

diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/common.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/common.scss
@@ -131,7 +131,6 @@
 
 #field-panel-item-disabled {
     @extend #form-field-disabled;
-    color: $color-palette-gray-500;
     cursor: initial;
 }
 
@@ -143,3 +142,16 @@
         border: 2px solid $color-palette-gray-400;
     }
 }
+
+#field-chip {
+    height: 1.5rem;
+    padding: $spacing-1;
+    background: $color-palette-primary-200;
+    border-radius: $border-radius-sm;
+    color: $color-palette-primary;
+    font-size: $font-size-sm;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: $spacing-0;
+}