feat(ui-truncate-text): rework TruncateText and sort the upgrade guide alphabetically

Author: git-nandor

docs/guides/upgrade-guide.md

@@ -56,42 +56,6 @@ type: example
 </InstUISettingsProvider>
 ```
 
-### Heading
-
-`color` prop has 2 new values: `primary-on` and `secondary-on`, these are used for colored surfaces.
-
-The default value of the `color` prop has changed from `'inherit'` to `'primary'`. If you need to preserve the previous behavior, explicitly set `color="inherit"`.
-
-```js
----
-type: embed
----
-<V12ChangelogTable
-  removed={[
-    {name:"weightImportant",note:""},
-    {name:"lineHeight125",note:""},
-    {name:"lineHeight150",note:""}
-  ]}
-  changed={[
-    {oldName:"primaryColor",newName:"baseColor",note:""},
-    {oldName:"secondaryColor",newName:"mutedColor",note:""},
-    {oldName:"primaryInverseColor",newName:"inverseColor",note:""},
-    {oldName:"secondaryInverseColor",newName:"inverseColor",note:""},
-    {oldName:"titlePageDesktop",newName:"titlePageDesktop",note:"now returns a full typography object instead of just a font size"},
-    {oldName:"titlePageMobile",newName:"titlePageMobile",note:"now returns a full typography object instead of just a font size"},
-    {oldName:"titleSection",newName:"titleSection",note:"now returns a full typography object instead of just a font size"},
-    {oldName:"titleCardSection",newName:"titleCardSection",note:"now returns a full typography object instead of just a font size"},
-    {oldName:"titleModule",newName:"titleModule",note:"now returns a full typography object instead of just a font size"},
-    {oldName:"titleCardLarge",newName:"titleCardLarge",note:"now returns a full typography object instead of just a font size"},
-    {oldName:"titleCardRegular",newName:"titleCardRegular",note:"now returns a full typography object instead of just a font size"},
-    {oldName:"titleCardMini",newName:"titleCardMini",note:"now returns a full typography object instead of just a font size"},
-    {oldName:"label",newName:"label",note:"now returns a full typography object instead of just a font size"},
-    {oldName:"labelInline",newName:"labelInline",note:"now returns a full typography object instead of just a font size"}
-  ]}
-/>
-
-```
-
 ### Alert
 
 ```js
@@ -410,7 +374,7 @@ type: embed
 
 ```
 
-### Grid.Row
+### Grid.Col
 
 ```js
 ---
@@ -426,7 +390,7 @@ type: embed
 
 ```
 
-### Grid.Col
+### Grid.Row
 
 ```js
 ---
@@ -442,6 +406,42 @@ type: embed
 
 ```
 
+### Heading
+
+`color` prop has 2 new values: `primary-on` and `secondary-on`, these are used for colored surfaces.
+
+The default value of the `color` prop has changed from `'inherit'` to `'primary'`. If you need to preserve the previous behavior, explicitly set `color="inherit"`.
+
+```js
+---
+type: embed
+---
+<V12ChangelogTable
+  removed={[
+    {name:"weightImportant",note:""},
+    {name:"lineHeight125",note:""},
+    {name:"lineHeight150",note:""}
+  ]}
+  changed={[
+    {oldName:"primaryColor",newName:"baseColor",note:""},
+    {oldName:"secondaryColor",newName:"mutedColor",note:""},
+    {oldName:"primaryInverseColor",newName:"inverseColor",note:""},
+    {oldName:"secondaryInverseColor",newName:"inverseColor",note:""},
+    {oldName:"titlePageDesktop",newName:"titlePageDesktop",note:"now returns a full typography object instead of just a font size"},
+    {oldName:"titlePageMobile",newName:"titlePageMobile",note:"now returns a full typography object instead of just a font size"},
+    {oldName:"titleSection",newName:"titleSection",note:"now returns a full typography object instead of just a font size"},
+    {oldName:"titleCardSection",newName:"titleCardSection",note:"now returns a full typography object instead of just a font size"},
+    {oldName:"titleModule",newName:"titleModule",note:"now returns a full typography object instead of just a font size"},
+    {oldName:"titleCardLarge",newName:"titleCardLarge",note:"now returns a full typography object instead of just a font size"},
+    {oldName:"titleCardRegular",newName:"titleCardRegular",note:"now returns a full typography object instead of just a font size"},
+    {oldName:"titleCardMini",newName:"titleCardMini",note:"now returns a full typography object instead of just a font size"},
+    {oldName:"label",newName:"label",note:"now returns a full typography object instead of just a font size"},
+    {oldName:"labelInline",newName:"labelInline",note:"now returns a full typography object instead of just a font size"}
+  ]}
+/>
+
+```
+
 ### Link
 
 - `isWithinText` prop has been removed.
@@ -804,6 +804,27 @@ type: embed
 
 ```
 
+### RangeInput
+
+```js
+---
+type: embed
+---
+<V12ChangelogTable
+  removed={[
+    {name:"handleFocusRingSize",note:"style uses sharedTokens.focusOutline.width token"},
+    {name:"handleFocusRingColor",note:"style uses sharedTokens.focusOutline.onColor token"}
+  ]}
+  changed={[
+    {oldName:"handleShadow",newName:"boxShadow",note:""},
+    {oldName:"valueSmallPadding",newName:"valueSmallPadding",note:"now only sets horizontal padding of the value"},
+    {oldName:"valueMediumPadding",newName:"valueMediumPadding",note:"now only sets horizontal padding of the value"},
+    {oldName:"valueLargePadding",newName:"valueLargePadding",note:"now only sets horizontal padding of the value"}
+  ]}
+/>
+
+```
+
 ### SideNavBar
 
 ```js
@@ -859,6 +880,20 @@ type: embed
 
 ```
 
+### SourceCodeEditor
+
+```js
+---
+type: embed
+---
+<V12ChangelogTable
+  removed={[
+    {name:"focusBorderColor",note:"now uses sharedTokens.focusOutline.infoColor"}
+  ]}
+/>
+
+```
+
 ### Spinner
 
 - `as` prop has been removed, `Spinner` will always render as a `<div>` element.
@@ -981,39 +1016,6 @@ type: embed
 
 ```
 
-### Text
-
-- `alert` color has been removed. Please use `primary` instead.
-- Some prop values have been deprecated, see [Text](/Text) for more details.
-- `color` has 2 new values: `primary-on` and `secondary-on`, these are used for colored surfaces.
-
-### TreeBrowser
-
-#### Icon system migration
-
-TreeBrowser now uses Lucide icons instead of the legacy icon system:
-
-- Default `collectionIcon` changed from `IconFolderLine` to `FolderClosedInstUIIcon`
-- Default `collectionIconExpanded` changed from `IconFolderLine` to `FolderClosedInstUIIcon`
-- Default `itemIcon` changed from `IconDocumentLine` to `FileTextInstUIIcon`
-
-#### Theme variable changes
-
-**TreeBrowser:**
-
-- theme variable `focusOutlineWidth` is now removed (handled by `sharedTokens`)
-- theme variable `focusOutlineStyle` is now removed (handled by `sharedTokens`)
-- theme variable `focusOutlineColor` is now removed (handled by `sharedTokens`)
-
-**TreeButton:**
-
-- theme variable `focusOutlineWidth` is now removed (handled by `sharedTokens`)
-- theme variable `focusOutlineStyle` is now removed (handled by `sharedTokens`)
-- theme variable `focusOutlineColor` is now removed (handled by `sharedTokens`)
-- theme variable `selectedOutlineWidth` is now removed (handled by `sharedTokens`)
-- theme variable `iconColor` is now removed
-- theme variable `iconsMarginRight` is now removed
-
 ### Tag
 
 ```js
@@ -1036,6 +1038,12 @@ type: embed
 
 ```
 
+### Text
+
+- `alert` color has been removed. Please use `primary` instead.
+- Some prop values have been deprecated, see [Text](/Text) for more details.
+- `color` has 2 new values: `primary-on` and `secondary-on`, these are used for colored surfaces.
+
 ### TextArea
 
 `error` or `success` messages are no longer displayed when the component is `readOnly` or `disabled`.
@@ -1117,59 +1125,68 @@ type: embed
 
 ```
 
-### RangeInput
+### Tray
 
 ```js
 ---
 type: embed
 ---
 <V12ChangelogTable
   removed={[
-    {name:"handleFocusRingSize",note:"style uses sharedTokens.focusOutline.width token"},
-    {name:"handleFocusRingColor",note:"style uses sharedTokens.focusOutline.onColor token"}
+    {name:"borderStyle",note:""},
+    {name:"position",note:""}
   ]}
   changed={[
-    {oldName:"handleShadow",newName:"boxShadow",note:""},
-    {oldName:"valueSmallPadding",newName:"valueSmallPadding",note:"now only sets horizontal padding of the value"},
-    {oldName:"valueMediumPadding",newName:"valueMediumPadding",note:"now only sets horizontal padding of the value"},
-    {oldName:"valueLargePadding",newName:"valueLargePadding",note:"now only sets horizontal padding of the value"}
+    {oldName:"background",newName:"backgroundColor",note:""},
+    {oldName:"xSmallWidth",newName:"widthXs",note:""},
+    {oldName:"smallWidth",newName:"widthSm",note:""},
+    {oldName:"regularWidth",newName:"widthMg",note:""},
+    {oldName:"mediumWidth",newName:"widthLg",note:""},
+    {oldName:"largeWidth",newName:"widthXl",note:""}
   ]}
 />
 
 ```
 
-### SourceCodeEditor
+### TreeBrowser
+
+#### Icon system migration
+
+TreeBrowser now uses Lucide icons instead of the legacy icon system:
+
+- Default `collectionIcon` changed from `IconFolderLine` to `FolderClosedInstUIIcon`
+- Default `collectionIconExpanded` changed from `IconFolderLine` to `FolderClosedInstUIIcon`
+- Default `itemIcon` changed from `IconDocumentLine` to `FileTextInstUIIcon`
+
+#### Theme variable changes
 
 ```js
 ---
 type: embed
 ---
 <V12ChangelogTable
   removed={[
-    {name:"focusBorderColor",note:"now uses sharedTokens.focusOutline.infoColor"}
+    {name:"focusOutlineWidth",note:"handled by sharedTokens"},
+    {name:"focusOutlineStyle",note:"handled by sharedTokens"},
+    {name:"focusOutlineColor",note:"handled by sharedTokens"}
   ]}
 />
-
 ```
 
-### Tray
+**TreeButton:**
 
 ```js
 ---
 type: embed
 ---
 <V12ChangelogTable
   removed={[
-    {name:"borderStyle",note:""},
-    {name:"position",note:""}
-  ]}
-  changed={[
-    {oldName:"background",newName:"backgroundColor",note:""},
-    {oldName:"xSmallWidth",newName:"widthXs",note:""},
-    {oldName:"smallWidth",newName:"widthSm",note:""},
-    {oldName:"regularWidth",newName:"widthMg",note:""},
-    {oldName:"mediumWidth",newName:"widthLg",note:""},
-    {oldName:"largeWidth",newName:"widthXl",note:""}
+    {name:"focusOutlineWidth",note:"handled by sharedTokens"},
+    {name:"focusOutlineStyle",note:"handled by sharedTokens"},
+    {name:"focusOutlineColor",note:"handled by sharedTokens"},
+    {name:"selectedOutlineWidth",note:"handled by sharedTokens"},
+    {name:"iconColor",note:""},
+    {name:"iconsMarginRight",note:""}
   ]}
 />
 

packages/ui-truncate-text/src/TruncateText/v2/README.md

@@ -141,9 +141,11 @@ type: example
     maxWidth="480px"
     withVisualDebug
   >
-    <TruncateText position="middle">
-      <span>This line of text should be truncated from the middle of the string <strong>instead of the end.</strong></span>
-    </TruncateText>
+    <Text as="p">
+      <TruncateText position="middle">
+        <span>This line of text should be truncated from the middle of the string <strong>instead of the end.</strong></span>
+      </TruncateText>
+    </Text>
   </View>
   <br />
   <View