superdesk-ui-framework 2.4.14 → 2.4.18

package/examples/pages/components/modals.html

@@ -20,6 +20,7 @@
                     <div class="modal__body">
                         <p>This is sample message inside modal!</p>
                         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
+                        <button class="btn" ng-click="openModal('modalActive6')">Open modal inside modal</button>
                     </div>
                     <div class="modal__footer">
                         <button class="btn" ng-click="closeModal('modalActive')">Cancel</button>
@@ -202,19 +203,22 @@
                         <button class="icn-btn" ng-click="closeModal('modalActive3')"><i class="icon-close-small"></i></button>
                     </div>
                     <div class="modal__body">
-                        <p>This is sample message inside modal!</p>
-                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
+                        <p>This is sample message inside the modal!</p>
+                        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh
+                        ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
+                        Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+                        Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
                     </div>
                     <div class="modal__footer">
                         <button class="btn" ng-click="closeModal('modalActive3')">Cancel</button>
-                        <button class="btn btn--primary" ng-click="closeModal('modalActive3')">Ok</button>
+                        <button class="btn btn btn--primary btn" ng-click="closeModal('modalActive3')">Ok</button>
                     </div>
                 </div>
             </div>
             <div class="docs-page__code-markup">
                 <pre class="prettyprint lang-html linenums">
                     <button class="btn" ng-click="openModal('modalActive')">Show modal</button>
-                    <div sd-modal data-model="modalActive" class="modal--fill" ng-non-bindable>
+                    <div theme="dark-ui" sd-modal data-model="modalActive" class="modal--fill" ng-non-bindable>
                         <div class="modal__header modal__header--flex">
                             <h3 class="modal__heading">Modal Fill</h3>
                             <button class="icn-btn" ng-click="closeModal('modalActive')"><i class="icon-close-small"></i></button>
@@ -276,6 +280,178 @@
             </div>
         </div>
     </div>
+    <h3 class="docs-page__h3">Dark modal</h3>
+    <p class="docs-page__paragraph">The modal can be rendered in dark mode by adding<code>theme="dark-ui"</code> on div <code>sd-modal</code>. This example shown uses a custom layout inside the modal body.</p>
+    <div class="docs-page__code-window" doc-tabs>
+        <div class="docs-page__window-bar">
+            <a id="example" href="#" class="active">Example</a>
+            <a id="markup" href="#">Markup</a>
+        </div>
+        <div class="docs-page__window-content">
+            <div class="docs-page__code-example" doc-modal>
+                <button class="btn" ng-click="openModal('modalActive9')">Show dark modal</button>
+                <div sd-modal theme="dark-ui" data-model="modalActive9" class="modal--fill">
+                    <div class="modal__header modal__header--flex">
+                        <h3 class="modal__heading">Modal dark (fill option)</h3>
+                        <button class="icn-btn" ng-click="closeModal('modalActive9')"><i class="icon-close-small"></i></button>
+                    </div>
+                    <div class="sd-wrap-helper">
+                        <div style="height: 100%;" class="sd-content-wrapper__main-content-area sd-main-content-grid comfort">
+                            <div class="sd-main-content-grid__content sd-padding--2">
+                                <div class="sd-grid-list">
+                                    <div class="sd-grid-item sd-grid-item__type--audio">
+                                        <div class="sd-grid-item__media"></div>
+                                        <div class="sd-grid-item__content">
+                                            Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo.
+                                            Lorem ipsum dolor sit amet,consectetur adipiscing elit.
+                                        </div>
+                                        <div class="sd-grid-item__footer">
+                                            <div class="sd-grid-item__footer-block sd-grid-item__footer-block--left">
+                                                <span class="label label--success label--translucent">Success</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="sd-grid-item sd-grid-item__type--audio">
+                                        <div class="sd-grid-item__media"></div>
+                                        <div class="sd-grid-item__content">
+                                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis.
+                                            Sed posuere consectetur est at lobortis.
+                                        </div>
+                                        <div class="sd-grid-item__footer">
+                                            <div class="sd-grid-item__footer-block sd-grid-item__footer-block--left">
+                                                <span class="label label--success label--translucent">Success</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="sd-main-content-grid__preview open-preview">
+                                <div class="side-panel__container">
+                                    <div class="side-panel side-panel--right">
+                                        <div class="side-panel__content">
+                                            <div class="side-panel__content-block side-panel__content-block--flex">
+                                                <div class="side-panel__content-block-inner side-panel__content-block-inner--grow">
+                                                    <div class="form__item">
+                                                        <div class="sd-input">
+                                                            <label class="sd-input__label">Input label</label>
+                                                            <input class="sd-input__input" type="text">
+                                                            <div class="sd-input__char-count">00/90</div>
+                                                            <div class="sd-input__message-box">
+                                                                <div class="sd-input__hint">Hendrerit in vulputate.</div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="form__item">
+                                                        <div class="sd-input sd-input--is-select">
+                                                            <label class="sd-input__label">Select label</label>
+                                                            <select class="sd-input__select">
+                                                                <option value="one">Option one</option>
+                                                                <option value="two">Option two</option>
+                                                                <option value="three">Option three</option>
+                                                            </select>
+                                                            <div class="sd-input__message-box">
+                                                                <div class="sd-input__hint">Maecenas faucibus mollis interdum.</div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="modal__footer">
+                        <button class="btn" ng-click="closeModal('modalActive9')">Cancel</button>
+                        <button class="btn btn--primary" ng-click="closeModal('modalActive9')">Ok</button>
+                    </div>
+                </div>
+            </div>
+            <div class="docs-page__code-markup">
+                <pre class="prettyprint lang-html linenums">
+                    <button class="btn" ng-click="openModal('modalActive9')">Show dark modal</button>
+                    <div sd-modal theme="dark-ui" data-model="modalActive9" class="modal--fill" ng-non-bindable>
+                        <div class="modal__header modal__header--flex">
+                            <h3 class="modal__heading">Modal dark (fill option)</h3>
+                            <button class="icn-btn" ng-click="closeModal('modalActive9')"><i class="icon-close-small"></i></button>
+                        </div>
+                        <div class="sd-wrap-helper">
+                            <div style="height: 100%;" class="sd-content-wrapper__main-content-area sd-main-content-grid comfort">
+                                <div class="sd-main-content-grid__content sd-padding--2">
+                                    <div class="sd-grid-list">
+                                        <div class="sd-grid-item sd-grid-item__type--audio">
+                                            <div class="sd-grid-item__media"></div>
+                                            <div class="sd-grid-item__content">
+                                                Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo.
+                                                Lorem ipsum dolor sit amet,consectetur adipiscing elit.
+                                            </div>
+                                            <div class="sd-grid-item__footer">
+                                                <div class="sd-grid-item__footer-block sd-grid-item__footer-block--left">
+                                                    <span class="label label--success label--translucent">Success</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="sd-grid-item sd-grid-item__type--audio">
+                                            <div class="sd-grid-item__media"></div>
+                                            <div class="sd-grid-item__content">
+                                                Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis.
+                                                Sed posuere consectetur est at lobortis.
+                                            </div>
+                                            <div class="sd-grid-item__footer">
+                                                <div class="sd-grid-item__footer-block sd-grid-item__footer-block--left">
+                                                    <span class="label label--success label--translucent">Success</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="sd-main-content-grid__preview open-preview">
+                                    <div class="side-panel__container">
+                                        <div class="side-panel side-panel--right">
+                                            <div class="side-panel__content">
+                                                <div class="side-panel__content-block side-panel__content-block--flex">
+                                                    <div class="side-panel__content-block-inner side-panel__content-block-inner--grow">
+                                                        <div class="form__item">
+                                                            <div class="sd-input">
+                                                                <label class="sd-input__label">Input label</label>
+                                                                <input class="sd-input__input" type="text">
+                                                                <div class="sd-input__char-count">00/90</div>
+                                                                <div class="sd-input__message-box">
+                                                                    <div class="sd-input__hint">Hendrerit in vulputate.</div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="form__item">
+                                                            <div class="sd-input sd-input--is-select">
+                                                                <label class="sd-input__label">Select label</label>
+                                                                <select class="sd-input__select">
+                                                                    <option value="one">Option one</option>
+                                                                    <option value="two">Option two</option>
+                                                                    <option value="three">Option three</option>
+                                                                </select>
+                                                                <div class="sd-input__message-box">
+                                                                    <div class="sd-input__hint">Maecenas faucibus mollis interdum.</div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="modal__footer">
+                            <button class="btn" ng-click="closeModal('modalActive9')">Cancel</button>
+                            <button class="btn btn--primary" ng-click="closeModal('modalActive9')">Ok</button>
+                        </div>
+                    </div>
+                </pre>
+            </div>
+        </div>
+    </div>
     <h3 class="docs-page__h3">Tabs</h3>
     <p class="docs-page__paragraph">Special case for modals with tabbed navigation and nested footer inside the body. Add class <code>.modal--tabs</code> on div <code>sd-modal</code>. This version also works with different modal size, for example just add <code>.modal--large</code> to get large modal with tabs.</p>
     <div class="docs-page__code-window" doc-tabs>

package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx

@@ -228,7 +228,20 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                                             <Badge text={item.priority} shape='square' color={item.priorityColor} />
                                         </GridElements.GridItemFooterBlock>
                                         <GridElements.GridItemFooterActions>
-                                            <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> this.changeStatus(item, 'archived')} />
+                                            <Dropdown
+                                                align = 'right'
+                                                append = {true}
+                                                items={[
+                                                    {
+                                                        type: 'group', label: 'Actions', items: [
+                                                            'divider',
+                                                            { label: 'Edit', icon: 'pencil', onSelect: () => this.setState({ dropDownState: 'Edit ' }) },
+                                                            { label: 'Download', icon: 'download', onSelect: () => this.setState({ dropDownState: 'Download' }) },
+                                                            { label: 'Delete', icon: 'trash', onSelect: () => this.setState({ dropDownState: 'Delete' }) },
+                                                        ]
+                                                    }]}>
+                                                <IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
+                                            </Dropdown>
                                         </GridElements.GridItemFooterActions>
                                     </GridElements.GridItemFooter>
                                 </GridElements.GridItem>

package/examples/pages/react/Alerts.tsx

@@ -87,10 +87,10 @@ export default class AlertDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='type' isRequered={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.)'/>
-                    <Prop name='style' isRequered={false} type='filled | hollow' default='filled' description='Alerts may be one of styles such as hollow alerts, alerts without background (text-only) or default filled.'/>
-                    <Prop name='size' isRequered={false} type='normal | small' default='normal' description='Specifies a small or normal alert.'/>
-                    <Prop name='restoreIcon' isRequered={false} type='info | help' default='info' description=''/>
+                    <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.)'/>
+                    <Prop name='style' isRequired={false} type='filled | hollow' default='filled' description='Alerts may be one of styles such as hollow alerts, alerts without background (text-only) or default filled.'/>
+                    <Prop name='size' isRequired={false} type='normal | small' default='normal' description='Specifies a small or normal alert.'/>
+                    <Prop name='restoreIcon' isRequired={false} type='info | help' default='info' description=''/>
                 </PropsList>
             </section>
         )

package/examples/pages/react/Autocomplete.tsx

@@ -294,29 +294,29 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
 
                 <h3 className='docs-page__h3'>Props</h3>
                 <PropsList>
-                    <Prop name='items' isRequered={true} type='array' default='/' description='Array of values for autocomplete' />
-                    <Prop name='value' isRequered={false} type='any' default='/' description='Value to be predefined on component load' />
-                    <Prop name='keyValue' isRequered={false} type='string' default='/' description='Key value if array is combined of objects' />
-                    <Prop name='minLength' isRequered={false} type='number' default='1' description='Minimum number of characters to initiate a search' />
-                    <Prop name='listItemTemplate' isRequered={false} type='function' default='/' description='Create custom view of list item' />
-                    <Prop name='label' isRequered={false} type='string' default='/' description='Input label' />
-                    <Prop name='info' isRequered={false} type='string' default='/' description='Hint text' />
-                    <Prop name='error' isRequered={false} type='string' default='/' description='Error text' />
-                    <Prop name='placeholder' isRequered={false} type='string' default='/' description='Placeholder text for the input field.' />
-                    <Prop name='isSearchField' isRequered={false} type='boolean' default='false' 
+                    <Prop name='items' isRequired={true} type='array' default='/' description='Array of values for autocomplete' />
+                    <Prop name='value' isRequired={false} type='any' default='/' description='Value to be predefined on component load' />
+                    <Prop name='keyValue' isRequired={false} type='string' default='/' description='Key value if array is combined of objects' />
+                    <Prop name='minLength' isRequired={false} type='number' default='1' description='Minimum number of characters to initiate a search' />
+                    <Prop name='listItemTemplate' isRequired={false} type='function' default='/' description='Create custom view of list item' />
+                    <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='placeholder' isRequired={false} type='string' default='/' description='Placeholder text for the input field.' />
+                    <Prop name='isSearchField' isRequired={false} type='boolean' default='false' 
                           description='Styles the input as a search field, adds a search icon and the option to clear the field. No visible 
                                        lable is present in this option.' />
-                    <Prop name='inlineLabel' isRequered={false} type='boolean' default='false' description='Position labels as inline' />
-                    <Prop name='required' isRequered={false} type='boolean' default='false' description='Mark field as required' />
-                    <Prop name='disabled' isRequered={false} type='boolean' default='false' description='Mark field as disabled' />
-                    <Prop name='invalid' isRequered={false} type='boolean' default='false' description='Mark field as invalid' />
+                    <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>
 
                 <h3 className='docs-page__h3'>Events</h3>
                 <PropsList>
-                    <Prop name='search' isRequered={false} type='function' default='/' description='Custom function for filtering items' />
-                    <Prop name='onChange' isRequered={true} type='function' default='/' description='Returns value of text input' />
-                    <Prop name='onSelect' isRequered={false} type='function' default='/' description='Returns selected value' />
+                    <Prop name='search' isRequired={false} type='function' default='/' description='Custom function for filtering items' />
+                    <Prop name='onChange' isRequired={true} type='function' default='/' description='Returns value of text input' />
+                    <Prop name='onSelect' isRequired={false} type='function' default='/' description='Returns selected value' />
                 </PropsList>
             </section>
         )

package/examples/pages/react/Badges.tsx

@@ -148,10 +148,10 @@ export default class BadgeDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='text' isRequered={false} type='string' default='/' description='Badge text value.' />
-                    <Prop name='type' isRequered={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.)' />
-                    <Prop name='color' isRequered={false} type='string' default='/' description='Extended color palette from the framework (e.g. red--500);  NOTE: The badge can have either a Type or Color defined, not both at the same time.' />
-                    <Prop name='shape' isRequered={false} type='round | square' default='round' description='Make shape of badge square or default round.' />
+                    <Prop name='text' isRequired={false} type='string' default='/' description='Badge text value.' />
+                    <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.)' />
+                    <Prop name='color' isRequired={false} type='string' default='/' description='Extended color palette from the framework (e.g. red--500);  NOTE: The badge can have either a Type or Color defined, not both at the same time.' />
+                    <Prop name='shape' isRequired={false} type='round | square' default='round' description='Make shape of badge square or default round.' />
                 </PropsList>
             </section>
         )

package/examples/pages/react/BigIconFont.tsx

@@ -27,9 +27,9 @@ export default class BigIconFontDoc extends React.PureComponent{
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='name' isRequered={false} type='string' default='/' description='Icon name value.' />
-                    <Prop name='type' isRequered={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.)' />
-                    <Prop name='size' isRequered={false} type='small | big' default='small' description='Specifies a small or big size of Icon.' />
+                    <Prop name='name' isRequired={false} type='string' default='/' description='Icon name value.' />
+                    <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.)' />
+                    <Prop name='size' isRequired={false} type='small | big' default='small' description='Specifies a small or big size of Icon.' />
                 </PropsList>
             </section>);
     }

package/examples/pages/react/ButtonGroups.tsx

@@ -142,10 +142,10 @@ export default class ButtonGroupsDoc extends React.Component {
                 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='orientation' isRequered={false} type='horizontal | vertical' default='horizontal' description='Specifies orientation for child components of ButtonGroup'/>
-                    <Prop name='spaces' isRequered={false} type='comfort | compact' default='comfort' description='Space between buttons: comfort (default) or compact.'/>
-                    <Prop name='align' isRequered={false} type='left | right | center | inline' default='left' description='Alignment in relation to the parent element. Inline value renders the ButtonGroup without pushing surrounding elements.'/>
-                    <Prop name='padded' isRequered={false} type='boolean' default='false' description='Adds predefined space to the side based on alignment and orientation.'/>
+                    <Prop name='orientation' isRequired={false} type='horizontal | vertical' default='horizontal' description='Specifies orientation for child components of ButtonGroup'/>
+                    <Prop name='spaces' isRequired={false} type='comfort | compact' default='comfort' description='Space between buttons: comfort (default) or compact.'/>
+                    <Prop name='align' isRequired={false} type='left | right | center | inline' default='left' description='Alignment in relation to the parent element. Inline value renders the ButtonGroup without pushing surrounding elements.'/>
+                    <Prop name='padded' isRequired={false} type='boolean' default='false' description='Adds predefined space to the side based on alignment and orientation.'/>
                 </PropsList>
 
 
@@ -284,8 +284,8 @@ export default class ButtonGroupsDoc extends React.Component {
                 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='size' isRequered={false} type='mini | small | medium | large' default='small' description='Specifies the size of the divider (spacing between buttons).'/>
-                    <Prop name='border' isRequered={false} type='boolean' default='false' description='Adds a dotted border in the middle of the divider.'/>
+                    <Prop name='size' isRequired={false} type='mini | small | medium | large' default='small' description='Specifies the size of the divider (spacing between buttons).'/>
+                    <Prop name='border' isRequired={false} type='boolean' default='false' description='Adds a dotted border in the middle of the divider.'/>
                 </PropsList>
 
                 

package/examples/pages/react/Buttons.tsx

@@ -433,17 +433,17 @@ export default class ButtonsDoc extends React.Component {
                 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='text' isRequered={true} type='string' default='/' description='Text value of the Button. In the case of iconOnly buttons the value will be set to the aria-label.'/>
-                    <Prop name='iconOnly' isRequered={false} type='boolean' default='false' description='This prop is used for Buttons with icons only. It set to true, it will visually hide the text and use the value for the aria-label.'/>
-                    <Prop name='expand' isRequered={false} type='boolean' default='false' description='Spans the full width of the Button parent.'/>
-                    <Prop name='style' isRequered={false} type='filled | hollow | text-only' default='filled' description='Buttons may be one of styles such as hollow buttons, buttons without background (text-only) or filled (default).'/>
-                    <Prop name='shape' isRequered={false} type='square | round' default='square' description='Make shape of button round or default square.'/>
-                    <Prop name='type' isRequered={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.).'/>
-                    <Prop name='theme' isRequered={false} type='light | dark' default='light' description='Styles button for diffrent background.'/>
-                    <Prop name='size' isRequered={false} type='small | normal | large' default='normal' description='Specifies a small, normal or large button.'/>
-                    <Prop name='icon' isRequered={false} type='string' default='/' description='Icon class name without the icon- part.'/>
-                    <Prop name='disabled' isRequered={false} type='boolean' default='false' description='Disables the Button, preventing mouse events.'/>
-                    <Prop name='onClick' isRequered={true} type='function' default='false' description='Callback fired when a button is pressed.'/>
+                    <Prop name='text' isRequired={true} type='string' default='/' description='Text value of the Button. In the case of iconOnly buttons the value will be set to the aria-label.'/>
+                    <Prop name='iconOnly' isRequired={false} type='boolean' default='false' description='This prop is used for Buttons with icons only. It set to true, it will visually hide the text and use the value for the aria-label.'/>
+                    <Prop name='expand' isRequired={false} type='boolean' default='false' description='Spans the full width of the Button parent.'/>
+                    <Prop name='style' isRequired={false} type='filled | hollow | text-only' default='filled' description='Buttons may be one of styles such as hollow buttons, buttons without background (text-only) or filled (default).'/>
+                    <Prop name='shape' isRequired={false} type='square | round' default='square' description='Make shape of button round or default square.'/>
+                    <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.).'/>
+                    <Prop name='theme' isRequired={false} type='light | dark' default='light' description='Styles button for diffrent background.'/>
+                    <Prop name='size' isRequired={false} type='small | normal | large' default='normal' description='Specifies a small, normal or large button.'/>
+                    <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
+                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Disables the Button, preventing mouse events.'/>
+                    <Prop name='onClick' isRequired={true} type='function' default='false' description='Callback fired when a button is pressed.'/>
                 </PropsList>
             </section>
         )

package/examples/pages/react/Carousel.tsx

@@ -127,21 +127,21 @@ const images = ${JSON.stringify(images, null, 2)};
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='images' isRequered={true} type='Array<{src: string; alt?: string;}' default='null' description='An array of images to display' />
-                    <Prop name='title' isRequered={false} type='string' default='null' description='Gallery title' />
-                    <Prop name='description' isRequered={false} type='string' default='null' description='Gallery description' />
-                    <Prop name='imageCount' isRequered={false} type='number' default='null' description='If there are more images in gallery than what is visible you can set total count here.' />
-                    <Prop name='headerMeta' isRequered={false} type='JSX.Element' default='null' description='Additional metadata section displayed top right if provided' />
-                    <Prop name='id' isRequered={false} type='string' default='images.length' description='Unique identifier of the element' />
-                    <Prop name='className' isRequered={false} type='string' default='null' description='Style class of the component' />
-                    <Prop name='theme' isRequered={false} type='light | dark' default='light' description='Item style' />
-                    <Prop name='page' isRequered={false} type='number' default='0' description='Index of the first item.' />
-                    <Prop name='circular' isRequered={false} type='boolean' default='false' description='Defines if scrolling would be infinite' />
-                    <Prop name='autoplayInterval' isRequered={false} type='number' default='0' description='Time in milliseconds to scroll items automatically' />
-                    <Prop name='numVisible' isRequered={false} type='number' default='1' description='Number of items per page' />
-                    <Prop name='numScroll' isRequered={false} type='number' default='1' description='Number of items to scroll' />
-                    <Prop name='responsiveOptions' isRequered={false} type='object[]' default='null' description='An array of options for responsive design' />
-                    <Prop name='onPageChange' isRequered={false} type='function' default='null' description='Callback to invoke after scroll' />
+                    <Prop name='images' isRequired={true} type='Array<{src: string; alt?: string;}' default='null' description='An array of images to display' />
+                    <Prop name='title' isRequired={false} type='string' default='null' description='Gallery title' />
+                    <Prop name='description' isRequired={false} type='string' default='null' description='Gallery description' />
+                    <Prop name='imageCount' isRequired={false} type='number' default='null' description='If there are more images in gallery than what is visible you can set total count here.' />
+                    <Prop name='headerMeta' isRequired={false} type='JSX.Element' default='null' description='Additional metadata section displayed top right if provided' />
+                    <Prop name='id' isRequired={false} type='string' default='images.length' description='Unique identifier of the element' />
+                    <Prop name='className' isRequired={false} type='string' default='null' description='Style class of the component' />
+                    <Prop name='theme' isRequired={false} type='light | dark' default='light' description='Item style' />
+                    <Prop name='page' isRequired={false} type='number' default='0' description='Index of the first item.' />
+                    <Prop name='circular' isRequired={false} type='boolean' default='false' description='Defines if scrolling would be infinite' />
+                    <Prop name='autoplayInterval' isRequired={false} type='number' default='0' description='Time in milliseconds to scroll items automatically' />
+                    <Prop name='numVisible' isRequired={false} type='number' default='1' description='Number of items per page' />
+                    <Prop name='numScroll' isRequired={false} type='number' default='1' description='Number of items to scroll' />
+                    <Prop name='responsiveOptions' isRequired={false} type='object[]' default='null' description='An array of options for responsive design' />
+                    <Prop name='onPageChange' isRequired={false} type='function' default='null' description='Callback to invoke after scroll' />
                 </PropsList>
             </section>
         )

package/examples/pages/react/Checkboxs.tsx

@@ -415,19 +415,19 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
                 <h3 className="docs-page__h3">Props</h3>
                 <p className="docs-page__paragraph">Checkbox</p>
                 <PropsList>
-                    <Prop name='checked' isRequered={true} type='boolean' default='false' description='The checked state of the input.'/>
-                    <Prop name='label text' isRequered={true} type='string' default='/' description='Label text value.'/>
-                    <Prop name='label side' isRequered={false} type='left | right' default='right' description='Position of label relative to the button.'/>
-                    <Prop name='label hidden' isRequered={false} type='boolean' default='false' description='Hides visually the label and adds an aria-label for screen-reader support.'/>
-                    <Prop name='disabled' isRequered={false} type='boolean' default='false' description='The disabled state of Checkbox.'/>
+                    <Prop name='checked' isRequired={true} type='boolean' default='false' description='The checked state of the input.'/>
+                    <Prop name='label text' isRequired={true} type='string' default='/' description='Label text value.'/>
+                    <Prop name='label side' isRequired={false} type='left | right' default='right' description='Position of label relative to the button.'/>
+                    <Prop name='label hidden' isRequired={false} type='boolean' default='false' description='Hides visually the label and adds an aria-label for screen-reader support.'/>
+                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='The disabled state of Checkbox.'/>
                 </PropsList>
                 <p className="docs-page__paragraph">Checkbox Button</p>
                 <PropsList>
-                    <Prop name='checked' isRequered={true} type='boolean' default='/' description='The checked state of the input'/>
-                    <Prop name='label text' isRequered={true} type='string' default='/' description='Label text value.'/>
-                    <Prop name='label icon' isRequered={false} type='string' default='/' description='Icon class name without the icon- part.'/>
-                    <Prop name='label hidden' isRequered={false} type='boolean' default='false' description='Hides visually the label and adds an aria-label for screen-reader support.'/>
-                    <Prop name='disabled' isRequered={false} type='boolean' default='false' description='The disabled state of CheckboxButton'/>
+                    <Prop name='checked' isRequired={true} type='boolean' default='/' description='The checked state of the input'/>
+                    <Prop name='label text' isRequired={true} type='string' default='/' description='Label text value.'/>
+                    <Prop name='label icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
+                    <Prop name='label hidden' isRequired={false} type='boolean' default='false' description='Hides visually the label and adds an aria-label for screen-reader support.'/>
+                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='The disabled state of CheckboxButton'/>
                 </PropsList>
             </section>
         )

package/examples/pages/react/DatePicker.tsx

@@ -98,16 +98,16 @@ export default class DatePickerDoc extends React.Component {
 
                 <h3 className='docs-page__h3'>Props</h3>
                 <PropsList>
-                    <Prop name='value' isRequered={false} type='Date' default='/' description='Item value' />
-                    <Prop name='disabled' isRequered={false} type='boolean' default='false' description='Mark field as disabled' />
-                    <Prop name='dateFormat' isRequered={true} type='string' default='/' description='Date format to use, i.e. "MM/DD/YYYY"' />
-                    <Prop name='shortcuts' isRequered={false} type='string' default='/' description='Shortcuts for calendar popup, i.e. [{label: "tomorrow", days: 1}]' />
-                    <Prop name='locale' isRequered={false} type='string' default='/' description='see: https://primefaces.org/primereact/showcase/#/calendar' />
+                    <Prop name='value' isRequired={false} type='Date' default='/' description='Item value' />
+                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled' />
+                    <Prop name='dateFormat' isRequired={true} type='string' default='/' description='Date format to use, i.e. "MM/DD/YYYY"' />
+                    <Prop name='shortcuts' isRequired={false} type='string' default='/' description='Shortcuts for calendar popup, i.e. [{label: "tomorrow", days: 1}]' />
+                    <Prop name='locale' isRequired={false} type='string' default='/' description='see: https://primefaces.org/primereact/showcase/#/calendar' />
                 </PropsList>
 
                 <h3 className='docs-page__h3'>Events</h3>
                 <PropsList>
-                    <Prop name='onChange' isRequered={true} type='function' default='/' description='Returns value of date input' />
+                    <Prop name='onChange' isRequired={true} type='function' default='/' description='Returns value of date input' />
                 </PropsList>
             </section>
         );

package/examples/pages/react/Dropdowns.tsx

@@ -362,33 +362,33 @@ export default class DropdownDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='label' isRequered={false} type='string' default='/' description='Text value of label.'/>
-                    <Prop name='align' isRequered={false} type='left | right' default='left' description='Position of dropdown menu based on button'/>
-                    <Prop name='append' isRequered={false} type='boolean' default='false' description='Append inner dropdown menu to the body'/>
-                    <Prop name='items' isRequered={true} type='Array<menuitem | submenu | menugroup | "divider">' default='/' description='Items, divider, groups or submenu of dropdown menu'/>
-                    <Prop name='children' isRequered={true} type='React.ReactNode' default='/' description='If children is "string" type than button have default style with arrow, also children can be custom styled buttons'/>
+                    <Prop name='label' isRequired={false} type='string' default='/' description='Text value of label.'/>
+                    <Prop name='align' isRequired={false} type='left | right' default='left' description='Position of dropdown menu based on button'/>
+                    <Prop name='append' isRequired={false} type='boolean' default='false' description='Append inner dropdown menu to the body'/>
+                    <Prop name='items' isRequired={true} type='Array<menuitem | submenu | menugroup | "divider">' default='/' description='Items, divider, groups or submenu of dropdown menu'/>
+                    <Prop name='children' isRequired={true} type='React.ReactNode' default='/' description='If children is "string" type than button have default style with arrow, also children can be custom styled buttons'/>
                 </PropsList>
 
                 <p className='docs-page__paragraph'>Items: Menu item</p>
                 <PropsList>
-                    <Prop name='label' isRequered={true} type='string' default='/' description='Text value of label.'/>
-                    <Prop name='icon' isRequered={false} type='string' default='/' description='Icon class name without the icon- part.'/>
-                    <Prop name='onSelect' isRequered={false} type='function' default='false' description='Callback fired when a item is select.'/>
+                    <Prop name='label' isRequired={true} type='string' default='/' description='Text value of label.'/>
+                    <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
+                    <Prop name='onSelect' isRequired={false} type='function' default='false' description='Callback fired when a item is select.'/>
                 </PropsList>
 
                 <p className='docs-page__paragraph'>Items: Menu group</p>
                 <PropsList>
-                    <Prop name='label' isRequered={false} type='string' default='/' description='Text value of label.'/>
-                    <Prop name='type' isRequered={true} type='group' default='group' description='/'/>
-                    <Prop name='items' isRequered={true} type='Array<menuitem | submenu | menugroup | "divider">' default='/' description='Items, divider, groups or submenu of group in dropdown menu'/>
+                    <Prop name='label' isRequired={false} type='string' default='/' description='Text value of label.'/>
+                    <Prop name='type' isRequired={true} type='group' default='group' description='/'/>
+                    <Prop name='items' isRequired={true} type='Array<menuitem | submenu | menugroup | "divider">' default='/' description='Items, divider, groups or submenu of group in dropdown menu'/>
                 </PropsList>
 
                 <p className='docs-page__paragraph'>Items: Submenu</p>
                 <PropsList>
-                    <Prop name='label' isRequered={true} type='string' default='/' description='Text value of label.'/>
-                    <Prop name='icon' isRequered={false} type='string' default='/' description='Icon class name without the icon- part.'/>
-                    <Prop name='type' isRequered={true} type='submenu' default='submenu' description='/'/>
-                    <Prop name='items' isRequered={true} type='Array<menuitem | submenu | menugroup | "divider">' default='/' description='Items, divider, groups or submenu of submenu in dropdown menu'/>
+                    <Prop name='label' isRequired={true} type='string' default='/' description='Text value of label.'/>
+                    <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
+                    <Prop name='type' isRequired={true} type='submenu' default='submenu' description='/'/>
+                    <Prop name='items' isRequired={true} type='Array<menuitem | submenu | menugroup | "divider">' default='/' description='Items, divider, groups or submenu of submenu in dropdown menu'/>
                 </PropsList>
             </section>
         )

package/examples/pages/react/EmptyStates.tsx

@@ -124,10 +124,10 @@ export default class EmptyStateDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='title' isRequered={true} type='string' default='false' description='Title of the Empty state info block.'/>
-                    <Prop name='description' isRequered={false} type='string' default='false' description='Additional information e.g. suggested actions etc.'/>
-                    <Prop name='size' isRequered={false} type='small | large' default='small' description='Specifies the size and type of the illustration. Small should be used for narrow areas, like side panels, while large is suited for wider content areas. '/>
-                    <Prop name='illustration' isRequered={false} type='string' default='1' description='In combination with the size prop this defines the illustration. Possible values: 1, 2, 3 and dashboard (with size large only).'/>
+                    <Prop name='title' isRequired={true} type='string' default='false' description='Title of the Empty state info block.'/>
+                    <Prop name='description' isRequired={false} type='string' default='false' description='Additional information e.g. suggested actions etc.'/>
+                    <Prop name='size' isRequired={false} type='small | large' default='small' description='Specifies the size and type of the illustration. Small should be used for narrow areas, like side panels, while large is suited for wider content areas. '/>
+                    <Prop name='illustration' isRequired={false} type='string' default='1' description='In combination with the size prop this defines the illustration. Possible values: 1, 2, 3 and dashboard (with size large only).'/>
                 </PropsList>
 
             </section>