superdesk-ui-framework 3.0.0-beta.0 → 3.0.1-beta.3

package/examples/pages/react/Inputs.tsx

@@ -9,6 +9,8 @@ interface IState {
     required: boolean;
     disabled: boolean;
     invalid: boolean;
+    value: any;
+    value2: any;
 }
 
 export default class InputsDoc extends React.Component<{}, IState> {
@@ -18,7 +20,9 @@ export default class InputsDoc extends React.Component<{}, IState> {
             inlineLabel: false,
             required: true,
             disabled: false,
-            invalid: false
+            invalid: false,
+            value: null,
+            value2: '',
         }
     }
     
@@ -45,15 +49,147 @@ export default class InputsDoc extends React.Component<{}, IState> {
 
                             <div className='form__row'>
                                 <Input label='Input label'
-                                    value='This is some value'
+                                    value={''}
                                     maxLength={30}
+                                    type='text'
                                     error='This is error message'
                                     info='This is some hint message'
                                     inlineLabel={this.state.inlineLabel}
                                     required={this.state.required}
                                     disabled={this.state.disabled}
                                     invalid={this.state.invalid}
-                                    onChange={(value) => {}} />
+                                    tabindex={0}
+                                    onChange={(value) => this.setState({value2: value})} />
+                            </div>
+                            <div className='form__row'>
+                                <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) => this.setState({value: value})} />
+                            </div>
+                            <p className="docs-page__paragraph">// Hidden label</p>
+                            <div className='form__row'>
+                                <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) => 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>
 
@@ -75,6 +211,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
                 <h3 className='docs-page__h3'>Props</h3>
                 <PropsList>
                     <Prop name='value' isRequired={false} type='string' default='/' description='Item value'/>
+                    <Prop name='type' isRequired={false} type='text | number | password' default='text' description='Input type. Defaults to type text.'/>
                     <Prop name='label' isRequired={false} type='string' default='/' description='Input label'/>
                     <Prop name='maxLength' isRequired={false} type='number' default='/' description='Sets max length for input text'/>
                     <Prop name='info' isRequired={false} type='string' default='/' description='Hint text'/>
@@ -83,8 +220,9 @@ export default class InputsDoc extends React.Component<{}, IState> {
                     <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'/>
+                    <Prop name='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.'/>
                 </PropsList>
             </section>
         )
     }
-}
+}

package/examples/pages/react/LeftNavigations.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
-import { LeftMenu, Prop, PropsList } from '../../../app-typescript';
+import { Container, Heading, LeftMenu, Prop, PropsList, SimpleList, SimpleListItem } from '../../../app-typescript';
 
 export default class LeftNavigationsDoc extends React.Component<{}> {
     render() {
@@ -8,8 +8,20 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
         return (
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Left navigation</h2>
-                <p className="docs-page__paragraph">...</p>
 
+                <Markup.ReactMarkupCodePreview>{`
+                    <LeftMenu 
+                        activeItemId='1' 
+                        groups={[
+                                { label: 'SYSTEM SETTINGS', items: [{id: '1', label: 'General'}, {id: '2', label: 'Email settings'}, {id: '3', label: 'Spell checking'}]},
+                                { label: 'WORKFLOW', items: [{ id: '4', label: 'Desk' }, { id: '5', label: 'User Roles & Privileges'}]},
+                                { label: 'CONTENT CONFIG', items: [{id: '6', label: 'Image renditions'}, {id: '7', label: 'Controlled Vocabularies'}]}
+                            ]}
+                        onSelect={() => false} />
+                `}
+                </Markup.ReactMarkupCodePreview>
+
+                <h3 className="docs-page__h3">Default</h3>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <div className='docs-page__content-row'>
@@ -20,23 +32,160 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
                                         <p className="sd-top-menu__header">Top menu</p>
                                     </div>
                                 </div>
-                                    <LeftMenu ariaLabel={'Left navigation'} navClass={'docs-page__grid-page-example__side'} activeItemId='1' 
-                                        groups={[{ label: 'SYSTEM SETTINGS', items: [{ id: '1', label: 'General' }, { id: '2', label: 'Email settings' }, { id: '3', label: 'Spell checking' }] },
-                                                 { label: 'WORKFLOW', items: [{ id: '4', label: 'Desk' }, { id: '5', label: 'User Roles & Privileges' }] },
-                                                 { label: 'CONTENT CONFIG', items: [{ id: '6', label: 'Image renditions' }, { id: '7', label: 'Controlled Vocabularies' }] }]}
+                                    <LeftMenu ariaLabel={'Left navigation'} className={'docs-page__grid-page-example__side'} activeItemId='1' 
+                                        groups={[
+                                                {label: 'SYSTEM SETTINGS', items: [{id: '1', label: 'General'}, {id: '2', label: 'Email settings'}, {id: '3', label: 'Spell checking'}]},
+                                                {label: 'WORKFLOW', items: [{id: '4', label: 'Desk'}, {id: '5', label: 'User Roles & Privileges'}]},
+                                                {label: 'CONTENT CONFIG', items: [{id: '6', label: 'Image renditions'}, {id: '7', label: 'Controlled Vocabularies'}]}
+                                            ]}
                                         onSelect={() => false} />
                                 <div className='docs-page__grid-page-example__main'></div>
                             </div>
                         </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        <LeftMenu ariaLabel={'Left navigation'} navClass={'some-optional-class'} activeItemId='1' groups={[{ label: 'SYSTEM SETTINGS', items: [{ id: '1', label: 'General' }, { id: '2', label: 'Email settings' }, { id: '3', label: 'Spell checking' }] },
-                            { label: 'WORKFLOW', items: [{ id: '4', label: 'Desk' }, { id: '5', label: 'User Roles & Privileges' }] },
-                            { label: 'CONTENT CONFIG', items: [{ id: '6', label: 'Image renditions' }, { id: '7', label: 'Controlled Vocabularies' }] }]}
+                        <LeftMenu ariaLabel={'Left navigation'} className={'docs-page__grid-page-example__side'} activeItemId='1' 
+                            groups={[
+                                    {label: 'SYSTEM SETTINGS', items: [{id: '1', label: 'General'}, {id: '2', label: 'Email settings'}, {id: '3', label: 'Spell checking'}]},
+                                    {label: 'WORKFLOW', items: [{id: '4', label: 'Desk'}, {id: '5', label: 'User Roles & Privileges'}]},
+                                    {label: 'CONTENT CONFIG', items: [{id: '6', label: 'Image renditions'}, {id: '7', label: 'Controlled Vocabularies'}]}
+                                ]}
                             onSelect={() => false} />
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
+                <h3 className="docs-page__h3">With scrollspy</h3>
+                <p className="docs-page__paragraph">The component also supports the scrollspy variant. It is necessary to add ID value to items and add the ID value of scrollable container in the <code>scrollSpy</code> attribute.</p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row'>
+                            <div className='docs-page__grid-page-example'>
+                                <div className='docs-page__grid-page-example__top'>
+                                    <div className="sd-top-menu">
+                                        <a className="sd-top-menu__collapse-nav"><i className="icon-collapse icon--white"></i></a>
+                                        <p className="sd-top-menu__header">Top menu</p>
+                                    </div>
+                                </div>
+                                    <LeftMenu ariaLabel={'Left navigation'}
+                                        className={'docs-page__grid-page-example__side'}     
+                                        scrollSpy='#scrollContainer'
+                                        offset={-300}
+                                        activeItemId='1'
+                                        groups={[
+                                            { label: 'MAIN SECTIONS', items: [
+                                                { id: '1', label: 'Section 1', ref:'section1'},
+                                                { id: '2', label: 'Section 2', ref: 'section2' },
+                                                { id: '3', label: 'Section 3', ref: 'section3' },
+                                            
+                                            ]},
+                                            { label:'OTHER SECTIONS', items: [
+                                                { id: '4', label: 'Section 4', ref: 'section4' },
+                                                { id: '5', label: 'Section 5', ref: 'section5' }
+                                            ]},
+                                            { label:'OTHER SECTIONS', items: [
+                                                { id: '6', label: 'Section 6', ref: 'section6' },
+                                                { id: '7', label: 'Section 7', ref: 'section7' }
+                                            ]}
+                                        ]}
+                                    onSelect={() => false} />
+                                <div className='docs-page__grid-page-example__main sd-padding--4' id='scrollContainer' style={{height:600}}>
+                                        <SimpleList density='comfortable'>
+                                        <SimpleListItem stacked={true} id='section1' >
+                                            <Heading type='h3'>Section 1</Heading>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                        </SimpleListItem >
+                                        <SimpleListItem stacked={true} id='section2' >
+                                            <Heading type='h3'>Section 2</Heading>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                        </SimpleListItem>
+                                        <SimpleListItem stacked={true} id='section3' >
+                                            <Heading type='h3'>Section 3</Heading>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                        </SimpleListItem>
+                                        <SimpleListItem stacked={true} id='section4' >
+                                            <Heading type='h3'>Section 4</Heading>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                        </SimpleListItem>
+                                        <SimpleListItem stacked={true} id='section5' >
+                                            <Heading type='h3'>Section 5</Heading>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                        </SimpleListItem>
+                                        <SimpleListItem stacked={true} id='section6' >
+                                            <Heading type='h3'>Section 6</Heading>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                        </SimpleListItem>
+                                        <SimpleListItem stacked={true} id='section7' >
+                                            <Heading type='h3'>Section 7</Heading>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                        </SimpleListItem>
+                                        </SimpleList>
+                                </div>
+                            </div>
+                        </div>
+                    </Markup.ReactMarkupPreview> 
+                    <Markup.ReactMarkupCode>
+                        {`
+                            <LeftMenu ariaLabel={'Left navigation'}
+                                className={'docs-page__grid-page-example__side'}     
+                                scrollSpy='#scrollContainer'
+                                activeItemId='1' 
+                                groups={[
+                                    { label: 'MAIN SECTIONS', items: [
+                                        { id: '1', label: 'Section 1', ref:'section1'},
+                                        { id: '2', label: 'Section 2', ref: 'section2' },
+                                        { id: '3', label: 'Section 3', ref: 'section3' },
+                                    
+                                    ]},
+                                    {label:'OTHER SECTIONS', items: [
+                                        { id: '4', label: 'Section 4', ref: 'section4' },
+                                        { id: '5', label: 'Section 5', ref: 'section5' }
+                                    ]},
+                                    {label:'OTHER SECTIONS', items: [
+                                        { id: '4', label: 'Section 6', ref: 'section6' },
+                                        { id: '5', label: 'Section 7', ref: 'section7' }
+                                    ]}
+                                ]}
+                                onSelect={() => false} />
+                                
+                            <div id='#scrollContainer'>...</div>
+                        `}  
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
@@ -46,7 +195,10 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
                     <Prop name='menugroup items' isRequired={true} type='Array<menuitem>' default='/' description='Array of items'/>
                     <Prop name='menuitem id' isRequired={true} type='string' default='/' description='Menugroup id value'/>
                     <Prop name='menuitem label' isRequired={true} type='string' default='/' description='Menugroup label text value.'/>
+                    <Prop name='scrollSpy' isRequired={false} type='string' default='HTML' description='Name of the element of scrollable container.'/>
+                    <Prop name='offset' isRequired={false} type='number' default='-300' description='Offset value that adjusts to determine the elements are in the viewport.'/>
                 </PropsList>
+
             </section>
         )
     }

package/examples/pages/react/ListItems.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import * as Markup from "../../js/react";
+import { ListItemLoader, PropsList } from "../../../app-typescript";
+
+export default class ListItemsDoc extends React.Component {
+    render() {
+        return (
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">ListItemLoader</h2>
+                <Markup.ReactMarkupCodePreview>{`
+                    <ListItemLoader />
+                `}
+                </Markup.ReactMarkupCodePreview>
+                <h3 className="docs-page__h3 docs-page__h3--small-top-m">Skeleton type loader for list items.</h3>
+                {/* <p className="docs-page__paragraph">Basic layout structure for list elements. The content inside the elements serves just as an example.</p> */}
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className="docs-page__content-row">
+                            <ListItemLoader />
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <ListItemLoader />
+                    `}</Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+                
+                <h3 className="docs-page__h3">Props</h3>
+                <PropsList>
+
+                </PropsList>
+            </section>
+        )
+    }
+}

package/examples/pages/react/Modal.tsx

@@ -27,19 +27,19 @@ export default class ModalDoc extends React.Component<{}, IState> {
 
     render() {
         const modalFullFooter=(
-            <ButtonGroup align="right">
+            <ButtonGroup align="end">
                 <Button text='Cancel' onClick={() => {this.setState({modalFull:false})}}/>
                 <Button type='primary' text='Save' onClick={() => {}}/>
             </ButtonGroup>
         );
         const modalLargeFooter=(
-            <ButtonGroup align="right">
+            <ButtonGroup align="end">
                 <Button text='Cancel' onClick={() => {this.setState({modalLarge:false})}}/>
                 <Button type='primary' text='Save' onClick={() => {}}/>
             </ButtonGroup>
         );
         const modalXLargeFooter=(
-            <ButtonGroup align="right">
+            <ButtonGroup align="end">
                 <Button text='Cancel' onClick={() => {this.setState({modalXLarge:false})}}/>
                 <Button type='primary' text='Save' onClick={() => {}}/>
             </ButtonGroup>
@@ -60,7 +60,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
                 </p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <ButtonGroup align="right">
+                        <ButtonGroup align="end">
                             <Button text="Basic (no size)" onClick={() => this.setState({modalBasic: true})} />
                             <Button text="Small" onClick={() => this.setState({modalSmall: true})} />
                             <Button text="Medium" onClick={() => this.setState({modalMedium: true})} />
@@ -144,7 +144,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
                         // Large
                         <Button text="Large with footer" onClick={() => this.setState({modalLarge: true})} />
                         const modalLargeFooter=(
-                            <ButtonGroup align="right">
+                            <ButtonGroup align="end">
                                 <Button text='Cancel' onClick={() => {this.setState({modalLarge:false})}}/>
                                 <Button type='primary' text='Save' onClick={() => {}}/>
                             </ButtonGroup>
@@ -159,7 +159,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
                         // Extra large
                         <Button text="Extra Large with footer" onClick={() => this.setState({modalXLarge: true})} />
                         const modalXLargeFooter=(
-                            <ButtonGroup align="right">
+                            <ButtonGroup align="end">
                                 <Button text='Cancel' onClick={() => {this.setState({modalXLarge:false})}}/>
                                 <Button type='primary' text='Save' onClick={() => {}}/>
                             </ButtonGroup>
@@ -187,6 +187,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
                                visible={this.state.modalFull} 
                                theme='dark'
                                maximized={true}
+                               className='testClass'
                                onHide={() => {this.setState({modalFull: false})}}>
                             <p className="sd-margin-b--3">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes,
                             nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.
@@ -203,7 +204,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
                     <Markup.ReactMarkupCode>{`
                         <Button text="Open Modal" onClick={() => this.setState({modalFull: true})} />
                         const modalFullFooter=(
-                            <ButtonGroup align="right">
+                            <ButtonGroup align="end">
                                 <Button text='Cancel' onClick={() => {this.setState({modalFull:false})}}/>
                                 <Button type='primary' text='Save' onClick={() => {}}/>
                             </ButtonGroup>