superdesk-ui-framework 3.0.1-beta.2 → 3.0.1-beta.22

package/dist/react/DurationInput.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import { Input, Select, CheckGroup, Checkbox, PropsList, Prop } from '../../../app-typescript';
+import { DurationInput } from '../../../app-typescript/components/DurationInput';
+import { getDurationString } from '../../../app-typescript/components/DurationInput';
+
+interface IState {
+    inlineLabel: boolean;
+    required: boolean;
+    disabled: boolean;
+    invalid: boolean;
+    value: any
+}
+
+export default class DurationInputDoc extends React.Component<{}, IState> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            inlineLabel: false,
+            required: true,
+            disabled: false,
+            invalid: false,
+            value: 3661,
+        }
+    }
+    
+    render() {
+        
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>Duration Input</h2>
+                <Markup.ReactMarkupCodePreview>{`
+                    <DurationInput
+                    label='Label'
+                    info='info message'
+                    disabled={this.state.disabled}
+                    required={this.state.required}
+                    invalid={this.state.invalid}
+                    inlineLabel={this.state.inlineLabel}
+                    onChange={(e) => {
+                        console.log(e)
+                    }}
+                    />
+                `}
+                </Markup.ReactMarkupCodePreview>
+                <p className='docs-page__paragraph'></p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <div className='form__row'>
+                                <CheckGroup>
+                                    <Checkbox checked={this.state.required} label={{text:'Required input'}} onChange={(value) => {this.setState({required: value})}} />
+                                    <Checkbox checked={this.state.disabled} label={{text:'Disabled input'}} onChange={(value) => {this.setState({disabled: value})}} />
+                                    <Checkbox checked={this.state.invalid} label={{text:'Invalid input'}} onChange={(value) => {this.setState({invalid: value})}} />
+                                    <Checkbox checked={this.state.inlineLabel} label={{text:'Label positioned inline'}} onChange={(value) => {this.setState({inlineLabel: value})}} />
+                                </CheckGroup>
+                            </div>
+
+                            <div className='form__row'>
+                                <DurationInput
+                                label='Label'
+                                info='info message'
+                                disabled={this.state.disabled}
+                                required={this.state.required}
+                                invalid={this.state.invalid}
+                                inlineLabel={this.state.inlineLabel}
+                                seconds={this.state.value}
+                                onChange={(e) => {
+                                    this.setState({value: e})
+                                    console.log(e);
+                                }}
+                                />
+                            </div>
+                        </div>
+
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <DurationInput
+                        label='Label'
+                        info='info message'
+                        disabled={this.state.disabled}
+                        required={this.state.required}
+                        invalid={this.state.invalid}
+                        inlineLabel={this.state.inlineLabel}
+                        onChange={(e) => {
+                            console.log(e)
+                        }}
+                        />
+                    `}</Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <h3 className='docs-page__h3'>Props</h3>
+                <PropsList>
+                    <Prop name='hours' isRequired={false} type='number' default='00' description='Hours value'/>
+                    <Prop name='minutes' isRequired={false} type='number' default='00' description='Minutes value'/>
+                    <Prop name='seconds' isRequired={false} type='number' default='00' description='Seconds value'/>
+                    <Prop name='label' isRequired={false} type='string' default='/' description='Input label'/>
+                    <Prop name='info' isRequired={false} type='string' default='/' description='Hint text'/>
+                    <Prop name='error' isRequired={false} type='string' default='/' description='Error text'/>
+                    <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline'/>
+                    <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required'/>
+                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled'/>
+                    <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid'/>
+                </PropsList>
+            </section>
+        )
+    }
+}

package/dist/react/Index.tsx

@@ -61,8 +61,10 @@ import * as Playgrounds from '../playgrounds/react-playgrounds/Index';
 import { SelectWithTemplateDocs } from './SelectWithTemplate';
 import { MultiselectDocs } from './MultiSelect';
 import { TreeSelectDocs } from './TreeSelect';
+import DurationInputDoc from './DurationInput';
 import { PopoverDoc } from './Popover';
 import { MenuDocs } from './Menu';
+import {WithSizeObserverDocs} from './WithSizeObserver';
 
 const pages = {
     basicComponents: {
@@ -221,6 +223,9 @@ const pages = {
             'select-with-template': {
                 name: 'Select with template',
             },
+            'with-size-observer': {
+                name: 'With size observer',
+            },
             'multiselect': {
                 name: 'MultiSelect',
             },
@@ -236,6 +241,9 @@ const pages = {
             'icon-picker': {
                 name: 'Icon Picker',
             },
+            'duration-input': {
+                name: 'Duration Input',
+            },
             'switch': {
                 name: 'Switch'
             },
@@ -330,8 +338,10 @@ class ReactDoc extends React.Component<IProps, IState> {
                         <Route path="/react/autocomplete" component={AutocompleteDoc} />
                         <Route path="/react/select" component={SelectsDoc} />
                         <Route path="/react/select-with-template" component={SelectWithTemplateDocs} />
+                        <Route path="/react/with-size-observer" component={WithSizeObserverDocs} />
                         <Route path="/react/multiselect" component={MultiselectDocs} />
                         <Route path="/react/treeselect" component={TreeSelectDocs} />
+                        <Route path="/react/duration-input" component={DurationInputDoc} />
                         <Route path="/react/popover" component={PopoverDoc} />
                         <Route path="/react/date-picker" component={DatePickerDoc} />
                         <Route path="/react/time-picker" component={TimePickerDoc} />

package/dist/react/Inputs.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-
 import * as Markup from '../../js/react';
+import { Input, CheckGroup, Checkbox, PropsList, Prop, InputNew } from '../../../app-typescript';
+import { DurationInput } from '../../../app-typescript/components/DurationInput';
 
-import { Input, Select, CheckGroup, Checkbox, PropsList, Prop } from '../../../app-typescript';
 
 interface IState {
     inlineLabel: boolean;
@@ -10,6 +10,7 @@ interface IState {
     disabled: boolean;
     invalid: boolean;
     value: any;
+    value2: any;
 }
 
 export default class InputsDoc extends React.Component<{}, IState> {
@@ -20,7 +21,8 @@ export default class InputsDoc extends React.Component<{}, IState> {
             required: true,
             disabled: false,
             invalid: false,
-            value: null
+            value: null,
+            value2: '',
         }
     }
     
@@ -44,10 +46,27 @@ export default class InputsDoc extends React.Component<{}, IState> {
                                     <Checkbox checked={this.state.inlineLabel} label={{text:'Label positioned inline'}} onChange={(value) => {this.setState({inlineLabel: value})}} />
                                 </CheckGroup>
                             </div>
+                            <div className='form__row'>
+                                <InputNew
+                                label='Label'
+                                value=''
+                                onChange={(value) => false
+                                }
+                            
+                                required={true}
+                                info='Nullam Sollicitudin'
+                                maxLength={20}
+                                //invalid={true}
+                                //disabled={true}
+                                error='Error message'
+                                //inlineLabel={true}
+                                //labelHidden={true}
+                                type='text' />
+                            </div>
 
                             <div className='form__row'>
                                 <Input label='Input label'
-                                    value={null}
+                                    value={''}
                                     maxLength={30}
                                     type='text'
                                     error='This is error message'
@@ -57,7 +76,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
                                     disabled={this.state.disabled}
                                     invalid={this.state.invalid}
                                     tabindex={0}
-                                    onChange={(value) => this.setState({value: value})} />
+                                    onChange={(value) => this.setState({value2: value})} />
                             </div>
                             <div className='form__row'>
                                 <Input label='Number Input'
@@ -75,9 +94,10 @@ export default class InputsDoc extends React.Component<{}, IState> {
                             <p className="docs-page__paragraph">// Hidden label</p>
                             <div className='form__row'>
                                 <Input label='Input label'
-                                    value={null}
+                                    value={''}
                                     maxLength={25}
                                     type='text'
+                                    placeholder='Placeholder'
                                     error='This is error message'
                                     info='Donec id elit non mi porta gravida at eget metus.'
                                     inlineLabel={true}
@@ -86,7 +106,108 @@ export default class InputsDoc extends React.Component<{}, IState> {
                                     disabled={this.state.disabled}
                                     invalid={this.state.invalid}
                                     tabindex={0}
-                                    onChange={(value) => this.setState({value: value})} />
+                                    onChange={(value) => this.setState({value2: value})} />
+                            </div>
+
+                            <p className="docs-page__paragraph">// Boxed with hidden label</p>
+                            <div className='form__row'>
+                                <Input label='Input label'
+                                    value={''}
+                                    boxedStyle={true}
+                                    maxLength={25}
+                                    type='text'
+                                    placeholder='Default boxed input'
+                                    error='This is error message'
+                                    inlineLabel={true}
+                                    labelHidden={true}
+                                    required={this.state.required}
+                                    disabled={this.state.disabled}
+                                    invalid={this.state.invalid}
+                                    tabindex={0}
+                                    onChange={(value) => this.setState({value2: value})} />
+                            </div>
+                            <div className='form__row'>
+                                <Input label='Input label'
+                                    value={''}
+                                    boxedStyle={true}
+                                    size='large'
+                                    maxLength={25}
+                                    type='text'
+                                    placeholder='Large boxed input'
+                                    error='This is error message'
+                                    inlineLabel={true}
+                                    labelHidden={true}
+                                    required={this.state.required}
+                                    disabled={this.state.disabled}
+                                    invalid={this.state.invalid}
+                                    tabindex={0}
+                                    onChange={(value) => this.setState({value2: value})} />
+                            </div>
+                            <div className='form__row'>
+                                <Input label='Input label'
+                                    value={''}
+                                    boxedStyle={true}
+                                    size='x-large'
+                                    maxLength={25}
+                                    type='text'
+                                    placeholder='Extra large boxed input'
+                                    error='This is error message'
+                                    inlineLabel={true}
+                                    labelHidden={true}
+                                    required={this.state.required}
+                                    disabled={this.state.disabled}
+                                    invalid={this.state.invalid}
+                                    tabindex={0}
+                                    onChange={(value) => this.setState({value2: value})} />
+                            </div>
+                            <p className="docs-page__paragraph">// Boxed with default label</p>
+                            <div className='form__row'>
+                                <Input label='Input label'
+                                    value={''}
+                                    boxedStyle={true}
+                                    size='large'
+                                    maxLength={25}
+                                    placeholder='Placeholder'
+                                    type='text'
+                                    error='This is error message'
+                                    required={this.state.required}
+                                    disabled={this.state.disabled}
+                                    invalid={this.state.invalid}
+                                    tabindex={0}
+                                    onChange={(value) => this.setState({value2: value})} />
+                            </div>
+                            <p className="docs-page__paragraph">// Boxed with boxed label</p>
+                            <div className='form__row'>
+                                <Input label='Input label'
+                                    value={''}
+                                    boxedStyle={true}
+                                    boxedLable={true}
+                                    size='large'
+                                    maxLength={25}
+                                    placeholder='Placeholder'
+                                    type='text'
+                                    error='This is error message'
+                                    required={this.state.required}
+                                    disabled={this.state.disabled}
+                                    invalid={this.state.invalid}
+                                    tabindex={0}
+                                    onChange={(value) => this.setState({value2: value})} />
+                            </div>
+                            <div className='form__row'>
+                                <Input label='Input label'
+                                    value={''}
+                                    boxedStyle={true}
+                                    boxedLable={true}
+                                    size='large'
+                                    placeholder='Hide my label'
+                                    labelHidden={true}
+                                    type='text'
+                                    error='This is error message'
+                                    required={this.state.required}
+                                    disabled={this.state.disabled}
+                                    invalid={this.state.invalid}
+                                    tabindex={0}
+                                    onChange={(value) => this.setState({value2: value})} />
                             </div>
                         </div>
 
@@ -102,6 +223,128 @@ export default class InputsDoc extends React.Component<{}, IState> {
                             disabled={false}
                             invalid={false}
                             onChange={(value) => {}} />
+
+                        <Input label='Number Input'
+                            value={this.state.value}
+                            type='number'
+                            error='This is error message'
+                            info='Morbi leo risus porta ac consectetur ac.'
+                            inlineLabel={this.state.inlineLabel}
+                            required={this.state.required}
+                            disabled={this.state.disabled}
+                            invalid={this.state.invalid}
+                            tabindex={0}
+                            onChange={(value) => {}} />
+                        
+                        // Hidden label
+                        <Input label='Input label'
+                            value={''}
+                            maxLength={25}
+                            type='text'
+                            placeholder='Placeholder'
+                            error='This is error message'
+                            info='Donec id elit non mi porta gravida at eget metus.'
+                            inlineLabel={true}
+                            labelHidden={true}
+                            required={this.state.required}
+                            disabled={this.state.disabled}
+                            invalid={this.state.invalid}
+                            tabindex={0}
+                            onChange={(value) => {}} />
+
+                        // Boxed with hidden label
+                        <Input label='Input label'
+                            value={''}
+                            boxedStyle={true}
+                            maxLength={25}
+                            type='text'
+                            placeholder='Default boxed input'
+                            error='This is error message'
+                            inlineLabel={true}
+                            labelHidden={true}
+                            required={this.state.required}
+                            disabled={this.state.disabled}
+                            invalid={this.state.invalid}
+                            tabindex={0}
+                            onChange={(value) => {}} />
+
+                        <Input label='Input label'
+                            value={''}
+                            boxedStyle={true}
+                            size='large'
+                            maxLength={25}
+                            type='text'
+                            placeholder='Large boxed input'
+                            error='This is error message'
+                            inlineLabel={true}
+                            labelHidden={true}
+                            required={this.state.required}
+                            disabled={this.state.disabled}
+                            invalid={this.state.invalid}
+                            tabindex={0}
+                            onChange={(value) => {}} />
+
+                        <Input label='Input label'
+                            value={''}
+                            boxedStyle={true}
+                            size='x-large'
+                            maxLength={25}
+                            type='text'
+                            placeholder='Extra large boxed input'
+                            error='This is error message'
+                            inlineLabel={true}
+                            labelHidden={true}
+                            required={this.state.required}
+                            disabled={this.state.disabled}
+                            invalid={this.state.invalid}
+                            tabindex={0}
+                            onChange={(value) => {}} />
+
+                        // Boxed with default label
+                        <Input label='Input label'
+                            value={''}
+                            boxedStyle={true}
+                            size='large'
+                            maxLength={25}
+                            placeholder='Placeholder'
+                            type='text'
+                            error='This is error message'
+                            required={this.state.required}
+                            disabled={this.state.disabled}
+                            invalid={this.state.invalid}
+                            tabindex={0}
+                            onChange={(value) => {}} />
+                        
+                        // Boxed with boxed label
+                        <Input label='Input label'
+                            value={''}
+                            boxedStyle={true}
+                            boxedLable={true}
+                            size='large'
+                            maxLength={25}
+                            placeholder='Placeholder'
+                            type='text'
+                            error='This is error message'
+                            required={this.state.required}
+                            disabled={this.state.disabled}
+                            invalid={this.state.invalid}
+                            tabindex={0}
+                            onChange={(value) => {}} />
+                        
+                        <Input label='Input label'
+                            value={''}
+                            boxedStyle={true}
+                            boxedLable={true}
+                            size='large'
+                            placeholder='Hide my label'
+                            labelHidden={true}
+                            type='text'
+                            error='This is error message'
+                            required={this.state.required}
+                            disabled={this.state.disabled}
+                            invalid={this.state.invalid}
+                            tabindex={0}
+                            onChange={(value) => {}} />
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
@@ -118,8 +361,13 @@ export default class InputsDoc extends React.Component<{}, IState> {
                     <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled'/>
                     <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid'/>
                     <Prop name='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.'/>
+                    <Prop name='placeholder' isRequired={false} type='string' default='/' description='Defines the text for the placeholder pseudo-element.'/>
+                    <Prop name='fullWidth' isRequired={false} type='boolean' default='false' description='Forces the input to take 100% of the container width.'/>
+                    <Prop name='boxedStyle' isRequired={false} type='boolean' default='false' description='Applies a boxed style to the input. This style should be used only in the authoring enviroment and similar.'/>
+                    <Prop name='boxedLable' isRequired={false} type='boolean' default='false' description='Applies a boxed style to the input label. This label style should be used only in combination with the boxedStyle input inside the authoring enviroment.'/>
+                    <Prop name='size' isRequired={false} type='medium | large | x-large' default='medium' description='Specifies the size of the input. Defaults to medium and should be changed only in special cases (e.g. titles, headlines etc.).'/>
                 </PropsList>
             </section>
         )
     }
-}
+}

package/dist/react/Labels.tsx

@@ -67,6 +67,12 @@ export default class LabelsDoc extends React.Component {
                             <Label text='deep-orange--700' color='deep-orange--700'/>
                             <Label text='lime--700' color='lime--700'/>  
                         </div>
+                        <p className="docs-page__paragraph">// Custom Hex colors</p>
+                        <div className='docs-page__content-row'>
+                            <Label text='Hex: #008773' hexColor='#008773'/>
+                            <Label text='Hex: #000FB5' hexColor='#000FB5'/>
+                            <Label text='Hex: #696B00' hexColor='#696B00'/>
+                        </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <Label text='default label'/>
@@ -82,7 +88,11 @@ export default class LabelsDoc extends React.Component {
                         <Label text='cyan--600' color='cyan--600'/>
                         <Label text='light-green--700' color='light-green--700'/>
                         <Label text='deep-orange--700' color='deep-orange--700'/>
-                        <Label text='lime--700' color='lime--700'/>  
+                        <Label text='lime--700' color='lime--700'/> 
+                        // Custom Hex colors
+                        <Label text='Hex: #008773' hexColor='#008773'/>
+                        <Label text='Hex: #000FB5' hexColor='#000FB5'/>
+                        <Label text='Hex: #696B00' hexColor='#696B00'/>
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
@@ -113,6 +123,12 @@ export default class LabelsDoc extends React.Component {
                             <Label text='light-green--700 label' style='hollow' color='light-green--700'/>
                             <Label text='deep-purple--600 label' style='hollow' color='deep-purple--600'/>
                         </div>
+                        <p className="docs-page__paragraph">// Custom Hex colours</p>
+                        <div className='docs-page__content-row'>
+                            <Label text='Hex: #008773' style='hollow' hexColor='#008773'/>
+                            <Label text='Hex: #000FB5' style='hollow' hexColor='#000FB5'/>
+                            <Label text='Hex: #696B00' style='hollow' hexColor='#696B00'/>
+                        </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <Label text='default label' style='hollow'/>
@@ -133,6 +149,11 @@ export default class LabelsDoc extends React.Component {
                         <Label text='blue-grey--600 label' style='hollow' color='blue-grey--600'/>
                         <Label text='light-green--700 label' style='hollow' color='light-green--700'/>
                         <Label text='deep-purple--600 label' style='hollow' color='deep-purple--600'/>
+
+                        // Custom Hex colours
+                        <Label text='Hex: #008773' style='hollow' hexColor='#008773'/>
+                        <Label text='Hex: #000FB5' style='hollow' hexColor='#000FB5'/>
+                        <Label text='Hex: #696B00' style='hollow' hexColor='#696B00'/>
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
@@ -156,6 +177,12 @@ export default class LabelsDoc extends React.Component {
                             <Label text='Translucent large' size='large' type='primary' style='translucent'/>
                             <Label text='Translucent, large & no text transformation' type='highlight' size='large' style='translucent' noTransform={true}/>
                         </div>
+                        <p className="docs-page__paragraph">// Custom Hex colours</p>
+                        <div className='docs-page__content-row'>
+                            <Label text='Hex: #008773' style='translucent' hexColor='#008773'/>
+                            <Label text='Hex: #000FB5' style='translucent' hexColor='#000FB5'/>
+                            <Label text='Hex: #696B00' style='translucent' hexColor='#696B00'/>
+                        </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <Label text='default label' style='hollow'/>
@@ -169,6 +196,11 @@ export default class LabelsDoc extends React.Component {
                         <Label text='Translucent large' size='large' style='translucent'/>
                         <Label text='Translucent large' size='large' type='primary' style='translucent'/>
                         <Label text='Translucent, large & no text transformation' type='highlight' size='large' style='translucent' noTransform={true}/>
+
+                        // Custom Hex colours
+                        <Label text='Hex: #008773' style='translucent' hexColor='#008773'/>
+                        <Label text='Hex: #000FB5' style='translucent' hexColor='#000FB5'/>
+                        <Label text='Hex: #696B00' style='translucent' hexColor='#696B00'/>
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
@@ -195,6 +227,15 @@ export default class LabelsDoc extends React.Component {
                             <Label text='success label' type='success' style='translucent' onClick={()=> false}/>
                             <Label text='alert label' type='alert' style='translucent' onClick={()=> false}/>
                         </div>
+                        <p className="docs-page__paragraph">// Custom Hex colours</p>
+                        <div className='docs-page__content-row'>
+                            <Label text='Hex: #008773' hexColor='#008773' onClick={()=> false}/>
+                            <Label text='Hex: #000FB5' hexColor='#000FB5' onClick={()=> false}/>
+                            <Label style='hollow' text='Hex: #008773' hexColor='#008773' onClick={()=> false}/>
+                            <Label style='hollow' text='Hex: #000FB5' hexColor='#000FB5' onClick={()=> false}/>
+                            <Label style='translucent' text='Hex: #008773' hexColor='#008773' onClick={()=> false}/>
+                            <Label style='translucent' text='Hex: #000FB5' hexColor='#000FB5' onClick={()=> false}/>
+                        </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <Label text='default label' onClick={()=> false}/>
@@ -211,6 +252,14 @@ export default class LabelsDoc extends React.Component {
                         <Label text='primary label' type='primary' style='translucent' onClick={()=> false}/>
                         <Label text='success label' type='success' style='translucent' onClick={()=> false}/>
                         <Label text='alert label' type='alert' style='translucent' onClick={()=> false}/>
+
+                        // Custom Hex colours
+                        <Label text='Hex: #008773' hexColor='#008773' onClick={()=> false}/>
+                        <Label text='Hex: #000FB5' hexColor='#000FB5' onClick={()=> false}/>
+                        <Label style='hollow' text='Hex: #008773' hexColor='#008773' onClick={()=> false}/>
+                        <Label style='hollow' text='Hex: #000FB5' hexColor='#000FB5' onClick={()=> false}/>
+                        <Label style='translucent' text='Hex: #008773' hexColor='#008773' onClick={()=> false}/>
+                        <Label style='translucent' text='Hex: #000FB5' hexColor='#000FB5' onClick={()=> false}/>
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
@@ -223,6 +272,7 @@ export default class LabelsDoc extends React.Component {
                     <Prop name='size' isRequired={false} type='small | normal | large' default='normal' description='Specifies a small, normal or large label.'/>
                     <Prop name='noTransform' isRequired={false} type='boolean' default='false' description='Transforms text to uppercase.'/>
                     <Prop name='style' isRequired={false} type='filled | hollow | translucent' default='filled' description='Label may have one of these styles - filled (default), hollow or translucent.'/>
+                    <Prop name='hexColor' isRequired={false} type='string' default='/' description='Define a custom Hex colour for the label.'/>
                 </PropsList>
             </section>
         )