mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 17:40:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

Reused dropdown-btn styles in sorting dropdown

Browse source
This commit is contained in:
Alejandro Celaya 2020-12-25 10:54:49 +01:00
parent 90d4fe72db
commit 16f4f7eac8
4 changed files with 17 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/utils/Dropdown.scss
View file

@ -1,18 +1,18 @@
@import '../utils/mixins/vertical-align'; @import '../utils/mixins/vertical-align';
.dropdown__btn.dropdown__btn, .dropdown-btn__toggle.dropdown-btn__toggle,
.dropdown__btn.dropdown__btn:not(:disabled):not(.disabled).active, .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled).active,
.dropdown__btn.dropdown__btn:not(:disabled):not(.disabled):active, .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):active,
.dropdown__btn.dropdown__btn:not(:disabled):not(.disabled):focus, .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):focus,
.dropdown__btn.dropdown__btn:not(:disabled):not(.disabled):hover, .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):hover,
.show > .dropdown__btn.dropdown__btn.dropdown-toggle { .show > .dropdown-btn__toggle.dropdown-btn__toggle.dropdown-toggle {
color: #6c757d; color: #6c757d;
background-color: white; background-color: white;
text-align: left; text-align: left;
border-color: rgba(0, 0, 0, .125); border-color: rgba(0, 0, 0, .125);
} }
.dropdown__btn.dropdown__btn:after { .dropdown-btn__toggle.dropdown-btn__toggle:after {
@include vertical-align(); @include vertical-align();
right: .75rem; right: .75rem;

2
src/utils/DropdownBtn.tsx
View file

@ -11,7 +11,7 @@ export interface DropdownBtnProps {
export const DropdownBtn: FC<DropdownBtnProps> = ({ text, disabled = false, className = '', children }) => { export const DropdownBtn: FC<DropdownBtnProps> = ({ text, disabled = false, className = '', children }) => {
const [ isOpen, toggle ] = useToggle(); const [ isOpen, toggle ] = useToggle();
const toggleClasses = `dropdown__btn btn-block ${className}`; const toggleClasses = `dropdown-btn__toggle btn-block ${className}`;
return ( return (
<Dropdown isOpen={isOpen} toggle={toggle} disabled={disabled}> <Dropdown isOpen={isOpen} toggle={toggle} disabled={disabled}>

8
src/utils/SortingDropdown.tsx
View file

@ -28,10 +28,12 @@ export default function SortingDropdown<T extends string = string>(
<UncontrolledDropdown> <UncontrolledDropdown>
<DropdownToggle <DropdownToggle
caret caret
color={isButton ? 'secondary' : 'link'} color={isButton ? 'primary' : 'link'}
className={classNames({ 'btn-block': isButton, 'btn-sm p-0': !isButton })} className={classNames({ 'dropdown-btn__toggle btn-block': isButton, 'btn-sm p-0': !isButton })}
> >
Order by {!isButton && <>Order by</>}
{isButton && !orderField && <>Order by...</>}
{isButton && orderField && <>Order by: {items[orderField]} - {orderDir}</>}
</DropdownToggle> </DropdownToggle>
<DropdownMenu <DropdownMenu
right={right} right={right}

8
test/utils/DropdownBtn.test.tsx
View file

@ -28,10 +28,10 @@ describe('<DropdownBtn />', () => {
}); });
it.each([ it.each([
[ undefined, 'dropdown__btn btn-block' ], [ undefined, 'dropdown-btn__toggle btn-block' ],
[ '', 'dropdown__btn btn-block' ], [ '', 'dropdown-btn__toggle btn-block' ],
[ 'foo', 'dropdown__btn btn-block foo' ], [ 'foo', 'dropdown-btn__toggle btn-block foo' ],
[ 'bar', 'dropdown__btn btn-block bar' ], [ 'bar', 'dropdown-btn__toggle btn-block bar' ],
])('includes provided classes', (className, expectedClasses) => { ])('includes provided classes', (className, expectedClasses) => {
const wrapper = createWrapper({ text: '', className }); const wrapper = createWrapper({ text: '', className });
const toggle = wrapper.find(DropdownToggle); const toggle = wrapper.find(DropdownToggle);