fix(alert): remove dependency on button and fix standalone styles

Alert was previously dependent on button being used with it - this renames the .button-inner class to .alert-button-inner and fixes the styling of the standalone alert component
2026-03-13 10:22:08 +08:00 · 2018-02-07 12:39:40 -05:00
parent 6ba02c21d0
commit 1495046d4a
7 changed files with 336 additions and 10 deletions
--- a/packages/core/src/components/alert/alert.ios.scss
+++ b/packages/core/src/components/alert/alert.ios.scss
@@ -6,6 +6,7 @@

 .alert-ios {
  font-family: $alert-ios-font-family;
+  font-size: $alert-ios-font-size;
 }

 .alert-ios .alert-wrapper {
--- a/packages/core/src/components/alert/alert.ios.vars.scss
+++ b/packages/core/src/components/alert/alert.ios.vars.scss
@@ -8,6 +8,9 @@
 /// @prop - Font family of the alert
 $alert-ios-font-family:                         $font-family-ios-base !default;

+/// @prop - Font size of the alert
+$alert-ios-font-size:                           $font-size-ios-base !default;
+
 /// @prop - Max width of the alert
 $alert-ios-max-width:                           270px !default;

--- a/packages/core/src/components/alert/alert.md.scss
+++ b/packages/core/src/components/alert/alert.md.scss
@@ -6,6 +6,7 @@

 .alert-md {
  font-family: $alert-md-font-family;
+  font-size: $alert-md-font-size;
 }

 .alert-md .alert-wrapper {
@@ -29,6 +30,7 @@

 .alert-md .alert-title {
  font-size: $alert-md-title-font-size;
+  font-weight: $alert-md-title-font-weight;
 }

 .alert-md .alert-sub-title {
@@ -264,6 +266,6 @@
  background-color: $alert-md-button-background-color-activated;
 }

-.alert-md .alert-button .button-inner {
+.alert-md .alert-button-inner {
  justify-content: $alert-md-button-group-justify-content;
 }
--- a/packages/core/src/components/alert/alert.md.vars.scss
+++ b/packages/core/src/components/alert/alert.md.vars.scss
@@ -8,6 +8,9 @@
 /// @prop - Font family of the alert
 $alert-md-font-family:                        $font-family-md-base !default;

+/// @prop - Font size of the alert
+$alert-md-font-size:                          $font-size-md-base !default;
+
 /// @prop - Max width of the alert
 $alert-md-max-width:                          280px !default;

@@ -41,6 +44,9 @@ $alert-md-head-text-align:                    start !default;
 /// @prop - Font size of the alert title
 $alert-md-title-font-size:                    22px !default;

+/// @prop - Font weight of the alert title
+$alert-md-title-font-weight:                  500 !default;
+
 /// @prop - Font size of the alert sub title
 $alert-md-sub-title-font-size:                16px !default;

--- a/packages/core/src/components/alert/alert.scss
+++ b/packages/core/src/components/alert/alert.scss
@@ -16,6 +16,9 @@ ion-alert {
  justify-content: center;

  contain: strict;
+
+  font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
 }

 ion-alert.alert-top {
@@ -24,10 +27,6 @@ ion-alert.alert-top {
  align-items: flex-start;
 }

-ion-alert input {
-  width: 100%;
-}
-
 .alert-wrapper {
  z-index: $z-index-overlay-wrapper;
  display: flex;
@@ -58,13 +57,21 @@ ion-alert input {
  overflow-y: scroll;

  -webkit-overflow-scrolling: touch;
+
+  box-sizing: border-box;
 }

 .alert-input {
  @include padding(10px, 0);

+  width: 100%;
+
  border: 0;
  background: inherit;
+
+  font: inherit;
+
+  box-sizing: border-box;
 }

 .alert-button-group {
@@ -92,12 +99,26 @@ ion-alert input {
  line-height: $alert-button-line-height;
 }

+.alert-button-inner {
+  display: flex;
+
+  flex-flow: row nowrap;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+}
+
 .alert-tappable {
  @include text-align(start);
  @include appearance(none);
  @include margin(0);
  @include padding(0);

+  border: 0;
+
  width: 100%;

  font-size: inherit;
@@ -115,3 +136,9 @@ ion-alert input {
    outline: none;
  }
 }
+
+.alert-radio-icon,
+.alert-checkbox-icon,
+.alert-checkbox-inner {
+  box-sizing: border-box;
+}
--- a/packages/core/src/components/alert/alert.tsx
+++ b/packages/core/src/components/alert/alert.tsx
@@ -293,7 +293,7 @@ export class Alert {
      <div class='alert-checkbox-group'>
        { inputs.map((i, index) => (
          <button onClick={() => this.cbClick(index)} aria-checked={i.checked} id={i.id} disabled={i.disabled} tabIndex={0} role='checkbox' class='alert-tappable alert-checkbox alert-checkbox-button'>
-            <div class='button-inner'>
+            <div class='alert-button-inner'>
              <div class='alert-checkbox-icon'><div class='alert-checkbox-inner'></div></div>
              <div class='alert-checkbox-label'>
                {i.label}
@@ -312,7 +312,7 @@ export class Alert {
      <div class='alert-radio-group' role='radiogroup' aria-labelledby={this.hdrId} aria-activedescendant={this.activeId}>
        { inputs.map((i, index) => (
          <button onClick={() => this.rbClick(index)} aria-checked={i.checked} disabled={i.disabled} id={i.id} tabIndex={0} class='alert-radio-button alert-tappable alert-radio' role='radio'>
-            <div class='button-inner'>
+            <div class='alert-button-inner'>
              <div class='alert-radio-icon'><div class='alert-radio-inner'></div></div>
              <div class='alert-radio-label'>
                {i.label}
@@ -442,7 +442,7 @@ export class Alert {
        <div class={alertButtonGroupClass}>
          {buttons.map(b =>
            <button class={buttonClass(b)} tabIndex={0} onClick={() => this.buttonClick(b)}>
-              <span class='button-inner'>
+              <span class='alert-button-inner'>
                {b.text}
              </span>
            </button>
--- a/packages/core/src/components/alert/test/standalone/index.html
+++ b/packages/core/src/components/alert/test/standalone/index.html
@@ -9,11 +9,36 @@
 </head>

 <body>
-  <ion-button id="basic" expand="block" onclick="presentAlert()">Alert</ion-button>
+  <button id="basic" onclick="presentAlert()">Alert</button>
+  <button id="longMessage" onclick="presentAlertLongMessage()">Alert Long Message</button>
+  <button id="multipleButtons" onclick="presentAlertMultipleButtons()">Multiple Buttons (>2)</button>
+  <button id="noMessage" onclick="presentAlertNoMessage()">Alert No Message</button>
+  <button id="confirm" onclick="presentAlertConfirm()">Confirm</button>
+  <button id="prompt" onclick="presentAlertPrompt()">Prompt</button>
+  <button id="radio" onclick="presentAlertRadio()">Radio</button>
+  <button id="checkbox" onclick="presentAlertCheckbox()">Checkbox</button>
+  <button onclick="presentWithCssClass()">CssClass</button>

  <ion-alert-controller></ion-alert-controller>

+  <style>
+    body > button {
+      display: block;
+      clear: both;
+      width: 100%;
+      padding: 12px 8px;
+      font-size: 1em;
+      background: #f8f8f8;
+      border: 1px solid #eee;
+      border-radius: 4px;
+      margin-bottom: 8px;
+    }
+  </style>
+
  <script>
+    window.addEventListener('ionAlertDidDismiss', function(e){console.log('didDismiss', e)})
+    window.addEventListener('ionAlertWillDismiss', function(e){console.log('willDismiss', e)})
+
    async function presentAlert() {
      var alertController = document.querySelector('ion-alert-controller');
      await alertController.componentOnReady();
@@ -25,7 +50,269 @@
      });
      return await alert.present();
    }
-  </script>
+
+    async function presentAlertLongMessage() {
+      var alertController = document.querySelector('ion-alert-controller');
+      await alertController.componentOnReady();
+      const alert = await alertController.create({
+        title: 'Alert',
+        message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit diam lorem, a faucibus turpis sagittis eu. In finibus augue in dui varius convallis. Donec vulputate nibh gravida odio vulputate commodo. Suspendisse imperdiet consequat egestas. Nulla feugiat consequat urna eu tincidunt. Cras nec blandit turpis, eu auctor nunc. Pellentesque finibus, magna eu vestibulum imperdiet, arcu ex lacinia massa, eget volutpat quam leo a orci. Etiam mauris est, elementum at feugiat at, dictum in sapien. Mauris efficitur eros sodales convallis egestas. Phasellus eu faucibus nisl. In eu diam vitae libero egestas lacinia. Integer sed convallis metus, nec commodo felis. Duis libero augue, ornare at tempus non, posuere vel augue. Cras mattis dui at tristique aliquam. Phasellus fermentum nibh ligula, porta hendrerit ligula elementum eu. Suspendisse sollicitudin enim at libero iaculis pulvinar. Donec ac massa id purus laoreet rutrum quis eu urna. Mauris luctus erat vel magna porttitor, vel varius erat rhoncus. Donec eu turpis vestibulum, feugiat urna id, gravida mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at lobortis tortor. Nam ultrices volutpat elit, sed pharetra nulla suscipit at. Nunc eu accumsan eros, id auctor libero. Suspendisse potenti. Nam vitae dapibus metus. Maecenas nisi dui, sagittis et condimentum eu, bibendum vel eros. Vivamus malesuada, tortor in accumsan iaculis, urna velit consectetur ante, nec semper sem diam a diam. In et semper ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit, velit vel porttitor euismod, neque risus blandit nulla, non laoreet libero dolor et odio. Nulla enim risus, feugiat eu urna sed, ultrices semper felis. Sed blandit mi diam. Nunc quis mi ligula. Pellentesque a elit eu orci volutpat egestas. Aenean fermentum eleifend quam, ut tincidunt eros tristique et. Nam dapibus tincidunt ligula, id faucibus felis sodales quis. Donec tincidunt lectus ipsum, ac semper tellus cursus ac. Vestibulum nec dui a lectus accumsan vestibulum quis et velit. Aliquam finibus justo et odio euismod, viverra condimentum eros tristique. Sed eget luctus risus. Pellentesque lorem magna, dictum non congue sodales, laoreet eget quam. In sagittis vulputate dolor a ultricies. Donec viverra leo sed ex maximus, in finibus elit gravida. Aliquam posuere vulputate mi. Suspendisse potenti. Nunc consectetur congue arcu, at pharetra dui varius non. Etiam vestibulum congue felis, id ullamcorper neque convallis ultrices. Aenean congue, diam a iaculis mollis, nisl eros maximus arcu, nec hendrerit purus felis porta diam. Nullam vitae ultrices dui, ac dictum sapien. Phasellus eu magna luctus, varius urna id, molestie quam. Nulla in semper tellus. Curabitur lacinia tellus sit amet lacinia dapibus. Sed id condimentum tellus, nec aliquam sapien. Vivamus luctus at ante a tincidunt.',
+        buttons: ['Cancel', 'OK']
+      });
+      return await alert.present();
+    }
+
+    async function presentAlertMultipleButtons() {
+      var alertController = document.querySelector('ion-alert-controller');
+      await alertController.componentOnReady();
+      const alert = await alertController.create({
+        title: 'Alert',
+        subTitle: 'Subtitle',
+        message: 'This is an alert message.',
+        buttons: ['Cancel', 'Open Modal', 'Delete']
+      });
+      return await alert.present();
+    }
+
+    async function presentAlertNoMessage() {
+      var alertController = document.querySelector('ion-alert-controller');
+      await alertController.componentOnReady();
+      const alert = await alertController.create({
+        title: 'Alert',
+        buttons: ['OK']
+      });
+      return await alert.present();
+    }
+
+    async function presentAlertConfirm() {
+      var alertController = document.querySelector('ion-alert-controller');
+      await alertController.componentOnReady();
+      const alert = await alertController.create({
+        title: 'Confirm!',
+        message: 'Message <strong>text</strong>!!!',
+        buttons: [
+          {
+            text: 'Cancel',
+            role: 'cancel',
+            cssClass: 'secondary',
+            handler: (blah) => {
+              console.log('Confirm Cancel: blah');
+            }
+          }, {
+            text: 'Okay',
+            handler: () => {
+              console.log('Confirm Okay')
+            }
+          }
+        ]
+      });
+      return await alert.present();
+    }
+
+    async function presentAlertPrompt() {
+      var alertController = document.querySelector('ion-alert-controller');
+      await alertController.componentOnReady();
+      const alert = await alertController.create({
+        title: 'Prompt!',
+        inputs: [
+          {
+            placeholder: 'Placeholder 1'
+          },
+          {
+            name: 'name2',
+            id: 'name2-id',
+            value: 'hello',
+            placeholder: 'Placeholder 2'
+          },
+          {
+            name: 'name3',
+            value: 'http://ionicframework.com',
+            type: 'url',
+            placeholder: 'Favorite site ever'
+          },
+          // input date with min & max
+          {
+            name: 'name4',
+            type: 'date',
+            min: '2017-03-01',
+            max: '2018-01-12'
+          },
+          // input date without min nor max
+          {
+            name: 'name5',
+            type: 'date'
+          },
+          {
+            name: 'name6',
+            type: 'number',
+            min: -5,
+            max: 10
+          },
+          {
+            name: 'name7',
+            type: 'number'
+          }
+        ],
+        buttons: [
+          {
+            text: 'Cancel',
+            role: 'cancel',
+            cssClass: 'secondary',
+            handler: () => {
+              console.log('Confirm Cancel')
+            }
+          }, {
+            text: 'Ok',
+            handler: () => {
+              console.log('Confirm Ok')
+            }
+          }
+        ]
+      });
+      return await alert.present();
+    }
+
+    async function presentAlertRadio() {
+      var alertController = document.querySelector('ion-alert-controller');
+      await alertController.componentOnReady();
+      const alert = await alertController.create({
+        title: 'Radio',
+        inputs: [
+          {
+            type: 'radio',
+            label: 'Radio 1',
+            value: 'value1',
+            checked: true
+          },
+          {
+            type: 'radio',
+            label: 'Radio 2',
+            value: 'value2'
+          },
+          {
+            type: 'radio',
+            label: 'Radio 3',
+            value: 'value3'
+          },
+          {
+            type: 'radio',
+            label: 'Radio 4',
+            value: 'value4'
+          },
+          {
+            type: 'radio',
+            label: 'Radio 5',
+            value: 'value5'
+          },
+          {
+            type: 'radio',
+            label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
+            value: 'value6'
+          }
+        ],
+        buttons: [
+          {
+            text: 'Cancel',
+            role: 'cancel',
+            cssClass: 'secondary',
+            handler: () => {
+              console.log('Confirm Cancel')
+            }
+          }, {
+            text: 'Ok',
+            handler: () => {
+              console.log('Confirm Ok')
+            }
+          }
+        ]
+      });
+      return await alert.present();
+    }
+
+    async function presentAlertCheckbox() {
+
+
+      var alertController = document.querySelector('ion-alert-controller');
+      await alertController.componentOnReady();
+      const alert = await alertController.create({
+        title: 'Checkbox',
+        inputs: [
+          {
+            type: 'checkbox',
+            label: 'Checkbox 1',
+            value: 'value1',
+            checked: true
+          },
+
+          {
+            type: 'checkbox',
+            label: 'Checkbox 2',
+            value: 'value2'
+          },
+
+          {
+            type: 'checkbox',
+            label: 'Checkbox 3',
+            value: 'value3'
+          },
+
+          {
+            type: 'checkbox',
+            label: 'Checkbox 4',
+            value: 'value4'
+          },
+
+          {
+            type: 'checkbox',
+            label: 'Checkbox 5',
+            value: 'value5'
+          },
+
+          {
+            type: 'checkbox',
+            label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
+            value: 'value6'
+          }
+        ],
+        buttons: [
+          {
+            text: 'Cancel',
+            role: 'cancel',
+            cssClass: 'secondary',
+            handler: () => {
+              console.log('Confirm Cancel')
+            }
+          }, {
+            text: 'Ok',
+            handler: () => {
+              console.log('Confirm Ok')
+            }
+          }
+        ]
+      });
+      return await alert.present();
+    }
+
+    async function presentWithCssClass() {
+      var alertController = document.querySelector('ion-alert-controller');
+      await alertController.componentOnReady();
+      const alert = await alertController.create({
+        title: 'Alert',
+        subTitle: 'Subtitle',
+        cssClass: 'my-class my-customClass   ',
+        message: 'This is an alert message.',
+        buttons: [ {
+            text: 'Ok',
+            cssClass: 'my-class my-customClass   ',
+            handler: () => {
+              console.log('Confirm Ok')
+            }
+          }]
+      });
+      return await alert.present();
+    }
+
+</script>
 </body>

 </html>