Skip to content
Permalink
Browse files

feat(input): add counter example (#3096)

  • Loading branch information...
engai committed Feb 23, 2018
1 parent 245492e commit 0b20b851cf1a728b79307110f7cd46bedcf7ab3b
Showing with 78 additions and 0 deletions.
  1. +46 −0 ui/components/input/base/_index.scss
  2. +32 −0 ui/components/input/base/example.jsx
@@ -61,6 +61,28 @@
}
}

/**
* @summary Modifier for number input with increment and decrement buttons
*
* @selector .slds-input_counter
* @restrict .slds-input, input
* @modifier
*/
&_counter {
text-align: center;
padding: 0 $spacing-xx-large;

&[type='number'] {
appearance: textfield;
}

&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
appearance: none;
margin: 0;
}
}

/**
* Used to apply an input size to another element thats a non input
* Because sometimes I need elements the same height as inputs
@@ -287,3 +309,27 @@
color: $color-text-error;
}
}

/**
* @summary Positions decrement button within counter input field
*
* @selector .slds-input__button_decrement
* @restrict button
*/
.slds-input__button_decrement {
position: absolute;
bottom: 0.25rem;
left: 0.75rem;
}

/**
* @summary Positions increment button within counter input field
*
* @selector .slds-input__button_increment
* @restrict button
*/
.slds-input__button_increment {
position: absolute;
bottom: 0.25rem;
right: 0.75rem;
}
@@ -3,6 +3,7 @@

import React from 'react';
import SvgIcon from '../../../shared/svg-icon';
import ButtonIcon from '../../button-icons/';
import classNames from 'classnames';
import { SpinnerContainer, Spinner } from '../../spinners/base/example';

@@ -369,5 +370,36 @@ export let examples = [
</div>
</div>
)
},
{
id: 'counter',
label: 'Counter',
element: (
<FormElement className="slds-text-align_center">
<ButtonIcon
className="slds-button_icon-small slds-input__button_decrement"
symbol="error"
assistiveText={'Decrement counter'}
title={'Decrement counter'}
/>
<FormElementLabel id="user-count-01" className="slds-m-right_none">
Input Label
</FormElementLabel>
<FormElementControl>
<Input
className="slds-input_counter"
id="user-count-01"
type="number"
placeholder={1}
/>
</FormElementControl>
<ButtonIcon
className="slds-button_icon-small slds-input__button_increment"
symbol="new"
assistiveText={'Increment counter'}
title={'Increment counter'}
/>
</FormElement>
)
}
];

0 comments on commit 0b20b85

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