docs(Dropdown): fix examples and update messages (Semantic-Org#1380)

* fix(Icon): add left dropdown name * docs(Dropdown): fix examples and update messages
harel · Feb 25, 2017 · 10f5547 · 10f5547
1 parent b75a876
commit 10f5547
Show file tree

Hide file tree

Showing 30 changed files with 188 additions and 146 deletions.
diff --git a/docs/app/Components/ComponentDoc/ContributionPrompt.js b/docs/app/Components/ComponentDoc/ContributionPrompt.js
@@ -5,16 +5,17 @@ import { Message, Icon } from 'src'
 
 const ContributionPrompt = ({ children }) => (
   <Message info icon>
-    <Icon name='search' />
+    <Icon name='bullhorn' />
     <Message.Content>
-      {children}<br />
-
-      If there's no{' '}
-      <a href={`${repoURL}/pulls` }>pull request</a>{' '}
-      open for this, you should{' '}
-      <a href={`${repoURL}/blob/master/.github/CONTRIBUTING.md` }>
-        contribute
-      </a>!
+      <p>{children}</p>
+      <p>
+        If there's no{' '}
+        <a href={`${repoURL}/pulls` }>pull request</a>{' '}
+        open for this, you should{' '}
+        <a href={`${repoURL}/blob/master/.github/CONTRIBUTING.md` }>
+          contribute
+        </a>!
+      </p>
     </Message.Content>
   </Message>
 )

diff --git a/docs/app/Examples/modules/Dropdown/Content/DropdownExampleDivider.js b/docs/app/Examples/modules/Dropdown/Content/DropdownExampleDivider.js
@@ -2,8 +2,7 @@ import React from 'react'
 import { Dropdown } from 'semantic-ui-react'
 
 const DropdownExampleDivider = () => (
-  <Dropdown text='Filter' floating labeled button className='icon'>
-    {/* <i class="filter icon"></i> */}
+  <Dropdown text='Filter' icon='filter' floating labeled button className='icon'>
     <Dropdown.Menu>
       <Dropdown.Header icon='tags' content='Filter by tag' />
       <Dropdown.Divider />

diff --git a/docs/app/Examples/modules/Dropdown/Content/DropdownExampleFloatedContent.js b/docs/app/Examples/modules/Dropdown/Content/DropdownExampleFloatedContent.js
@@ -2,8 +2,7 @@ import React from 'react'
 import { Dropdown, Icon } from 'semantic-ui-react'
 
 const DropdownExampleFloatedContent = () => (
-  <Dropdown text='Filter' floating labeled button className='icon'>
-    {/* <i class="filter icon"></i> */}
+  <Dropdown text='Filter' icon='filter' floating labeled button className='icon'>
     <Dropdown.Menu>
       <Dropdown.Header icon='tags' content='Filter by tag' />
       <Dropdown.Divider />

diff --git a/docs/app/Examples/modules/Dropdown/Content/DropdownExampleHeader.js b/docs/app/Examples/modules/Dropdown/Content/DropdownExampleHeader.js
@@ -2,8 +2,7 @@ import React from 'react'
 import { Dropdown } from 'semantic-ui-react'
 
 const DropdownExampleHeader = () => (
-  <Dropdown text='Filter' floating labeled button className='icon'>
-    {/* <i class="filter icon"></i> */}
+  <Dropdown text='Filter' icon='filter' floating labeled button className='icon'>
     <Dropdown.Menu>
       <Dropdown.Header icon='tags' content='Filter by tag' />
       <Dropdown.Item>Important</Dropdown.Item>

diff --git a/docs/app/Examples/modules/Dropdown/Content/DropdownExampleIcon.js b/docs/app/Examples/modules/Dropdown/Content/DropdownExampleIcon.js
@@ -2,8 +2,7 @@ import React from 'react'
 import { Dropdown } from 'semantic-ui-react'
 
 const DropdownExampleIcon = () => (
-  <Dropdown text='Filter' floating labeled button className='icon'>
-    {/* <i class="filter icon"></i> */}
+  <Dropdown text='Filter' icon='filter' floating labeled button className='icon'>
     <Dropdown.Menu>
       <Dropdown.Header icon='tags' content='Filter by tag' />
       <Dropdown.Divider />

diff --git a/docs/app/Examples/modules/Dropdown/Content/DropdownExampleImage.js b/docs/app/Examples/modules/Dropdown/Content/DropdownExampleImage.js
@@ -4,8 +4,7 @@ import { Dropdown } from 'semantic-ui-react'
 import { friendOptions } from '../common'
 
 const DropdownExampleImage = () => (
-  <Dropdown text='Add user' floating labeled button className='icon'>
-    {/* <i class="add user icon"></i> */}
+  <Dropdown text='Add user' icon='add user' floating labeled button className='icon'>
     <Dropdown.Menu>
       <Dropdown.Header content='People You Might Know' />
       {friendOptions.map((option) => <Dropdown.Item key={option.value} {...option} />)}

diff --git a/docs/app/Examples/modules/Dropdown/Content/DropdownExampleInput.js b/docs/app/Examples/modules/Dropdown/Content/DropdownExampleInput.js
@@ -2,8 +2,7 @@ import React from 'react'
 import { Dropdown, Input } from 'semantic-ui-react'
 
 const DropdownExampleInput = () => (
-  <Dropdown text='Filter' floating labeled button className='icon'>
-    {/* <i class="filter icon"></i> */}
+  <Dropdown text='Filter' icon='filter' floating labeled button className='icon'>
     <Dropdown.Menu>
       <Dropdown.Header content='Search Issues' />
       <Input icon='search' iconPosition='left' name='search' />

diff --git a/docs/app/Examples/modules/Dropdown/Content/DropdownExampleLabel.js b/docs/app/Examples/modules/Dropdown/Content/DropdownExampleLabel.js
@@ -2,8 +2,7 @@ import React from 'react'
 import { Dropdown } from 'semantic-ui-react'
 
 const DropdownExampleLabel = () => (
-  <Dropdown text='Filter' floating labeled button className='icon'>
-    {/* <i class="filter icon"></i> */}
+  <Dropdown text='Filter' icon='filter' floating labeled button className='icon'>
     <Dropdown.Menu>
       <Dropdown.Header icon='tags' content='Filter by tag' />
       <Dropdown.Divider />

diff --git a/docs/app/Examples/modules/Dropdown/Content/DropdownExampleMessage.js b/docs/app/Examples/modules/Dropdown/Content/DropdownExampleMessage.js
@@ -2,8 +2,7 @@ import React from 'react'
 import { Dropdown, Message } from 'semantic-ui-react'
 
 const DropdownExampleMessage = () => (
-  <Dropdown text='Login' floating labeled button className='icon'>
-    {/* <i class="filter icon"></i> */}
+  <Dropdown text='Login' icon='filter' floating labeled button className='icon'>
     <Dropdown.Menu>
       <Message error header='Error' content='You must log-in to see all categories' />
     </Dropdown.Menu>

diff --git a/docs/app/Examples/modules/Dropdown/Content/index.js b/docs/app/Examples/modules/Dropdown/Content/index.js
@@ -9,52 +9,92 @@ const DropdownContentExamples = () => (
       title='Header'
       description='A dropdown menu can contain a header.'
       examplePath='modules/Dropdown/Content/DropdownExampleHeader'
-    />
+    >
+      <ContributionPrompt>
+        Dropdown state is not fully managed when using the subcomponent API.
+        The shorthand props API fully manages state but needs to be extended to support the markup shown here.
+      </ContributionPrompt>
+    </ComponentExample>
     <ComponentExample
       title='Divider'
       description='A dropdown menu can contain dividers to separate related content.'
       examplePath='modules/Dropdown/Content/DropdownExampleDivider'
-    />
+    >
+      <ContributionPrompt>
+        Dropdown state is not fully managed when using the subcomponent API.
+        The shorthand props API fully manages state but needs to be extended to support the markup shown here.
+      </ContributionPrompt>
+    </ComponentExample>
     <ComponentExample
       title='Icon'
       description='A dropdown menu can contain an icon.'
       examplePath='modules/Dropdown/Content/DropdownExampleIcon'
-    />
+    >
+      <ContributionPrompt>
+        Dropdown state is not fully managed when using the subcomponent API.
+        The shorthand props API fully manages state but needs to be extended to support the markup shown here.
+      </ContributionPrompt>
+    </ComponentExample>
     <ComponentExample
       title='Description'
       description='A dropdown menu can contain a description.'
       examplePath='modules/Dropdown/Content/DropdownExampleDescription'
-    />
+    >
+      <ContributionPrompt>
+        Dropdown state is not fully managed when using the subcomponent API.
+        The shorthand props API fully manages state but needs to be extended to support the markup shown here.
+      </ContributionPrompt>
+    </ComponentExample>
     <ComponentExample
       title='Label'
       description='A dropdown menu can contain a label.'
       examplePath='modules/Dropdown/Content/DropdownExampleLabel'
-    />
+    >
+      <ContributionPrompt>
+        Dropdown state is not fully managed when using the subcomponent API.
+        The shorthand props API fully manages state but needs to be extended to support the markup shown here.
+      </ContributionPrompt>
+    </ComponentExample>
     <ComponentExample
       title='Message'
       description='A dropdown menu can contain a message.'
       examplePath='modules/Dropdown/Content/DropdownExampleMessage'
-    />
+    >
+      <ContributionPrompt>
+        Dropdown state is not fully managed when using the subcomponent API.
+        The shorthand props API fully manages state but needs to be extended to support the markup shown here.
+      </ContributionPrompt>
+    </ComponentExample>
     <ComponentExample
       title='Floated Content'
       description='A dropdown menu can contain floated content.'
       examplePath='modules/Dropdown/Content/DropdownExampleFloatedContent'
-    />
+    >
+      <ContributionPrompt>
+        Dropdown state is not fully managed when using the subcomponent API.
+        The shorthand props API fully manages state but needs to be extended to support the markup shown here.
+      </ContributionPrompt>
+    </ComponentExample>
     <ComponentExample
       title='Input'
       description='A dropdown menu can contain an input.'
       examplePath='modules/Dropdown/Content/DropdownExampleInput'
     >
       <ContributionPrompt>
-        The example below shows the desired markup but is not functional.
-        Needs to be defined via shorthand, which is not yet possible.
+        Dropdown state is not fully managed when using the subcomponent API.
+        The shorthand props API fully manages state but needs to be extended to support the markup shown here.
       </ContributionPrompt>
     </ComponentExample>
     <ComponentExample
       title='Image'
       description='A dropdown menu can contain an image.'
       examplePath='modules/Dropdown/Content/DropdownExampleImage'
-    />
+    >
+      <ContributionPrompt>
+        Dropdown state is not fully managed when using the subcomponent API.
+        The shorthand props API fully manages state but needs to be extended to support the markup shown here.
+      </ContributionPrompt>
+    </ComponentExample>
   </ExampleSection>
 )
 

diff --git a/docs/app/Examples/modules/Dropdown/States/DropdownExampleActive.js b/docs/app/Examples/modules/Dropdown/States/DropdownExampleActive.js
@@ -1,13 +1,13 @@
 import React from 'react'
 import { Dropdown } from 'semantic-ui-react'
 
+const options = [
+  { key: 1, text: 'Choice 1', value: 1 },
+  { key: 2, text: 'Choice 2', value: 2 },
+]
+
 const DropdownExampleActive = () => (
-  <Dropdown text='Dropdown' open>
-    <Dropdown.Menu>
-      <Dropdown.Item>Choice 1</Dropdown.Item>
-      <Dropdown.Item>Choice 2</Dropdown.Item>
-    </Dropdown.Menu>
-  </Dropdown>
+  <Dropdown text='Dropdown' options={options} open />
 )
 
 export default DropdownExampleActive
diff --git a/docs/app/Examples/modules/Dropdown/States/DropdownExampleDisabled.js b/docs/app/Examples/modules/Dropdown/States/DropdownExampleDisabled.js
@@ -1,13 +1,13 @@
 import React from 'react'
 import { Dropdown } from 'semantic-ui-react'
 
+const options = [
+  { key: 1, text: 'Choice 1', value: 1 },
+  { key: 2, text: 'Choice 2', value: 2 },
+]
+
 const DropdownExampleDisabled = () => (
-  <Dropdown text='Dropdown' disabled>
-    <Dropdown.Menu>
-      <Dropdown.Item>Choice 1</Dropdown.Item>
-      <Dropdown.Item>Choice 2</Dropdown.Item>
-    </Dropdown.Menu>
-  </Dropdown>
+  <Dropdown text='Dropdown' options={options} disabled />
 )
 
 export default DropdownExampleDisabled
diff --git a/docs/app/Examples/modules/Dropdown/States/DropdownExampleDisabledItem.js b/docs/app/Examples/modules/Dropdown/States/DropdownExampleDisabledItem.js
@@ -1,14 +1,14 @@
 import React from 'react'
 import { Dropdown } from 'semantic-ui-react'
 
-const DropdownExampleActive = () => (
-  <Dropdown text='Dropdown'>
-    <Dropdown.Menu>
-      <Dropdown.Item>Choice 1</Dropdown.Item>
-      <Dropdown.Item disabled>Choice 2</Dropdown.Item>
-      <Dropdown.Item>Choice 3</Dropdown.Item>
-    </Dropdown.Menu>
-  </Dropdown>
+const options = [
+  { key: 1, text: 'Choice 1', value: 1 },
+  { key: 2, text: 'Choice 2', value: 2, disabled: true },
+  { key: 3, text: 'Choice 3', value: 3 },
+]
+
+const DropdownExampleDisabledItem = () => (
+  <Dropdown text='Dropdown' options={options} open />
 )
 
-export default DropdownExampleActive
+export default DropdownExampleDisabledItem
diff --git a/docs/app/Examples/modules/Dropdown/States/DropdownExampleError.js b/docs/app/Examples/modules/Dropdown/States/DropdownExampleError.js
@@ -1,13 +1,13 @@
 import React from 'react'
 import { Dropdown } from 'semantic-ui-react'
 
+const options = [
+  { key: 1, text: 'Choice 1', value: 1 },
+  { key: 2, text: 'Choice 2', value: 2 },
+]
+
 const DropdownExampleError = () => (
-  <Dropdown text='Dropdown' error>
-    <Dropdown.Menu>
-      <Dropdown.Item>Choice 1</Dropdown.Item>
-      <Dropdown.Item>Choice 2</Dropdown.Item>
-    </Dropdown.Menu>
-  </Dropdown>
+  <Dropdown text='Dropdown' options={options} error />
 )
 
 export default DropdownExampleError
diff --git a/docs/app/Examples/modules/Dropdown/States/DropdownExampleLoading.js b/docs/app/Examples/modules/Dropdown/States/DropdownExampleLoading.js
@@ -1,13 +1,13 @@
 import React from 'react'
 import { Dropdown } from 'semantic-ui-react'
 
+const options = [
+  { key: 1, text: 'Choice 1', value: 1 },
+  { key: 2, text: 'Choice 2', value: 2 },
+]
+
 const DropdownExampleLoading = () => (
-  <Dropdown text='Dropdown' loading>
-    <Dropdown.Menu>
-      <Dropdown.Item>Choice 1</Dropdown.Item>
-      <Dropdown.Item>Choice 2</Dropdown.Item>
-    </Dropdown.Menu>
-  </Dropdown>
+  <Dropdown text='Dropdown' options={options} loading />
 )
 
 export default DropdownExampleLoading
diff --git a/docs/app/Examples/modules/Dropdown/Types/DropdownExampleDropdown.js b/docs/app/Examples/modules/Dropdown/Types/DropdownExampleDropdown.js
@@ -17,8 +17,7 @@ const DropdownExampleDropdown = () => (
       <Dropdown.Divider />
       <Dropdown.Item text='Download As...' />
       <Dropdown.Item text='Publish To Web' />
-      {/* item text can also be defined as children */}
-      <Dropdown.Item>E-mail Collaborators</Dropdown.Item>
+      <Dropdown.Item text='E-mail Collaborators' />
     </Dropdown.Menu>
   </Dropdown>
 )

diff --git a/docs/app/Examples/modules/Dropdown/Types/DropdownExampleFloating.js b/docs/app/Examples/modules/Dropdown/Types/DropdownExampleFloating.js
@@ -1,16 +1,16 @@
 import React from 'react'
 import { Button, Dropdown } from 'semantic-ui-react'
 
+const options = [
+  { key: 'edit', icon: 'edit', text: 'Edit Post', value: 'edit' },
+  { key: 'delete', icon: 'delete', text: 'Remove Post', value: 'delete' },
+  { key: 'hide', icon: 'hide', text: 'Hide Post', value: 'hide' },
+]
+
 const DropdownExampleFloating = () => (
   <Button.Group color='teal'>
     <Button>Save</Button>
-    <Dropdown floating button className='icon'>
-      <Dropdown.Menu>
-        <Dropdown.Item icon='edit' text='Edit Post' />
-        <Dropdown.Item icon='delete' text='Remove Post' />
-        <Dropdown.Item icon='hide' text='Hide Post' />
-      </Dropdown.Menu>
-    </Dropdown>
+    <Dropdown options={options} floating button className='icon' />
   </Button.Group>
 )
 

diff --git a/docs/app/Examples/modules/Dropdown/Types/DropdownExampleMultipleSearchInMenu.js b/docs/app/Examples/modules/Dropdown/Types/DropdownExampleMultipleSearchInMenu.js
@@ -13,8 +13,7 @@ import { tagOptions } from '../common'
 
 
 const DropdownExampleMultipleSearchInMenu = () => (
-  <Dropdown text='Filter Posts' multiple>
-    {/* <i class="filter icon"></i> */}
+  <Dropdown text='Filter Posts' multiple icon='filter'>
     <Dropdown.Menu>
       <Input icon='search' iconPosition='left' className='search' />
       <Dropdown.Divider />

diff --git a/docs/app/Examples/modules/Dropdown/Types/DropdownExamplePointing.js b/docs/app/Examples/modules/Dropdown/Types/DropdownExamplePointing.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown, Menu } from 'semantic-ui-react'
+import { Dropdown, Icon, Menu } from 'semantic-ui-react'
 
 const DropdownExamplePointing = () => (
   <Menu>
@@ -10,7 +10,7 @@ const DropdownExamplePointing = () => (
       <Dropdown.Menu>
         <Dropdown.Header>Categories</Dropdown.Header>
         <Dropdown.Item>
-          <i className='dropdown icon'></i>
+          <Icon name='dropdown' />
           <span className='text'>Clothing</span>
           <Dropdown.Menu>
             <Dropdown.Header>Mens</Dropdown.Header>

diff --git a/docs/app/Examples/modules/Dropdown/Types/DropdownExampleSearchInMenu.js b/docs/app/Examples/modules/Dropdown/Types/DropdownExampleSearchInMenu.js
@@ -12,8 +12,7 @@ import { tagOptions } from '../common'
 // ]
 
 const DropdownExampleSearchInMenu = () => (
-  <Dropdown text='Filter Posts' floating labeled button className='icon'>
-    {/* <i class="filter icon"></i> */}
+  <Dropdown text='Filter Posts' icon='filter' floating labeled button className='icon'>
     <Dropdown.Menu>
       <Input icon='search' iconPosition='left' className='search' />
       <Dropdown.Divider />