Merge branch 'develop' into export-calendar

packages/default/scss/radio/_theme.scss

@@ -80,7 +80,7 @@
     // Ripple
     .k-ripple-container {
         .k-radio::after {
-            background: $kendo-radio-checked-bg;
+            background: $kendo-radio-ripple-bg;
             opacity: $kendo-radio-ripple-opacity;
         }
     }

packages/fluent/scss/ripple/_layout.scss

@@ -39,14 +39,14 @@
 
     @keyframes ripple {
         0% {
-            transform: scale(0);
+            transform: translate(-50%, -50%) scale(0);
         }
         20% {
-            transform: scale(1);
+            transform: translate(-50%, -50%) scale(1);
         }
         100% {
             opacity: 0;
-            transform: scale(1);
+            transform: translate(-50%, -50%) scale(1);
         }
     }
 

packages/html/src/grid/grid-container.spec.tsx

@@ -0,0 +1,17 @@
+import { classNames } from '../misc';
+
+const className = `k-grid-container`;
+
+export const GridContainer = (
+    props: React.HTMLAttributes<HTMLDivElement>
+) => (
+    <div
+        {...props}
+        className={classNames(
+            props.className,
+            className,
+        )}>
+        {props.children}
+    </div>
+);
+

packages/html/src/grid/grid-content.spec.tsx

@@ -0,0 +1,16 @@
+import { classNames } from '../misc';
+
+const className = `k-grid-content`;
+
+export const GridContent = (
+    props: React.HTMLAttributes<HTMLDivElement>
+) => (
+    <div
+        {...props}
+        className={classNames(
+            props.className,
+            className,
+        )}>
+        {props.children}
+    </div>
+);

packages/html/src/grid/grid-footer-table.spec.tsx

@@ -0,0 +1,20 @@
+import { classNames } from '../misc';
+import { Table, KendoTableOptions } from '../table';
+
+export const GRIDFOOTERTABLE_CLASSNAME = `k-grid-footer-table`;
+
+export const GridFooterTable = (
+    props: KendoTableOptions &
+        React.HTMLAttributes<HTMLTableElement>
+) => (
+    <Table
+        size="medium"
+        {...props}
+        className={classNames(
+            props.className,
+            GRIDFOOTERTABLE_CLASSNAME,
+        )}
+    >
+        {props.children}
+    </Table>
+);

packages/html/src/grid/grid-footer.spec.tsx

@@ -0,0 +1,17 @@
+import { classNames } from '../misc';
+
+const className = `k-grid-footer`;
+
+export const GridFooter = (
+    props: React.HTMLAttributes<HTMLDivElement>
+) => (
+    <div
+        {...props}
+        className={classNames(
+            props.className,
+            className,
+        )}
+    >
+        {props.children}
+    </div>
+);

packages/html/src/grid/grid-grouping-header.spec.tsx

@@ -0,0 +1,33 @@
+import { classNames } from '../misc';
+
+const className = `k-grouping-header`;
+
+export type KendoGroupingHeaderProps = {
+    dropHint?: string;
+    dropClue?: boolean;
+};
+
+export const GridGroupingHeader = (
+    props: KendoGroupingHeaderProps &
+    React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        dropHint,
+        dropClue,
+        ...others
+    } = props;
+
+    return (
+        <div
+            {...others}
+            className={classNames(
+                props.className,
+                className,
+            )}
+        >
+            { dropClue && <div className="k-grouping-dropclue"></div> }
+            {props.children}
+            <div className="k-grouping-drop-container">{dropHint}</div>
+        </div>
+    );
+};

packages/html/src/grid/grid-header-cell.spec.tsx

@@ -0,0 +1,104 @@
+import { classNames, States, stateClassNames } from "../misc";
+import { TableTh, KendoTableThProps } from "../table/table-th";
+import { Icon } from "../icon";
+
+const className = `k-header`;
+
+const states = [
+    States.hover,
+    States.focus,
+    States.active
+];
+
+export type KendoGridHeaderCellProps = KendoTableThProps & {
+    menu?: "filter" | "column";
+    sortable?: boolean;
+    sticky?: boolean;
+    resizable?: boolean;
+    columnTitle?: string;
+    scope?: string;
+    sortIcon?: string;
+    sortOrder?: number;
+};
+
+const defaultProps = {
+    sortIcon: "sort-asc-small"
+};
+
+export type KendoGridHeaderCellState = { [K in (typeof states)[number]]?: boolean };
+
+export const GridHeaderCell = (
+    props: KendoGridHeaderCellProps &
+        KendoGridHeaderCellState &
+        React.HTMLAttributes<HTMLTableCellElement>
+) => {
+    const {
+        menu,
+        sortable,
+        sticky,
+        resizable,
+        columnTitle,
+        hover,
+        focus,
+        active,
+        sortIcon = defaultProps.sortIcon,
+        sortOrder,
+        ...others
+    } = props;
+
+    return (
+        <TableTh
+            {...others}
+            className={classNames(
+                props.className,
+                className,
+                {
+                    [`k-filterable`]: menu === "filter",
+                    [`k-sorted`]: sortable,
+                    [`k-grid-header-sticky`]: sticky,
+                    [`k-touch-action-none`]: resizable
+                },
+                stateClassNames(className, {
+                    hover,
+                    focus,
+                    active
+                })
+            )}
+        >
+            {
+                columnTitle && (
+                    <span className="k-cell-inner">
+                        <span className="k-link">
+                            <span className="k-column-title">{columnTitle}</span>
+                            {sortable && (
+                                <span className="k-sort-icon">
+                                    <Icon icon={sortIcon} />
+                                </span>
+                            )}
+                            {sortOrder && (
+                                <span className="k-sort-order">{sortOrder}</span>
+                            )}
+                        </span>
+                        {menu && (
+                            <a href="#" className={classNames(
+                                'k-grid-header-menu',
+                                {
+                                    [`k-active`]: active,
+                                    [`k-grid-filter-menu`]: menu === "filter",
+                                    [`k-grid-column-menu`]: menu === "column"
+                                }
+                            )}>
+                                <Icon icon={ menu === "filter" ? "filter" : "more-vertical" } />
+                            </a>
+                        )}
+                    </span>
+                )
+
+            }
+            {props.children}
+            {resizable && ( <span className="k-column-resizer k-touch-action-none"></span> )}
+        </TableTh>
+    );
+};
+
+export default GridHeaderCell;

packages/html/src/grid/grid-header-table.spec.tsx

@@ -0,0 +1,20 @@
+import { classNames } from '../misc';
+import { Table, KendoTableOptions } from '../table';
+
+export const GRIDHEADERTABLE_CLASSNAME = `k-grid-header-table`;
+
+export const GridHeaderTable = (
+    props: KendoTableOptions &
+        React.HTMLAttributes<HTMLTableElement>
+) => (
+    <Table
+        size="medium"
+        {...props}
+        className={classNames(
+            props.className,
+            GRIDHEADERTABLE_CLASSNAME,
+        )}
+    >
+        {props.children}
+    </Table>
+);

packages/html/src/grid/grid-header.spec.tsx

@@ -0,0 +1,19 @@
+import { classNames } from '../misc';
+
+const className = `k-grid-header`;
+
+export const GridHeader = (
+    props: React.HTMLAttributes<HTMLDivElement>
+) => (
+    <div
+        {...props}
+        className={classNames(
+            props.className,
+            className,
+        )}
+    >
+
+        {props.children}
+
+    </div>
+);

packages/html/src/grid/grid-pager.spec.tsx

@@ -0,0 +1,19 @@
+import { classNames } from '../misc';
+import { Pager, KendoPagerProps } from '../pager';
+
+const className = `k-grid-pager`;
+
+export const GridPager = (
+    props: KendoPagerProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => (
+    <Pager
+        {...props}
+        className={classNames(
+            props.className,
+            className,
+        )}
+    >
+        {props.children}
+    </Pager>
+);

packages/html/src/grid/grid-table.spec.tsx

@@ -0,0 +1,20 @@
+import { classNames } from '../misc';
+import { Table, KendoTableOptions } from '../table';
+
+export const GRIDTABLE_CLASSNAME = `k-grid-table`;
+
+export const GridTable = (
+    props: KendoTableOptions &
+        React.HTMLAttributes<HTMLTableElement>
+) => (
+    <Table
+        size="medium"
+        {...props}
+        className={classNames(
+            props.className,
+            GRIDTABLE_CLASSNAME,
+        )}
+    >
+        {props.children}
+    </Table>
+);

packages/html/src/grid/grid-toolbar.spec.tsx

@@ -0,0 +1,19 @@
+import { classNames } from '../misc';
+import { Toolbar, KendoToolbarProps } from '../toolbar';
+
+const className = `k-grid-toolbar`;
+
+export const GridToolbar = (
+    props: KendoToolbarProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => (
+    <Toolbar
+        {...props}
+        className={classNames(
+            props.className,
+            className,
+        )}
+    >
+        {props.children}
+    </Toolbar>
+);