feat(modal): make popover modal below breakpoint #183

AlaskaAirlines · May 7, 2024 · d7fda96 · d7fda96
1 parent 5ac6050
commit d7fda96
Show file tree

Hide file tree

Showing 16 changed files with 3,893 additions and 7,845 deletions.
diff --git a/.github/workflows/publishDemo.yml b/.github/workflows/publishDemo.yml
@@ -0,0 +1,11 @@
+name: Deploy Demo
+
+on:
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  call-publish-demo-workflow:
+    uses: AlaskaAirlines/auro-library/.github/workflows/publishDemo.yml@main
+    secrets:
+      AURO_SURGE_TOKEN: ${{secrets.AURO_SURGE_TOKEN}}
diff --git a/.husky/_/husky.sh b/.husky/_/husky.sh
@@ -1,36 +0,0 @@
-#!/usr/bin/env sh
-if [ -z "$husky_skip_init" ]; then
-  debug () {
-    if [ "$HUSKY_DEBUG" = "1" ]; then
-      echo "husky (debug) - $1"
-    fi
-  }
-
-  readonly hook_name="$(basename -- "$0")"
-  debug "starting $hook_name..."
-
-  if [ "$HUSKY" = "0" ]; then
-    debug "HUSKY env variable is set to 0, skipping hook"
-    exit 0
-  fi
-
-  if [ -f ~/.huskyrc ]; then
-    debug "sourcing ~/.huskyrc"
-    . ~/.huskyrc
-  fi
-
-  readonly husky_skip_init=1
-  export husky_skip_init
-  sh -e "$0" "$@"
-  exitCode="$?"
-
-  if [ $exitCode != 0 ]; then
-    echo "husky - $hook_name hook exited with code $exitCode (error)"
-  fi
-
-  if [ $exitCode = 127 ]; then
-    echo "husky - command not found in PATH=$PATH"
-  fi
-
-  exit $exitCode
-fi

diff --git a/apiExamples/common.html b/apiExamples/common.html
@@ -1,10 +1,17 @@
 <auro-dropdown id="common" common aria-label="Label content for screen reader">
-  <div style="padding: var(--ds-size-150);">
+  <div style="padding: var(--auro-size-sm);">
     Lorem ipsum solar
     <br />
+    <input />
     <auro-button onclick="document.querySelector('#common').hide()">
       Dismiss Dropdown
     </auro-button>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Purus in mollis nunc sed. Cursus eget nunc scelerisque viverra. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Viverra vitae congue eu consequat ac felis. Amet volutpat consequat mauris nunc congue nisi. Praesent tristique magna sit amet purus gravida quis blandit turpis. Risus sed vulputate odio ut enim blandit volutpat maecenas volutpat. Consectetur lorem donec massa sapien faucibus et molestie. Non odio euismod lacinia at quis risus sed vulputate. Id ornare arcu odio ut sem. Eget mi proin sed libero. Dui accumsan sit amet nulla. Tellus integer feugiat scelerisque varius morbi enim. Fermentum iaculis eu non diam phasellus vestibulum. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Dolor morbi non arcu risus quis varius.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Purus in mollis nunc sed. Cursus eget nunc scelerisque viverra. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Viverra vitae congue eu consequat ac felis. Amet volutpat consequat mauris nunc congue nisi. Praesent tristique magna sit amet purus gravida quis blandit turpis. Risus sed vulputate odio ut enim blandit volutpat maecenas volutpat. Consectetur lorem donec massa sapien faucibus et molestie. Non odio euismod lacinia at quis risus sed vulputate. Id ornare arcu odio ut sem. Eget mi proin sed libero. Dui accumsan sit amet nulla. Tellus integer feugiat scelerisque varius morbi enim. Fermentum iaculis eu non diam phasellus vestibulum. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Dolor morbi non arcu risus quis varius.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Purus in mollis nunc sed. Cursus eget nunc scelerisque viverra. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Viverra vitae congue eu consequat ac felis. Amet volutpat consequat mauris nunc congue nisi. Praesent tristique magna sit amet purus gravida quis blandit turpis. Risus sed vulputate odio ut enim blandit volutpat maecenas volutpat. Consectetur lorem donec massa sapien faucibus et molestie. Non odio euismod lacinia at quis risus sed vulputate. Id ornare arcu odio ut sem. Eget mi proin sed libero. Dui accumsan sit amet nulla. Tellus integer feugiat scelerisque varius morbi enim. Fermentum iaculis eu non diam phasellus vestibulum. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Dolor morbi non arcu risus quis varius.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Purus in mollis nunc sed. Cursus eget nunc scelerisque viverra. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Viverra vitae congue eu consequat ac felis. Amet volutpat consequat mauris nunc congue nisi. Praesent tristique magna sit amet purus gravida quis blandit turpis. Risus sed vulputate odio ut enim blandit volutpat maecenas volutpat. Consectetur lorem donec massa sapien faucibus et molestie. Non odio euismod lacinia at quis risus sed vulputate. Id ornare arcu odio ut sem. Eget mi proin sed libero. Dui accumsan sit amet nulla. Tellus integer feugiat scelerisque varius morbi enim. Fermentum iaculis eu non diam phasellus vestibulum. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Dolor morbi non arcu risus quis varius.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Purus in mollis nunc sed. Cursus eget nunc scelerisque viverra. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Viverra vitae congue eu consequat ac felis. Amet volutpat consequat mauris nunc congue nisi. Praesent tristique magna sit amet purus gravida quis blandit turpis. Risus sed vulputate odio ut enim blandit volutpat maecenas volutpat. Consectetur lorem donec massa sapien faucibus et molestie. Non odio euismod lacinia at quis risus sed vulputate. Id ornare arcu odio ut sem. Eget mi proin sed libero. Dui accumsan sit amet nulla. Tellus integer feugiat scelerisque varius morbi enim. Fermentum iaculis eu non diam phasellus vestibulum. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Dolor morbi non arcu risus quis varius.</p>
+    <input />
   </div>
   <span slot="helpText">
     Help text

diff --git a/apiExamples/modal.html b/apiExamples/modal.html
@@ -0,0 +1,6 @@
+<auro-dropdown modal>
+  Lorem ipsum solar
+  <div slot="trigger">
+    Trigger
+  </div>
+</auro-dropdown>
diff --git a/apiExamples/modalWithTrigger.html b/apiExamples/modalWithTrigger.html
@@ -0,0 +1,6 @@
+<auro-dropdown modal modalTrigger>
+  Lorem ipsum solar
+  <div slot="trigger">
+    Trigger
+  </div>
+</auro-dropdown>
diff --git a/demo/api.md b/demo/api.md
@@ -11,19 +11,21 @@
 
 ## Properties
 
-| Property                | Attribute               | Type        | Default | Description                                      |
-|-------------------------|-------------------------|-------------|---------|--------------------------------------------------|
-| [bordered](#bordered)              | `bordered`              | ` Boolean ` |         | If declared, applies a border around the trigger slot. |
-| [chevron](#chevron)               | `chevron`               | ` Boolean ` |         | If declared, the dropdown displays an display state chevron on the right. |
-| [disabled](#disabled)              | `disabled`              | ` Boolean ` |         | If declared, the dropdown is not interactive.    |
-| [error](#error)                 | `error`                 | ` Boolean ` |         | If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both. |
-| [inset](#inset)                 | `inset`                 | ` Boolean ` |         | If declared, will apply padding around trigger slot content. |
-| [isPopoverVisible](#isPopoverVisible)      | `isPopoverVisible`      | ` Boolean ` | false   | If true, the dropdown bib is displayed.          |
-| [matchWidth](#matchWidth)            | `matchWidth`            | ` Boolean ` | false   | If declared, the popover and trigger will be set to the same width. |
-| [noHideOnThisFocusLoss](#noHideOnThisFocusLoss) | `noHideOnThisFocusLoss` | ` Boolean ` | false   | If delclared, the dropdown will not hide when moving focus outside the element. |
-| [noToggle](#noToggle)              | `noToggle`              | ` Boolean ` |         | If declared, the trigger will only show the the dropdown bib. |
-| [ready](#ready)                 | `ready`                 | ` Boolean ` |         | When false the component API should not be called. |
-| [rounded](#rounded)               | `rounded`               | ` Boolean ` |         | If declared, will apply border-radius to trigger and default slots. |
+| Property                | Attribute               | Type                    | Default | Description                                      |
+|-------------------------|-------------------------|-------------------------|---------|--------------------------------------------------|
+| [bordered](#bordered)              | `bordered`              | ` Boolean `             |         | If declared, applies a border around the trigger slot. |
+| [chevron](#chevron)               | `chevron`               | ` Boolean `             |         | If declared, the dropdown displays an display state chevron on the right. |
+| [disabled](#disabled)              | `disabled`              | ` Boolean `             |         | If declared, the dropdown is not interactive.    |
+| [error](#error)                 | `error`                 | ` Boolean `             |         | If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both. |
+| [inset](#inset)                 | `inset`                 | ` Boolean `             |         | If declared, will apply padding around trigger slot content. |
+| [isPopoverVisible](#isPopoverVisible)      | `isPopoverVisible`      | ` Boolean `             | false   | If true, the dropdown bib is displayed.          |
+| [matchWidth](#matchWidth)            | `matchWidth`            | ` Boolean `             | false   | If declared, the popover and trigger will be set to the same width. |
+| [modal](#modal)                 | `modal`                 | ` String \|\| Boolean ` | false   | If declared, the dropdown will be displayed as a modal on a mobile device at the defined breakpoint, defaulting to 'sm'. |
+| [modalWithTrigger](#modalWithTrigger)      | `modalWithTrigger`      | ` String \|\| Boolean ` | false   | If declared, the trigger and dropdown bib will be displayed as a modal on a mobile device at the defined breakpoint, defaulting to 'sm'. |
+| [noHideOnThisFocusLoss](#noHideOnThisFocusLoss) | `noHideOnThisFocusLoss` | ` Boolean `             | false   | If delclared, the dropdown will not hide when moving focus outside the element. |
+| [noToggle](#noToggle)              | `noToggle`              | ` Boolean `             |         | If declared, the trigger will only show the the dropdown bib. |
+| [ready](#ready)                 | `ready`                 | ` Boolean `             |         | When false the component API should not be called. |
+| [rounded](#rounded)               | `rounded`               | ` Boolean `             |         | If declared, will apply border-radius to trigger and default slots. |
 
 ## Methods
 
@@ -564,6 +566,68 @@ The `inset` property applies a predefined amount of CSS `padding` to the `trigge
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+#### modal
+
+The `modal` property will make the popover display full screen at a specified breakpoint. If no value is set, `modal` defaults to `sm`.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/modal.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/modal.html -->
+  <auro-dropdown modal>
+    Lorem ipsum solar
+    <div slot="trigger">
+      Trigger
+    </div>
+  </auro-dropdown>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/modal.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/modal.html -->
+
+```html
+<auro-dropdown modal>
+  Lorem ipsum solar
+  <div slot="trigger">
+    Trigger
+  </div>
+</auro-dropdown>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+#### modalWithTrigger
+
+The `modalWithTrigger` property will make the trigger and popover display full screen at a specified breakpoint. If no value is set, `modalWithTrigger` defaults to `sm`.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/modalWithTrigger.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/modalWithTrigger.html -->
+  <auro-dropdown modal modalTrigger>
+    Lorem ipsum solar
+    <div slot="trigger">
+      Trigger
+    </div>
+  </auro-dropdown>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/modalWithTrigger.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/modalWithTrigger.html -->
+
+```html
+<auro-dropdown modal modalTrigger>
+  Lorem ipsum solar
+  <div slot="trigger">
+    Trigger
+  </div>
+</auro-dropdown>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 #### rounded
 
 The `rounded` property applies `border-radius` CSS to the trigger and default slot content.