Skip to content
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.

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

TreeView left margin override support #2338

Closed
wants to merge 10 commits into from
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
Copy link
Member

@rajsite rajsite Aug 12, 2024

Choose a reason for hiding this comment

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

To summarize the concerns from Friday, the direction I think we should go is that the tree in nimble uses more normal padding values. If we look at a tree view expander aligned above a normal icon button you see the following:
image

You can see the left-padding on the tree-view is too big (10px). Normally we would expect 8px left spacing-16px icon-8px spacing. So the issue with the nimble tree-view is that padding-left should be 8px and not 10 or 12 px.

The second step is that the systemlink header seems to be using a non-standard icon button with custom sizing. It does not have a square 32px by 32px shape and seems to be a one-off unique button. The tree-view in nimble should not be adjusted to the sizing of that unique button only used in the sl-header.

Instead if we need to override this padding for one unique use-case then it should just be done in the sl-header styles or at most we create a design token that can be configured externally.

"type": "patch",
fredvisser marked this conversation as resolved.
Show resolved Hide resolved
"comment": "Update tree item padding from 10px to 12px to match visual design",
"packageName": "@ni/nimble-components",
"email": "[email protected]",
"dependentChangeType": "patch"
}
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export const styles = css`
align-items: center;
white-space: nowrap;
width: 100%;
padding-left: 10px;
padding-left: 12px;
fredvisser marked this conversation as resolved.
Show resolved Hide resolved
font: inherit;
font-size: ${bodyFontSize};
${userSelectNone}
Expand Down
4 changes: 2 additions & 2 deletions packages/nimble-components/src/tree-item/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ export const styles = css`
align-items: center;
white-space: nowrap;
width: 100%;
padding-left: 10px;
padding-left: 12px;
font: inherit;
font-size: ${bodyFontSize};
${userSelectNone}
Expand All @@ -119,7 +119,7 @@ export const styles = css`
padding: 0px;
justify-content: center;
align-items: center;
margin-left: 10px;
margin-left: 12px;
position: absolute;
}

Expand Down