Resolve #135: Added dropup on dropdown

AlgusDark · Oct 9, 2019 · 9160f21 · 9160f21
1 parent b9af827
commit 9160f21
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
@@ -13,13 +13,15 @@ export interface Dropdown<T> extends Bulma.Active, Bulma.Alignment, Bulma.Tag, R
   isActive?: boolean;
   isAlign?: 'right';
   isHoverable?: boolean;
+  isDropup?: boolean;
 }
 
-export function Dropdown({ tag = 'div', isHoverable, ...props }: Dropdown<HTMLElement>) {
+export function Dropdown({ tag = 'div', isHoverable, isDropup, ...props }: Dropdown<HTMLElement>) {
     const className = classNames(
         'dropdown',
         {
             'is-hoverable': isHoverable,
+            'is-up': isDropup,
             ...combineModifiers(props, getActiveModifiers, getAlignmentModifiers),
         },
         props.className,

diff --git a/test/components/Dropdown/Dropdown.test.tsx b/test/components/Dropdown/Dropdown.test.tsx
@@ -22,4 +22,11 @@ describe('Dropdown', () => {
         expect(component.hasClass('is-hoverable')).toBe(true);
         expect(component.hasClass('is-right')).toBe(true);
     });
+
+    it('should make dropdown dropup', () => {
+        const component = shallow(<Dropdown isDropup isAlign="right" isHoverable>My Dropdown</Dropdown>);
+        expect(component.hasClass('dropdown')).toBe(true);
+        expect(component.hasClass('is-hoverable')).toBe(true);
+        expect(component.hasClass('is-up')).toBe(true);
+    });
 });