Merge branch 'main' into feat/369

Author: ColinFrick

.github/workflows/cypress-run.yml

@@ -15,12 +15,12 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node: ['12', '14']
+        node: ["12", "14"]
     name: Tests (Node.js ${{ matrix.node }})
     steps:
       - uses: actions/checkout@v2
       - name: Setup node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node }}
       - name: Install dependencies
@@ -39,3 +39,39 @@ jobs:
         run: yarn install
       - name: Run linter
         run: yarn run lint
+
+  cypress-run:
+    runs-on: ubuntu-latest
+    # Browser on which the tests are run
+    container: cypress/browsers:node12.18.3-chrome87-ff82
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Cache dependencies
+        uses: actions/cache@v2
+        with:
+          path: |
+            ./node_modules
+          key: ${{ hashFiles('yarn.lock') }}
+      - name: Setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: "14.x"
+      - name: Install dependencies
+        run: yarn --dev && yarn --cwd ./playgrounds/html
+      - name: Browser tests
+        uses: cypress-io/github-action@v2
+        with:
+          # Your starting script
+          start: yarn playground
+      # Creates and uploads GitHub artifacts in case of failure
+      - uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: cypress/screenshots
+      - uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: cypress-videos
+          path: cypress/videos

.github/workflows/tests.yml

@@ -1,7 +1,8 @@
 status = [
     'linter-check',
     'Tests (Node.js 12)',
-    'Tests (Node.js 14)'
+    'Tests (Node.js 14)',
+    'cypress-run'
 ]
 # 1 hour timeout
 timeout-sec = 3600

bors.toml

@@ -54,7 +54,7 @@
     "eslint-plugin-prettier": "^3.3.0",
     "jest": "^26.6.3",
     "jsdom": "^17.0.0",
-    "node-sass": "^6.0.1",
+    "sass": "^1.43.2",
     "postcss-cli": "^7.1.2",
     "prettier": "^2.0.5",
     "pretty-bytes-cli": "^2.0.0",

package.json

@@ -14,7 +14,7 @@ mkdir -p "$DIST_DIR"
 
 # ./dist/cdn/docs-searchbar.css
 echo "$LICENSE" > "$DIST_FILE";
-node-sass --output-style expanded ./src/styles/main.scss \
+sass --style expanded ./src/styles/main.scss \
   | postcss --use autoprefixer -o "$DIST_FILE"
 
 # copy styles

scripts/build-css

@@ -135,6 +135,12 @@ class DocsSearchBar {
       },
     ])
 
+    // We remove the inline styles of the wrapper element for left / right
+    $(`.${this.autocompleteOptions.cssClasses.root} > [role='listbox']`).css({
+      left: false,
+      right: false,
+    })
+
     const customHandleSelected = handleSelected
     this.handleSelected = customHandleSelected || this.handleSelected
 

src/lib/DocsSearchBar.js

@@ -1,4 +1,6 @@
 // Detect lightness
+@use "sass:math";
+
 @function detectLightness($color) {
   @if (lightness($color) > 60) {
     @return mix($color, #000, 90%);
@@ -50,17 +52,17 @@
 // Alignment type
 @mixin alignment-type($type) {
   @if $type == 'left' {
-    left: 0 !important;
-    right: inherit !important;
+    left: 0;
+    right: inherit;
   }
   @if $type == 'right' {
-    right: 0 !important;
-    left: inherit !important;
+    right: 0;
+    left: inherit;
   }
   @if $type == 'center' {
-    left: 0 !important;
-    right: 0 !important;
-    margin: auto !important;
+    left: 0;
+    right: 0;
+    margin: auto;
   }
 }
 
@@ -177,7 +179,7 @@
       .dsb-suggestions {
         position: relative;
         z-index: 1000;
-        margin-top: $padding/2;
+        margin-top: $padding*0.5;
         & a:hover {
           text-decoration: none;
         }
@@ -205,7 +207,7 @@
         background: $background-color;
         border-radius: $border-radius + px;
         overflow: auto;
-        padding: 0 $padding/2 $padding/2;
+        padding: 0 $padding*0.5 $padding*0.5;
       }
 
       // Inner-grid setup
@@ -218,7 +220,7 @@
     .docs-searchbar-suggestion {
       display: block;
       position: relative;
-      padding: 0 $padding/2;
+      padding: 0 $padding*0.5;
       background: $background-color;
       color: $title-color;
       overflow: hidden;
@@ -262,7 +264,7 @@
         display: block;
         width: 70%;
         position: relative;
-        padding: $padding/3 0 $padding/3 $padding/1.5;
+        padding: math.div($padding, 3) 0 math.div($padding, 3) math.div($padding, 1.5);
         cursor: pointer;
 
         &:before {
@@ -281,8 +283,8 @@
         position: relative;
         border-bottom: 1px solid #ddd;
         display: none;
-        margin-top: $padding/2;
-        padding: $padding/4 0;
+        margin-top: $padding*0.5;
+        padding: $padding*0.25 0;
         font-size: $header-size;
         color: $header-color;
         @if $dark-mode {
@@ -294,15 +296,15 @@
         width: 100%;
         display: flex;
         align-items: flex-start;
-        padding: $padding/2 0 0 0;
+        padding: $padding*0.5 0 0 0;
       }
 
       &--subcategory-column {
         width: 30%;
         padding-left: 0;
         text-align: right;
         position: relative;
-        padding: $padding/3 $padding/1.5;
+        padding: math.div($padding, 3) math.div($padding, 1.5);
         color: $subtitle-color;
         font-size: $subtitle-size;
         word-wrap: break-word;
@@ -324,7 +326,7 @@
       }
 
       &--title {
-        margin-bottom: $padding/4;
+        margin-bottom: $padding*0.25;
         color: $title-color;
         font-size: $title-size;
         font-weight: bold;
@@ -339,7 +341,7 @@
 
       &--no-results {
         width: 100%;
-        padding: $padding/2 0;
+        padding: $padding*0.5 0;
         text-align: center;
         font-size: 1.2em;
 
@@ -415,7 +417,7 @@
     .suggestion-layout-simple {
       &.docs-searchbar-suggestion {
         border-bottom: solid 1px #eee;
-        padding: $padding/2;
+        padding: $padding*0.5;
         margin: 0;
         @if $dark-mode {
           border-bottom: solid 1px lighten($border-color, 10%);
@@ -471,7 +473,7 @@
 
         &--duplicate-content,
         &--subcategory-inline {
-          display: none !important;
+          display: none;
         }
 
         &--title {
@@ -495,10 +497,10 @@
         }
 
         &--text {
-          margin: $padding/4 0 0;
+          margin: $padding*0.25 0 0;
           display: desc($include-desc);
           line-height: 1.4em;
-          padding: $padding/3 $padding/2;
+          padding: math.div($padding, 3) $padding*0.5;
           background: $suggestion-background-color;
           font-size: $text-size;
           opacity: 0.8;
@@ -520,7 +522,7 @@
       width: 180px;
       height: 20px;
       z-index: 2000;
-      margin-top: $padding/1.5;
+      margin-top: math.div($padding, 1.5);
       color: $text-color;
       margin-left: auto;
     }

src/styles/_dropdown.scss

@@ -1,16 +1,18 @@
+@use "sass:math";
+
 @function even-px($value) {
   @if type-of($value) == 'number' {
     @if (unitless($value)) {
       $value: $value * 1px;
     } @else if unit($value) == 'em' {
-      $value: ($value / 1em * 16px);
+      $value: (math.div($value, 1em) * 16px);
     } @else if unit($value) == 'pts' {
       $value: $value * 1.3333 * 1px;
     } @else if unit($value) == '%' {
-      $value: $value * 16 / 100% * 1px;
+      $value: math.div($value * 16, 100%) * 1px;
     }
     $value: round($value);
-    @if ($value % 2 != 0) {
+    @if ($value % 2 != 0px) {
       $value: $value + 1;
     }
     @return $value;
@@ -23,30 +25,30 @@
   $input-height: $font-size * 2.4,
   $border-width: 1px,
   $text-color: #555,
-  $border-radius: $input-height / 2,
+  $border-radius: $input-height * 0.5,
   $input-border-color: #ccc,
   $input-focus-border-color: #1ec9ea,
   $input-background: #f8f8f8,
   $input-focus-background: #fff,
   $placeholder-color: #aaa,
   $icon: 'sbx-icon-search-1',
-  $icon-size: $input-height / 1.6,
+  $icon-size: math.div($input-height, 1.6),
   $icon-position: left,
   $icon-color: #888,
   $icon-background: $input-focus-border-color,
   $icon-background-opacity: 0.1,
   $icon-clear: 'sbx-icon-clear-1',
-  $icon-clear-size: $font-size / 1.1,
+  $icon-clear-size: math.div($font-size, 1.1),
   $dark-mode: false
 ) {
   .searchbox {
     display: inline-block;
     position: relative;
     width: $input-width;
-    height: even-px($input-height) !important;
+    height: even-px($input-height);
     white-space: nowrap;
     box-sizing: border-box;
-    visibility: visible !important;
+    visibility: visible;
 
     .meilisearch-autocomplete {
       display: block;
@@ -69,7 +71,7 @@
       border: 0;
       border-radius: even-px($border-radius);
       box-shadow: inset 0 0 0 $border-width $input-border-color;
-      background: $input-background !important;
+      background: $input-background;
       padding: 0;
       padding-right: if(
           $icon-position == 'right',
@@ -78,7 +80,7 @@
         ) + if($icon-background-opacity == 0, 0, even-px($font-size));
       padding-left: if(
         $icon-position == 'right',
-        even-px($font-size / 2) + even-px($border-radius / 2),
+        even-px($font-size * 0.5) + even-px($border-radius * 0.5),
         even-px($input-height) +
           if($icon-background-opacity == 0, 0, even-px($font-size * 1.2))
       );
@@ -133,7 +135,7 @@
       background-color: rgba($icon-background, $icon-background-opacity);
       padding: 0;
       width: even-px($input-height) +
-        if($icon-background-opacity == 0, 0, even-px($font-size / 2));
+        if($icon-background-opacity == 0, 0, even-px($font-size * 0.5));
       height: 100%;
       vertical-align: middle;
       text-align: center;
@@ -176,12 +178,12 @@
     &__reset {
       display: block;
       position: absolute;
-      top: (even-px($input-height) - even-px($icon-clear-size)) / 2 - 4px;
+      top: (even-px($input-height) - even-px($icon-clear-size)) * 0.5 - 4px;
       right: if(
         $icon-position == 'right',
         even-px($input-height) +
           if($icon-background-opacity == 0, 0, even-px($font-size)),
-        (even-px($input-height) - even-px($icon-clear-size)) / 2 - 4px
+        (even-px($input-height) - even-px($icon-clear-size)) * 0.5 - 4px
       );
       margin: 0;
       border: 0;