feat(spinner): Add inline spinner for combobox (#3134)

* feat(spinner): Add inline spinner for combobox * feat(spinner): Add inline spinner for combobox * feat(spinner): Update documentation
salesforce-ux · Mar 16, 2018 · c05738f · c05738f
1 parent 46d5eba
commit c05738f
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 1 deletion.
diff --git a/ui/components/combobox/docs.mdx b/ui/components/combobox/docs.mdx
@@ -114,6 +114,45 @@ To toggle visibility of the `listbox`, add the class `slds-is-open` to the `slds
 - Every `option` has `aria-selected="false"` by default
 - Disabled `option`s should have `aria-disabled="true"` applied
 
+#### Loading more options
+
+If you are dynamically loading in more items to the listbox, the very last `<li>` of the `<ul>` should receive the `role="presentation"` attribute and have the [Spinner component](/components/spinners/)  injected into it.
+
+For layout purposes, wrap the spinner in a `<div>` with the class `slds-align_absolute-center` to position the spinner in the middle of the list item, as well as `slds-p-top_medium` to provide the appropiate amount of space for the spinner to be visible.
+
+<Example title="Combobox - Loading Options">
+  <CodeView style={{maxWidth: '40rem', height: '15rem'}}>
+    <Combobox
+      id={_.uniqueId('combobox-id-')}
+      aria-controls="listbox-id-222"
+      readonly
+      value="Accounts"
+      inputIconPosition="right"
+      rightInputIcon={
+        <UtilityIcon
+          symbol="down"
+          className="slds-icon slds-icon_x-small slds-icon-text-default"
+          containerClassName="slds-input__icon slds-input__icon_right"
+          assistiveText={false}
+          title={false}
+        />
+      }
+      listbox={
+        <Listbox
+          id="listbox-id-222"
+          snapshot={Snapshot.ObjectOptions}
+          type="plain"
+          count={3}
+          visualSelection
+          loading
+        />
+      }
+      isOpen
+      hasFocus
+    />
+  </CodeView>
+</Example>
+
 ### Grouped options
 
 Options within a `listbox` can be grouped together under meaningful headings. This is useful if you wish to create separation between 2 or more sets of options within a single `listbox`.

diff --git a/ui/components/combobox/listbox/index.jsx b/ui/components/combobox/listbox/index.jsx
@@ -7,7 +7,7 @@ import classNames from 'classnames';
 import SvgIcon from '../../../shared/svg-icon';
 import { StandardIcon } from '../../icons/standard/example';
 import { UtilityIcon } from '../../icons/base/example';
-
+import { Spinner } from '../../spinners/base/example';
 /**
  * Listbox
  */
@@ -295,6 +295,7 @@ class Listbox extends Component {
       term,
       type,
       snapshot,
+      loading,
       count = 1,
       className = 'slds-dropdown_fluid'
     } = this.props;
@@ -319,6 +320,13 @@ class Listbox extends Component {
             : Object.keys(snapshot)
                 .slice(0, count)
                 .map(this.renderPlainOptions)}
+          {loading && (
+            <ListboxItem>
+              <div className="slds-align_absolute-center slds-p-top_medium">
+                <Spinner className="slds-spinner_x-small slds-spinner_inline" />
+              </div>
+            </ListboxItem>
+          )}
         </ListboxList>
       </ListboxWrapper>
     );

diff --git a/ui/components/spinners/base/_index.scss b/ui/components/spinners/base/_index.scss
@@ -43,6 +43,15 @@
   transform: translate(-50%, -50%) rotate(90deg);
 }
 
+.slds-spinner_inline {
+  position: relative;
+  top: auto;
+  left: auto;
+  right: auto;
+  bottom: auto;
+  transform: none;
+}
+
 .slds-spinner,
 .slds-spinner__dot-a,
 .slds-spinner__dot-b {
@@ -210,6 +219,10 @@
 .slds-spinner--xx-small {
   width: 0.5rem;
 
+  &.slds-spinner_inline {
+    height: 0.5rem;
+  }
+
   &.slds-spinner:before,
   &.slds-spinner:after,
   .slds-spinner__dot-a:before,
@@ -284,6 +297,10 @@
 .slds-spinner--x-small {
   width: 1rem;
 
+  &.slds-spinner_inline {
+    height: 1rem;
+  }
+
   &.slds-spinner:before,
   &.slds-spinner:after,
   .slds-spinner__dot-a:before,
@@ -358,6 +375,10 @@
 .slds-spinner--small {
   width: 1.25rem;
 
+  &.slds-spinner_inline {
+    height: 1.25rem;
+  }
+
   &.slds-spinner:before,
   &.slds-spinner:after,
   .slds-spinner__dot-a:before,
@@ -432,6 +453,10 @@
 .slds-spinner--medium {
   width: 2rem;
 
+  &.slds-spinner_inline {
+    height: 2rem;
+  }
+
   &.slds-spinner:before,
   &.slds-spinner:after,
   .slds-spinner__dot-a:before,
@@ -506,6 +531,10 @@
 .slds-spinner--large {
   width: 2.75rem;
 
+  &.slds-spinner_inline {
+    height: 2.75rem;
+  }
+
   &.slds-spinner:before,
   &.slds-spinner:after,
   .slds-spinner__dot-a:before,

diff --git a/ui/components/spinners/base/example.jsx b/ui/components/spinners/base/example.jsx
@@ -42,6 +42,17 @@ export default (
 );
 
 export let examples = [
+  {
+    id: 'inlined',
+    label: 'Inlined',
+    description:
+      'A container is not required to use the spinner. Here, it is placed on a dark background to illustrate there is nothing there. The spinner will position itself to the closest positioned parent. So if you want it to spin over a single component, the class <code>.slds-is-relative</code> can be added to the parent.',
+    element: (
+      <div className="slds-align_absolute-center" style={{ height: '4rem' }}>
+        <Spinner className="slds-spinner_medium slds-spinner_inline" />
+      </div>
+    )
+  },
   {
     id: 'without-container',
     label: 'Without Container',