Skip to content

Conversation

@trapgar
Copy link

@trapgar trapgar commented Sep 24, 2025

Issue #107183: Add a new right-aligned "description" property to TreeItems

Added the ability for VS Code extensions utilizing the TreeView to horizontally align the description property of TreeItems to the right. Default value remains left-aligned.

How to Test

  1. Clone the vscode-extension-samples project

  2. Open the tree-view-sample in Code

  3. Open src/nodeDependencies.ts#

  4. Add a new line right below where the TreeItem.description is being set

    this.alignment = 'right';`

    (since the repo references a released version of the vscode api you will want to also add an // @ts-ignore right about it just for testing)

  5. Run the extension as usual

  6. Open any repo utilizing npm (I just created a new folder and ran > npm i three

  7. Click on the new list clover in the left-hand sidebar that the extension added

  8. Expand the tree and all the package versions will now be aligned to the right

Since TreeItem actions appear to the right, the description will hide any-time they show as to not clash.

@trapgar
Copy link
Author

trapgar commented Sep 24, 2025

@trapgar please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.

@microsoft-github-policy-service agree [company="{your company}"]

Options:

  • (default - no company specified) I have sole ownership of intellectual property rights to my Submissions and I am not making Submissions in the course of work for my employer.
@microsoft-github-policy-service agree
  • (when company given) I am making Submissions in the course of work for my employer (or my employer has intellectual property rights in my Submissions by contract or applicable law). I have permission from my employer to make Submissions and enter into this Agreement on behalf of my employer. By signing below, the defined term “You” includes me and my employer.
@microsoft-github-policy-service agree company="Microsoft"

Contributor License Agreement

@microsoft-github-policy-service agree

@alexr00 alexr00 added this to the October 2025 milestone Sep 26, 2025
Copy link
Member

@alexr00 alexr00 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for the PR! We're about to start our endgame. I'll take a close look at this PR once we branch for release at the end of next week.

* When `right`, the text with be right-aligned and when `left`, it is left-aligned.
* Defaults to `Left`
*/
alignment?: TreeItemAlignment;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we want to allow extension authors to set a description (left aligned) and a second description (right aligned) instead of just the one description which we allow extension authors to set the alignment of. Not sure about a good name for this "second description". Maybe detail?

Copy link
Author

@trapgar trapgar Sep 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, understood. I'm assuming the styling (apart from the alignment) should mimic that of the description? e.g.: font/size/color/etc.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alexr00 Hi, can I get clarification on how we want this to function?

image

In this image, you can see that long text has the potential to hide or clash with the left-aligned text (all the TreeItems in the picture have both description and detail set, the label and description is just hidden when the right-aligned text overlaps).

In terms of styling, I also assume we want a different colouring/etc?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants