Add error styling and refactor placeDropdown (#372)

digitalnsw · Dec 5, 2023 · a95803b · a95803b
1 parent 90bbd9f
commit a95803b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 9 deletions.
diff --git a/src/components/select/_select.scss b/src/components/select/_select.scss
@@ -81,6 +81,17 @@ $nsw-form-tick: '<svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000
       background: rgba(var(--nsw-palette-blue-01-rgb), 0.01);
     }
 
+    &[aria-invalid='true'],
+    &.has-error {
+      border-color: var(--nsw-status-error);
+      border-width: 2px;
+
+      &:hover {
+        background: var(--nsw-status-error-bg);
+        background-size: revert;
+      }
+    }
+
     &[aria-expanded='true'] {
       + .nsw-multi-select__dropdown {
         visibility: visible;
@@ -124,7 +135,8 @@ $nsw-form-tick: '<svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000
     position: absolute;
     left: 0;
     top: 100%;
-    min-width: 200px;
+    width: 100%;
+    min-width: rem(200px);
     max-height: 1px;
     background-color: var(--nsw-white);
     box-shadow: var(--nsw-box-shadow);

diff --git a/src/components/select/select.js b/src/components/select/select.js
@@ -22,6 +22,7 @@ class Select {
     this.insetLabel = this.element.getAttribute('data-inset-label') && this.element.getAttribute('data-inset-label') === 'on'
     this.hideClass = 'nsw-display-none'
     this.showClass = 'active'
+    this.errorClass = 'has-error'
     this.srClass = 'sr-only'
     this.prefix = 'nsw-'
     this.class = 'multi-select'
@@ -114,12 +115,16 @@ class Select {
   }
 
   placeDropdown() {
-    const triggerBoundingRect = this.trigger.getBoundingClientRect()
-    this.dropdown.classList.toggle(`${this.prefix}${this.dropdownClass}--right`, (window.innerWidth < triggerBoundingRect.left + this.dropdown.offsetWidth))
-    const moveUp = (window.innerHeight - triggerBoundingRect.bottom) < triggerBoundingRect.top
+    const {
+      top, bottom, left,
+    } = this.trigger.getBoundingClientRect()
+
+    this.dropdown.classList.toggle(`${this.prefix}${this.dropdownClass}--right`, (window.innerWidth < left + this.dropdown.offsetWidth))
+    const moveUp = (window.innerHeight - bottom) < top
     this.dropdown.classList.toggle(`${this.prefix}${this.dropdownClass}--up`, moveUp)
-    const maxHeight = moveUp ? triggerBoundingRect.top - 20 : window.innerHeight - triggerBoundingRect.bottom - 20
-    this.dropdown.setAttribute('style', `max-height: ${maxHeight}px; width: ${triggerBoundingRect.width}px;`)
+    const maxHeight = moveUp ? top - 20 : window.innerHeight - bottom - 20
+    const vhCalc = Math.ceil((100 * maxHeight) / window.innerHeight)
+    this.dropdown.setAttribute('style', `max-height: ${vhCalc}vh;`)
   }
 
   keyboardCustomSelect(direction, event) {
@@ -243,11 +248,13 @@ class Select {
 
   initButtonSelect() {
     const customClasses = this.element.getAttribute('data-trigger-class') ? ` ${this.element.getAttribute('data-trigger-class')}` : ''
+    const error = this.select.getAttribute('aria-invalid')
 
     const triggerLabel = this.getSelectedOptionText()
     const activeSelectionClass = this.selectedOptCounter > 0 ? ` ${this.buttonClass}--active` : ''
 
-    let button = `<button class="js-${this.buttonClass} ${this.prefix}${this.selectClass} ${this.prefix}${this.buttonClass}${customClasses}${activeSelectionClass}" aria-label="${triggerLabel[1]}" aria-expanded="false" aria-controls="${this.selectId}-dropdown"><span aria-hidden="true" class="js-${this.labelClass} ${this.prefix}${this.labelClass}">${triggerLabel[0]}</span><span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">keyboard_arrow_down</span>`
+    let button = `<button class="js-${this.buttonClass} ${error === 'true' ? this.errorClass : ''} ${this.prefix}${this.selectClass} ${this.prefix}${this.buttonClass}${customClasses}${activeSelectionClass}" aria-label="${triggerLabel[1]}" aria-expanded="false" aria-controls="${this.selectId}-dropdown"><span aria-hidden="true" class="js-${this.labelClass} ${this.prefix}${this.labelClass}">${triggerLabel[0]}</span><span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">keyboard_arrow_down</span>`
+
     if (this.arrowIcon.length > 0 && this.arrowIcon[0].outerHTML) {
       button += this.arrowIcon[0].outerHTML
     }
@@ -271,8 +278,7 @@ class Select {
   }
 
   initAllButton() {
-    const allButton = `<button class="${this.prefix}${this.allButtonClass} js-${this.allButtonClass}"><span>All</span></button>`
-    return allButton
+    return `<button class="${this.prefix}${this.allButtonClass} js-${this.allButtonClass}"><span>All</span></button>`
   }
 
   getSelectLabelSR() {