feat(Label): add prompt prop

docs/src/examples/elements/Label/Types/LabelExamplePrompt.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Form, Input, Label } from 'semantic-ui-react'
+
+const LabelExamplePrompt = () => (
+  <Form>
+    <Form.Field>
+      <Input placeholder='First name' />
+      <Label pointing prompt>
+        Please enter a value
+      </Label>
+    </Form.Field>
+  </Form>
+)
+
+export default LabelExamplePrompt

docs/src/examples/elements/Label/Types/index.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Message } from 'semantic-ui-react'
 
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
@@ -7,7 +8,7 @@ const LabelTypes = () => (
   <ExampleSection title='Types'>
     <ComponentExample
       title='Label'
-      description='A label'
+      description='A label.'
       examplePath='elements/Label/Types/LabelExampleBasic'
     />
     <ComponentExample examplePath='elements/Label/Types/LabelExampleImage' />
@@ -16,45 +17,56 @@ const LabelTypes = () => (
 
     <ComponentExample
       title='Pointing'
-      description='A label can point to content next to it'
+      description='A label can point to content next to it.'
       examplePath='elements/Label/Types/LabelExamplePointing'
     />
     <ComponentExample examplePath='elements/Label/Types/LabelExamplePointingColored' />
 
+    <ComponentExample
+      title='Prompt'
+      description='A label can prompt for an error in your forms.'
+      examplePath='elements/Label/Types/LabelExamplePrompt'
+    >
+      <Message compact info>
+        The <code>prompt</code> prop can be used only inside <code>Form</code>{' '}
+        component.
+      </Message>
+    </ComponentExample>
+
     <ComponentExample
       title='Corner'
-      description='A label can position itself in the corner of an element'
+      description='A label can position itself in the corner of an element.'
       examplePath='elements/Label/Types/LabelExampleCorner'
     />
 
     <ComponentExample
       title='Tag'
-      description='A label can appear as a tag'
+      description='A label can appear as a tag.'
       examplePath='elements/Label/Types/LabelExampleTag'
     />
 
     <ComponentExample
       title='Ribbon'
-      description='A label can appear as a ribbon attaching itself to an element'
+      description='A label can appear as a ribbon attaching itself to an element.'
       examplePath='elements/Label/Types/LabelExampleRibbon'
     />
     <ComponentExample examplePath='elements/Label/Types/LabelExampleRibbonImage' />
 
     <ComponentExample
       title='Attached'
-      description='A label can attach to a content segment'
+      description='A label can attach to a content segment.'
       examplePath='elements/Label/Types/LabelExampleAttached'
     />
 
     <ComponentExample
       title='Horizontal'
-      description='A horizontal label is formatted to label content along-side it horizontally'
+      description='A horizontal label is formatted to label content along-side it horizontally.'
       examplePath='elements/Label/Types/LabelExampleHorizontal'
     />
 
     <ComponentExample
       title='Floating'
-      description='A label can float above another element'
+      description='A label can float above another element.'
       examplePath='elements/Label/Types/LabelExampleFloating'
     />
   </ExampleSection>

src/elements/Label/Label.d.ts

@@ -82,6 +82,9 @@ export interface StrictLabelProps {
   /** A label can point to content next to it. */
   pointing?: boolean | 'above' | 'below' | 'left' | 'right'
 
+  /** A label can prompt for an error in your forms. */
+  prompt?: boolean
+
   /** Shorthand for Icon to appear as the last child and trigger onRemove. */
   removeIcon?: SemanticShorthandItem<IconProps>
 

src/elements/Label/Label.js

@@ -101,6 +101,9 @@ export default class Label extends Component {
       PropTypes.oneOf(['above', 'below', 'left', 'right']),
     ]),
 
+    /** A label can prompt for an error in your forms. */
+    prompt: PropTypes.bool,
+
     /** Shorthand for Icon to appear as the last child and trigger onRemove. */
     removeIcon: customPropTypes.itemShorthand,
 
@@ -123,7 +126,7 @@ export default class Label extends Component {
     if (onClick) onClick(e, this.props)
   }
 
-  handleIconOverrides = predefinedProps => ({
+  handleIconOverrides = (predefinedProps) => ({
     onClick: (e) => {
       _.invoke(predefinedProps, 'onClick', e)
       _.invoke(this.props, 'onRemove', e, this.props)
@@ -149,6 +152,7 @@ export default class Label extends Component {
       image,
       onRemove,
       pointing,
+      prompt,
       removeIcon,
       ribbon,
       size,
@@ -172,6 +176,7 @@ export default class Label extends Component {
       useKeyOnly(floating, 'floating'),
       useKeyOnly(horizontal, 'horizontal'),
       useKeyOnly(image === true, 'image'),
+      useKeyOnly(prompt, 'prompt'),
       useKeyOnly(tag, 'tag'),
       useKeyOrValueAndKey(corner, 'corner'),
       useKeyOrValueAndKey(ribbon, 'ribbon'),
@@ -208,4 +213,4 @@ export default class Label extends Component {
   }
 }
 
-Label.create = createShorthandFactory(Label, value => ({ content: value }))
+Label.create = createShorthandFactory(Label, (value) => ({ content: value }))

test/specs/elements/Label/Label-test.js

@@ -21,7 +21,7 @@ describe('Label', () => {
     autoGenerateKey: false,
     propKey: 'detail',
     ShorthandComponent: LabelDetail,
-    mapValueToProps: val => ({ content: val }),
+    mapValueToProps: (val) => ({ content: val }),
   })
 
   common.propKeyAndValueToClassName(Label, 'attached', [
@@ -39,6 +39,7 @@ describe('Label', () => {
   common.propKeyOnlyToClassName(Label, 'empty')
   common.propKeyOnlyToClassName(Label, 'floating')
   common.propKeyOnlyToClassName(Label, 'horizontal')
+  common.propKeyOnlyToClassName(Label, 'prompt')
   common.propKeyOnlyToClassName(Label, 'tag')
 
   common.propKeyOrValueAndKeyToClassName(Label, 'corner', ['left', 'right'])
@@ -127,7 +128,7 @@ describe('Label', () => {
       const options = ['above', 'below', 'left', 'right']
       const wrapper = shallow(<Label pointing />)
 
-      options.map(className => wrapper.should.not.have.className(className))
+      options.map((className) => wrapper.should.not.have.className(className))
     })
 
     it('adds `above` as suffix', () => {