mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 09:30:31 +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';
.dropdown__btn.dropdown__btn,
.dropdown__btn.dropdown__btn:not(:disabled):not(.disabled).active,
.dropdown__btn.dropdown__btn:not(:disabled):not(.disabled):active,
.dropdown__btn.dropdown__btn:not(:disabled):not(.disabled):focus,
.dropdown__btn.dropdown__btn:not(:disabled):not(.disabled):hover,
.show > .dropdown__btn.dropdown__btn.dropdown-toggle {
.dropdown-btn__toggle.dropdown-btn__toggle,
.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled).active,
.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):active,
.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):focus,
.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):hover,
.show > .dropdown-btn__toggle.dropdown-btn__toggle.dropdown-toggle {
color: #6c757d;
background-color: white;
text-align: left;
border-color: rgba(0, 0, 0, .125);
}
.dropdown__btn.dropdown__btn:after {
.dropdown-btn__toggle.dropdown-btn__toggle:after {
@include vertical-align();
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 }) => {
const [ isOpen, toggle ] = useToggle();
const toggleClasses = `dropdown__btn btn-block ${className}`;
const toggleClasses = `dropdown-btn__toggle btn-block ${className}`;
return (
<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>
<DropdownToggle
caret
color={isButton ? 'secondary' : 'link'}
className={classNames({ 'btn-block': isButton, 'btn-sm p-0': !isButton })}
color={isButton ? 'primary' : 'link'}
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>
<DropdownMenu
right={right}

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

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