Merge pull request #1105 from scheduleonce/qa

QA to Master
scheduleonce · Dec 15, 2023 · 68eeac8 · 68eeac8
2 parents 32bdc2b + 81189ff
commit 68eeac8
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 29 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [7.0.35] - 2023-12-12
+
+- [ONCEHUB-74291](https://scheduleonce.atlassian.net/browse/ONCEHUB-73711) fix UI and scrollbar issue for oui-select component.
+
+## [7.0.34] - 2023-12-06
+
+- [ONCEHUB-74291](https://scheduleonce.atlassian.net/browse/ONCEHUB-74291) Updated scroll bar styles for oui-scrollbar.
+
 ## [7.0.33] - 2023-11-06
 
 - [ONCEHUB-73754](https://scheduleonce.atlassian.net/browse/ONCEHUB-73754) Resolved multiple vulnerabilities and upgraded base node image.

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "oncehub-ui",
-  "version": "7.0.33",
+  "version": "7.0.35",
   "scripts": {
     "ng": "ng",
     "build": "ng build ui",

diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oncehub/ui",
-  "version": "7.0.33",
+  "version": "7.0.35",
   "description": "Oncehub UI",
   "peerDependencies": {},
   "repository": {

diff --git a/ui/src/components/scrollbar/scrollbar.scss b/ui/src/components/scrollbar/scrollbar.scss
@@ -1,12 +1,12 @@
 .oui-scrollbar-container::-webkit-scrollbar {
-  width: 12px;
+  width: 10px;
 }
 .oui-scrollbar-container::-webkit-scrollbar-track {
   display: none;
 }
 .oui-scrollbar-container::-webkit-scrollbar-thumb {
   background-color: #ccc !important;
-  border: 3px #fff solid;
+  border: 2px #fff solid;
   border-radius: 15px;
 }
 .oui-scrollbar-container-large::-webkit-scrollbar {

diff --git a/ui/src/components/select/search/option-search.scss b/ui/src/components/select/search/option-search.scss
@@ -10,8 +10,8 @@ $defaul-color: #c8c8c8;
 .oui-select-search-inner {
   position: absolute;
   background: #fff;
-  top: 6px;
-  left: -9px;
+  top: px;
+  left: 0px;
   width: 100%;
   z-index: 100;
   padding: 10px;

diff --git a/ui/src/components/select/select.component.ts b/ui/src/components/select/select.component.ts
@@ -1367,10 +1367,7 @@ export class OuiSelect
     const searchQueryString = '.oui-select-search-inner';
     if (this._document.querySelector(searchQueryString)) {
       this.scrollCalc(searchQueryString);
-    }
-    const actionItemsQueryString = '.oui-select-action-items';
-    if (this._document.querySelector(actionItemsQueryString)) {
-      this.scrollCalc(actionItemsQueryString);
+      this.isSearchFieldPresent = true;
     }
   }
   scrollCalc(selectQueryString: string) {
@@ -1410,7 +1407,13 @@ export class OuiSelect
       index + labelCount,
       SELECT_OPTION_HEIGHT,
       scrollTop,
-      SELECT_PANEL_HEIGHT
+      this.actionItems && this.isSearchFieldPresent && labelCount
+        ? SELECT_PANEL_HEIGHT - (50 + labelCount * 19)
+        : (this.actionItems && this.isSearchFieldPresent && !labelCount) ||
+          (this.actionItems && !this.isSearchFieldPresent && labelCount) ||
+          (!this.actionItems && this.isSearchFieldPresent && labelCount)
+        ? SELECT_PANEL_HEIGHT - 50
+        : SELECT_PANEL_HEIGHT
     );
     this._setScrollTop(newScrollPosition);
   }
@@ -1421,7 +1424,8 @@ export class OuiSelect
    */
   _setScrollTop(scrollTop: number): void {
     if (this.panel) {
-      this.panel.nativeElement.scrollTop = scrollTop;
+      this.panel.nativeElement.querySelector('.oui-select-options').scrollTop =
+        scrollTop;
     }
   }
 

diff --git a/ui/src/components/select/select.html b/ui/src/components/select/select.html
@@ -48,8 +48,11 @@
     [class.oui-select-input-outer]="ouiSelectInputOuterClassName"
     [class.oui-select-has-a-panel]="panelClass"
     [class.oui-select-large]="large"
+    [class.action-item]="actionItems"
   >
-    <ng-content></ng-content>
+    <div class="oui-select-options">
+      <ng-content></ng-content>
+    </div>
     <div *ngIf="actionItems" class="oui-select-action-wrapper">
       <div class="oui-select-action-items">
         <button

diff --git a/ui/src/components/select/select.scss b/ui/src/components/select/select.scss
@@ -115,6 +115,7 @@ $gray-color: #eee;
   -webkit-overflow-scrolling: touch; // for momentum scroll on mobile
   overflow-x: hidden;
   padding-bottom: 0;
+  position: relative;
   border: 1px solid #c8c8c8;
   background-color: #ffffff;
   max-height: 272px;
@@ -124,12 +125,22 @@ $gray-color: #eee;
   font-family: 'Open Sans', Helvetica, Arial, sans-serif;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
     0 1px 10px 0 rgba(0, 0, 0, 0.12);
-  padding-top: 10px;
   border-top: 0;
+  .oui-select-options {
+    -webkit-overflow-scrolling: touch; // for momentum scroll on mobile
+    overflow-x: hidden;
+    height: 100%;
+    padding-top: 10px;
+    box-sizing: border-box;
+  }
   &.oui-select-input-outer {
-    padding-top: 0;
+    .oui-select-options {
+      padding-top: 0;
+    }
+  }
+  &.action-item {
+    padding-bottom: 56px;
   }
-  .oui-optgroup-label,
   .oui-option {
     line-height: $oui-select-item-height;
     height: $oui-select-item-height;
@@ -159,6 +170,10 @@ $gray-color: #eee;
   }
   .oui-optgroup-label {
     font-weight: 700;
+    display: block;
+    padding: 0 10px;
+    font-size: 14px;
+    line-height: $oui-select-item-height;
   }
 }
 
@@ -316,20 +331,21 @@ oui-select-search {
   color: #9b9b9b;
 }
 .oui-select-action-wrapper {
-  height: 60px;
+  height: 56px;
+  padding: 10px;
+  border-top: 1px solid #ddd;
+  box-sizing: border-box;
+  background: #fff;
   display: block;
-  margin-top: 10px;
+  width: 100%;
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
 }
 
 .oui-select-action-items {
-  position: absolute;
-  background: #fff;
-  bottom: 1px;
-  border-top: 1px solid #ddd;
-  padding: 12px 10px;
-  z-index: 100;
-  box-sizing: border-box;
   width: 100%;
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }