@progress/kendo-themes-html 13.2.0-dev.2 → 13.2.0-dev.3

package/src/scheduler/templates/scheduler-flex-day.tsx

@@ -1,5 +1,6 @@
 import { Button } from '../../button';
 import { ButtonGroup } from '../../button-group';
+import { SegmentedControl, SegmentedControlButton } from '../../segmented-control';
 import { Scheduler, SchedulerHead, SchedulerBody, SchedulerRow, SchedulerToolbar, SchedulerCell, SchedulerGroup, SchedulerEvent } from '../index';
 
 export const SchedulerFlexDay = ({ style, ...props }: any) => (
@@ -18,13 +19,13 @@ export const SchedulerFlexDay = ({ style, ...props }: any) => (
                     Monday, June 24, 2024
                 </Button>
                 <span className="k-spacer"></span>
-                <ButtonGroup className="k-scheduler-views">
-                    <Button className="k-group-start" selected>Day</Button>
-                    <Button>Week</Button>
-                    <Button>Month</Button>
-                    <Button>Timeline</Button>
-                    <Button className="k-group-end">Agenda</Button>
-                </ButtonGroup>
+                <SegmentedControl thumbStyles={{ width: "15%", left: "2px" }} className="k-scheduler-views">
+                    <SegmentedControlButton selected>Day</SegmentedControlButton>
+                    <SegmentedControlButton>Week</SegmentedControlButton>
+                    <SegmentedControlButton>Month</SegmentedControlButton>
+                    <SegmentedControlButton>Timeline</SegmentedControlButton>
+                    <SegmentedControlButton>Agenda</SegmentedControlButton>
+                </SegmentedControl>
             </SchedulerToolbar>
         }
         footer={

package/src/scheduler/templates/scheduler-flex-month.tsx

@@ -1,5 +1,6 @@
 import { Button } from '../../button';
 import { ButtonGroup } from '../../button-group';
+import { SegmentedControl, SegmentedControlButton } from '../../segmented-control';
 import { Scheduler, SchedulerHead, SchedulerBody, SchedulerRow, SchedulerToolbar, SchedulerCell, SchedulerGroup, SchedulerEvent } from '../index';
 
 
@@ -19,13 +20,13 @@ export const SchedulerFlexMonth = ({ style, ...props } :any) => (
                     June 23 2024
                 </Button>
                 <span className="k-spacer"></span>
-                <ButtonGroup className="k-scheduler-views">
-                    <Button className="k-group-start">Day</Button>
-                    <Button>Week</Button>
-                    <Button selected>Month</Button>
-                    <Button>Timeline</Button>
-                    <Button className="k-group-end">Agenda</Button>
-                </ButtonGroup>
+                <SegmentedControl thumbStyles={{ width: "19%", left: "34%" }} className="k-scheduler-views">
+                    <SegmentedControlButton>Day</SegmentedControlButton>
+                    <SegmentedControlButton>Week</SegmentedControlButton>
+                    <SegmentedControlButton selected>Month</SegmentedControlButton>
+                    <SegmentedControlButton>Timeline</SegmentedControlButton>
+                    <SegmentedControlButton>Agenda</SegmentedControlButton>
+                </SegmentedControl>
             </SchedulerToolbar>
         }
         children={

package/src/scheduler/templates/scheduler-flex-timeline.tsx

@@ -1,5 +1,6 @@
 import { Button } from '../../button';
 import { ButtonGroup } from '../../button-group';
+import { SegmentedControl, SegmentedControlButton } from '../../segmented-control';
 import { Scheduler, SchedulerHead, SchedulerBody, SchedulerRow, SchedulerToolbar, SchedulerCell, SchedulerStickyCell, SchedulerGroup } from '../index';
 
 
@@ -19,13 +20,13 @@ export const SchedulerFlexTimeline = ({ style, ...props }: any) => (
                     Friday, June 21, 2024
                 </Button>
                 <span className="k-spacer"></span>
-                <ButtonGroup className="k-scheduler-views">
-                    <Button className="k-group-start">Day</Button>
-                    <Button>Week</Button>
-                    <Button>Month</Button>
-                    <Button selected>Timeline</Button>
-                    <Button className="k-group-end">Agenda</Button>
-                </ButtonGroup>
+                <SegmentedControl thumbStyles={{ width: "23%", left: "54%" }} className="k-scheduler-views">
+                    <SegmentedControlButton>Day</SegmentedControlButton>
+                    <SegmentedControlButton>Week</SegmentedControlButton>
+                    <SegmentedControlButton>Month</SegmentedControlButton>
+                    <SegmentedControlButton selected>Timeline</SegmentedControlButton>
+                    <SegmentedControlButton>Agenda</SegmentedControlButton>
+                </SegmentedControl>
             </SchedulerToolbar>
         }
         footer={

package/src/scheduler/templates/scheduler-flex-week.tsx

@@ -1,5 +1,6 @@
 import { Button } from '../../button';
 import { ButtonGroup } from '../../button-group';
+import { SegmentedControl, SegmentedControlButton } from '../../segmented-control';
 import { Scheduler, SchedulerHead, SchedulerBody, SchedulerRow, SchedulerToolbar, SchedulerCell, SchedulerGroup } from '../index';
 
 
@@ -19,13 +20,13 @@ export const SchedulerFlexWeek = ({ style, ...props }: any) => (
                     6/23/2022 - 6/29/2022
                 </Button>
                 <span className="k-spacer"></span>
-                <ButtonGroup className="k-scheduler-views">
-                    <Button className="k-group-start">Day</Button>
-                    <Button selected>Week</Button>
-                    <Button>Month</Button>
-                    <Button>Timeline</Button>
-                    <Button className="k-group-end">Agenda</Button>
-                </ButtonGroup>
+                <SegmentedControl thumbStyles={{ width: "18%", left: "16%" }} className="k-scheduler-views">
+                    <SegmentedControlButton>Day</SegmentedControlButton>
+                    <SegmentedControlButton selected>Week</SegmentedControlButton>
+                    <SegmentedControlButton>Month</SegmentedControlButton>
+                    <SegmentedControlButton>Timeline</SegmentedControlButton>
+                    <SegmentedControlButton>Agenda</SegmentedControlButton>
+                </SegmentedControl>
             </SchedulerToolbar>
         }
         footer={

package/src/scheduler/templates/scheduler-flex-year.tsx

@@ -1,5 +1,6 @@
 import { Button } from '../../button';
 import { ButtonGroup } from '../../button-group';
+import { SegmentedControl, SegmentedControlButton } from '../../segmented-control';
 import { Calendar, CalendarTable, CalendarTableRow, CalendarCell } from '../../calendar';
 import { Scheduler, SchedulerBody, SchedulerToolbar } from '../index';
 
@@ -20,12 +21,12 @@ export const SchedulerFlexYear = ({ style, ...props }: any) => (
                     2021
                 </Button>
                 <span className="k-spacer"></span>
-                <ButtonGroup className="k-scheduler-views">
-                    <Button className="k-group-start">Day</Button>
-                    <Button>Week</Button>
-                    <Button>Month</Button>
-                    <Button className="k-group-end" selected>Year</Button>
-                </ButtonGroup>
+                <SegmentedControl thumbStyles={{ width: "22%", right: "2px" }} className="k-scheduler-views">
+                    <SegmentedControlButton>Day</SegmentedControlButton>
+                    <SegmentedControlButton>Week</SegmentedControlButton>
+                    <SegmentedControlButton>Month</SegmentedControlButton>
+                    <SegmentedControlButton selected>Year</SegmentedControlButton>
+                </SegmentedControl>
             </SchedulerToolbar>
         }
         children={

package/src/scheduler/templates/scheduler-month.tsx

@@ -1,5 +1,6 @@
 import { ButtonGroup } from '../../button-group';
 import { Button } from '../../button';
+import { SegmentedControl, SegmentedControlButton } from '../../segmented-control';
 import { Scheduler, SchedulerBody, SchedulerCell, SchedulerContent, SchedulerHead, SchedulerHeader, SchedulerTable, SchedulerToolbar, SchedulerEvent } from '../index';
 
 
@@ -19,13 +20,13 @@ export const SchedulerMonth = ({ style, ...props }: any) => (
                         Jun, 2024
                 </Button>
                 <span className="k-spacer"></span>
-                <ButtonGroup className="k-scheduler-views">
-                    <Button className="k-group-start">Day</Button>
-                    <Button>Week</Button>
-                    <Button selected>Month</Button>
-                    <Button>Timeline</Button>
-                    <Button className="k-group-end">Agenda</Button>
-                </ButtonGroup>
+                <SegmentedControl thumbStyles={{ width: "19%", left: "34%" }} className="k-scheduler-views">
+                    <SegmentedControlButton>Day</SegmentedControlButton>
+                    <SegmentedControlButton>Week</SegmentedControlButton>
+                    <SegmentedControlButton selected>Month</SegmentedControlButton>
+                    <SegmentedControlButton>Timeline</SegmentedControlButton>
+                    <SegmentedControlButton>Agenda</SegmentedControlButton>
+                </SegmentedControl>
             </SchedulerToolbar>
         }
         children={

package/src/scheduler/templates/scheduler-timeline.tsx

@@ -1,5 +1,6 @@
 import { ButtonGroup } from '../../button-group';
 import { Button } from '../../button';
+import { SegmentedControl, SegmentedControlButton } from '../../segmented-control';
 import { Scheduler, SchedulerBody, SchedulerCell, SchedulerContent, SchedulerHead, SchedulerHeader, SchedulerTable, SchedulerToolbar, SchedulerTimes } from '../index';
 
 
@@ -19,13 +20,13 @@ export const SchedulerTimeline = ({ style, ...props }: any) => (
                     Monday, June 13, 2024
                 </Button>
                 <span className="k-spacer"></span>
-                <ButtonGroup className="k-scheduler-views">
-                    <Button className="k-group-start">Day</Button>
-                    <Button>Week</Button>
-                    <Button>Month</Button>
-                    <Button selected>Timeline</Button>
-                    <Button className="k-group-end">Agenda</Button>
-                </ButtonGroup>
+                <SegmentedControl thumbStyles={{ width: "23%", left: "54%" }} className="k-scheduler-views">
+                    <SegmentedControlButton>Day</SegmentedControlButton>
+                    <SegmentedControlButton>Week</SegmentedControlButton>
+                    <SegmentedControlButton>Month</SegmentedControlButton>
+                    <SegmentedControlButton selected>Timeline</SegmentedControlButton>
+                    <SegmentedControlButton>Agenda</SegmentedControlButton>
+                </SegmentedControl>
             </SchedulerToolbar>
         }
         footer={

package/src/scheduler/templates/scheduler-week.tsx

@@ -1,5 +1,6 @@
 import { Button } from '../../button';
 import { ButtonGroup } from '../../button-group';
+import { SegmentedControl, SegmentedControlButton } from '../../segmented-control';
 import { Scheduler, SchedulerBody, SchedulerCell, SchedulerContent, SchedulerHead, SchedulerHeader, SchedulerTable, SchedulerTimes, SchedulerToolbar, SchedulerEvent } from '../index';
 
 
@@ -19,13 +20,13 @@ export const SchedulerWeek = ({ style, ...props }: any) => (
                     10/04/2022 - 10/10/2022
                 </Button>
                 <span className="k-spacer"></span>
-                <ButtonGroup className="k-scheduler-views">
-                    <Button className="k-group-start">Day</Button>
-                    <Button selected>Week</Button>
-                    <Button>Month</Button>
-                    <Button>Timeline</Button>
-                    <Button className="k-group-end">Agenda</Button>
-                </ButtonGroup>
+                <SegmentedControl thumbStyles={{ width: "18%", left: "16%" }} className="k-scheduler-views">
+                    <SegmentedControlButton>Day</SegmentedControlButton>
+                    <SegmentedControlButton selected>Week</SegmentedControlButton>
+                    <SegmentedControlButton>Month</SegmentedControlButton>
+                    <SegmentedControlButton>Timeline</SegmentedControlButton>
+                    <SegmentedControlButton>Agenda</SegmentedControlButton>
+                </SegmentedControl>
             </SchedulerToolbar>
         }
         footer={

package/src/scheduler/tests/scheduler-current-time-marker.tsx

@@ -1,5 +1,6 @@
 import { Button } from "../../button";
 import { ButtonGroup } from "../../button-group";
+import { SegmentedControl, SegmentedControlButton } from "../../segmented-control";
 import { Toolbar } from "../../toolbar";
 import { SchedulerBody, SchedulerCell, SchedulerContent, SchedulerEvent, SchedulerHead, SchedulerHeader, SchedulerTable, SchedulerTimeline, SchedulerTimes, SchedulerToolbar, SchedulerWeek } from "..";
 import { Icon } from "../../icon";
@@ -20,13 +21,13 @@ export default () => (
                         Monday, June 10, 2013 - Friday, June 14, 2013
                         </Button>
                         <span className="k-spacer"></span>
-                        <ButtonGroup className="k-scheduler-views">
-                            <Button className="k-group-start">Day</Button>
-                            <Button selected>Week</Button>
-                            <Button>Month</Button>
-                            <Button>Timeline</Button>
-                            <Button className="k-group-end">Agenda</Button>
-                        </ButtonGroup>
+                        <SegmentedControl thumbStyles={{ width: "18%", left: "16%" }} className="k-scheduler-views">
+                            <SegmentedControlButton>Day</SegmentedControlButton>
+                            <SegmentedControlButton selected>Week</SegmentedControlButton>
+                            <SegmentedControlButton>Month</SegmentedControlButton>
+                            <SegmentedControlButton>Timeline</SegmentedControlButton>
+                            <SegmentedControlButton>Agenda</SegmentedControlButton>
+                        </SegmentedControl>
                     </SchedulerToolbar>
                 }
                 footer={
@@ -476,13 +477,13 @@ export default () => (
                         Monday, February 18, 2019
                             </Button>
                             <span className="k-spacer"></span>
-                            <ButtonGroup className="k-scheduler-views">
-                                <Button className="k-group-start">Day</Button>
-                                <Button>Week</Button>
-                                <Button>Month</Button>
-                                <Button selected>Timeline</Button>
-                                <Button className="k-group-end">Agenda</Button>
-                            </ButtonGroup>
+                            <SegmentedControl thumbStyles={{ width: "23%", left: "54%" }} className="k-scheduler-views">
+                                <SegmentedControlButton>Day</SegmentedControlButton>
+                                <SegmentedControlButton>Week</SegmentedControlButton>
+                                <SegmentedControlButton>Month</SegmentedControlButton>
+                                <SegmentedControlButton selected>Timeline</SegmentedControlButton>
+                                <SegmentedControlButton>Agenda</SegmentedControlButton>
+                            </SegmentedControl>
                         </SchedulerToolbar>
                     </>
                 }

package/src/scheduler/tests/scheduler-events.tsx

@@ -1,5 +1,6 @@
 import { Button } from '../../button';
 import { ButtonGroup } from '../../button-group';
+import { SegmentedControl, SegmentedControlButton } from '../../segmented-control';
 import { SchedulerBody, SchedulerCell, SchedulerContent, SchedulerEvent, SchedulerHead, SchedulerHeader, SchedulerTable, SchedulerTimes, SchedulerToolbar, SchedulerWeek } from '..';
 import { Icon } from '../../icon';
 
@@ -18,13 +19,13 @@ export default () =>(
                         Monday, June 10, 2013 - Friday, June 14, 2013
                         </Button>
                         <span className="k-spacer"></span>
-                        <ButtonGroup className="k-scheduler-views">
-                            <Button className="k-group-start">Day</Button>
-                            <Button selected>Week</Button>
-                            <Button>Month</Button>
-                            <Button>Timeline</Button>
-                            <Button className="k-group-end">Agenda</Button>
-                        </ButtonGroup>
+                        <SegmentedControl thumbStyles={{ width: "18%", left: "16%" }} className="k-scheduler-views">
+                            <SegmentedControlButton>Day</SegmentedControlButton>
+                            <SegmentedControlButton selected>Week</SegmentedControlButton>
+                            <SegmentedControlButton>Month</SegmentedControlButton>
+                            <SegmentedControlButton>Timeline</SegmentedControlButton>
+                            <SegmentedControlButton>Agenda</SegmentedControlButton>
+                        </SegmentedControl>
                     </SchedulerToolbar>
                 }
                 footer={

package/src/scheduler/tests/scheduler-react-timeline-multi.tsx

@@ -1,6 +1,7 @@
 
 import { Button } from '../../button';
 import { ButtonGroup } from '../../button-group';
+import { SegmentedControl, SegmentedControlButton } from '../../segmented-control';
 import { SchedulerBody, SchedulerCell, SchedulerEvent, SchedulerFlexTimeline, SchedulerGroup, SchedulerHead, SchedulerRow, SchedulerStickyCell, SchedulerToolbar } from '../';
 
 
@@ -27,13 +28,13 @@ export default () =>(
                                 Wednesday, June 24, 2020 - Thursday, June 25, 2020
                             </Button>
                             <span className="k-spacer"></span>
-                            <ButtonGroup className="k-scheduler-views">
-                                <Button className="k-group-start">Day</Button>
-                                <Button>Week</Button>
-                                <Button>Month</Button>
-                                <Button selected>Timeline</Button>
-                                <Button className="k-group-end">Agenda</Button>
-                            </ButtonGroup>
+                            <SegmentedControl thumbStyles={{ width: "23%", left: "54%" }} className="k-scheduler-views">
+                                <SegmentedControlButton>Day</SegmentedControlButton>
+                                <SegmentedControlButton>Week</SegmentedControlButton>
+                                <SegmentedControlButton>Month</SegmentedControlButton>
+                                <SegmentedControlButton selected>Timeline</SegmentedControlButton>
+                                <SegmentedControlButton>Agenda</SegmentedControlButton>
+                            </SegmentedControl>
                         </SchedulerToolbar>
                     </>
                 }

package/src/segmented-control/segmented-control.spec.tsx

@@ -17,6 +17,7 @@ export type KendoSegmentedControlOptions = {
 export type KendoSegmentedControlProps = KendoSegmentedControlOptions & {
     stretched?: boolean;
     children?: React.ReactNode;
+    thumbStyles?: React.CSSProperties;
 };
 
 export type KendoSegmentedControlState = { [K in (typeof states)[number]]?: boolean };
@@ -31,6 +32,7 @@ export const SegmentedControl: KendoComponent<KendoSegmentedControlProps & Kendo
         size,
         stretched,
         children,
+        thumbStyles,
         ...other
     } = props;
 
@@ -49,7 +51,7 @@ export const SegmentedControl: KendoComponent<KendoSegmentedControlProps & Kendo
             )}
             role="group"
         >
-            <div className="k-segmented-control-thumb" aria-hidden="true"></div>
+            <div className="k-segmented-control-thumb" aria-hidden="true" style={thumbStyles}/>
             { children }
         </div>
     );

package/src/segmented-control/templates/segmented-control-icons.tsx

@@ -4,9 +4,9 @@ import SegmentedControl from "../segmented-control.spec";
 export const SegmentedControlIcons = (props) => (
     <SegmentedControl {...props} children={
         <>
-            <SegmentedControlButton icon="search" selected></SegmentedControlButton>
-            <SegmentedControlButton icon="sparkles"></SegmentedControlButton>
-            <SegmentedControlButton icon="home"></SegmentedControlButton>
+            <SegmentedControlButton aria-label="Search" icon="search" selected></SegmentedControlButton>
+            <SegmentedControlButton aria-label="Sparkles" icon="sparkles"></SegmentedControlButton>
+            <SegmentedControlButton aria-label="Home" icon="home"></SegmentedControlButton>
         </>
     } />
 );

package/src/segmented-control/tests/segmented-control-sizes.tsx

@@ -12,18 +12,6 @@ const styles = `
         align-items: center;
         justify-items: start;
     }
-
-    .k-segmented-control-thumb {
-        width: 100px;
-    }
-
-    .segmented-control-icons .k-segmented-control-thumb {
-        width: 45px;
-    }
-
-    .segmented-control-text .k-segmented-control-thumb {
-        width: 70px;
-    }
 `;
 
 export default () => (
@@ -38,9 +26,9 @@ export default () => (
             {SegmentedControl.options.size.map((size) => (
                 <>
                     <span>{`${size}`}</span>
-                    <SegmentedControlNormal size={size} />
-                    <SegmentedControlIcons size={size} className="segmented-control-icons" />
-                    <SegmentedControlText size={size} className="segmented-control-text" />
+                    <SegmentedControlNormal size={size} thumbStyles={{ width: "50%" }}/>
+                    <SegmentedControlIcons size={size} thumbStyles={{ width: "33%" }}/>
+                    <SegmentedControlText size={size} thumbStyles={{ width: "50%" }}/>
                 </>
             ))}
         </div>

package/src/segmented-control/tests/segmented-control-states.tsx

@@ -9,10 +9,6 @@ const styles = `
         gap: 10px;
         justify-items: start;
     }
-
-    .k-segmented-control-thumb {
-        width: 180px;
-    }
 `;
 
 export default () => (
@@ -20,7 +16,7 @@ export default () => (
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid">
 
-            <SegmentedControl>
+            <SegmentedControl thumbStyles={{ width: "20%" }}>
                 {SegmentedControlButton.states.map((state) => (
                     <SegmentedControlButton key={state} {...{ [state]: true }}>{state}</SegmentedControlButton>
                 ))}

package/src/segmented-control/tests/segmented-control.tsx

@@ -1,5 +1,4 @@
-import { SegmentedControlNormal } from '../../segmented-control';
-
+import { SegmentedControlNormal } from "../../segmented-control";
 
 const styles = `
     #test-area>section {
@@ -9,35 +8,26 @@ const styles = `
         gap: 10px;
         justify-items: start;
     }
-
-    .k-segmented-control-thumb {
-        width: 100px;
-    }
-
-    .full-width .k-segmented-control-thumb {
-        width: 300px;
-    }
 `;
 
 export default () => (
-    <>
-        <style>{styles}</style>
-        <div id="test-area">
-            <section>
-                <div>Default</div>
-                <SegmentedControlNormal />
-            </section>
-
-            <section style={{ width: "200px"}}>
-                <div>Stretched (small width) - items with equal widths</div>
-                <SegmentedControlNormal stretched />
-            </section>
-
-            <section>
-                <div>Stretched - 100% width - items with equal widths</div>
-                <SegmentedControlNormal stretched className="full-width" />
-            </section>
-        </div>
-
-    </>
+  <>
+    <style>{styles}</style>
+    <div id="test-area">
+      <section>
+        <div>Default</div>
+        <SegmentedControlNormal thumbStyles={{ width: "50%" }} />
+      </section>
+
+      <section style={{ width: "200px" }}>
+        <div>Stretched (small width) - items with equal widths</div>
+        <SegmentedControlNormal thumbStyles={{ width: "50%" }} stretched />
+      </section>
+
+      <section>
+        <div>Stretched - 100% width - items with equal widths</div>
+        <SegmentedControlNormal thumbStyles={{ width: "50%" }} stretched className="full-width" />
+      </section>
+    </div>
+  </>
 );