From e6d8a999edb1bae40cec2c1569fa1b4f48443627 Mon Sep 17 00:00:00 2001 From: Robert Lukasonok <70327485+roluk@users.noreply.github.com> Date: Tue, 7 Dec 2021 15:15:55 +0200 Subject: [PATCH 1/8] Fix tree node icon alignment --- ui/core-react/src/core-react/tree/Node.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/ui/core-react/src/core-react/tree/Node.scss b/ui/core-react/src/core-react/tree/Node.scss index 88824e1e23a0..5b5f681092fb 100644 --- a/ui/core-react/src/core-react/tree/Node.scss +++ b/ui/core-react/src/core-react/tree/Node.scss @@ -53,11 +53,9 @@ $node-font-size: $iui-font-size; } &-icon { + position: relative; + top: 1px; width: 16px; - height: 24px; - display: inline-block; - box-sizing: border-box; - padding: 5px 0; margin-right: 5px; } From 24183306685e0c871c328fa63e5b5aaf0d8999a9 Mon Sep 17 00:00:00 2001 From: Robert Lukasonok <70327485+roluk@users.noreply.github.com> Date: Tue, 7 Dec 2021 15:18:35 +0200 Subject: [PATCH 2/8] rush change --- ...mponents-react-tree-node-icon_2021-12-07-13-17.json | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 common/changes/@itwin/core-react/components-react-tree-node-icon_2021-12-07-13-17.json diff --git a/common/changes/@itwin/core-react/components-react-tree-node-icon_2021-12-07-13-17.json b/common/changes/@itwin/core-react/components-react-tree-node-icon_2021-12-07-13-17.json new file mode 100644 index 000000000000..17ffb5584189 --- /dev/null +++ b/common/changes/@itwin/core-react/components-react-tree-node-icon_2021-12-07-13-17.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@itwin/core-react", + "comment": "", + "type": "none" + } + ], + "packageName": "@itwin/core-react" +} \ No newline at end of file From 21371965fe06c60063fcd4d3244907bc77273f12 Mon Sep 17 00:00:00 2001 From: Robert Lukasonok <70327485+roluk@users.noreply.github.com> Date: Tue, 7 Dec 2021 16:39:15 +0200 Subject: [PATCH 3/8] Move chevron up instead of icon down --- ui/core-react/src/core-react/tree/Node.scss | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/ui/core-react/src/core-react/tree/Node.scss b/ui/core-react/src/core-react/tree/Node.scss index 5b5f681092fb..4a5c04b2a248 100644 --- a/ui/core-react/src/core-react/tree/Node.scss +++ b/ui/core-react/src/core-react/tree/Node.scss @@ -31,9 +31,8 @@ $node-font-size: $iui-font-size; } > .expansion-toggle { - display: inline-block; - margin-top: auto; - margin-bottom: auto; + position: relative; + top: -1px; } .core-checkbox { @@ -53,8 +52,6 @@ $node-font-size: $iui-font-size; } &-icon { - position: relative; - top: 1px; width: 16px; margin-right: 5px; } From d041d08f46720c2b19a33d0818705da094a1bd9d Mon Sep 17 00:00:00 2001 From: Robert Lukasonok <70327485+roluk@users.noreply.github.com> Date: Thu, 16 Dec 2021 13:08:31 +0200 Subject: [PATCH 4/8] Trust browser to properly align webfont icons --- ui/core-react/src/core-react/tree/Node.scss | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/ui/core-react/src/core-react/tree/Node.scss b/ui/core-react/src/core-react/tree/Node.scss index 4a5c04b2a248..b87f833942d0 100644 --- a/ui/core-react/src/core-react/tree/Node.scss +++ b/ui/core-react/src/core-react/tree/Node.scss @@ -31,8 +31,9 @@ $node-font-size: $iui-font-size; } > .expansion-toggle { - position: relative; - top: -1px; + display: inline-block; + margin-top: auto; + margin-bottom: auto; } .core-checkbox { @@ -52,8 +53,11 @@ $node-font-size: $iui-font-size; } &-icon { - width: 16px; - margin-right: 5px; + margin: 0 7px; + + > .bui-webfont-icon { + vertical-align: middle; + } } &.is-focused, &:focus { From 6225b55c7d771870b24ebbdba5f1b8bf194ede60 Mon Sep 17 00:00:00 2001 From: Robert Lukasonok <70327485+roluk@users.noreply.github.com> Date: Thu, 16 Dec 2021 13:09:18 +0200 Subject: [PATCH 5/8] Fix loading indicator alignment --- ui/core-react/src/core-react/tree/Node.scss | 4 ++-- ui/core-react/src/core-react/tree/Node.tsx | 4 +--- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/ui/core-react/src/core-react/tree/Node.scss b/ui/core-react/src/core-react/tree/Node.scss index b87f833942d0..b137200659c6 100644 --- a/ui/core-react/src/core-react/tree/Node.scss +++ b/ui/core-react/src/core-react/tree/Node.scss @@ -26,8 +26,8 @@ $node-font-size: $iui-font-size; align-items: center; width: 100%; - > .loader { - margin: auto 4px; + > .iui-progress-indicator-radial { + margin: 0 4px; } > .expansion-toggle { diff --git a/ui/core-react/src/core-react/tree/Node.tsx b/ui/core-react/src/core-react/tree/Node.tsx index acf45010cc13..1a3461535326 100644 --- a/ui/core-react/src/core-react/tree/Node.tsx +++ b/ui/core-react/src/core-react/tree/Node.tsx @@ -100,8 +100,6 @@ export class TreeNode extends React.Component { if (!this.props.isLoading && this.props.isLeaf) offset += EXPANSION_TOGGLE_WIDTH; // Add expansion toggle/loader width if they're not rendered - const loader = this.props.isLoading ? (
) : undefined; - let checkbox: React.ReactNode; if (this.props.checkboxProps) { const props: NodeCheckboxRenderProps = { @@ -154,7 +152,7 @@ export class TreeNode extends React.Component { style={{ marginLeft: offset }} data-testid={this.createSubComponentTestId("contents")} > - {loader} + {this.props.isLoading && } {toggle} {checkbox} {icon} From 97eeac4a2621334c73ce60626ca5179cc544d54c Mon Sep 17 00:00:00 2001 From: Robert Lukasonok <70327485+roluk@users.noreply.github.com> Date: Thu, 16 Dec 2021 17:03:08 +0200 Subject: [PATCH 6/8] Fix failing test --- ui/core-react/src/test/tree/Node.test.snap | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/ui/core-react/src/test/tree/Node.test.snap b/ui/core-react/src/test/tree/Node.test.snap index da6c7255b540..63e824bb59c1 100644 --- a/ui/core-react/src/test/tree/Node.test.snap +++ b/ui/core-react/src/test/tree/Node.test.snap @@ -164,14 +164,10 @@ exports[` renders loader correctly 1`] = ` } } > -
- -
+ a From af5100a2c78ad165e96a05600148d339ce6b806a Mon Sep 17 00:00:00 2001 From: Robert Lukasonok <70327485+roluk@users.noreply.github.com> Date: Fri, 17 Dec 2021 17:02:11 +0200 Subject: [PATCH 7/8] Avoid breaking horizontal alignment on custom icons --- ui/core-react/src/core-react/tree/Node.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/ui/core-react/src/core-react/tree/Node.scss b/ui/core-react/src/core-react/tree/Node.scss index b137200659c6..44b806130c8a 100644 --- a/ui/core-react/src/core-react/tree/Node.scss +++ b/ui/core-react/src/core-react/tree/Node.scss @@ -53,9 +53,13 @@ $node-font-size: $iui-font-size; } &-icon { - margin: 0 7px; + width: 16px; + margin: 0 5px; > .bui-webfont-icon { + display: inline-block; + width: 16px; + text-align: center; vertical-align: middle; } } From a55802085052a151fe8008478dcc1090f6821e8f Mon Sep 17 00:00:00 2001 From: Robert Lukasonok <70327485+roluk@users.noreply.github.com> Date: Fri, 17 Dec 2021 17:07:55 +0200 Subject: [PATCH 8/8] Compensate for visibility icon misalignment --- ui/core-react/src/core-react/tree/Node.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ui/core-react/src/core-react/tree/Node.scss b/ui/core-react/src/core-react/tree/Node.scss index 44b806130c8a..23f812c66b84 100644 --- a/ui/core-react/src/core-react/tree/Node.scss +++ b/ui/core-react/src/core-react/tree/Node.scss @@ -50,6 +50,10 @@ $node-font-size: $iui-font-size; line-height: unset; } } + + > .core-image-checkbox { + top: -1px; + } } &-icon {