diff --git a/packages/html/src/button-group/button-group.spec.tsx b/packages/html/src/button-group/button-group.spec.tsx index 3df84383e3a..65f32796341 100644 --- a/packages/html/src/button-group/button-group.spec.tsx +++ b/packages/html/src/button-group/button-group.spec.tsx @@ -1,4 +1,4 @@ -import { classNames, optionClassNames, stateClassNames, States, FillMode } from '../misc'; +import { classNames, optionClassNames, stateClassNames, States, Roundness, FillMode } from '../misc'; export const BUTTONGROUP_CLASSNAME = `k-button-group`; @@ -8,10 +8,12 @@ const states = [ const options = { fillMode: [ FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link ], + rounded: [ Roundness.small, Roundness.medium, Roundness.large, Roundness.full ] }; export type KendoButtonGroupOptions = { fillMode?: (typeof options.fillMode)[number] | null; + rounded?: (typeof options.rounded)[number] | null; }; export type KendoButtonGroupProps = KendoButtonGroupOptions & { @@ -21,7 +23,8 @@ export type KendoButtonGroupProps = KendoButtonGroupOptions & { export type KendoButtonGroupState = { [K in (typeof states)[number]]?: boolean }; const defaultProps = { - fillMode: FillMode.solid + fillMode: FillMode.solid, + rounded: Roundness.medium }; export const ButtonGroup = ( @@ -31,6 +34,7 @@ export const ButtonGroup = ( ) => { const { fillMode = defaultProps.fillMode, + rounded = defaultProps.rounded, disabled, stretched, ...other @@ -43,7 +47,8 @@ export const ButtonGroup = ( props.className, BUTTONGROUP_CLASSNAME, optionClassNames(BUTTONGROUP_CLASSNAME, { - fillMode + fillMode, + rounded }), stateClassNames(BUTTONGROUP_CLASSNAME, { disabled diff --git a/packages/html/src/button-group/templates/icon-button-group.tsx b/packages/html/src/button-group/templates/icon-button-group.tsx index 03375fc8c30..d5f30410a77 100644 --- a/packages/html/src/button-group/templates/icon-button-group.tsx +++ b/packages/html/src/button-group/templates/icon-button-group.tsx @@ -2,7 +2,7 @@ import { ButtonGroup } from "../button-group.spec"; import { Button } from "../../button"; export const IconButtonGroup = (props) => ( - diff --git a/packages/html/src/button-group/templates/icon-text-button-group.tsx b/packages/html/src/button-group/templates/icon-text-button-group.tsx index a1cba8c765b..bda14800866 100644 --- a/packages/html/src/button-group/templates/icon-text-button-group.tsx +++ b/packages/html/src/button-group/templates/icon-text-button-group.tsx @@ -2,7 +2,7 @@ import { ButtonGroup } from "../button-group.spec"; import { Button } from "../../button"; export const IconTextButtonGroup = (props) => ( - First Middle diff --git a/packages/html/src/button-group/templates/mixed-button-group.tsx b/packages/html/src/button-group/templates/mixed-button-group.tsx index 5f871c89de7..e6f80ae48d8 100644 --- a/packages/html/src/button-group/templates/mixed-button-group.tsx +++ b/packages/html/src/button-group/templates/mixed-button-group.tsx @@ -2,7 +2,7 @@ import { ButtonGroup } from "../button-group.spec"; import { Button } from "../../button"; export const MixedButtonGroup = (props) => ( - First Middle diff --git a/packages/html/src/button-group/templates/text-button-group.tsx b/packages/html/src/button-group/templates/text-button-group.tsx index 9f4d88b2e38..65311b55b53 100644 --- a/packages/html/src/button-group/templates/text-button-group.tsx +++ b/packages/html/src/button-group/templates/text-button-group.tsx @@ -2,7 +2,7 @@ import { ButtonGroup } from "../button-group.spec"; import { Button } from "../../button"; export const TextButtonGroup = (props) => ( - First Middle diff --git a/packages/html/src/button-group/tests/button-group-rounded.tsx b/packages/html/src/button-group/tests/button-group-rounded.tsx index 8520c1df726..de0b7556ea5 100644 --- a/packages/html/src/button-group/tests/button-group-rounded.tsx +++ b/packages/html/src/button-group/tests/button-group-rounded.tsx @@ -17,7 +17,7 @@ export default () => ( medium large - {[ "null", ...Button.options.rounded ].map((rounded: any) => ( + {[ "null", ...Button.options.rounded ].map((rounded) => ( <> {rounded} {Button.options.size.map((size) => ( diff --git a/tests/_output/material/button-group/button-group-rounded.png b/tests/_output/material/button-group/button-group-rounded.png index 492c16534b8..45a5bda3ab5 100644 Binary files a/tests/_output/material/button-group/button-group-rounded.png and b/tests/_output/material/button-group/button-group-rounded.png differ diff --git a/tests/_output/material/button-group/button-group.png b/tests/_output/material/button-group/button-group.png index c837921d971..44aae8038f9 100644 Binary files a/tests/_output/material/button-group/button-group.png and b/tests/_output/material/button-group/button-group.png differ diff --git a/tests/_output/material/datetime-selector/datetime-selector.png b/tests/_output/material/datetime-selector/datetime-selector.png index b062cdaac83..fabb5871a17 100644 Binary files a/tests/_output/material/datetime-selector/datetime-selector.png and b/tests/_output/material/datetime-selector/datetime-selector.png differ diff --git a/tests/_output/material/datetimepicker/datetimepicker-adaptive.png b/tests/_output/material/datetimepicker/datetimepicker-adaptive.png index 2afc3a3c210..2f54483e84c 100644 Binary files a/tests/_output/material/datetimepicker/datetimepicker-adaptive.png and b/tests/_output/material/datetimepicker/datetimepicker-adaptive.png differ diff --git a/tests/_output/material/datetimepicker/datetimepicker-opened.png b/tests/_output/material/datetimepicker/datetimepicker-opened.png index a257d935915..9f0697fbba2 100644 Binary files a/tests/_output/material/datetimepicker/datetimepicker-opened.png and b/tests/_output/material/datetimepicker/datetimepicker-opened.png differ diff --git a/tests/_output/material/imageeditor/imageeditor-crop-pane.png b/tests/_output/material/imageeditor/imageeditor-crop-pane.png index 27b05b6e256..3e548fe2deb 100644 Binary files a/tests/_output/material/imageeditor/imageeditor-crop-pane.png and b/tests/_output/material/imageeditor/imageeditor-crop-pane.png differ diff --git a/tests/_output/material/scheduler/scheduler-edit-dialog.png b/tests/_output/material/scheduler/scheduler-edit-dialog.png index a5240da474e..7ff649ca907 100644 Binary files a/tests/_output/material/scheduler/scheduler-edit-dialog.png and b/tests/_output/material/scheduler/scheduler-edit-dialog.png differ diff --git a/tests/_output/material/scheduler/scheduler-editing-weekly.png b/tests/_output/material/scheduler/scheduler-editing-weekly.png index 11bdcd87f58..1fca3fa9b1a 100644 Binary files a/tests/_output/material/scheduler/scheduler-editing-weekly.png and b/tests/_output/material/scheduler/scheduler-editing-weekly.png differ diff --git a/tests/button-group/button-group-rounded.html b/tests/button-group/button-group-rounded.html index bde60f32cd3..69715af0f46 100644 --- a/tests/button-group/button-group-rounded.html +++ b/tests/button-group/button-group-rounded.html @@ -99,7 +99,7 @@ small - + @@ -124,7 +124,7 @@ - + @@ -149,7 +149,7 @@ - + @@ -175,7 +175,7 @@ medium - + @@ -200,7 +200,7 @@ - + @@ -225,7 +225,7 @@ - + @@ -251,7 +251,7 @@ large - + @@ -276,7 +276,7 @@ - + @@ -301,7 +301,7 @@ - + @@ -327,7 +327,7 @@ full - + @@ -352,7 +352,7 @@ - + @@ -377,7 +377,7 @@ - + diff --git a/tests/button-group/button-group.html b/tests/button-group/button-group.html index 7cc14c4305b..153ebd9fe7d 100644 --- a/tests/button-group/button-group.html +++ b/tests/button-group/button-group.html @@ -20,7 +20,7 @@ - + normal @@ -45,7 +45,7 @@ - + normal @@ -70,7 +70,7 @@ - + normal @@ -97,7 +97,7 @@ - + normal @@ -122,7 +122,7 @@ - + normal @@ -147,7 +147,7 @@ - + normal @@ -174,7 +174,7 @@ - + normal @@ -199,7 +199,7 @@ - + normal @@ -224,7 +224,7 @@ - + normal diff --git a/tests/coloreditor/coloreditor-rtl.html b/tests/coloreditor/coloreditor-rtl.html index 62440ad3037..82c51ba9814 100644 --- a/tests/coloreditor/coloreditor-rtl.html +++ b/tests/coloreditor/coloreditor-rtl.html @@ -123,7 +123,7 @@ - + @@ -352,7 +352,7 @@ - + diff --git a/tests/coloreditor/coloreditor.html b/tests/coloreditor/coloreditor.html index a81db7f6837..969f710ce5c 100644 --- a/tests/coloreditor/coloreditor.html +++ b/tests/coloreditor/coloreditor.html @@ -123,7 +123,7 @@ - + @@ -352,7 +352,7 @@ - + diff --git a/tests/colorpicker/colorpicker-opened.html b/tests/colorpicker/colorpicker-opened.html index 347da2f5cc9..1dcf83ac81e 100644 --- a/tests/colorpicker/colorpicker-opened.html +++ b/tests/colorpicker/colorpicker-opened.html @@ -43,7 +43,7 @@ - + @@ -177,7 +177,7 @@ - + diff --git a/tests/datetime-selector/datetime-selector.html b/tests/datetime-selector/datetime-selector.html index 610823d9aa0..bb8ae7c4ec6 100644 --- a/tests/datetime-selector/datetime-selector.html +++ b/tests/datetime-selector/datetime-selector.html @@ -25,7 +25,7 @@ - + Date @@ -240,7 +240,7 @@ - + Date diff --git a/tests/datetimepicker/datetimepicker-adaptive.html b/tests/datetimepicker/datetimepicker-adaptive.html index ac4d1b28e79..16c4bf8ac5f 100644 --- a/tests/datetimepicker/datetimepicker-adaptive.html +++ b/tests/datetimepicker/datetimepicker-adaptive.html @@ -61,7 +61,7 @@ - + Date @@ -308,7 +308,7 @@ - + Date diff --git a/tests/datetimepicker/datetimepicker-opened.html b/tests/datetimepicker/datetimepicker-opened.html index 8fd9c7a9efe..90e4e526f1e 100644 --- a/tests/datetimepicker/datetimepicker-opened.html +++ b/tests/datetimepicker/datetimepicker-opened.html @@ -48,7 +48,7 @@ - + Date @@ -280,7 +280,7 @@ - + Date @@ -512,7 +512,7 @@ - + Date @@ -711,7 +711,7 @@ - + Date diff --git a/tests/editor/editor-find-replace.html b/tests/editor/editor-find-replace.html index c9a676995f4..fa2531e721c 100644 --- a/tests/editor/editor-find-replace.html +++ b/tests/editor/editor-find-replace.html @@ -235,7 +235,7 @@ - + diff --git a/tests/editor/editor-states.html b/tests/editor/editor-states.html index 7154c81d266..85a999d3105 100644 --- a/tests/editor/editor-states.html +++ b/tests/editor/editor-states.html @@ -26,7 +26,7 @@ normal - + @@ -42,7 +42,7 @@ - + @@ -72,7 +72,7 @@ - + @@ -88,7 +88,7 @@ - + @@ -104,7 +104,7 @@ - + @@ -144,7 +144,7 @@ readonly - + @@ -160,7 +160,7 @@ - + @@ -190,7 +190,7 @@ - + @@ -206,7 +206,7 @@ - + @@ -222,7 +222,7 @@ - + @@ -262,7 +262,7 @@ disabled - + @@ -278,7 +278,7 @@ - + @@ -308,7 +308,7 @@ - + @@ -324,7 +324,7 @@ - + @@ -340,7 +340,7 @@ - + @@ -380,7 +380,7 @@ focus - + @@ -396,7 +396,7 @@ - + @@ -426,7 +426,7 @@ - + @@ -442,7 +442,7 @@ - + @@ -458,7 +458,7 @@ - + diff --git a/tests/editor/editor.html b/tests/editor/editor.html index 482d07a521b..79e1667f4f9 100644 --- a/tests/editor/editor.html +++ b/tests/editor/editor.html @@ -24,7 +24,7 @@ - + @@ -40,7 +40,7 @@ - + @@ -70,7 +70,7 @@ - + @@ -86,7 +86,7 @@ - + @@ -102,7 +102,7 @@ - + @@ -148,7 +148,7 @@ - + @@ -164,7 +164,7 @@ - + @@ -194,7 +194,7 @@ - + @@ -210,7 +210,7 @@ - + @@ -226,7 +226,7 @@ - + @@ -314,7 +314,7 @@ - + @@ -344,7 +344,7 @@ - + @@ -360,7 +360,7 @@ - + @@ -390,7 +390,7 @@ - + @@ -406,7 +406,7 @@ - + @@ -464,7 +464,7 @@ - + @@ -480,7 +480,7 @@ - + @@ -517,7 +517,7 @@ - + @@ -547,7 +547,7 @@ - + @@ -570,7 +570,7 @@ - + @@ -644,7 +644,7 @@ - + @@ -674,7 +674,7 @@ - + @@ -690,7 +690,7 @@ - + @@ -720,7 +720,7 @@ - + @@ -736,7 +736,7 @@ - + @@ -794,7 +794,7 @@ - + @@ -810,7 +810,7 @@ - + @@ -847,7 +847,7 @@ - +