@progress/kendo-themes-html 6.7.0-dev.0 → 6.7.0-dev.2

package/src/table/tests/table-native-sizes.tsx

@@ -1,5 +1,4 @@
-import { Table, TableGroupRow, TableRow, TableTbody, TableTd, TableTfoot, TableTh, TableThead } from '../../table';
-
+import { DataTable, TableNative } from '../../table';
 
 const styles = `
 #test-area {
@@ -16,186 +15,9 @@ export default () =>(
             <span>Native table medium</span>
             <span>Native table large</span>
 
-            <section>
-                <Table size="small">
-                    <colgroup>
-                        <col style={{ width: '50px' }} />
-                        <col />
-                        <col />
-                    </colgroup>
-                    <TableThead>
-                        <TableRow>
-                            <TableTh text="ID"></TableTh>
-                            <TableTh text="Name"></TableTh>
-                            <TableTh text="Job Title"></TableTh>
-                        </TableRow>
-                    </TableThead>
-                    <TableTbody>
-                        <TableGroupRow>
-                            <TableTh text="Group row" colspan="3"></TableTh>
-                        </TableGroupRow>
-                        <TableRow>
-                            <TableTd text="1"></TableTd>
-                            <TableTd text="Data 1.2"></TableTd>
-                            <TableTd text="Data 1.3"></TableTd>
-                        </TableRow>
-                        <TableRow alt>
-                            <TableTd text="2"></TableTd>
-                            <TableTd text="Data 2.2 (alt)"></TableTd>
-                            <TableTd text="Data 2.3"></TableTd>
-                        </TableRow>
-                        <TableRow>
-                            <TableTd text="3"></TableTd>
-                            <TableTd text="Data 3.2"></TableTd>
-                            <TableTd text="Data 3.3"></TableTd>
-                        </TableRow>
-                        <TableGroupRow>
-                            <TableTh text="Group row" colspan="3"></TableTh>
-                        </TableGroupRow>
-                        <TableRow>
-                            <TableTd text="4"></TableTd>
-                            <TableTd text="Data 4.2"></TableTd>
-                            <TableTd text="Data 4.3"></TableTd>
-                        </TableRow>
-                        <TableRow alt>
-                            <TableTd text="5"></TableTd>
-                            <TableTd text="Data 5.2 (alt)"></TableTd>
-                            <TableTd text="Data 5.3"></TableTd>
-                        </TableRow>
-                        <TableRow>
-                            <TableTd text="6"></TableTd>
-                            <TableTd text="Data 6.2"></TableTd>
-                            <TableTd text="Data 6.3"></TableTd>
-                        </TableRow>
-                    </TableTbody>
-                    <TableTfoot>
-                        <TableRow>
-                            <TableTd text="30 records in total" colspan="3"></TableTd>
-                        </TableRow>
-                    </TableTfoot>
-                </Table>
-            </section>
-
-            <section>
-                <Table size="medium">
-                    <colgroup>
-                        <col style={{ width: '50px' }} />
-                        <col />
-                        <col />
-                    </colgroup>
-                    <TableThead>
-                        <TableRow>
-                            <TableTh text="ID"></TableTh>
-                            <TableTh text="Name"></TableTh>
-                            <TableTh text="Job Title"></TableTh>
-                        </TableRow>
-                    </TableThead>
-                    <TableTbody>
-                        <TableGroupRow>
-                            <TableTh text="Group row" colspan="3"></TableTh>
-                        </TableGroupRow>
-                        <TableRow>
-                            <TableTd text="1"></TableTd>
-                            <TableTd text="Data 1.2"></TableTd>
-                            <TableTd text="Data 1.3"></TableTd>
-                        </TableRow>
-                        <TableRow alt>
-                            <TableTd text="2"></TableTd>
-                            <TableTd text="Data 2.2 (alt)"></TableTd>
-                            <TableTd text="Data 2.3"></TableTd>
-                        </TableRow>
-                        <TableRow>
-                            <TableTd text="3"></TableTd>
-                            <TableTd text="Data 3.2"></TableTd>
-                            <TableTd text="Data 3.3"></TableTd>
-                        </TableRow>
-                        <TableGroupRow>
-                            <TableTh text="Group row" colspan="3"></TableTh>
-                        </TableGroupRow>
-                        <TableRow>
-                            <TableTd text="4"></TableTd>
-                            <TableTd text="Data 4.2"></TableTd>
-                            <TableTd text="Data 4.3"></TableTd>
-                        </TableRow>
-                        <TableRow alt>
-                            <TableTd text="5"></TableTd>
-                            <TableTd text="Data 5.2 (alt)"></TableTd>
-                            <TableTd text="Data 5.3"></TableTd>
-                        </TableRow>
-                        <TableRow>
-                            <TableTd text="6"></TableTd>
-                            <TableTd text="Data 6.2"></TableTd>
-                            <TableTd text="Data 6.3"></TableTd>
-                        </TableRow>
-                    </TableTbody>
-                    <TableTfoot>
-                        <TableRow>
-                            <TableTd text="30 records in total" colspan="3"></TableTd>
-                        </TableRow>
-                    </TableTfoot>
-                </Table>
-            </section>
-
-            <section>
-                <Table size="large">
-                    <colgroup>
-                        <col style={{ width: '50px' }} />
-                        <col />
-                        <col />
-                    </colgroup>
-                    <TableThead>
-                        <TableRow>
-                            <TableTh text="ID"></TableTh>
-                            <TableTh text="Name"></TableTh>
-                            <TableTh text="Job Title"></TableTh>
-                        </TableRow>
-                    </TableThead>
-                    <TableTbody>
-                        <TableGroupRow>
-                            <TableTh text="Group row" colspan="3"></TableTh>
-                        </TableGroupRow>
-                        <TableRow>
-                            <TableTd text="1"></TableTd>
-                            <TableTd text="Data 1.2"></TableTd>
-                            <TableTd text="Data 1.3"></TableTd>
-                        </TableRow>
-                        <TableRow alt>
-                            <TableTd text="2"></TableTd>
-                            <TableTd text="Data 2.2 (alt)"></TableTd>
-                            <TableTd text="Data 2.3"></TableTd>
-                        </TableRow>
-                        <TableRow>
-                            <TableTd text="3"></TableTd>
-                            <TableTd text="Data 3.2"></TableTd>
-                            <TableTd text="Data 3.3"></TableTd>
-                        </TableRow>
-                        <TableGroupRow>
-                            <TableTh text="Group row" colspan="3"></TableTh>
-                        </TableGroupRow>
-                        <TableRow>
-                            <TableTd text="4"></TableTd>
-                            <TableTd text="Data 4.2"></TableTd>
-                            <TableTd text="Data 4.3"></TableTd>
-                        </TableRow>
-                        <TableRow alt>
-                            <TableTd text="5"></TableTd>
-                            <TableTd text="Data 5.2 (alt)"></TableTd>
-                            <TableTd text="Data 5.3"></TableTd>
-                        </TableRow>
-                        <TableRow>
-                            <TableTd text="6"></TableTd>
-                            <TableTd text="Data 6.2"></TableTd>
-                            <TableTd text="Data 6.3"></TableTd>
-                        </TableRow>
-                    </TableTbody>
-                    <TableTfoot>
-                        <TableRow>
-                            <TableTd text="30 records in total" colspan="3"></TableTd>
-                        </TableRow>
-                    </TableTfoot>
-                </Table>
-            </section>
-
+            { DataTable.options.size.map((size) => (
+                <TableNative size={size} />
+            ))}
         </div>
     </>
 );

package/src/table/tests/table-native-states.tsx

@@ -1,5 +1,4 @@
-import { Table, TableRow, TableTbody, TableTd, TableTh, TableThead } from '../../table';
-
+import { TableNative, TableRow, TableTbody, TableTd, TableTh, TableThead } from '../../table';
 
 export default () =>(
     <>
@@ -9,7 +8,7 @@ export default () =>(
             <span></span>
 
             <section>
-                <Table size="medium">
+                <TableNative size="medium">
                     <colgroup>
                         <col style={{ width: '50px' }} />
                         <col />
@@ -74,9 +73,8 @@ export default () =>(
                             <TableTd text="Data 10.3"></TableTd>
                         </TableRow>
                     </TableTbody>
-                </Table>
+                </TableNative>
             </section>
-
         </div>
     </>
 );

package/src/textarea/index.ts

@@ -1 +1,2 @@
 export * from './textarea.spec';
+export * from "./templates/textarea-normal";

package/src/textarea/templates/textarea-normal.tsx

@@ -0,0 +1,3 @@
+import Textarea from "../textarea.spec";
+
+export const TextareaNormal = (props) => <Textarea {...props} />;

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

@@ -1,5 +1,4 @@
-import { Textarea } from '../../textarea';
-
+import { Textarea, TextareaNormal } from '../../textarea';
 
 const styles = `
     #test-area {
@@ -16,60 +15,38 @@ export default () =>(
             <span>TextArea Flat RTL</span>
 
             <div>
-                <Textarea fillMode="flat" placeholder="TextArea..." />
+                <TextareaNormal fillMode="flat" placeholder="placeholder..." />
             </div>
             <div dir="rtl">
-                <Textarea fillMode="flat" placeholder="TextArea..." />
+                <TextareaNormal fillMode="flat" placeholder="placeholder..." />
             </div>
 
-            <div>
-                <Textarea fillMode="flat" value="Normal" />
-            </div>
-            <div dir="rtl">
-                <Textarea fillMode="flat" value="Normal" />
-            </div>
+            {[ 'normal', ...Textarea.states ].map((state) => (
+                <>
+                    <div>
+                        <TextareaNormal { ...{ [state]: true }} fillMode="flat" value={state} />
+                    </div>
 
-            <div>
-                <Textarea fillMode="flat" value="Hover" hover />
-            </div>
-            <div dir="rtl">
-                <Textarea fillMode="flat" value="Hover" hover />
-            </div>
+                    <div dir="rtl">
+                        <TextareaNormal { ...{ [state]: true }} fillMode="flat" value={state} />
+                    </div>
+                </>
+            ))}
 
             <div>
-                <Textarea fillMode="flat" value="Focus" focus />
+                <TextareaNormal value="invalid focus" fillMode="flat" invalid focus />
             </div>
             <div dir="rtl">
-                <Textarea fillMode="flat" value="Focus" focus />
+                <TextareaNormal value="invalid focus" fillMode="flat" invalid focus />
             </div>
 
             <div>
-                <Textarea fillMode="flat" value="Disabled" disabled />
+                <TextareaNormal rows={3} fillMode="flat" value='Long text: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et dolorum, illo asperiores alias cum facere illum qui sapiente possimus consectetur magnam aperiam eveniet esse molestias aut repudiandae sit aliquam perspiciatis."'/>
             </div>
-            <div dir="rtl">
-                <Textarea fillMode="flat" value="Disabled" disabled />
-            </div>
-
             <div>
-                <Textarea fillMode="flat" value="Invalid" invalid />
-            </div>
-            <div dir="rtl">
-                <Textarea fillMode="flat" value="Invalid" invalid />
+                <TextareaNormal rows={3} fillMode="flat" value='Long text: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et dolorum, illo asperiores alias cum facere illum qui sapiente possimus consectetur magnam aperiam eveniet esse molestias aut repudiandae sit aliquam perspiciatis."' />
             </div>
 
-            <div>
-                <Textarea fillMode="flat" value="Invalid Focus" invalid focus />
-            </div>
-            <div dir="rtl">
-                <Textarea fillMode="flat" value="Invalid Focus" invalid focus />
-            </div>
-
-            <div>
-                <Textarea fillMode="flat" rows={3} value='Long text: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et dolorum, illo asperiores alias cum facere illum qui sapiente possimus consectetur magnam aperiam eveniet esse molestias aut repudiandae sit aliquam perspiciatis."'/>
-            </div>
-            <div>
-                <Textarea fillMode="flat" rows={3} value='Long text: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et dolorum, illo asperiores alias cum facere illum qui sapiente possimus consectetur magnam aperiam eveniet esse molestias aut repudiandae sit aliquam perspiciatis."' />
-            </div>
         </div>
     </>
 );

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

@@ -1,5 +1,4 @@
-import { Textarea } from '../../textarea';
-
+import { Textarea, TextareaNormal } from '../../textarea';
 
 const styles = `
     #test-area {
@@ -16,59 +15,36 @@ export default () =>(
             <span>TextArea Flat RTL</span>
 
             <div>
-                <Textarea fillMode="outline" placeholder="TextArea..." />
-            </div>
-            <div dir="rtl">
-                <Textarea fillMode="outline" placeholder="TextArea..." />
-            </div>
-
-            <div>
-                <Textarea fillMode="outline" value="Normal" />
-            </div>
-            <div dir="rtl">
-                <Textarea fillMode="outline" value="Normal" />
-            </div>
-
-            <div>
-                <Textarea fillMode="outline" value="Hover" hover />
-            </div>
-            <div dir="rtl">
-                <Textarea fillMode="outline" value="Hover" hover />
-            </div>
-
-            <div>
-                <Textarea fillMode="outline" value="Focus" focus />
+                <Textarea fillMode="outline" placeholder="placeholder..." />
             </div>
             <div dir="rtl">
-                <Textarea fillMode="outline" value="Focus" focus />
+                <Textarea fillMode="outline" placeholder="placeholder..." />
             </div>
 
-            <div>
-                <Textarea fillMode="outline" value="Disabled" disabled />
-            </div>
-            <div dir="rtl">
-                <Textarea fillMode="outline" value="Disabled" disabled />
-            </div>
+            {[ 'normal', ...Textarea.states ].map((state) => (
+                <>
+                    <div>
+                        <TextareaNormal { ...{ [state]: true }} fillMode="outline" value={state} />
+                    </div>
 
-            <div>
-                <Textarea fillMode="outline" value="Invalid" invalid />
-            </div>
-            <div dir="rtl">
-                <Textarea fillMode="outline" value="Invalid" invalid />
-            </div>
+                    <div dir="rtl">
+                        <TextareaNormal { ...{ [state]: true }} fillMode="outline" value={state} />
+                    </div>
+                </>
+            ))}
 
             <div>
-                <Textarea fillMode="outline" value="Invalid Focus" invalid focus />
+                <TextareaNormal value="invalid focus" fillMode="outline" invalid focus />
             </div>
             <div dir="rtl">
-                <Textarea fillMode="outline" value="Invalid Focus" invalid focus />
+                <TextareaNormal value="invalid focus" fillMode="outline" invalid focus />
             </div>
 
             <div>
-                <Textarea fillMode="outline" rows={3} value='Long text: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et dolorum, illo asperiores alias cum facere illum qui sapiente possimus consectetur magnam aperiam eveniet esse molestias aut repudiandae sit aliquam perspiciatis."'/>
+                <TextareaNormal rows={3} fillMode="outline" value='Long text: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et dolorum, illo asperiores alias cum facere illum qui sapiente possimus consectetur magnam aperiam eveniet esse molestias aut repudiandae sit aliquam perspiciatis."'/>
             </div>
             <div>
-                <Textarea fillMode="outline" rows={3} value='Long text: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et dolorum, illo asperiores alias cum facere illum qui sapiente possimus consectetur magnam aperiam eveniet esse molestias aut repudiandae sit aliquam perspiciatis."' />
+                <TextareaNormal rows={3} fillMode="outline" value='Long text: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et dolorum, illo asperiores alias cum facere illum qui sapiente possimus consectetur magnam aperiam eveniet esse molestias aut repudiandae sit aliquam perspiciatis."' />
             </div>
         </div>
     </>

package/src/textarea/tests/textarea-size-rounded.tsx

@@ -0,0 +1,32 @@
+import { Textarea, TextareaNormal } from '../../textarea';
+
+const styles = `
+    #test-area {
+        grid-template-columns: 120px repeat(3, 1fr);
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid">
+            <span><small>rounded / size</small></span>
+            <span>small</span>
+            <span>medium</span>
+            <span>large</span>
+
+            { Textarea.options.rounded.map((rounded) => (
+                <>
+                    <span>{ rounded }</span>
+                    { Textarea.options.size.map((size) => (
+                        <>
+                            <div>
+                                <TextareaNormal size={size} rounded={rounded} value="Textarea"/>
+                            </div>
+                        </>
+                    ))}
+                </>
+            ))}
+        </div>
+    </>
+);

package/src/textarea/tests/textarea-solid.tsx

@@ -0,0 +1,52 @@
+import { Textarea, TextareaNormal } from '../../textarea';
+
+const styles = `
+    #test-area {
+        max-width: 660px;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+
+            <span>TextArea</span>
+            <span>TextArea RTL</span>
+
+            <div>
+                <TextareaNormal placeholder="placeholder..." />
+            </div>
+            <div dir="rtl">
+                <TextareaNormal placeholder="placeholder..." />
+            </div>
+
+            {[ 'normal', ...Textarea.states ].map((state) => (
+                <>
+                    <div>
+                        <TextareaNormal { ...{ [state]: true }} value={state} />
+                    </div>
+
+                    <div dir="rtl">
+                        <TextareaNormal { ...{ [state]: true }} value={state} />
+                    </div>
+                </>
+            ))}
+
+            <div>
+                <TextareaNormal value="invalid focus" invalid focus />
+            </div>
+            <div dir="rtl">
+                <TextareaNormal value="invalid focus" invalid focus />
+            </div>
+
+            <div>
+                <TextareaNormal rows={3} value='Long text: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et dolorum, illo asperiores alias cum facere illum qui sapiente possimus consectetur magnam aperiam eveniet esse molestias aut repudiandae sit aliquam perspiciatis."'/>
+            </div>
+            <div>
+                <TextareaNormal rows={3} value='Long text: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et dolorum, illo asperiores alias cum facere illum qui sapiente possimus consectetur magnam aperiam eveniet esse molestias aut repudiandae sit aliquam perspiciatis."' />
+            </div>
+
+        </div>
+    </>
+);

package/src/textarea/textarea.spec.tsx

@@ -12,8 +12,7 @@ const states = [
     States.valid,
     States.invalid,
     States.required,
-    States.disabled,
-    States.loading
+    States.disabled
 ];
 
 const options = {
@@ -59,7 +58,6 @@ export const Textarea = (
         valid,
         invalid,
         required,
-        loading,
         disabled,
         ...other
     } = props;
@@ -76,12 +74,13 @@ export const Textarea = (
             valid={valid}
             invalid={invalid}
             required={required}
-            loading={loading}
             disabled={disabled}
             className={classNames(props.className, TEXTAREA_CLASSNAME)}
         >
             <InputInnerTextarea
-                className="!k-overflow-auto"
+                className={classNames(
+                    "!k-overflow-auto",
+                )}
                 value={value}
                 placeholder={placeholder}
                 rows={rows}

package/src/tilelayout/index.ts

@@ -0,0 +1,3 @@
+export * from './tilelayout.spec';
+export * from './tilelayout-item.spec';
+export * from './tilelayout-item-hint.spec';

package/src/tilelayout/tests/tilelayout-resizing.tsx

@@ -1,42 +1,15 @@
-import { Card, CardHeader, CardBody } from '../../card';
+import { TileLayout } from '../tilelayout.spec';
+import { TileLayoutItem } from '../tilelayout-item.spec';
 
 export default () => (
     <>
         <div id="test-area">
-            <div id="tilelayout" className="k-widget k-tilelayout" style={{ gridTemplateColumns: "repeat(4, minmax(0px, 1fr))", gap: "16px", padding: "16px" }}>
-                <Card className="k-tilelayout-item k-resize-x">
-                    <CardHeader className="k-tilelayout-item-header">
-                        Card Title
-                    </CardHeader>
-                    <CardBody className="k-tilelayout-item-body">
-                        Horizontally resizable card
-                    </CardBody>
-                </Card>
-                <Card className="k-tilelayout-item k-resize-y">
-                    <CardHeader className="k-tilelayout-item-header">
-                        Card Title
-                    </CardHeader>
-                    <CardBody className="k-tilelayout-item-body">
-                        Vertically resizable card
-                    </CardBody>
-                </Card>
-                <Card className="k-tilelayout-item k-resize">
-                    <CardHeader className="k-tilelayout-item-header">
-                        Card Title
-                    </CardHeader>
-                    <CardBody className="k-tilelayout-item-body">
-                        Horizontally and Vertically resizable card
-                    </CardBody>
-                </Card>
-                <Card className="k-tilelayout-item k-resize-none">
-                    <CardHeader className="k-tilelayout-item-header">
-                        Card Title
-                    </CardHeader>
-                    <CardBody className="k-tilelayout-item-body">
-                       Non-resizable card
-                    </CardBody>
-                </Card>
-            </div>
+            <TileLayout columns={4} gap="16px" columnWidth="1fr">
+                <TileLayoutItem resize="horizontal" header="Card Title" body="Horizontally resizable card" />
+                <TileLayoutItem resize="vertical" header="Card Title" body="Vertically resizable card" />
+                <TileLayoutItem resize={true} header="Card Title" body="Horizontally and Vertically resizable card" />
+                <TileLayoutItem header="Card Title" body="Non-resizable card" />
+            </TileLayout>
         </div>
     </>
 );