Add size for the rest samples that need it.

skrustev · skrustev · commit c1e656694fec · 2024-08-28T10:08:46.000+03:00
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" 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" 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" hoverPreview="true"></IgrRating>                                    
+                <IgrRating className="size-large" label="Styled Rating" value="2.5" step=".5" hoverPreview="true"></IgrRating>                                    
             </div>
         );
     }  
diff --git a/samples/layouts/dock-manager/styling/src/DockManagerStyles.css b/samples/layouts/dock-manager/styling/src/DockManagerStyles.css
@@ -215,3 +215,7 @@ igc-card-content {
 .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
@@ -108,7 +108,7 @@ 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" shape="circle">
                                     <span>TSLA</span>
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
@@ -19,17 +19,17 @@ export default class NavbarOverview extends React.Component<any, any> {
             <div className="container sample">
                 <IgrNavbar style={{ height: '65px' }}>
                     <div slot="start">
-                        <IgrIcon ref={this.iconRef} className="size-large" name="home" collection="material" />
+                        <IgrIcon ref={this.iconRef} name="home" collection="material" />
                     </div>
                     <h2>Sample App</h2>
                     <div slot="end">
-                        <IgrIcon className="size-large" name="search" collection="material" />
+                        <IgrIcon name="search" collection="material" />
                     </div>
                     <div slot="end">
-                        <IgrIcon className="size-large" name="favorite" collection="material" />
+                        <IgrIcon name="favorite" collection="material" />
                     </div>
                     <div slot="end">
-                        <IgrIcon className="size-large" name="more_vert" collection="material" />
+                        <IgrIcon name="more_vert" collection="material" />
                     </div>
                 </IgrNavbar>
             </div>
diff --git a/samples/menus/nav-bar/styling/src/index.css b/samples/menus/nav-bar/styling/src/index.css
@@ -1,3 +0,0 @@
-.size-large {
-    --ig-size: var(--ig-size-large);
-}
diff --git a/samples/menus/nav-bar/styling/src/index.tsx b/samples/menus/nav-bar/styling/src/index.tsx
@@ -20,17 +20,17 @@ export default class NavbarStyling extends React.Component<any, any> {
             <div className="container sample">
                 <IgrNavbar style={{height: '65px'}}>
                     <div slot="start">
-                        <IgrIcon ref={this.iconRef} className="size-large" name="home" collection="material" />
+                        <IgrIcon ref={this.iconRef} name="home" collection="material" />
                     </div>
                     <h2>Sample App</h2>
                     <div slot="end">
-                        <IgrIcon className="size-large" name="search" collection="material" />
+                        <IgrIcon name="search" collection="material" />
                     </div>
                     <div slot="end">
-                        <IgrIcon className="size-large" name="favorite" collection="material" />
+                        <IgrIcon name="favorite" collection="material" />
                     </div>
                     <div slot="end">
-                        <IgrIcon className="size-large" name="more_vert" collection="material" />
+                        <IgrIcon name="more_vert" collection="material" />
                     </div>
                 </IgrNavbar>
             </div>

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ export default class RatingOverview extends React.Component<any, any> {`
`15`	`15`	`public render(): JSX.Element {`
`16`	`16`	`return (`
`17`	`17`	`<div className="container sample">`
`18`		`- <IgrRating label="Rate Experience" max="5" step=".5" hoverPreview="true"></IgrRating>`
	`18`	`+ <IgrRating className="size-large" label="Rate Experience" max="5" step=".5" hoverPreview="true"></IgrRating>`
`19`	`19`	`</div>`
`20`	`20`	`);`
`21`	`21`	`}`
Original file line number	Diff line number	Diff line change
`@@ -22,3 +22,7 @@ igc-rating::part(label) {`
`22`	`22`	`igc-rating::part(symbols) {`
`23`	`23`	`gap: 8px;`
`24`	`24`	`}`
	`25`	`+`
	`26`	`+.size-large {`
	`27`	`+ --ig-size: var(--ig-size-large);`
	`28`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -215,3 +215,7 @@ igc-card-content {`
`215`	`215`	`.size-medium {`
`216`	`216`	`--ig-size: var(--ig-size-medium);`
`217`	`217`	`}`
	`218`	`+`
	`219`	`+.size-large {`
	`220`	`+ --ig-size: var(--ig-size-large);`
	`221`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -5,14 +5,14 @@`
`5`	`5`	`border: 1px solid gainsboro;`
`6`	`6`	`}`
`7`	`7`
`8`		`-.largeIcon {`
`9`		`- --ig-size: var(--ig-size-large);`
	`8`	`+.size-small {`
	`9`	`+ --ig-size: var(--ig-size-small);`
`10`	`10`	`}`
`11`	`11`
`12`		`-.mediumIcon {`
	`12`	`+.size-medium {`
`13`	`13`	`--ig-size: var(--ig-size-medium);`
`14`	`14`	`}`
`15`	`15`
`16`		`-.smallIcon {`
`17`		`- --ig-size: var(--ig-size-small);`
	`16`	`+.size-large {`
	`17`	`+ --ig-size: var(--ig-size-large);`
`18`	`18`	`}`