Skip to content

[v12] feat(ui-truncate-text): TruncateText rework new v12 #2429

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
git-nandor merged 1 commit into from
Mar 12, 2026
+114 −95
Merged

[v12] feat(ui-truncate-text): TruncateText rework new v12 #2429

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
201 changes: 109 additions & 92 deletions docs/guides/upgrade-guide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,42 +55,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
Expand Down Expand Up @@ -409,7 +373,7 @@ type: embed

```

### Grid.Row
### Grid.Col

```js
---
Expand All @@ -425,7 +389,7 @@ type: embed

```

### Grid.Col
### Grid.Row

```js
---
Expand All @@ -441,6 +405,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.
Expand Down Expand Up @@ -803,6 +803,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
Expand Down Expand Up @@ -858,6 +879,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.
Expand Down Expand Up @@ -980,39 +1015,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
Expand All @@ -1035,6 +1037,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`.
Expand Down Expand Up @@ -1116,59 +1124,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:""}
]}
/>

Expand Down
8 changes: 5 additions & 3 deletions packages/ui-truncate-text/src/TruncateText/v2/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading