npm - @progress/kendo-themes-html - Versions diffs - 14.0.0-dev.5 → 14.0.0-dev.7 - Mend

@progress/kendo-themes-html 14.0.0-dev.5 → 14.0.0-dev.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (153) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/tests/spreadsheet-tools.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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>
                 </>