Merge pull request #631 from IgniteUI/skrastev/more-fixes-5.0.0

dkamburov · web-flow · commit 49206946181d · 2024-08-28T12:49:02.000+03:00
Further update and clear size property where has default value set. Small other fixes.
diff --git a/samples/grids/grid/data-searching/src/index.tsx b/samples/grids/grid/data-searching/src/index.tsx
@@ -14,6 +14,7 @@ import {
   IgrComponentValueChangedEventArgs,
   IgrIconButton,
   IgrInput,
+  IgrInputBase,
   IgrInputModule,
   IgrIconButtonModule,
 } from "igniteui-react";
@@ -56,7 +57,7 @@ export default function Sample() {
     }
   }, []);
 
-  function handleOnSearchChange(input: IgrInput, event: IgrComponentValueChangedEventArgs) {
+  function handleOnSearchChange(input: IgrInputBase, event: IgrComponentValueChangedEventArgs) {
     setSearchText(event.detail);
     gridRef.current.findNext(event.detail, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
   }
diff --git a/samples/grids/grid/finjs/src/index.css b/samples/grids/grid/finjs/src/index.css
@@ -114,6 +114,10 @@ igc-toast {
     padding-inline-end: 15px;
 }
 
+.size-small {
+    --ig-size: var(--ig-size-small);
+}
+
 .gridSize {
     --ig-size: var(--ig-size-medium);
 }
diff --git a/samples/grids/grid/finjs/src/index.tsx b/samples/grids/grid/finjs/src/index.tsx
@@ -90,7 +90,7 @@ function priceTemplate(ctx: {dataContext: IgrCellTemplateContext}) {
 function chartBtnTemplate(ctx: {dataContext: IgrCellTemplateContext}) {
   const cell = ctx.dataContext.cell;
   const rowData = gridRef.current.getRowData(cell.id.rowID);
-  return <span onClick={e => openDialogForRow(e, rowData)}><IgrIcon name="insert_chart" collection="material" variant="contained" size="small">
+  return <span onClick={e => openDialogForRow(e, rowData)}><IgrIcon name="insert_chart" collection="material" variant="contained" className="size-small">
   </IgrIcon></span>
 }
 
diff --git a/samples/grids/list/overview/src/index.css b/samples/grids/list/overview/src/index.css
@@ -0,0 +1,11 @@
+.size-small {
+    --ig-size: var(--ig-size-small);
+}
+
+.size-medium {
+    --ig-size: var(--ig-size-medium);
+}
+
+.size-large {
+    --ig-size: var(--ig-size-large);
+}
diff --git a/samples/grids/list/overview/src/index.tsx b/samples/grids/list/overview/src/index.tsx
@@ -15,7 +15,7 @@ export default class ListOverview extends React.Component<any, any> {
 
     constructor(props: any) {
         super(props);        
-        this.state = { listSize: "large" };
+        this.state = { listSize: "medium" };
         this.onRadioChange = this.onRadioChange.bind(this);
     }
 
@@ -26,15 +26,15 @@ export default class ListOverview extends React.Component<any, any> {
                     <IgrRadio name="size" value="small" labelPosition="after" change={this.onRadioChange}>
                         <span>Small</span>
                     </IgrRadio>
-                    <IgrRadio name="size" value="medium" labelPosition="after" change={this.onRadioChange}>
+                    <IgrRadio name="size" value="medium" labelPosition="after" checked={true} change={this.onRadioChange}>
                         <span>Medium</span>
                     </IgrRadio>
-                    <IgrRadio name="size" value="large" labelPosition="after" checked={true} change={this.onRadioChange}>
+                    <IgrRadio name="size" value="large" labelPosition="after" change={this.onRadioChange}>
                         <span>Large</span>
                     </IgrRadio>
                 </IgrRadioGroup>
 
-                <IgrList size={this.state.listSize}>
+                <IgrList className={'size-' + this.state.listSize}>
                     <IgrListHeader>
                         <span>Contacts</span>
                     </IgrListHeader>
diff --git a/samples/grids/tree-grid/data-searching/src/index.tsx b/samples/grids/tree-grid/data-searching/src/index.tsx
@@ -16,6 +16,7 @@ import {
   IgrIconButton,
   IgrIconButtonModule,
   IgrInput,
+  IgrInputBase,
   IgrInputModule,
 } from "igniteui-react";
 
@@ -57,7 +58,7 @@ export default function Sample() {
     }
   }, []);
 
-  function handleOnSearchChange(input: IgrInput, event: IgrComponentValueChangedEventArgs) {
+  function handleOnSearchChange(input: IgrInputBase, event: IgrComponentValueChangedEventArgs) {
     setSearchText(event.detail);
     gridRef.current.findNext(event.detail, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
   }
diff --git a/samples/grids/tree-grid/toolbar-sample-2/src/index.tsx b/samples/grids/tree-grid/toolbar-sample-2/src/index.tsx
@@ -15,7 +15,7 @@ import {
   IgrTreeGridModule,
 } from "igniteui-react-grids";
 import { IgrColumn } from "igniteui-react-grids";
-import { IgrAvatar, IgrAvatarModule, IgrComponentValueChangedEventArgs, IgrInput, IgrInputModule, IgrSwitch, IgrSwitchModule } from "igniteui-react";
+import { IgrAvatar, IgrAvatarModule, IgrComponentValueChangedEventArgs, IgrInput, IgrInputBase, IgrInputModule, IgrSwitch, IgrSwitchModule } from "igniteui-react";
 
 import "igniteui-react-grids/grids/combined";
 import "igniteui-react-grids/grids/themes/light/bootstrap.css";
@@ -47,7 +47,7 @@ export default function App() {
 
   const spanRef = useRef(null);
 
-  const changeTitle = (input: IgrInput, event: IgrComponentValueChangedEventArgs) => {
+  const changeTitle = (input: IgrInputBase, event: IgrComponentValueChangedEventArgs) => {
     spanRef.current.innerText = event.detail;
   }
 
diff --git a/samples/inputs/chip/size/src/index.css b/samples/inputs/chip/size/src/index.css
@@ -1,2 +1,14 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
+/* https://static.infragistics.com/xplatform/css/samples */
+
+.size-small {
+    --ig-size: var(--ig-size-small);
+}
+
+.size-medium {
+    --ig-size: var(--ig-size-medium);
+}
+
+.size-large {
+    --ig-size: var(--ig-size-large);
+}
diff --git a/samples/inputs/chip/size/src/index.tsx b/samples/inputs/chip/size/src/index.tsx
@@ -15,13 +15,13 @@ export default class ChipSize extends React.Component<any, any> {
     public render(): JSX.Element {
         return (
             <div className="container sample" style={{flexDirection: "row", gap: "8px", alignItems: "baseline"}}>
-                 <IgrChip size="small" selectable="true" removable="true">
+                 <IgrChip className="size-small" selectable="true" removable="true">
                      <span>Chip</span>
                  </IgrChip>
-                 <IgrChip size="medium" selectable="true" removable="true">
+                 <IgrChip className="size-medium" selectable="true" removable="true">
                      <span>Chip</span>
                  </IgrChip>
-                 <IgrChip size="large" selectable="true" removable="true">
+                 <IgrChip className="size-large" selectable="true" removable="true">
                      <span>Chip</span>
                  </IgrChip>
             </div>
diff --git a/samples/inputs/rating/basic/src/index.css b/samples/inputs/rating/basic/src/index.css
@@ -1,2 +1,5 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
+/* https://static.infragistics.com/xplatform/css/samples */
+.size-large {
+    --ig-size: var(--ig-size-large);
+}
diff --git a/samples/inputs/rating/basic/src/index.tsx b/samples/inputs/rating/basic/src/index.tsx
@@ -15,7 +15,7 @@ export default class RatingOverview extends React.Component<any, any> {
     public render(): JSX.Element {
         return (
             <div className="container sample">                
-                    <IgrRating label="Rate Experience" max="5" step=".5" size="large" hoverPreview="true"></IgrRating>                                    
+                    <IgrRating className="size-large" label="Rate Experience" max="5" step=".5" hoverPreview="true"></IgrRating>                                    
             </div>
         );
     }  
diff --git a/samples/inputs/rating/custom/src/index.css b/samples/inputs/rating/custom/src/index.css
@@ -1,2 +1,5 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
+/* https://static.infragistics.com/xplatform/css/samples */
+.size-large {
+    --ig-size: var(--ig-size-large);
+}
diff --git a/samples/inputs/rating/custom/src/index.tsx b/samples/inputs/rating/custom/src/index.tsx
@@ -17,7 +17,7 @@ export default class RatingCustomSymbols extends React.Component<any, any> {
     public render(): JSX.Element {
         return (
             <div className="container sample">                
-                    <IgrRating label="Rate Experience" step=".5" size="large" value="3" hoverPreview="true">
+                    <IgrRating className="size-large" label="Rate Experience" step=".5" value="3" hoverPreview="true">
                          <IgrRatingSymbol key="0">
                             <div key="div0"><IgrIcon ref={this.iconRef} name='heart' collection="material" key="default0"></IgrIcon></div>
                             <div key="empty-div0" slot='empty'><IgrIcon ref={this.iconRef} name='emptyHeart' collection="material" key="empty0"></IgrIcon></div> 
diff --git a/samples/inputs/rating/styling/src/index.css b/samples/inputs/rating/styling/src/index.css
@@ -22,3 +22,7 @@ igc-rating::part(label) {
 igc-rating::part(symbols) {
     gap: 8px; 
 }
+
+.size-large {
+    --ig-size: var(--ig-size-large);
+}
diff --git a/samples/inputs/rating/styling/src/index.tsx b/samples/inputs/rating/styling/src/index.tsx
@@ -15,7 +15,7 @@ export default class RatingStyling extends React.Component<any, any> {
     public render(): JSX.Element {
         return (
             <div className="container sample">                
-                    <IgrRating label="Styled Rating" value="2.5" step=".5" size="large" hoverPreview="true"></IgrRating>                                    
+                <IgrRating className="size-large" label="Styled Rating" value="2.5" step=".5" hoverPreview="true"></IgrRating>                                    
             </div>
         );
     }  
diff --git a/samples/layouts/accordion/customization/src/index.tsx b/samples/layouts/accordion/customization/src/index.tsx
@@ -97,7 +97,7 @@ export default class AccordionCustomization extends React.Component<any, any> {
                                         return (
                                             <IgrRadio key={`${rating}star`} name="rating" value={rating.toString()} change={this.ratingChange}>
                                                 <IgrRating label={`${rating} star${rating > 1 ? 's' : ''} or more`} max="5" value={rating + 0.5}
-                                                    size="small" readonly key={`{r-${rating}}`}>
+                                                    className="size-small" readonly key={`{r-${rating}}`}>
                                                 </IgrRating>
                                             </IgrRadio>
                                         );
diff --git a/samples/layouts/avatar/size/src/index.css b/samples/layouts/avatar/size/src/index.css
@@ -0,0 +1,16 @@
+.size-small {
+    --ig-size: var(--ig-size-small);
+}
+
+.size-medium {
+    --ig-size: var(--ig-size-medium);
+}
+
+.size-large {
+    --ig-size: var(--ig-size-large);
+}
+
+.sample {
+    flex-direction: row;
+    gap: 10px;
+}
diff --git a/samples/layouts/avatar/size/src/index.tsx b/samples/layouts/avatar/size/src/index.tsx
@@ -15,7 +15,9 @@ export default class AvatarSize extends React.Component<any, any> {
     public render(): JSX.Element {
         return (
             <div className="container sample">
-                <IgrAvatar initials='AZ' size='large'/>
+                <IgrAvatar initials='S' className='size-small'/>
+                <IgrAvatar initials='M' className='size-medium'/>
+                <IgrAvatar initials='L' className='size-large'/>
             </div>
         );
     }
diff --git a/samples/layouts/dock-manager/styling/src/DockManagerStyles.css b/samples/layouts/dock-manager/styling/src/DockManagerStyles.css
@@ -208,10 +208,14 @@ igc-card-content {
   margin-bottom: 0.5rem;
 }
 
-.button-small {
+.size-small {
   --ig-size: var(--ig-size-small);
 }
 
-.button-medium {
+.size-medium {
   --ig-size: var(--ig-size-medium);
 }
+
+.size-large {
+  --ig-size: var(--ig-size-large);
+}
diff --git a/samples/layouts/dock-manager/styling/src/index.tsx b/samples/layouts/dock-manager/styling/src/index.tsx
@@ -74,7 +74,7 @@ export default class DockManagerStyling extends React.Component {
                                         <span className="usd-caption">United States Dollar</span>
                                     </div>
 
-                                    <IgrAvatar className="margin-avatar" size="medium" src="https://static.infragistics.com/xplatform/images/flags/USA.png" shape="rounded">
+                                    <IgrAvatar className="margin-avatar size-medium" src="https://static.infragistics.com/xplatform/images/flags/USA.png" shape="rounded">
                                             <span>USA</span>
                                     </IgrAvatar>
                                 </div>
@@ -83,12 +83,12 @@ export default class DockManagerStyling extends React.Component {
                             <IgrCardActions>
                                 <div style={{display: "flex"}}>
                                     <div slot="start">
-                                        <IgrButton className="button-medium" variant="fab">
+                                        <IgrButton className="size-medium" variant="fab">
                                             <span>Add Money</span>
                                         </IgrButton>
                                     </div>
                                     <div slot="start">
-                                        <IgrButton className="button-medium" variant="fab">
+                                        <IgrButton className="size-medium" variant="fab">
                                             <span>Send</span>
                                         </IgrButton>
                                     </div>
@@ -108,58 +108,58 @@ export default class DockManagerStyling extends React.Component {
                         </button>
                     </div>
                     <div className="dockManagerFull" style={{overflowY: "scroll"}} slot="content2">
-                        <div className="top-movers-content">
+                        <div className="top-movers-content size-large">
                             <div className="top-move-stock-item">
-                                <IgrAvatar src="https://static.infragistics.com/xplatform/images/company/tesla.png" size="large" shape="circle">
+                                <IgrAvatar src="https://static.infragistics.com/xplatform/images/company/tesla.png" shape="circle">
                                     <span>TSLA</span>
                                 </IgrAvatar>
                                 <span>1017,08$</span>
                                 <div className="stock-item-movement-down"><IgrIcon name="arrow-down" collection="material"></IgrIcon>12,54%</div>
                             </div>
                             <div className="top-move-stock-item">
-                                <IgrAvatar src="https://static.infragistics.com/xplatform/images/company/amc.png" size="large" shape="circle">
+                                <IgrAvatar src="https://static.infragistics.com/xplatform/images/company/amc.png" shape="circle">
                                     <span>AMC</span>
                                 </IgrAvatar>
                                 <span>39,33$</span>
                                 <div className="stock-item-movement-down"><IgrIcon name="arrow-down" collection="material"></IgrIcon>12,72%</div>
                             </div>
                             <div className="top-move-stock-item">
-                                <IgrAvatar src="https://static.infragistics.com/xplatform/images/company/canoo.png" size="large" shape="circle">
+                                <IgrAvatar src="https://static.infragistics.com/xplatform/images/company/canoo.png" shape="circle">
                                     <span>GOEV</span>
                                 </IgrAvatar>
                                 <span>12,33$</span>
                                 <div className="stock-item-movement-up"><IgrIcon name="arrow-up" collection="material"></IgrIcon>45,92%</div>
                             </div>
                             <div className="top-move-stock-item">
-                                <IgrAvatar src="https://static.infragistics.com/xplatform/images/company/lucid.png" size="large" shape="circle">
+                                <IgrAvatar src="https://static.infragistics.com/xplatform/images/company/lucid.png" shape="circle">
                                     <span>LCID</span>
                                 </IgrAvatar>
                                 <span>58,14$</span>
                                 <div className="stock-item-movement-up"><IgrIcon name="arrow-up" collection="material"></IgrIcon>29,42%</div>
                             </div>
                             <div className="top-move-stock-item">
-                                <IgrAvatar src="https://static.infragistics.com/xplatform/images/company/nio.png" size="large" shape="circle">
+                                <IgrAvatar src="https://static.infragistics.com/xplatform/images/company/nio.png" shape="circle">
                                     <span>NIO</span>
                                 </IgrAvatar>
                                 <span>21,67$</span>
                                 <div className="stock-item-movement-down"><IgrIcon name="arrow-down" collection="material"></IgrIcon>7,25%</div>
                             </div>
                             <div className="top-move-stock-item">
-                                <IgrAvatar src="https://static.infragistics.com/xplatform/images/company/stoneco.png" size="large" shape="circle">
+                                <IgrAvatar src="https://static.infragistics.com/xplatform/images/company/stoneco.png" shape="circle">
                                     <span>STNE</span>
                                 </IgrAvatar>
                                 <span>22,48$</span>
                                 <div className="stock-item-movement-down"><IgrIcon name="arrow-down" collection="material"></IgrIcon>28,68%</div>
                             </div>
                             <div className="top-move-stock-item">
-                                <IgrAvatar src="https://static.infragistics.com/xplatform/images/company/roku.png" size="large" shape="circle">
+                                <IgrAvatar src="https://static.infragistics.com/xplatform/images/company/roku.png" shape="circle">
                                     <span>ROKU</span>
                                 </IgrAvatar>
                                 <span>249,35$</span>
                                 <div className="stock-item-movement-down"><IgrIcon name="arrow-down" collection="material"></IgrIcon>9,5%</div>
                             </div>
                             <div className="top-move-stock-item">
-                                <IgrAvatar src="https://static.infragistics.com/xplatform/images/company/maxar.png" size="large" shape="circle">
+                                <IgrAvatar src="https://static.infragistics.com/xplatform/images/company/maxar.png" shape="circle">
                                     <span>MAXR</span>
                                 </IgrAvatar>
                                 <span>33,14$</span>
@@ -490,7 +490,7 @@ export default class DockManagerStyling extends React.Component {
                     <div className="dockManagerFull" slot="content5">
                         <IgrCard className="auto-y-overflow" elevated>
                             <IgrCardContent>                                
-                                <IgrButton className="add-card-btn button-small" variant="flat">
+                                <IgrButton className="add-card-btn size-small" variant="flat">
                                     <span>+ Add Card</span>
                                 </IgrButton>                                
                                 <IgrList id="list" className="auto-y-overflow">
diff --git a/samples/layouts/icon/sizing/src/IconSizing.css b/samples/layouts/icon/sizing/src/IconSizing.css
@@ -5,14 +5,14 @@
     border: 1px solid gainsboro;
 }
 
-.largeIcon {
-    --ig-size: var(--ig-size-large);
+.size-small {
+    --ig-size: var(--ig-size-small);
 }
 
-.mediumIcon {
+.size-medium {
     --ig-size: var(--ig-size-medium);
 }
 
-.smallIcon {
-    --ig-size: var(--ig-size-small);
+.size-large {
+    --ig-size: var(--ig-size-large);
 }
diff --git a/samples/layouts/icon/sizing/src/index.tsx b/samples/layouts/icon/sizing/src/index.tsx
@@ -18,9 +18,9 @@ export default class IconSizing extends React.Component<any, any> {
         return (
             <div className="container sample">
                 <div className="horizontal-border-container">
-                    <IgrIcon ref={this.iconRef} className="smallIcon" name="build" collection="material" />
-                    <IgrIcon className="mediumIcon" name="build" collection="material" />
-                    <IgrIcon className="largeIcon" name="build" collection="material" />
+                    <IgrIcon ref={this.iconRef} className="size-small" name="build" collection="material" />
+                    <IgrIcon className="size-medium" name="build" collection="material" />
+                    <IgrIcon className="size-large" name="build" collection="material" />
                 </div>
             </div>
         );
diff --git a/samples/menus/nav-bar/overview/src/index.css b/samples/menus/nav-bar/overview/src/index.css
@@ -1,3 +0,0 @@
-.size-large {
-    --ig-size: var(--ig-size-large);
-}
diff --git a/samples/menus/nav-bar/overview/src/index.tsx b/samples/menus/nav-bar/overview/src/index.tsx
diff --git a/samples/menus/nav-bar/styling/src/index.css b/samples/menus/nav-bar/styling/src/index.css
diff --git a/samples/menus/nav-bar/styling/src/index.tsx b/samples/menus/nav-bar/styling/src/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -114,6 +114,10 @@ igc-toast {`
`114`	`114`	`padding-inline-end: 15px;`
`115`	`115`	`}`
`116`	`116`
	`117`	`+.size-small {`
	`118`	`+ --ig-size: var(--ig-size-small);`
	`119`	`+}`
	`120`	`+`
`117`	`121`	`.gridSize {`
`118`	`122`	`--ig-size: var(--ig-size-medium);`
`119`	`123`	`}`
Original file line number	Diff line number	Diff line change
`@@ -90,7 +90,7 @@ function priceTemplate(ctx: {dataContext: IgrCellTemplateContext}) {`
`90`	`90`	`function chartBtnTemplate(ctx: {dataContext: IgrCellTemplateContext}) {`
`91`	`91`	`const cell = ctx.dataContext.cell;`
`92`	`92`	`const rowData = gridRef.current.getRowData(cell.id.rowID);`
`93`		`- return <span onClick={e => openDialogForRow(e, rowData)}><IgrIcon name="insert_chart" collection="material" variant="contained" size="small">`
	`93`	`+ return <span onClick={e => openDialogForRow(e, rowData)}><IgrIcon name="insert_chart" collection="material" variant="contained" className="size-small">`
`94`	`94`	`</IgrIcon></span>`
`95`	`95`	`}`
`96`	`96`
Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,7 @@ import {`
`16`	`16`	`IgrIconButton,`
`17`	`17`	`IgrIconButtonModule,`
`18`	`18`	`IgrInput,`
	`19`	`+ IgrInputBase,`
`19`	`20`	`IgrInputModule,`
`20`	`21`	`} from "igniteui-react";`
`21`	`22`
`@@ -57,7 +58,7 @@ export default function Sample() {`
`57`	`58`	`}`
`58`	`59`	`}, []);`
`59`	`60`
`60`		`- function handleOnSearchChange(input: IgrInput, event: IgrComponentValueChangedEventArgs) {`
	`61`	`+ function handleOnSearchChange(input: IgrInputBase, event: IgrComponentValueChangedEventArgs) {`
`61`	`62`	`setSearchText(event.detail);`
`62`	`63`	`gridRef.current.findNext(event.detail, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);`
`63`	`64`	`}`