superdesk-ui-framework 3.1.9 → 3.1.13

package/dist/vendor.bundle.js

@@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 	__webpack_require__.p = "";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 798);
+/******/ 	return __webpack_require__(__webpack_require__.s = 801);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -82,7 +82,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
 
 /***/ }),
 
-/***/ 24:
+/***/ 21:
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(global, module) {var __WEBPACK_AMD_DEFINE_RESULT__;/**
@@ -28246,21 +28246,21 @@ return jQuery;
 
 /***/ }),
 
-/***/ 798:
+/***/ 801:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-__webpack_require__(24);
+__webpack_require__(21);
 
 __webpack_require__(57);
 
-__webpack_require__(799);
+__webpack_require__(802);
 
-__webpack_require__(801);
+__webpack_require__(804);
 
-__webpack_require__(803);
+__webpack_require__(806);
 
 __webpack_require__(0);
 
@@ -28268,7 +28268,7 @@ __webpack_require__(9);
 
 /***/ }),
 
-/***/ 799:
+/***/ 802:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -28292,7 +28292,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 	if ( true ) {
 
 		// AMD. Register as an anonymous module.
-		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(57), __webpack_require__(800) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(57), __webpack_require__(803) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
 				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
 				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
 				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
@@ -29030,7 +29030,7 @@ return $.widget;
 
 /***/ }),
 
-/***/ 800:
+/***/ 803:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;( function( factory ) {
@@ -29060,16 +29060,16 @@ return $.ui.version = "1.13.0";
 
 /***/ }),
 
-/***/ 801:
+/***/ 804:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(802);
+__webpack_require__(805);
 module.exports = angular;
 
 
 /***/ }),
 
-/***/ 802:
+/***/ 805:
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(__webpack_provided_window_dot_jQuery) {/**
@@ -65676,16 +65676,16 @@ $provide.value("$locale", {
 
 /***/ }),
 
-/***/ 803:
+/***/ 806:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(804);
+__webpack_require__(807);
 module.exports = 'ngAnimate';
 
 
 /***/ }),
 
-/***/ 804:
+/***/ 807:
 /***/ (function(module, exports) {
 
 /**

package/examples/css/docs-page.css

@@ -61,12 +61,9 @@
     --docs-page-color-highlight: #33C5A0;
 }
 
-
-
-
 hr {
     border: transparent;
-    border: 1px dotted rgba(128, 128, 128, 0.75);
+    border: 1px dotted var(--sd-colour-line--medium);
     border-width: 1px 0 0;
     margin: 24px 0;
 }
@@ -575,7 +572,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
 }
 .docs-page__code-window {
     border: 1px solid hsla(0, 0%, 48%, 0.2);
-    border-radius: 2px;
+    border-radius: var(--b-radius--large);
     margin: 10px 0 20px;
     -webkit-box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.07);
     box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.07);
@@ -585,6 +582,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
     border-top: 1px solid var(--docs-page-border__window-bar--top);
     border-bottom: 1px solid var(--docs-page-border__window-bar--bottom);
     background: var(--docs-page-color-bg__window-bar);
+    border-radius: var(--b-radius--large) var(--b-radius--large) 0 0;
 }
 .docs-page__window-bar>a, .docs-page__window-bar>span {
     font-size: 16px;
@@ -643,6 +641,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
     background-color: hsl(214, 13%, 10%);
     padding: 16px 16px 16px 36px;
     overflow-y: scroll;
+    border-radius: 0 0 var(--b-radius--large) var(--b-radius--large);
 }
 .docs-page__code-markup ol {
     margin-left: 10px;
@@ -1028,7 +1027,7 @@ doc-gif-img:hover img {
     color: var(--color-text-light);
 }
 .docs-page__container table.utilities-table tbody td:first-child {
-    min-width: 200px;
+    min-width: 280px;
     width: auto;
     color: var(--color-text);
 }
@@ -1058,10 +1057,19 @@ doc-gif-img:hover img {
     margin-block-end: var(--space--4);
 }
 
+.utilities-table__container--no-height {
+    max-height: none;
+}
+
 .docs-page__container .doc-text--highlight {
     color: var(--docs-page-color-primary) !important;
 }
 
+table.utilities-table td .border-example-box {
+    min-width: 160px;
+    height: 32px;
+}
+
 /* -------------- END COLOR SWATCHES -------------- */
 /* -------------- PrismJS overrides -------------- */
 
@@ -1069,7 +1077,7 @@ code[class*="language-"],
 pre[class*="language-"] {
     font-family: 'Source Code Pro', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
     font-size: 1.1em;
-    border-radius: 0.4rem;
+    border-radius: var(--b-radius--large);
 }
 pre[class*="language-"] {
     background: hsl(214, 13%, 8%);

package/examples/js/doc.js

@@ -1,7 +1,7 @@
 /* eslint-disable */
 /* global _, PR */
 
-import { ReactDoc, ReactPlayground } from './../pages/components/Index';
+import { ReactDoc, ReactPlayground, ReactThemePicker } from './../pages/components/Index';
 import { DesignPatternsDoc } from './../pages/design-patterns/Index';
 import { HashRouter } from 'react-router-dom';
 
@@ -177,6 +177,17 @@ function docReactPlayground(playgrounds) {
     };
 }
 
+docThemePicker.$inject = [];
+function docThemePicker() {
+    return {
+        link: function (scope, elem) {
+            ReactDOM.render(
+                <ReactThemePicker />, elem[0]
+            )
+        }
+    };
+}
+
 docGifImg.$inject = [];
 function docGifImg() {
     return {
@@ -214,4 +225,5 @@ export default angular.module('ui-docs.directives', [])
     .directive('docReact', docReact)
     .directive('docDesignPatterns', docDesignPatterns)
     .directive('docReactPlayground', docReactPlayground)
+    .directive('docThemePicker', docThemePicker)
     .directive('docGifImg', docGifImg);

package/examples/pages/components/Alerts.tsx

@@ -142,7 +142,7 @@ export default class AlertDoc extends React.Component {
                 This will strip all margins and the border-radius from the component. Hollow style is not recommended in this case, and small size is advised.</p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <div className='sd-display--flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '360px'}}>
+                        <div className='d-flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '360px'}}>
                             <PanelElements.Panel open={true} side='left' size='small'>
                                 <PanelElements.PanelHeader title='Panel example' onClose={()=> false}>
                                     <Alert type='warning' icon='exclamation-sign' banner={true} size='small'>

package/examples/pages/components/ContentDivider.tsx

@@ -125,7 +125,7 @@ export default class ContentDividerDoc extends React.Component {
                         </div>
                         <p className="docs-page__paragraph ">// With text</p>
                         <p className="docs-page__paragraph--small sd-margin-b--3">Inside a flex container (flex-direction: column;).</p>
-                        <div className='docs-page__content-row sd-display--flex'>
+                        <div className='docs-page__content-row d-flex'>
                             <div style={{width:'100%'}}>
                                 Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et
                                 magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit

package/examples/pages/components/DragHandleDocs.tsx

@@ -23,7 +23,7 @@ export default class DragHandleDocs extends React.Component {
                             offering a wide range of size options.
                         </p>
                         <div className="docs-page__content-row">
-                            <div className='sd-display--flex sd-flex--items-start sd-gap--medium'>
+                            <div className='d-flex items-start sd-gap--medium'>
                                 <DragHandle dotsInRow='2' dotRows='5' />
                                 <DragHandle dotsInRow='2' dotRows='8' />
                                 <DragHandle dotsInRow='3' dotRows='6' />
@@ -39,7 +39,7 @@ export default class DragHandleDocs extends React.Component {
                             To be used within list items, draggable labels, and similar contexts.
                         </p>
                         <div className="docs-page__content-row">
-                            <div className='sd-display--flex sd-flex--items-start sd-gap--medium'>
+                            <div className='d-flex items-start sd-gap--medium'>
                                 <DragHandle blank={true} />
                                 <DragHandle dotsInRow='2' dotRows='10' blank={true} />
                                 <DragHandle dotsInRow='4' dotRows='10' blank={true} />

package/examples/pages/components/Index.tsx

@@ -72,8 +72,18 @@ import { ResizablePanelsDoc } from './ResizablePanels';
 import { IllustrationButtonDoc } from './IllustrationButton';
 
 // Utilities
-import {SpacingUtilitiesDoc} from './utilities/SpacingUtilities';
-import {TextUtilitiesDoc} from './utilities/TextUtilities';
+import { SpacingUtilitiesDoc } from './utilities/SpacingUtilities';
+import { TextUtilitiesDoc } from './utilities/TextUtilities';
+import { ShadowUtilitiesDoc } from './utilities/ShadowUtilities';
+import { PositionUtilitiesDoc } from './utilities/PositionUtilities';
+import { OverflowUtilitiesDoc } from './utilities/OverflowUtilities';
+import { DisplayUtilitiesDoc } from './utilities/DisplayUtilities';
+import { FlexAndGridUtilitiesDoc } from './utilities/FlexAndGridUtilities';
+import { BorderRadiusUtilitiesDoc } from './utilities/BorderRadiusUtilities';
+import { BorderUtilitiesDoc } from './utilities/BorderUtilities';
+import { OpacityUtilitiesDoc } from './utilities/OpacityUtilities';
+import { ObjectFitUtilitiesDoc } from './utilities/ObjectFitUtilities';
+import { ObjectPositionUtilitiesDoc } from './utilities/ObjectPositionUtilities';
 
 const pages = {
     basicComponents: {
@@ -136,7 +146,7 @@ const pages = {
             "drag-handle": {
                 name: 'Drag handle'
             },
-            "illustration-button" : {
+            "illustration-button": {
                 name: 'Illustration Button'
             }
         }
@@ -299,65 +309,52 @@ const pages = {
     utilityClasses: {
         name: "Utility classes",
         items: {
+            'border-utilities': {
+                name: 'Border'
+            },
+            'border-radius-utilities': {
+                name: 'Border Radius'
+            },
+            'display-utilities': {
+                name: 'Display'
+            },
+            'flex-and-grid-utilities': {
+                name: 'Flex & Grid'
+            },
+            'object-fit-utilities': {
+                name: 'Object Fit'
+            },
+            'object-position-utilities': {
+                name: 'Object Position'
+            },
+            'opacity-utilities': {
+                name: 'Opacity'
+            },
+            'overflow-utilities': {
+                name: 'Overflow'
+            },
+            'position-utilities': {
+                name: 'Position'
+            },
+            'shadow-utilities': {
+                name: 'Shadow'
+            },
             'spacing-utilities': {
-                name: 'Spacing Utilities',
+                name: 'Spacing',
             },
             'text-utilities': {
-                name: 'Text utilities'
+                name: 'Text'
             }
         }
     }
 }
-interface IProps {
-    theme?: string;
-}
-interface IState {
-    theme: 'dark-ui' | 'light-ui' | string;
-}
-
-class ReactDoc extends React.Component<IProps, IState> {
-    constructor(props: IProps) {
-        super(props);
-        this.state = {
-            theme: 'light-ui',
-        }
-        this.handleTheme = this.handleTheme.bind(this);
-    }
-
-    handleTheme(newTheme: string) {
-        document.body.setAttribute('data-theme', newTheme);
-
-        this.setState({
-            theme: newTheme
-        })
-    }
-
-    checkTheme(theme: string) {
-        return this.state.theme === theme;
-    }
 
+class ReactDoc extends React.Component {
     render() {
         return (
             <React.Fragment>
                 <ReactNav pages={pages} />
                 <main className="docs-page__content docs-page__container-fluid">
-                    <div className="docs-page__fla-button-container">
-                        <Dropdown
-                            items={[
-                                {
-                                    type: 'group', label: 'Chose a theme', items: [
-                                        'divider',
-                                        { label: 'Light', icon: 'adjust', active: this.checkTheme('light-ui'), onSelect: () => this.handleTheme('light-ui') },
-                                        { label: 'Dark', icon: 'adjust', active: this.checkTheme('dark-ui'), onSelect: () => this.handleTheme('dark-ui') },
-                                        { label: 'Accessible Light', active: this.checkTheme('accessible-light-ui'), icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui') },
-                                    ]
-                                },
-                            ]}>
-                            <button className="docs-page__fla-button" aria-label="Change theme" onClick={() => false}>
-                                <i className="icon-adjust"></i>
-                            </button>
-                        </Dropdown>
-                    </div>
                     <Switch>
                         <Route path="/components/buttons" component={ButtonsDoc} />
                         <Route path="/components/icon-buttons" component={IconButtonDoc} />
@@ -422,6 +419,16 @@ class ReactDoc extends React.Component<IProps, IState> {
                         {/* Utilities */}
                         <Route path="/components/spacing-utilities" component={SpacingUtilitiesDoc} />
                         <Route path="/components/text-utilities" component={TextUtilitiesDoc} />
+                        <Route path="/components/shadow-utilities" component={ShadowUtilitiesDoc} />
+                        <Route path="/components/position-utilities" component={PositionUtilitiesDoc} />
+                        <Route path="/components/overflow-utilities" component={OverflowUtilitiesDoc} />
+                        <Route path="/components/display-utilities" component={DisplayUtilitiesDoc} />
+                        <Route path="/components/flex-and-grid-utilities" component={FlexAndGridUtilitiesDoc} />
+                        <Route path="/components/border-radius-utilities" component={BorderRadiusUtilitiesDoc} />
+                        <Route path="/components/border-utilities" component={BorderUtilitiesDoc} />
+                        <Route path="/components/opacity-utilities" component={OpacityUtilitiesDoc} />
+                        <Route path="/components/object-fit-utilities" component={ObjectFitUtilitiesDoc} />
+                        <Route path="/components/object-position-utilities" component={ObjectPositionUtilitiesDoc} />
                         <Route path="/" component={ReactDefault} />
                     </Switch>
                 </main>
@@ -444,6 +451,54 @@ class ReactPlayground extends React.Component<IProps> {
     }
 }
 
+interface IProps {
+    theme?: string;
+}
+interface IState {
+    theme: 'dark-ui' | 'light-ui' | string;
+}
+class ReactThemePicker extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            theme: 'light-ui',
+        }
+        this.handleTheme = this.handleTheme.bind(this);
+    }
+
+    handleTheme(newTheme: string) {
+        document.body.setAttribute('data-theme', newTheme);
+
+        this.setState({
+            theme: newTheme
+        })
+    }
+
+    checkTheme(theme: string) {
+        return this.state.theme === theme;
+    }
+
+    render() {
+        return (
+            <Dropdown
+                items={[
+                    {
+                        type: 'group', label: 'Chose a theme', items: [
+                            'divider',
+                            { label: 'Light', icon: 'adjust', active: this.checkTheme('light-ui'), onSelect: () => this.handleTheme('light-ui') },
+                            { label: 'Dark', icon: 'adjust', active: this.checkTheme('dark-ui'), onSelect: () => this.handleTheme('dark-ui') },
+                            { label: 'Accessible Light', active: this.checkTheme('accessible-light-ui'), icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui') },
+                        ]
+                    },
+                ]}>
+                <button className="docs-page__header-button" aria-label="Change theme" onClick={() => false}>
+                    <i className="icon-adjust"></i>
+                </button>
+            </Dropdown>
+        );
+    }
+}
+
 const parsePlayground = ({ match }, playgrounds) => {
     const Component = Playgrounds[playgrounds[match.params.id].component];
     return (
@@ -451,5 +506,5 @@ const parsePlayground = ({ match }, playgrounds) => {
     );
 };
 
-export { ReactDoc, ReactPlayground };
+export { ReactDoc, ReactPlayground, ReactThemePicker };
 

package/examples/pages/components/Panel.tsx

@@ -57,15 +57,15 @@ export default class PanelDoc extends React.Component<IProps, IState> {
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <p className="docs-page__paragraph">// Left</p>
-                        <div className='sd-display--flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
+                        <div className='d-flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
                             {this.state.openPanel1 ? null : 
-                                <div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
+                                <div className='d-flex items-center justify-center sd-flex--grow'>
                                     <Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel1': true})} />
                                 </div> 
                             }
                             <PanelElements.Panel side='left' background='light' open={this.state.openPanel1} size='x-small'>
                                 <PanelElements.PanelHeader
-                                    title='This is the title for the Panel'
+                                    title='This is the Panel title'
                                     onClose={() => this.setState({'openPanel1': false})}
                                     iconButtons={[
                                         <Rotate degrees={this.state.rotate ? 90 : 0}>
@@ -92,7 +92,7 @@ export default class PanelDoc extends React.Component<IProps, IState> {
                     <Markup.ReactMarkupCode>{`
                         // Left
                         {this.state.openPanel1 ? null : 
-                            <div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
+                            <div className='d-flex items-center justify-center sd-flex--grow'>
                                 <Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel1': true})} />
                             </div> 
                         }
@@ -130,9 +130,9 @@ export default class PanelDoc extends React.Component<IProps, IState> {
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <p className="docs-page__paragraph">// Right, custom elements inside the footer + dark theme.</p>
-                        <div className='sd-display--flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
+                        <div className='d-flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
                             {this.state.openPanel2 ? null :
-                                <div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
+                                <div className='d-flex items-center justify-center sd-flex--grow'>
                                     <Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel2': true})} />
                                 </div>
                             }
@@ -168,7 +168,7 @@ export default class PanelDoc extends React.Component<IProps, IState> {
                         // Right, custom elements inside the footer + dark theme.
 
                         {this.state.openPanel2 ? null :
-                            <div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
+                            <div className='d-flex items-center justify-center sd-flex--grow'>
                                 <Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel2': true})} />
                             </div>
                         }
@@ -201,9 +201,9 @@ export default class PanelDoc extends React.Component<IProps, IState> {
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <p className="docs-page__paragraph">// With PanelHeaderSlidingToolbar element inside the PanelHeader</p>
-                        <div className='sd-display--flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
+                        <div className='d-flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
                             {this.state.openPanel3 ? null :
-                                <div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
+                                <div className='d-flex items-center justify-center sd-flex--grow'>
                                     <Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel3': true})} />
                                 </div>
                             }
@@ -245,7 +245,7 @@ export default class PanelDoc extends React.Component<IProps, IState> {
                         // With PanelHeaderSlidingToolbar element inside the PanelHeader
 
                         {this.state.openPanel3 ? null :
-                            <div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
+                            <div className='d-flex items-center justify-center sd-flex--grow'>
                                 <Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel3': true})} />
                             </div>
                         }
@@ -284,9 +284,9 @@ export default class PanelDoc extends React.Component<IProps, IState> {
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <p className="docs-page__paragraph">// With PanelTools (allowing custom actions) + dark theme</p>
-                        <div className='sd-display--flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
+                        <div className='d-flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
                             {this.state.openPanel4 ? null :
-                                <div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
+                                <div className='d-flex items-center justify-center sd-flex--grow'>
                                     <Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel4': true})} />
                                 </div>
                             }
@@ -317,7 +317,7 @@ export default class PanelDoc extends React.Component<IProps, IState> {
                         // With PanelTools (allowing custom actions) + dark theme
 
                         {this.state.openPanel4 ? null :
-                            <div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
+                            <div className='d-flex items-center justify-center sd-flex--grow'>
                                 <Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel4': true})} />
                             </div>
                         }

package/examples/pages/components/Tags.tsx

@@ -55,7 +55,7 @@ export default class TagDoc extends React.Component<{}, ITag> {
             
             <Markup.ReactMarkup>
                 <Markup.ReactMarkupPreview>
-                <div className='docs-page__content-row sd-display--flex sd-gap--small'>
+                <div className='docs-page__content-row d-flex gap-1'>
                     {this.state.tags.map((tag,index)=>{
                         return (
                             <React.Fragment key={index}>
@@ -86,7 +86,7 @@ export default class TagDoc extends React.Component<{}, ITag> {
 
             <Markup.ReactMarkup>
                 <Markup.ReactMarkupPreview>
-                <div className='docs-page__content-row sd-display--flex sd-gap--small'>
+                <div className='docs-page__content-row d-flex gap-1'>
                     {this.state.tags2.map((tag,index)=>{
                         return (
                             <React.Fragment key={index}>

package/examples/pages/components/TimePicker.tsx

@@ -2,6 +2,10 @@ import * as React from 'react';
 import * as Markup from '../../js/react';
 import {PropsList, Prop} from '../../../app-typescript';
 import {TimePicker} from '../../../app-typescript/components/TimePicker';
+import {TimePickerV2} from '../../../app-typescript/components/TimePickerV2';
+
+let minutes = Array.from(Array(60).keys());
+let changedMinutes = minutes.filter((num) => num % 15 !== 0)
 
 class TimePickerExample extends React.PureComponent<{}, {time: string}> {
     constructor(props) {
@@ -27,7 +31,15 @@ class TimePickerExample extends React.PureComponent<{}, {time: string}> {
     }
 }
 
-export default class TimePickerDoc extends React.Component {
+export default class TimePickerDoc extends React.Component<{}, {time: string}> {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            time: '14:00',
+        };
+    }
+
     render() {
         return (
             <section className="docs-page__container">
@@ -59,6 +71,36 @@ export default class TimePickerDoc extends React.Component {
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
+                <p className='docs-page__paragraph'>TimePickerV2:</p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row'>
+                            <TimePickerV2
+                                value={this.state.time}
+                                label='This is Label'
+                                disabledOptions={{
+                                    minutes: changedMinutes,
+                                }}
+                                onChange={(time) => {
+                                    this.setState({time});
+                                }}
+                            />
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <TimePickerV2
+                            value={this.state.time}
+                            label='This is Label'
+                            disableOptions={{
+                                minutes: changedMinutes,
+                            }}
+                            onChange={(time) => {
+                                this.setState({time})
+                            }}
+                        />
+                    `}</Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
                 <h3 className='docs-page__h3'>Props</h3>
                 <PropsList>
                     <Prop name='value' isRequired={true} type='string' default='/' description='Item value.' />