@progress/kendo-themes-html 5.8.2-dev.4 → 5.8.2-dev.6

package/src/dropdownlist/tests/dropdownlist-adaptive.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { Button } from '../../button';
+import { ActionSheet, ActionSheetFooter, ActionSheetHeader } from '../../action-sheet';
 import { List, ListItem } from '../../list';
 
 const root = ReactDOM.createRoot(
@@ -8,9 +8,13 @@ const root = ReactDOM.createRoot(
 );
 
 const styles = `
-    .k-actionsheet-container {
-        width: 100%;
+    #test-area {
+        --kendo-actionsheet-height: 400px;
+        --kendo-actionsheet-max-height: 400px;
+    }
+    #test-area > section {
         height: 600px;
+        overflow: hidden;
         position: relative;
         transform: translateZ(0);
     }
@@ -25,70 +29,45 @@ root.render(
             <span>full screen</span>
 
             <section>
-                <div className="k-actionsheet-container">
-                    <div className="k-overlay"></div>
-
-                    <div className="k-actionsheet k-actionsheet-bottom k-adaptive-actionsheet">
-                        <div className="k-actionsheet-titlebar">
-                            <div className="k-actionsheet-title k-text-center">
-                                <div>Dropdownlist label</div>
-                            </div>
-                            <div className="k-actionsheet-actions">
-                                <Button icon="x" fillMode="flat"></Button>
-                            </div>
-                        </div>
-                        <div className="k-actionsheet-content">
-                            <List size="large">
-                                <ListItem>List item</ListItem>
-                                <ListItem hover>Hover</ListItem>
-                                <ListItem focus>Focus</ListItem>
-                                <ListItem selected>Selected</ListItem>
-                                <ListItem hover selected>Hover selected</ListItem>
-                                <ListItem disabled>Disabled</ListItem>
-                                <ListItem>List item with very long text, that spans on multiple lines</ListItem>
-                                <ListItem showCheckbox>Checkbox</ListItem>
-                                <ListItem showIcon iconName="cog">Icon</ListItem>
-                                <ListItem showCheckbox showIcon iconName="cog">Checkbox icon</ListItem>
-                            </List>
-                        </div>
-                        <div className="k-actionsheet-footer k-actions k-actions-stretched">
-                            <Button size="large" themeColor="primary">Select date</Button>
-                        </div>
+                <ActionSheet adaptive={true}>
+                    <ActionSheetHeader title="Dropdownlist label" className="k-text-center" actions={[ "x" ]} filter={true} />
+                    <div className="k-list-container">
+                        <List size="large">
+                            <ListItem text="List item" />
+                            <ListItem text="Hover" hover />
+                            <ListItem text="Focus" focus />
+                            <ListItem text="Selected" selected />
+                            <ListItem text="Hover selected" hover selected />
+                            <ListItem text="Disabled" disabled />
+                            <ListItem text="List item with very long text, that spans on multiple lines" />
+                            <ListItem text="Checkbox" showCheckbox />
+                            <ListItem text="Icon" showIcon iconName="cog" />
+                            <ListItem text="Checkbox icon" showCheckbox showIcon iconName="cog" />
+                        </List>
                     </div>
-                </div>
+                    <ActionSheetFooter actions={[ "Cancel", "!Select" ]} />
+                </ActionSheet>
             </section>
-            <section>
-                <div className="k-actionsheet-container">
-                    <div className="k-overlay"></div>
 
-                    <div className="k-actionsheet k-actionsheet-bottom k-actionsheet-fullscreen k-adaptive-actionsheet">
-                        <div className="k-actionsheet-titlebar">
-                            <div className="k-actionsheet-title k-text-center">
-                                <div>Dropdownlist label</div>
-                            </div>
-                            <div className="k-actionsheet-actions">
-                                <Button icon="x" fillMode="flat"></Button>
-                            </div>
-                        </div>
-                        <div className="k-actionsheet-content">
-                            <List size="large">
-                                <ListItem>List item</ListItem>
-                                <ListItem hover>Hover</ListItem>
-                                <ListItem focus>Focus</ListItem>
-                                <ListItem selected>Selected</ListItem>
-                                <ListItem hover selected>Hover selected</ListItem>
-                                <ListItem disabled>Disabled</ListItem>
-                                <ListItem>List item with very long text, that spans on multiple lines</ListItem>
-                                <ListItem showCheckbox>Checkbox</ListItem>
-                                <ListItem showIcon iconName="cog">Icon</ListItem>
-                                <ListItem showCheckbox showIcon iconName="cog">Checkbox icon</ListItem>
-                            </List>
-                        </div>
-                        <div className="k-actionsheet-footer k-actions k-actions-stretched">
-                            <Button size="large" themeColor="primary">Select date</Button>
-                        </div>
+            <section>
+                <ActionSheet adaptive={true} fullscreen={true}>
+                    <ActionSheetHeader title="Dropdownlist label" className="k-text-center" actions={[ "x" ]} filter={true} />
+                    <div className="k-list-container">
+                        <List size="large">
+                            <ListItem text="List item" />
+                            <ListItem text="Hover" hover />
+                            <ListItem text="Focus" focus />
+                            <ListItem text="Selected" selected />
+                            <ListItem text="Hover selected" hover selected />
+                            <ListItem text="Disabled" disabled />
+                            <ListItem text="List item with very long text, that spans on multiple lines" />
+                            <ListItem text="Checkbox" showCheckbox />
+                            <ListItem text="Icon" showIcon iconName="cog" />
+                            <ListItem text="Checkbox icon" showCheckbox showIcon iconName="cog" />
+                        </List>
                     </div>
-                </div>
+                    <ActionSheetFooter actions={[ "Cancel", "!Select" ]} />
+                </ActionSheet>
             </section>
         </div>
 

package/src/filter/tests/filter.tsx

@@ -19,20 +19,20 @@ root.render(
                 <ul className="k-filter-container">
                     <li className="k-filter-group-main">
                         <div className="k-filter-toolbar">
-                            <div className="k-toolbar">
-                                <div className="k-filter-toolbar-item">
+                            <div className="k-toolbar k-focus">
+                                <div className="k-filter-toolbar-item k-toolbar-item">
                                     <ButtonGroup>
                                         <Button selected>And</Button>
                                         <Button>Or</Button>
                                     </ButtonGroup>
                                 </div>
-                                <div className="k-filter-toolbar-item">
+                                <div className="k-filter-toolbar-item k-toolbar-item">
                                     <Button icon="filter-add-expression">Add Expression</Button>
                                 </div>
-                                <div className="k-filter-toolbar-item">
+                                <div className="k-filter-toolbar-item k-toolbar-item">
                                     <Button icon="filter-add-group">Add Group</Button>
                                 </div>
-                                <div className="k-filter-toolbar-item">
+                                <div className="k-filter-toolbar-item k-toolbar-item">
                                     <Button fillMode="flat" icon="close"></Button>
                                 </div>
                             </div>
@@ -41,16 +41,16 @@ root.render(
                             <li className="k-filter-item">
                                 <div className="k-filter-toolbar">
                                     <div className="k-toolbar">
-                                        <div className="k-filter-toolbar-item k-filter-field">
+                                        <div className="k-filter-toolbar-item k-toolbar-item k-filter-field">
                                             <DropdownList value="Name" />
                                         </div>
-                                        <div className="k-filter-toolbar-item k-filter-operator">
+                                        <div className="k-filter-toolbar-item k-toolbar-item k-filter-operator k-focus">
                                             <DropdownList value="Is equal to" />
                                         </div>
-                                        <div className="k-filter-toolbar-item k-filter-value">
+                                        <div className="k-filter-toolbar-item k-toolbar-item k-filter-value">
                                             <Textbox placeholder="James"/>
                                         </div>
-                                        <div className="k-filter-toolbar-item">
+                                        <div className="k-filter-toolbar-item k-toolbar-item">
                                             <Button fillMode="flat" icon="close"></Button>
                                         </div>
                                     </div>
@@ -59,16 +59,16 @@ root.render(
                             <li className="k-filter-item">
                                 <div className="k-filter-toolbar">
                                     <div className="k-toolbar">
-                                        <div className="k-filter-toolbar-item k-filter-field">
+                                        <div className="k-filter-toolbar-item k-toolbar-item k-filter-field">
                                             <DropdownList value="Price" />
                                         </div>
-                                        <div className="k-filter-toolbar-item k-filter-operator">
+                                        <div className="k-filter-toolbar-item k-toolbar-item k-filter-operator">
                                             <DropdownList value="Is greater than" />
                                         </div>
-                                        <div className="k-filter-toolbar-item k-filter-value">
+                                        <div className="k-filter-toolbar-item k-toolbar-item k-filter-value">
                                             <NumericTextbox placeholder="100,00"/>
                                         </div>
-                                        <div className="k-filter-toolbar-item">
+                                        <div className="k-filter-toolbar-item k-toolbar-item">
                                             <Button fillMode="flat" icon="close"></Button>
                                         </div>
                                     </div>
@@ -76,17 +76,17 @@ root.render(
                             </li>
                             <li className="k-filter-item">
                                 <div className="k-filter-toolbar">
-                                    <div className="k-toolbar">
-                                        <div className="k-filter-toolbar-item k-filter-field">
+                                    <div className="k-toolbar k-focus">
+                                        <div className="k-filter-toolbar-item k-toolbar-item k-filter-field">
                                             <DropdownList value="Discontinued" />
                                         </div>
-                                        <div className="k-filter-toolbar-item k-filter-operator">
+                                        <div className="k-filter-toolbar-item k-toolbar-item k-filter-operator">
                                             <DropdownList value="Is equal to" />
                                         </div>
-                                        <div className="k-filter-toolbar-item k-filter-value">
+                                        <div className="k-filter-toolbar-item k-toolbar-item k-filter-value">
                                             <DropdownList value="False"/>
                                         </div>
-                                        <div className="k-filter-toolbar-item">
+                                        <div className="k-filter-toolbar-item k-toolbar-item">
                                             <Button fillMode="flat" icon="close"></Button>
                                         </div>
                                     </div>
@@ -95,18 +95,18 @@ root.render(
                             <li className="k-filter-item">
                                 <div className="k-filter-toolbar">
                                     <div className="k-toolbar">
-                                        <div className="k-filter-toolbar-item k-filter-filed">
+                                        <div className="k-filter-toolbar-item k-toolbar-item k-filter-filed">
                                             <DropdownList value="First Ordered" />
                                         </div>
-                                        <div className="k-filter-toolbar-item">
+                                        <div className="k-filter-toolbar-item k-toolbar-item">
                                             <div className="k-filter-operator">
                                                 <DropdownList value="Is before" />
                                             </div>
                                         </div>
-                                        <div className="k-filter-toolbar-item k-filter-value">
+                                        <div className="k-filter-toolbar-item k-toolbar-item k-filter-value">
                                             <DatePicker placeholder="1/21/2021" />
                                         </div>
-                                        <div className="k-filter-toolbar-item">
+                                        <div className="k-filter-toolbar-item k-toolbar-item">
                                             <Button fillMode="flat" icon="close"></Button>
                                         </div>
                                     </div>
@@ -114,19 +114,19 @@ root.render(
                                 <li className="k-filter-item">
                                     <div className="k-filter-toolbar">
                                         <div className="k-toolbar">
-                                            <div className="k-filter-toolbar-item">
+                                            <div className="k-filter-toolbar-item k-toolbar-item">
                                                 <ButtonGroup>
                                                     <Button selected>And</Button>
                                                     <Button>Or</Button>
                                                 </ButtonGroup>
                                             </div>
-                                            <div className="k-filter-toolbar-item">
+                                            <div className="k-filter-toolbar-item k-toolbar-item">
                                                 <Button icon="filter-add-expression">Add Expression</Button>
                                             </div>
-                                            <div className="k-filter-toolbar-item">
+                                            <div className="k-filter-toolbar-item k-toolbar-item">
                                                 <Button icon="filter-add-group">Add Group</Button>
                                             </div>
-                                            <div className="k-filter-toolbar-item">
+                                            <div className="k-filter-toolbar-item k-toolbar-item">
                                                 <Button fillMode="flat" icon="close"></Button>
                                             </div>
                                         </div>
@@ -135,13 +135,13 @@ root.render(
                                         <li className="k-filter-item">
                                             <div className="k-filter-toolbar">
                                                 <div className="k-toolbar">
-                                                    <div className="k-filter-toolbar-item k-filter-field">
+                                                    <div className="k-filter-toolbar-item k-toolbar-item k-filter-field">
                                                         <DropdownList value="Name" />
                                                     </div>
-                                                    <div className="k-filter-toolbar-item k-filter-operator">
+                                                    <div className="k-filter-toolbar-item k-toolbar-item k-filter-operator">
                                                         <DropdownList value="Is empty" />
                                                     </div>
-                                                    <div className="k-filter-toolbar-item">
+                                                    <div className="k-filter-toolbar-item k-toolbar-item">
                                                         <Button fillMode="flat" icon="close"></Button>
                                                     </div>
                                                 </div>
@@ -150,13 +150,13 @@ root.render(
                                         <li className="k-filter-item">
                                             <div className="k-filter-toolbar">
                                                 <div className="k-toolbar">
-                                                    <div className="k-filter-toolbar-item k-filter-field">
+                                                    <div className="k-filter-toolbar-item k-toolbar-item k-filter-field">
                                                         <DropdownList value="Price" />
                                                     </div>
-                                                    <div className="k-filter-toolbar-item k-filter-operator">
+                                                    <div className="k-filter-toolbar-item k-toolbar-item k-filter-operator">
                                                         <DropdownList value="Is not null" />
                                                     </div>
-                                                    <div className="k-filter-toolbar-item">
+                                                    <div className="k-filter-toolbar-item k-toolbar-item">
                                                         <Button fillMode="flat" icon="close"></Button>
                                                     </div>
                                                 </div>

package/src/index.ts

@@ -5,6 +5,7 @@ export * from './typography/index';
 export * from './icon/index';
 
 // Primitive components
+export * from './action-buttons/index';
 export * from './input/index';
 // export * from './picker/index';
 export * from './popup/index';
@@ -20,7 +21,6 @@ export * from './color-preview/index';
 // export * from './skeleton/index';
 
 // Native forms
-export * from './action-buttons/index';
 export * from './button/index';
 export * from './button-group/index';
 export * from './menu-button/index';
@@ -58,13 +58,12 @@ export * from './switch/index';
 // export * from './dropzone/index';
 
 // Command interfaces
-// export * from './action-buttons/index';
 export * from './fab/index';
 export * from './menu/index';
 // export * from './toolbar/index';
 
 // Popups and modals
-// export * from './action-sheet/index';
+export * from './action-sheet/index';
 // export * from './dialog/index';
 // export * from './drawer/index';
 // export * from './notification/index';

package/src/list/list-item.tsx

@@ -6,6 +6,7 @@ import { Icon } from '../icon';
 export interface ListItemProps {
     children?: React.ReactNode;
     className?: string;
+    text?: string;
     groupLabel?: string;
     showIcon?: boolean;
     iconName?: string;
@@ -24,6 +25,7 @@ export class ListItem extends React.Component<ListItemProps> {
         const {
             children,
             className,
+            text,
             groupLabel,
             showIcon,
             iconName,
@@ -35,6 +37,9 @@ export class ListItem extends React.Component<ListItemProps> {
             disabled,
         } = this.props;
 
+        const textOrChildren = text
+            ? text
+            : children;
 
         return (
             <li
@@ -50,7 +55,7 @@ export class ListItem extends React.Component<ListItemProps> {
                 )}>
                 {showCheckbox && <Checkbox checked={checked} />}
                 {showIcon && <Icon name={iconName} />}
-                <span className="k-list-item-text">{children}</span>
+                <span className="k-list-item-text">{textOrChildren}</span>
                 {groupLabel && groupLabel !== '' && <div className="k-list-item-group-label">{groupLabel}</div>}
             </li>
         );

package/src/multiviewcalendar/multiviewcalendar.tsx

@@ -6,6 +6,7 @@ export interface MultiViewCalendarProps {
     className?: string;
     calendarHeaderText?: string;
     calendarView?: 'month' | 'year' | 'decade' | 'century';
+    size?: null | 'small' | 'medium' | 'large';
     viewsCount?: string;
     orientation?: 'horizontal' | 'vertical';
     showCalendarFooter?: boolean;
@@ -21,6 +22,7 @@ export class MultiViewCalendar extends React.Component<MultiViewCalendarProps> {
         viewsCount: '2',
         orientation: 'horizontal',
         calendarView: 'month',
+        size: 'medium'
     };
 
     render() {
@@ -34,6 +36,7 @@ export class MultiViewCalendar extends React.Component<MultiViewCalendarProps> {
             showWeek,
             showOtherMonth,
             showCalendarCaption,
+            size,
             ...htmlAttributes
         } = this.props;
 
@@ -44,7 +47,7 @@ export class MultiViewCalendar extends React.Component<MultiViewCalendarProps> {
                     className,
                     'k-calendar-range',
                 )}
-
+                size={size}
                 calendarHeaderText={calendarHeaderText}
                 calendarView={calendarView}
                 viewsCount={viewsCount}

package/src/signature/signature.tsx

@@ -55,6 +55,7 @@ export class Signature extends React.Component<SignatureProps> {
                         'k-signature-maximized': maximized
                     }
                 )}>
+                <canvas className="k-signature-canvas"></canvas>
                 <div
                     className={classNames(
                         className,
@@ -66,8 +67,9 @@ export class Signature extends React.Component<SignatureProps> {
                             className,
                             'k-signature-action',
                             'k-signature-maximize',
+                            maximized ? 'k-hidden' : ''
                         )}
-                        icon="window-maximize"
+                        icon="hyperlink-open"
                         rounded={this.props.rounded}
                         size={this.props.size}
                         fillMode="flat"
@@ -77,15 +79,14 @@ export class Signature extends React.Component<SignatureProps> {
                             className,
                             'k-signature-action',
                             'k-signature-minimize',
-                            'k-hidden'
+                            maximized ? '' : 'k-hidden'
                         )}
-                        icon="window-minimize"
+                        icon="hyperlink-open"
                         rounded={this.props.rounded}
                         size={this.props.size}
                         fillMode="flat"
                     />
                 </div>
-                <canvas className="k-signature-canvas"></canvas>
                 <div className="k-signature-line"></div>
                 <div
                     className={classNames(

package/src/signature/tests/signature-flat.tsx

@@ -11,6 +11,9 @@ const styles = `
         display: flex;
         justify-content: end;
     }
+    .k-signature-minimize {
+        transform: rotate(180deg);
+    }
 `;
 
 root.render(

package/src/signature/tests/signature-outline.tsx

@@ -11,6 +11,9 @@ const styles = `
         display: flex;
         justify-content: end;
     }
+    .k-signature-minimize {
+        transform: rotate(180deg);
+    }
 `;
 
 root.render(

package/src/signature/tests/signature.tsx

@@ -11,6 +11,9 @@ const styles = `
         display: flex;
         justify-content: end;
     }
+    .k-signature-minimize {
+        transform: rotate(180deg);
+    }
 `;
 
 root.render(

package/src/time-selector/time-selector.tsx

@@ -35,7 +35,7 @@ export class TimeSelector extends React.Component<TimeSelectorProps> {
                 <div className="k-time-part">
                     <div className="k-time-header">
                         <span className="k-title">10:00:00 AM</span>
-                        <Button fillMode="flat" className="k-time-now">Now</Button>
+                        <Button fillMode="flat" size={size} className="k-time-now">Now</Button>
                     </div>
                     <div className="k-time-list-container">
                         <span className="k-time-highlight"></span>
@@ -44,36 +44,7 @@ export class TimeSelector extends React.Component<TimeSelectorProps> {
                             <div className="k-time-list">
                                 <div className="k-content k-scrollable k-time-container">
                                     <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
-                                        <li className="k-item">
-                                            <span>0</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>1</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>2</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>3</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>4</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>5</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>6</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>7</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>8</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>9</span>
-                                        </li>
+                                        {[ ...Array(24).keys() ].map((hour) => <li key={hour} className="k-item"><span>{hour}</span></li>)}
                                     </ul>
                                     <div className="k-scrollable-placeholder"></div>
                                 </div>
@@ -85,36 +56,7 @@ export class TimeSelector extends React.Component<TimeSelectorProps> {
                             <div className="k-time-list">
                                 <div className="k-content k-scrollable k-time-container">
                                     <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
-                                        <li className="k-item">
-                                            <span>0</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>1</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>2</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>3</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>4</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>5</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>6</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>7</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>8</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>9</span>
-                                        </li>
+                                        {[ ...Array(60).keys() ].map((minute) => <li key={minute} className="k-item"><span>{minute}</span></li>)}
                                     </ul>
                                     <div className="k-scrollable-placeholder"></div>
                                 </div>
@@ -126,36 +68,7 @@ export class TimeSelector extends React.Component<TimeSelectorProps> {
                             <div className="k-time-list">
                                 <div className="k-content k-scrollable k-time-container">
                                     <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
-                                        <li className="k-item">
-                                            <span>0</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>1</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>2</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>3</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>4</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>5</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>6</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>7</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>8</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>9</span>
-                                        </li>
+                                        {[ ...Array(60).keys() ].map((second) => <li key={second} className="k-item"><span>{second}</span></li>)}
                                     </ul>
                                     <div className="k-scrollable-placeholder"></div>
                                 </div>