Merge pull request #149 from prysmex/pv_modal_optional_onclose

Modal fixes, EuiSelectableListItem skeleton

Author: betocantu93

packages/core/addon/components/eui-card/index.hbs

@@ -28,26 +28,31 @@
     @paddingSize={{@paddingSize}}
     ...attributes
   >
-    <div class="euiCard__top">
-      {{#if (has-block "icon")}}
-        {{yield "euiCard__icon" to="icon"}}
-      {{else}}
-        {{#if (or @image @icon)}}
-          {{#if (and @image (not-eq layout "horizontal"))}}
-            <div class="euiCard__image">
-              <img src={{@image}} alt="card-top" />
-            </div>
-          {{/if}}
-          {{#if @icon}}
-            <EuiIcon
-              @iconClasses="euiCard__icon"
-              @type={{@icon}}
-              @size={{@iconSize}}
-            />
+
+    {{#if (or (has-block "icon") (or @image @icon))}}
+      <div class="euiCard__top">
+        {{#if (has-block "icon")}}
+          {{yield "euiCard__icon" to="icon"}}
+        {{else}}
+          {{#if (or @image @icon)}}
+            {{#if (and @image (not-eq layout "horizontal"))}}
+              <div class="euiCard__image">
+                <img src={{@image}} alt="card-top" />
+              </div>
+            {{/if}}
+            {{#if @icon}}
+              <EuiIcon
+                @iconClasses="euiCard__icon"
+                @type={{@icon}}
+                @size={{@iconSize}}
+              />
+            {{/if}}
           {{/if}}
         {{/if}}
-      {{/if}}
-    </div>
+      </div>
+    {{/if}}
+
+
     <div class="euiCard__content">
       <EuiTitle class="euiCard__title" @size={{arg-or-default @titleSize "s"}}>
         {{#if (has-block "title")}}

packages/core/addon/components/eui-confirm-modal/index.hbs

@@ -1,22 +1,27 @@
-<EuiModal class="euiModal--confirmation" @onClose={{@onCancel}} ...attributes>
-  {{#if @title}}
+<EuiModal
+  class="euiModal--confirmation"
+  @onClose={{@onCancel}}
+  ...attributes
+>
+  
+  {{#if (or @title (has-block 'title'))}}
     <EuiModalHeader>
       <EuiModalHeaderTitle>
         {{@title}}
+        {{yield to='title'}}
       </EuiModalHeaderTitle>
     </EuiModalHeader>
   {{/if}}
-  {{#if (has-block)}}
-    <EuiModalBody>
-      {{yield}}
-    </EuiModalBody>
-  {{else if @message}}
+
+  {{#if (or @message (has-block))}}
     <EuiModalBody>
       <EuiText>
         {{@message}}
+        {{yield}}
       </EuiText>
     </EuiModalBody>
   {{/if}}
+
   <EuiModalFooter>
     <EuiButtonEmpty {{on "click" @onCancel}}>
       {{@cancelButtonText}}
@@ -31,4 +36,5 @@
       {{@confirmButtonText}}
     </EuiButton>
   </EuiModalFooter>
+
 </EuiModal>

packages/core/addon/components/eui-loading-content/index.hbs

@@ -12,7 +12,12 @@
       )
     )
   }}
-    <span class="euiLoadingContent__singleLine">
+    <span
+      class={{class-names
+        "euiLoadingContent__singleLine"
+        @singleLineClasses
+      }}
+    >
       <span class="euiLoadingContent__singleLineBackground" />
     </span>
   {{/each}}

packages/core/addon/components/eui-modal/index.hbs

@@ -25,13 +25,13 @@
         isPaused=(arg-or-default @isFocusTrapPaused false)
         focusTrapOptions=(arg-or-default @focusTrapOptions (hash))
       }}
-      {{on-key "Escape" (prevent-default (stop-propagation @onClose))}}
+      {{on-key "Escape" (prevent-default (stop-propagation (optional @onClose)))}}
     >
       <EuiButtonIcon
         class="euiModal__closeIcon"
         @iconType="cross"
         @color="text"
-        {{on "click" @onClose}}
+        {{on "click" (optional @onClose)}}
       />
       <div class="euiModal__flex">
         {{yield}}

packages/core/addon/components/eui-selectable-list-item/index.hbs

@@ -0,0 +1,24 @@
+{{!-- TODO: not fully implemented --}}
+
+<li
+  role="option"
+  aria-selected={{and (not @disabled) (eq (type-of @checked) 'string')}}
+  class={{class-names
+    componentName='EuiSelectableListItem'
+    isFocused=@isFocused
+  }}
+  aria-disabled={{@disabled}}
+  ...attributes
+>
+  <span class="euiSelectableListItem__content">
+    {{!-- {{optionIcon}} --}}
+    {{!-- {{prependNode}} --}}
+    <span class="euiSelectableListItem__text">
+      {{yield}}
+      {{!-- {{state}} --}}
+      {{!-- {{children}} --}}
+      {{!-- {{instruction}} --}}
+    </span>
+    {{!-- {{appendNode}} --}}
+  </span>
+</li>

packages/core/addon/utils/css-mappings/eui-selectable-list-item.ts

@@ -0,0 +1,14 @@
+export const baseClass = 'euiSelectableListItem';
+
+export const isFocusedMapping = {
+  true: `${baseClass}--isFocused`
+};
+
+const mapping: ComponentMapping = {
+  base: baseClass,
+  properties: {
+    isFocused: isFocusedMapping
+  }
+};
+
+export default mapping;

packages/core/addon/utils/css-mappings/index.ts

@@ -54,6 +54,7 @@ import EuiProgressData from './eui-progress-data';
 import EuiRangeHighlight from './eui-range-highlight';
 import EuiRangeInput from './eui-range-input';
 import EuiRangeLevels from './eui-range-levels';
+import EuiSelectableListItem from './eui-selectable-list-item';
 import EuiSpacer from './eui-spacer';
 import EuiStat from './eui-stat';
 import EuiStepNumber from './eui-step-number';
@@ -123,6 +124,7 @@ const mapping: Mapping = {
   EuiRangeHighlight,
   EuiRangeInput,
   EuiRangeLevels,
+  EuiSelectableListItem,
   EuiSpacer,
   EuiStat,
   EuiStepNumber,

packages/core/app/components/eui-selectable-list-item/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-selectable-list-item';