Skip to content
Permalink
Browse files

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
  • Loading branch information...
brandonferrua committed Mar 16, 2018
1 parent 46d5eba commit c05738f13cf086d9fb1c2ed5ab6ab0361e9af0b4
@@ -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`.
@@ -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>
);
@@ -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,
@@ -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',

0 comments on commit c05738f

Please sign in to comment.
You can’t perform that action at this time.