@progress/kendo-themes-html 14.0.0-dev.4 → 14.0.0-dev.6

package/src/prompt-box/tests/prompt-box-affixes.tsx

@@ -23,7 +23,7 @@ export default () =>(
                         <Icon icon="plus"/>
                     </>}
                     endAffix={<>
-                        <IconButton icon="paperclip-outline-alt-right" size="small" fillMode="flat" rounded="full" />
+                        <IconButton icon="paperclip" size="small" fillMode="flat" rounded="full" />
                     </>}
                 />
             </div>
@@ -33,7 +33,7 @@ export default () =>(
                     endAffix={<>
                         <Icon icon="plus"/>
                         <div className="k-spacer"></div>
-                        <IconButton icon="paperclip-outline-alt-right" size="small" fillMode="flat" rounded="full" />
+                        <IconButton icon="paperclip" size="small" fillMode="flat" rounded="full" />
                     </>}
                 />
             </div>
@@ -44,7 +44,7 @@ export default () =>(
                         <Icon icon="plus"/>
                     </>}
                     endAffix={<>
-                        <IconButton icon="paperclip-outline-alt-right" size="small" fillMode="flat" rounded="full" />
+                        <IconButton icon="paperclip" size="small" fillMode="flat" rounded="full" />
                     </>}
                 />
             </div>
@@ -57,7 +57,7 @@ export default () =>(
                     endAffix={<>
                         <Icon icon="plus"/>
                         <div className="k-spacer"></div>
-                        <IconButton icon="paperclip-outline-alt-right" size="small" fillMode="flat" rounded="full" />
+                        <IconButton icon="paperclip" size="small" fillMode="flat" rounded="full" />
                     </>}
                 />
             </div>
@@ -78,7 +78,7 @@ export default () =>(
                         <Icon icon="plus"/>
                     </>}
                     endAffix={<>
-                        <IconButton icon="paperclip-outline-alt-right" size="small" fillMode="flat" rounded="full" />
+                        <IconButton icon="paperclip" size="small" fillMode="flat" rounded="full" />
                     </>}
                 />
             </div>
@@ -91,7 +91,7 @@ export default () =>(
                     endAffix={<>
                         <Icon icon="plus"/>
                         <div className="k-spacer"></div>
-                        <IconButton icon="paperclip-outline-alt-right" size="small" fillMode="flat" rounded="full" />
+                        <IconButton icon="paperclip" size="small" fillMode="flat" rounded="full" />
                     </>}
                 />
             </div>
@@ -105,7 +105,7 @@ export default () =>(
                         <Icon icon="plus"/>
                     </>}
                     endAffix={<>
-                        <IconButton icon="paperclip-outline-alt-right" size="small" fillMode="flat" rounded="full" />
+                        <IconButton icon="paperclip" size="small" fillMode="flat" rounded="full" />
                     </>}
                 />
             </div>
@@ -121,7 +121,7 @@ export default () =>(
                     endAffix={<>
                         <Icon icon="plus"/>
                         <span className="k-spacer"></span>
-                        <IconButton icon="paperclip-outline-alt-right" size="small" fillMode="flat" rounded="full" />
+                        <IconButton icon="paperclip" size="small" fillMode="flat" rounded="full" />
                     </>}
                 />
             </div>

package/src/prompt-box/tests/prompt-box-files.tsx

@@ -19,7 +19,7 @@ export default () =>(
                 <PromptBoxLineModeMulti
                     placeholder="Type a message"
                     endAffix={<>
-                        <IconButton icon="paperclip-outline-alt-right" size="small" fillMode="flat" rounded="full" />
+                        <IconButton icon="paperclip" size="small" fillMode="flat" rounded="full" />
                         <div className="k-spacer"></div>
                     </>}
                 />
@@ -38,7 +38,7 @@ export default () =>(
                         </FileBoxWrapper>
                     </>}
                     endAffix={<>
-                        <IconButton icon="paperclip-outline-alt-right" size="small" fillMode="flat" />
+                        <IconButton icon="paperclip" size="small" fillMode="flat" />
                         <div className="k-spacer"></div>
                     </>}
                 />

package/src/rating/rating-item.tsx

@@ -1,4 +1,4 @@
-import { Icon } from '../icon';
+import { SvgIcon } from '../icon';
 import { classNames, stateClassNames, States } from '../misc';
 
 export const RATINGITEM_CLASSNAME = `k-rating-item`;
@@ -23,6 +23,21 @@ const defaultOptions = {
     iconType: "solid",
 };
 
+// Remove after adoption of v5 of the kendo-icons
+// Those icons should NOT be hardcoded and should come from the
+// kendo-icons package and be changed to "star" (solid) and "star" (outline).
+const SolidStarIcon = {
+    name: 'star',
+    content: '<path d="M256 391.5 117.2 480 154 314.1 32 202.4 192.9 188 256 32l63.1 156L480 202.4 358 314.1 394.8 480z"></path>',
+    viewBox: '0 0 512 512'
+};
+
+const OutlineStarIcon = {
+    name: 'star-outline',
+    content: '<path d="M480 202.4 319.1 188 256 32l-63.1 156L32 202.4l122 111.7L117.2 480 256 391.5 394.8 480 358 314.1zM256 353.6l-90.8 57.9 24-108.5-82.1-75.2 108.1-9.7L256 117.3l40.8 100.8 108.1 9.7-82.1 75.2 24.1 108.5z"></path>',
+    viewBox: '0 0 512 512'
+};
+
 
 export const RatingItem = (
     props: RatingItemState & RatingItemProps & React.HTMLAttributes<HTMLSpanElement>
@@ -44,20 +59,20 @@ export const RatingItem = (
             itemContent =
                 <>
                     <span className="k-rating-precision-complement">
-                        <Icon icon="star-outline" size="xlarge"></Icon>
+                        <SvgIcon className='k-icon' icon={OutlineStarIcon} size="xlarge" />
                     </span>
                     <span className="k-rating-precision-part" style={{ clipPath: `inset(${dir === "rtl" ? "0px 0px 0px 50%" : "0px 50% 0px 0px"})` }}>
-                        <Icon icon="star" size="xlarge"></Icon>
+                        <SvgIcon className='k-icon' icon={SolidStarIcon} size="xlarge" />
                     </span>
                     <span style={{ width: "24px", height: "24px", display: "block" }}></span>
                 </>
             ;
             break;
         case "outline":
-            itemContent = <Icon icon="star-outline" size="xlarge"></Icon>;
+            itemContent = <SvgIcon className='k-icon' icon={OutlineStarIcon} size="xlarge" />;
             break;
         case "solid":
-            itemContent = <Icon icon="star" size="xlarge"></Icon>;
+            itemContent = <SvgIcon className='k-icon' icon={SolidStarIcon} size="xlarge" />;
             break;
         default:
             return undefined;

package/src/smart-box/smart-box-send-button.tsx

@@ -30,7 +30,7 @@ export const SmartBoxSendButton = (
             {...other}
             rounded="full"
             size="small"
-            icon={processing ? "stop-sm" : "arrow-up-outline"}
+            icon={processing ? "stop" : "arrow-up"}
             active={processing}
             aria-pressed={processing ? 'true' : undefined}
             aria-label={processing ? "Stop processing" : "Send"}

package/src/smart-box/templates/smart-box-disabled-send.tsx

@@ -13,7 +13,7 @@ export const SmartBoxDisabledSend = (props) =>
         }
         suffix={
             <>
-                <IconButton icon="microphone-outline" fillMode="clear" rounded="full" size="small" aria-label="Start voice input" />
+                <IconButton icon="microphone" fillMode="clear" rounded="full" size="small" aria-label="Start voice input" />
                 <SmartBoxSendButton disabled />
             </>
         }

package/src/smart-box/templates/smart-box-normal.tsx

@@ -14,7 +14,7 @@ export const SmartBoxNormal = (props) =>
         }
         suffix={
             <>
-                <IconButton icon="microphone-outline" fillMode="clear" rounded="full" size="small" aria-label="Start voice input" />
+                <IconButton icon="microphone" fillMode="clear" rounded="full" size="small" aria-label="Start voice input" />
                 <SmartBoxSendButton />
             </>
         }

package/src/smart-box/templates/smart-box-opened-focused.tsx

@@ -25,7 +25,7 @@ export const SmartBoxOpenedFocused = (props) => {
             }
             suffix={
                 <>
-                    <IconButton icon="microphone-outline" fillMode="clear" rounded="full" size="small" aria-label="Start voice input" />
+                    <IconButton icon="microphone" fillMode="clear" rounded="full" size="small" aria-label="Start voice input" />
                     <SmartBoxSendButton />
                 </>
             }

package/src/smart-box/templates/smart-box-processing.tsx

@@ -14,7 +14,7 @@ export const SmartBoxProcessing = (props) =>
         }
         suffix={
             <>
-                <IconButton icon="microphone-outline" fillMode="clear" rounded="full" size="small" aria-label="Start voice input" />
+                <IconButton icon="microphone" fillMode="clear" rounded="full" size="small" aria-label="Start voice input" />
                 <SmartBoxSendButton processing />
             </>
         }

package/src/speech-to-text-button/speech-to-text-button.spec.tsx

@@ -10,7 +10,7 @@ export type KendoSpeechToTextButtonOptions = KendoButtonOptions;
 export type KendoSpeechToTextButtonState = KendoButtonState;
 
 const defaultOptions = {
-    icon: "microphone-outline",
+    icon: "microphone",
 };
 
 export type KendoSpeechToTextButtonProps = KendoButtonProps & KendoSpeechToTextButtonOptions &  {
@@ -31,7 +31,7 @@ export const SpeechToTextButton: KendoComponent<KendoSpeechToTextButtonProps & K
     return (
         <Button
             {...other}
-            icon={listening ? "stop-sm" : icon}
+            icon={listening ? "stop" : icon}
             className={classNames(
                 props.className,
                 SPEECH_TO_TEXT_BUTTON_CLASSNAME,

package/src/spreadsheet/spreadsheet-header.tsx

@@ -56,7 +56,7 @@ const defaultToolbarItems = ([
     <MenuButton key="halign" fillMode="flat" icon="align-left" showArrow aria-label="Horizontal alignment"></MenuButton>,
     <MenuButton key="valign" fillMode="flat" icon="align-middle" showArrow aria-label="Vertical alignment"></MenuButton>,
     <ToolbarSeparator key="sep8"></ToolbarSeparator>,
-    <Button key="wrap" fillMode="flat" icon="text-wrap" aria-label="Wrap text"></Button>
+    <Button key="wrap" fillMode="flat" icon="text-wrap-arrow" aria-label="Wrap text"></Button>
 ]);
 
 const defaultMenuItems = ([

package/src/spreadsheet/spreadsheet-sheets-bar.tsx

@@ -17,22 +17,22 @@ export type KendoSpreadsheetSheetsBarProps = {
 const defaultTabStripItems = (
     <>
         <TabStripItem key="sheet1" first active value="Sheet 1" actions={
-            <MenuButton showArrow={false} size="xsmall" icon="chevron-down" fillMode="flat" aria-label="Sheet options" />
+            <MenuButton showArrow={false} size="small" icon="chevron-down" fillMode="flat" aria-label="Sheet options" />
         }></TabStripItem>
         <TabStripItem key="sheet2" value="Sheet 2" actions={
-            <MenuButton showArrow={false} size="xsmall" icon="chevron-down" fillMode="flat" aria-label="Sheet options" />
+            <MenuButton showArrow={false} size="small" icon="chevron-down" fillMode="flat" aria-label="Sheet options" />
         }></TabStripItem>
         <TabStripItem key="sheet3" value="Sheet 3" actions={
-            <MenuButton showArrow={false} size="xsmall" icon="chevron-down" fillMode="flat" aria-label="Sheet options" />
+            <MenuButton showArrow={false} size="small" icon="chevron-down" fillMode="flat" aria-label="Sheet options" />
         }></TabStripItem>
         <TabStripItem key="sheet4" value="Sheet 4" actions={
-            <MenuButton showArrow={false} size="xsmall" icon="chevron-down" fillMode="flat" aria-label="Sheet options" />
+            <MenuButton showArrow={false} size="small" icon="chevron-down" fillMode="flat" aria-label="Sheet options" />
         }></TabStripItem>
         <TabStripItem key="sheet5" value="Sheet 5" actions={
-            <MenuButton showArrow={false} size="xsmall" icon="chevron-down" fillMode="flat" aria-label="Sheet options" />
+            <MenuButton showArrow={false} size="small" icon="chevron-down" fillMode="flat" aria-label="Sheet options" />
         }></TabStripItem>
         <TabStripItem key="sheet6" last value="Sheet 6" actions={
-            <MenuButton showArrow={false} size="xsmall" icon="chevron-down" fillMode="flat" aria-label="Sheet options" />
+            <MenuButton showArrow={false} size="small" icon="chevron-down" fillMode="flat" aria-label="Sheet options" />
         }></TabStripItem>
     </>
 );
@@ -59,8 +59,8 @@ export const SpreadsheetSheetsBar = (
                 SPREADSHEETSHEETSBAR_CLASSNAME,
                 props.className
             )}>
-            <Button className="k-spreadsheet-sheet-add" fillMode="flat" size="xsmall" icon="plus" aria-label="Add new sheet" aria-controls={tabStripItemsId} />
-            <Button className="k-spreadsheet-sheets-menu" fillMode="flat" size="xsmall" icon="menu" aria-label="Sheets menu" aria-controls={tabStripItemsId} />
+            <Button className="k-spreadsheet-sheet-add" fillMode="flat" size="small" icon="plus" aria-label="Add new sheet" aria-controls={tabStripItemsId} />
+            <Button className="k-spreadsheet-sheets-menu" fillMode="flat" size="small" icon="menu" aria-label="Sheets menu" aria-controls={tabStripItemsId} />
             <TabStrip
                 className="k-spreadsheet-sheets"
                 tabStripItems={tabStripItems}

package/src/spreadsheet/tests/spreadsheet-tools.tsx

@@ -93,7 +93,7 @@ export default () => (
                         <MenuButton fillMode="flat" icon="align-left" showArrow></MenuButton>,
                         <MenuButton fillMode="flat" icon="align-middle" showArrow></MenuButton>,
                         <ToolbarSeparator></ToolbarSeparator>,
-                        <Button fillMode="flat" icon="text-wrap"></Button>]}
+                        <Button fillMode="flat" icon="text-wrap-arrow"></Button>]}
                 />
             </Spreadsheet>
 

package/src/toolbar/tests/toolbar-fill-modes.tsx

@@ -48,7 +48,7 @@ export default () =>(
                           <MenuButton fillMode={fillMode} icon="align-left" showArrow></MenuButton>
                           <MenuButton fillMode={fillMode} icon="align-middle" showArrow></MenuButton>
                           <ToolbarSeparator></ToolbarSeparator>
-                          <Button fillMode={fillMode} icon="text-wrap"></Button>
+                          <Button fillMode={fillMode} icon="text-wrap-arrow"></Button>
                       </ToolbarResizable>
                     </section>
                     <span className="k-colspan-all k-col-span-full">{`${fillMode}`} with overlay</span>
@@ -88,7 +88,7 @@ export default () =>(
                           <MenuButton fillMode={fillMode} icon="align-left" showArrow></MenuButton>
                           <MenuButton fillMode={fillMode} icon="align-middle" showArrow></MenuButton>
                           <ToolbarSeparator></ToolbarSeparator>
-                          <Button fillMode={fillMode} icon="text-wrap"></Button>
+                          <Button fillMode={fillMode} icon="text-wrap-arrow"></Button>
                       </ToolbarScrollableButtonsHidden>
                     </section>
                 </>

package/dist/types/loader/tests/loader-container-overlay.d.ts

@@ -1,2 +0,0 @@
-declare const _default: () => import("react/jsx-runtime").JSX.Element;
-export default _default;

package/src/colorpicker/tests/colorpicker-size.tsx

@@ -1,28 +0,0 @@
-import { ColorPickerNormal, ColorPicker } from '../../colorpicker';
-
-const styles = `
-    #test-area {
-        justify-items: start;
-    }
-`;
-
-export default () => (
-    <>
-        <style>{styles}</style>
-        <div id="test-area" className="k-d-grid k-grid-cols-4">
-
-            <span>undefined</span>
-            <span>Small</span>
-            <span>Medium</span>
-            <span>Large</span>
-
-            { ColorPicker.options.size.map((size) => (
-                <>
-                    <section>
-                        <ColorPickerNormal size={size} />
-                    </section>
-                </>
-            ))}
-        </div>
-    </>
-);

package/src/loader/tests/loader-container-overlay.tsx

@@ -1,30 +0,0 @@
-import { LoaderContainerNormal } from '../../loader';
-
-
-const styles = `
-    .example {
-        width: 100%;
-        min-height: 200px;
-        position: relative;
-    }
-`;
-
-export default () =>(
-    <>
-        <style>{styles}</style>
-        <div id="test-area" className="k-d-grid k-grid-cols-2">
-
-            <span>Panel</span>
-            <span>No Panel</span>
-
-            <span className="example">
-                <LoaderContainerNormal size={'large'} panel={true} />
-            </span>
-
-            <span className="example">
-                <LoaderContainerNormal size={'large'} />
-            </span>
-
-        </div>
-    </>
-);