Styling Bugfixes (#1160)

* fix: dropdown styling

* fix: remove remaining carats

* fix: json editor styling issues

* fix: sections could leak background

* fix: default section styles

* fix: dropdowns

* fix: dropzone should display border color on drag

fix: section icon misalignment

* fix: dropdown issues

* fix: navigation search

* fix: json editor example input alignment

* fix: conform search filters

* fix: search input font size

* feat: make input hints optional

feat: set no margin on select

* fix: pages and changelog

* fix: filter multiselect should have margin similar to other menus

Author: steveblue

projects/swimlane/ngx-ui/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## HEAD (unreleased)
 
+- Feat (`ngx-select`): `withMargin` input when set to false will display ngx-select marginless.
+- Feat (`ngx-select`, `ngx-input`): `withHint` input when set to false will not display a block element for the hint.
+
 ## 51.0.0-alpha.1 (2025-10-21)
 
 - Fix (`ngx-checkbox`): Removed duplicate output emission

projects/swimlane/ngx-ui/src/lib/components/date-range-calendar/date-range-picker.component.html

@@ -1,5 +1,5 @@
 <ngx-dropdown [closeOnClick]="false" [closeOnOutsideClick]="true" #wrapperRef>
-  <ngx-dropdown-menu class="ngx-dropdown-menu ngx-dropdown-dark-outline" (click)="$event.stopPropagation()">
+  <ngx-dropdown-menu class="ngx-dropdown-menu" (click)="$event.stopPropagation()">
     <div class="date-range-selection"><span>Date range selection </span></div>
     <div class="date-range-picker">
       <!-- Sidebar Presets -->

projects/swimlane/ngx-ui/src/lib/components/dropdown/dropdown.component.scss

@@ -81,8 +81,8 @@ $dropdown-color: var(--grey-100);
       content: ' ';
       display: none;
       position: absolute;
-      left: 10px;
-      top: -6px;
+      left: 12px;
+      top: -5px;
       width: 12px;
       height: 12px;
       background: $dropdown-bg;
@@ -153,7 +153,7 @@ $dropdown-color: var(--grey-100);
       &.divider,
       &.divider-label {
         height: initial;
-        margin: var(--spacing-8) var(--spacing-0);
+        margin: var(--spacing-0);
         padding: var(--spacing-0) var(--spacing-20);
         overflow: hidden;
         background-color: initial !important;
@@ -251,6 +251,7 @@ $dropdown-color: var(--grey-100);
 
   // Styles
   .ngx-dropdown-menu {
+    /* @deprecated Dark outline style is marked for deprecation and will be removed at a later date. */
     &.ngx-dropdown-light-outline {
       $menu-color: var(--grey-750);
       $menu-border: var(--grey-550);
@@ -261,9 +262,10 @@ $dropdown-color: var(--grey-100);
       @include ngx-dropdown-outline($menu-color, $menu-border, $item-active, $item-hover, $item-color);
     }
 
+    /* @deprecated This style is marked for deprecation and will be removed at a later date. */
     &.ngx-dropdown-dark-outline {
-      $menu-color: var(--color-grey-750);
-      $menu-border: var(--color-grey-550);
+      $menu-color: var(--grey-750);
+      $menu-border: var(--grey-550);
       $item-active: #479eff;
       $item-hover: var(--grey-750);
       $item-color: #afb7c8;

projects/swimlane/ngx-ui/src/lib/components/dropzone/dropzone.component.scss

@@ -164,5 +164,9 @@
         }
       }
     }
+
+    &:has(.file-over) {
+      border: 1px dashed #04a6e6;
+    }
   }
 }

projects/swimlane/ngx-ui/src/lib/components/filter/filter.component.scss

@@ -184,21 +184,22 @@ $max-width: 300px;
 
   // dropdown active
   &.active {
-    .ngx-select-dropdown--upwards {
-      opacity: 1;
-      bottom: 100%;
-      top: auto;
-      margin-bottom: var(--spacing-10);
-      animation: openUpwardsAnimation 0.25s;
-    }
-
-    .ngx-select-dropdown--downwards {
-      opacity: 1;
-      animation: openAnimation 0.25s;
-    }
-
     .ngx-select-dropdown {
       display: block;
+
+      &--upwards {
+        animation: openUpwardsAnimation 0.25s;
+        opacity: 1;
+        margin-bottom: var(--spacing-10);
+        top: auto;
+        bottom: 100%;
+      }
+
+      &--downwards {
+        animation: openAnimation 0.25s;
+        opacity: 1;
+        margin-top: var(--spacing-10);
+      }
     }
 
     .ngx-multi-dimension-selection {
@@ -395,7 +396,7 @@ $max-width: 300px;
 
       .ngx-search {
         font-size: var(--font-size-m);
-        margin-top: -9px;
+        margin-top: -8px;
       }
 
       .ngx-x {
@@ -415,9 +416,9 @@ $max-width: 300px;
         border: none;
         outline: none;
         display: block;
-        font-size: var(--font-size-xs);
         width: 100%;
         padding-left: var(--spacing-24);
+        font-size: var(--font-size-m);
 
         &::-webkit-search-decoration,
         &::-webkit-search-cancel-button,

projects/swimlane/ngx-ui/src/lib/components/input/input.component.html

@@ -108,7 +108,7 @@
   <div class="ngx-input-underline" [ngClass]="{ 'ngx-input-underline__visibility-hidden': readonly }">
     <div class="underline-fill" [@underlineState]="underlineState"></div>
   </div>
-  <div class="ngx-input-hint">
+  <div class="ngx-input-hint" [ngClass]="{ hidden: !withHint }">
     <ng-content select="ngx-input-hint"></ng-content>
     <span *ngIf="hint" [innerHTML]="hint"></span>
   </div>

projects/swimlane/ngx-ui/src/lib/components/input/input.component.ts

@@ -85,6 +85,7 @@ export class InputComponent implements AfterViewInit, OnDestroy, ControlValueAcc
   @Input() size: Size = Size.Small;
   @Input() appearance: Appearance = Appearance.Legacy;
   @Input() withMargin = true;
+  @Input() withHint = true;
   @Input() textareaRows = 1;
 
   @Input()

projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-node-flat/json-editor-node-flat.component.scss

@@ -124,18 +124,19 @@ ngx-json-editor-node-flat {
 
       .node-input {
         flex: 0 1 60%;
-        padding-top: 5px;
-        margin-bottom: 2px;
 
         ngx-input {
           padding: var(--spacing-0);
-          margin: var(--spacing-0);
 
           .ngx-input-hint {
             min-height: 0;
           }
         }
 
+        ngx-select {
+          margin-top: var(--spacing-36);
+        }
+
         .code {
           &:hover {
             button {

projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-node-flat/node-types/array-node-flat/array-node-flat.component.html

@@ -39,13 +39,13 @@
         >
           <i class="ngx-icon ngx-cog"></i>
         </button>
-        <ngx-dropdown [showCaret]="true">
+        <ngx-dropdown>
           <ngx-dropdown-toggle>
             <button type="button" class="node-options-btn">
               <i class="ngx-icon ngx-dots-vert-round"></i>
             </button>
           </ngx-dropdown-toggle>
-          <ngx-dropdown-menu class="ngx-dropdown-dark-outline align-right">
+          <ngx-dropdown-menu class="ngx-dropdown-menu align-right">
             <ul class="vertical-list">
               <li><button type="button" (click)="deleteArrayItem(i)">Delete</button></li>
 
@@ -74,14 +74,14 @@
       [style.marginLeft]="hideRoot && level === 0 ? '15px' : '0'"
       [style.backgroundColor]="level === 0 ? '' : 'rgba(49,56,71,0.5)'"
     >
-      <ngx-dropdown [showCaret]="true">
+      <ngx-dropdown>
         <ngx-dropdown-toggle>
           <button [disabled]="isDuplicated" type="button">
             <i class="ngx-icon ngx-tree-expand"></i>
             <span>Add an item</span>
           </button>
         </ngx-dropdown-toggle>
-        <ngx-dropdown-menu class="ngx-dropdown-dark-outline">
+        <ngx-dropdown-menu class="ngx-dropdown-menu">
           <ul class="vertical-list">
             <ng-template [ngIf]="!schema || !schema.items || !schema.items.type">
               <li *ngFor="let dataType of dataTypes" (click)="addArrayItem(dataType)">

projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-node-flat/node-types/node-types.extensions.scss

@@ -67,11 +67,26 @@
       span {
         font-size: var(--font-size-s);
         margin-left: var(--spacing-10);
+        line-height: var(--font-line-height-100);
       }
     }
 
-    .ngx-dropdown-menu {
-      @extend %ngx-dropdown-menu;
+    .ngx-dropdown {
+      .ngx-dropdown-menu {
+        button {
+          display: unset;
+          color: unset;
+
+          i {
+            font-size: unset;
+          }
+
+          span {
+            font-size: unset;
+            margin-left: unset;
+          }
+        }
+      }
     }
   }
 }