feat(Dropdown): add upward prop (#1603)

Semantic-Org · Apr 21, 2017 · 8651376 · 8651376
1 parent 3806073
commit 8651376
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 5 deletions.
diff --git a/docs/app/Examples/modules/Dropdown/Usage/DropdownExampleUpward.js b/docs/app/Examples/modules/Dropdown/Usage/DropdownExampleUpward.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import { Dropdown } from 'semantic-ui-react'
+
+const options = [
+  { key: 'new', text: 'New', value: 'new' },
+  { key: 'save', text: 'Save as...', value: 'save' },
+  { key: 'edit', text: 'Edit', value: 'edit' },
+]
+
+const DropdownExampleUpward = () => (
+  <Dropdown upward floating options={options} text='File' />
+)
+
+export default DropdownExampleUpward
diff --git a/docs/app/Examples/modules/Dropdown/Usage/DropdownExampleUpwardInline.js b/docs/app/Examples/modules/Dropdown/Usage/DropdownExampleUpwardInline.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import { Dropdown } from 'semantic-ui-react'
+
+const options = [
+  { key: 's', text: 'small', value: 's' },
+  { key: 'm', text: 'medium', value: 'm' },
+  { key: 'l', text: 'large', value: 'l' },
+]
+
+const DropdownExampleUpwardInline = () => (
+  <div>
+    I'd like a size{' '}
+    <Dropdown upward floating inline options={options} defaultValue='m' />
+    {' '}T-shirt, please.
+  </div>
+)
+
+export default DropdownExampleUpwardInline
diff --git a/docs/app/Examples/modules/Dropdown/Usage/DropdownExampleUpwardSelection.js b/docs/app/Examples/modules/Dropdown/Usage/DropdownExampleUpwardSelection.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import { Dropdown } from 'semantic-ui-react'
+
+const options = [
+  { key: 1, text: 'One', value: 1 },
+  { key: 2, text: 'Two', value: 2 },
+  { key: 3, text: 'Three', value: 3 },
+]
+
+const DropdownExampleUpwardSelection = () => (
+  <Dropdown upward search selection options={options} placeholder='Choose an option' />
+)
+
+export default DropdownExampleUpwardSelection
diff --git a/docs/app/Examples/modules/Dropdown/Usage/index.js b/docs/app/Examples/modules/Dropdown/Usage/index.js
@@ -76,6 +76,17 @@ const DropdownUsageExamples = () => (
       description='A dropdown item can be rendered differently inside the menu.'
       examplePath='modules/Dropdown/Usage/DropdownExampleItemContent'
     />
+    <ComponentExample
+      title='Upward'
+      description='A dropdown can open its menu upward.'
+      examplePath='modules/Dropdown/Usage/DropdownExampleUpwardSelection'
+    />
+    <ComponentExample
+      examplePath='modules/Dropdown/Usage/DropdownExampleUpwardInline'
+    />
+    <ComponentExample
+      examplePath='modules/Dropdown/Usage/DropdownExampleUpward'
+    />
 
   </ExampleSection>
 )

diff --git a/src/modules/Dropdown/Dropdown.d.ts b/src/modules/Dropdown/Dropdown.d.ts
@@ -56,7 +56,7 @@ export interface DropdownProps {
   defaultSelectedLabel?: number | string;
 
   /** Initial value or value array if multiple. */
-  defaultValue?: string | number | Array<number | string >;
+  defaultValue?: string | number | Array<number | string>;
 
   /** A disabled dropdown menu or item does not allow user interaction. */
   disabled?: boolean;
@@ -232,6 +232,9 @@ export interface DropdownProps {
 
   /** Current value or value array if multiple. Creates a controlled component. */
   value?: number | string | Array<number | string>;
+
+  /** A dropdown can open upward. */
+  upward: boolean;
 }
 
 interface DropdownComponent extends React.ComponentClass<DropdownProps> {

diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
@@ -312,6 +312,9 @@ export default class Dropdown extends Component {
       PropTypes.node,
     ]),
 
+    /** A dropdown can open upward. */
+    upward: PropTypes.bool,
+
     /** Current value or value array if multiple. Creates a controlled component. */
     value: PropTypes.oneOfType([
       PropTypes.string,
@@ -1193,23 +1196,24 @@ export default class Dropdown extends Component {
       button,
       className,
       compact,
+      disabled,
+      error,
       fluid,
       floating,
       icon,
       inline,
       item,
       labeled,
+      loading,
       multiple,
       pointing,
       search,
       selection,
-      simple,
-      loading,
-      error,
-      disabled,
       scrolling,
+      simple,
       tabIndex,
       trigger,
+      upward,
     } = this.props
 
     // Classes
@@ -1237,6 +1241,7 @@ export default class Dropdown extends Component {
       useKeyOnly(selection, 'selection'),
       useKeyOnly(simple, 'simple'),
       useKeyOnly(scrolling, 'scrolling'),
+      useKeyOnly(upward, 'upward'),
 
       useKeyOrValueAndKey(pointing, 'pointing'),
       className,

diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js
@@ -95,6 +95,7 @@ describe('Dropdown', () => {
   common.propKeyOnlyToClassName(Dropdown, 'selection')
   common.propKeyOnlyToClassName(Dropdown, 'simple')
   common.propKeyOnlyToClassName(Dropdown, 'scrolling')
+  common.propKeyOnlyToClassName(Dropdown, 'upward')
 
   common.propKeyOrValueAndKeyToClassName(Dropdown, 'pointing', [
     'left', 'right', 'top', 'top left', 'top right', 'bottom', 'bottom left', 'bottom right',