Merge branch 'develop' into doc-variables

packages/default/scss/gantt/_layout.scss

@@ -58,6 +58,11 @@
             display: inline-flex;
         }
 
+        // Splitter
+        .k-gantt-splitter {
+            border-width: 0;
+        }
+
         // React gantt
         .k-treelist-scrollable {
             width: 100%;

packages/fluent/scss/gantt/_layout.scss

@@ -63,6 +63,11 @@
             display: inline-flex;
         }
 
+        // Splitter
+        .k-gantt-splitter {
+            border-width: 0;
+        }
+
         // React gantt
         .k-treelist-scrollable {
             width: 100%;

packages/html/src/gantt/gantt-columns-table.spec.tsx

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

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

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

packages/html/src/gantt/gantt-footer-toolbar.spec.tsx

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

packages/html/src/gantt/gantt-header-toolbar.spec.tsx

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

packages/html/src/gantt/gantt-line.spec.tsx

@@ -0,0 +1,47 @@
+import { classNames } from '../misc';
+
+export const GANTTLINE_CLASSNAME = 'k-gantt-line';
+
+const states = [];
+
+const options = {};
+
+export type KendoGanttLineProps = {
+    orientation?: "horizontal" | "vertical";
+};
+
+const defaultProps = {
+    orientation: "horizontal"
+};
+
+export const GanttLine = (
+    props: KendoGanttLineProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        orientation = defaultProps.orientation,
+        ...other
+    } = props;
+
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                GANTTLINE_CLASSNAME,
+                {
+                    [`k-gantt-line-h`]: orientation === "horizontal",
+                    [`k-gantt-line-v`]: orientation === "vertical"
+                }
+            )}>
+        </div>
+    );
+};
+
+GanttLine.states = states;
+GanttLine.options = options;
+GanttLine.className = GANTTLINE_CLASSNAME;
+GanttLine.defaultProps = defaultProps;
+
+export default GanttLine;

packages/html/src/gantt/gantt-rows-table.spec.tsx

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

packages/html/src/gantt/gantt-tables-wrapper.spec.tsx

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

packages/html/src/gantt/gantt-task-content.spec.tsx

@@ -0,0 +1,44 @@
+import { classNames } from '../misc';
+import { Icon } from '../icon';
+
+export const GANTTTASKCONTENT_CLASSNAME = 'k-task-content';
+
+const states = [];
+
+const options = {};
+
+export type KendoGanttTaskContentProps = {
+    content?: string | JSX.Element | JSX.Element[];
+};
+
+const defaultProps = {};
+
+export const GanttTaskContent = (
+    props: KendoGanttTaskContentProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        content,
+        ...other
+    } = props;
+
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                GANTTTASKCONTENT_CLASSNAME
+            )}>
+            { content && <div className="k-task-template">{content}</div> }
+            <span className="k-task-actions"><a className="k-link k-task-delete"><Icon icon="x" /></a></span><span className="k-resize-handle k-resize-w"></span><span className="k-resize-handle k-resize-e"></span>
+        </div>
+    );
+};
+
+GanttTaskContent.states = states;
+GanttTaskContent.options = options;
+GanttTaskContent.className = GANTTTASKCONTENT_CLASSNAME;
+GanttTaskContent.defaultProps = defaultProps;
+
+export default GanttTaskContent;

packages/html/src/gantt/gantt-task-dot.spec.tsx

@@ -0,0 +1,47 @@
+import { classNames } from '../misc';
+
+export const GANTTTASKWDOT_CLASSNAME = 'k-task-dot';
+
+const states = [];
+
+const options = {};
+
+export type KendoGanttTaskDotProps = {
+    position?: "start" | "end";
+};
+
+const defaultProps = {
+    position: "start"
+};
+
+export const GanttTaskDot = (
+    props: KendoGanttTaskDotProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        position = defaultProps.position,
+        ...other
+    } = props;
+
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                GANTTTASKWDOT_CLASSNAME,
+                {
+                    [`k-task-start`]: position === "start",
+                    [`k-task-end`]: position === "end"
+                }
+            )}>
+        </div>
+    );
+};
+
+GanttTaskDot.states = states;
+GanttTaskDot.options = options;
+GanttTaskDot.className = GANTTTASKWDOT_CLASSNAME;
+GanttTaskDot.defaultProps = defaultProps;
+
+export default GanttTaskDot;

packages/html/src/gantt/gantt-task-wrap.spec.tsx

@@ -0,0 +1,47 @@
+import { classNames } from '../misc';
+
+export const GANTTTASKWRAP_CLASSNAME = 'k-task-wrap';
+
+const states = [];
+
+const options = {};
+
+export type KendoGanttTaskWrapProps = {
+    type?: "single" | "milestone" | "summary";
+};
+
+const defaultProps = {
+    type: "single"
+};
+
+export const GanttTaskWrap = (
+    props: KendoGanttTaskWrapProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        type = defaultProps.type,
+        ...other
+    } = props;
+
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                GANTTTASKWRAP_CLASSNAME,
+                {
+                    [`k-milestone-wrap`]: type === "milestone",
+                    [`k-summary-wrap`]: type === "summary"
+                }
+            )}>
+        </div>
+    );
+};
+
+GanttTaskWrap.states = states;
+GanttTaskWrap.options = options;
+GanttTaskWrap.className = GANTTTASKWRAP_CLASSNAME;
+GanttTaskWrap.defaultProps = defaultProps;
+
+export default GanttTaskWrap;

packages/html/src/gantt/gantt-task.spec.tsx

@@ -0,0 +1,48 @@
+import { classNames } from '../misc';
+
+export const GANTTTASK_CLASSNAME = 'k-task';
+
+const states = [];
+
+const options = {};
+
+export type KendoGanttTaskProps = {
+    type?: "single" | "milestone" | "summary";
+};
+
+const defaultProps = {
+    type: "single"
+};
+
+export const GanttTask = (
+    props: KendoGanttTaskProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        type = defaultProps.type,
+        ...other
+    } = props;
+
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                GANTTTASK_CLASSNAME,
+                {
+                    [`k-task-single`]: type === "single",
+                    [`k-task-milestone`]: type === "milestone",
+                    [`k-task-summary`]: type === "summary"
+                }
+            )}>
+        </div>
+    );
+};
+
+GanttTask.states = states;
+GanttTask.options = options;
+GanttTask.className = GANTTTASK_CLASSNAME;
+GanttTask.defaultProps = defaultProps;
+
+export default GanttTask;