feat(html): add rounded prop to button-group

Author: Juveniel

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

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) => (
-    <ButtonGroup children={
+    <ButtonGroup {...props} children={
         <>
             <Button className="k-group-start" {...props} icon="bold" />
             <Button {...props} icon="italic" />

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) => (
-    <ButtonGroup children={
+    <ButtonGroup {...props} children={
         <>
             <Button className="k-group-start" {...props} icon="star">First</Button>
             <Button {...props} icon="star">Middle</Button>

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) => (
-    <ButtonGroup children={
+    <ButtonGroup {...props} children={
         <>
             <Button className="k-group-start" {...props}>First</Button>
             <Button {...props} icon="star">Middle</Button>

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) => (
-    <ButtonGroup children={
+    <ButtonGroup {...props} children={
         <>
             <Button className="k-group-start" {...props}>First</Button>
             <Button {...props}>Middle</Button>

packages/html/src/button-group/tests/button-group-rounded.tsx

@@ -17,7 +17,7 @@ export default () => (
             <span>medium</span>
             <span>large</span>
 
-            {[ "null", ...Button.options.rounded ].map((rounded: any) => (
+            {[ "null", ...Button.options.rounded ].map((rounded) => (
                 <>
                     <span>{rounded}</span>
                     {Button.options.size.map((size) => (