Skip to content

Commit adccb80

Browse files
Turbo87Turbo87
authored
Merge pull request #10513 from Turbo87/floating-ui
Replace `ember-tooltips` with `floating-ui`
2 parents d70a1f4 + 341e951 commit adccb80

20 files changed

+165
-99
lines changed

‎app/components/crate-header.hbs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@
99
{{svg-jar "trash"}}
1010
Yanked
1111

12-
<EmberTooltip>
12+
<Tooltip>
1313
This crate has been yanked, but it is still available for download for other crates that
1414
may be depending on it.
15-
</EmberTooltip>
15+
</Tooltip>
1616
</span>
1717
{{/if}}
1818
{{/if}}

‎app/components/crate-row.hbs

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
<span>
2929
<span>
3030
All-Time:
31-
<EmberTooltip @text="Total number of downloads"/>
31+
<Tooltip @text="Total number of downloads"/>
3232
</span>
3333
{{ format-num @crate.downloads }}
3434
</span>
@@ -38,7 +38,7 @@
3838
<span>
3939
<span>
4040
Recent:
41-
<EmberTooltip @text="Downloads in the last 90 days"/>
41+
<Tooltip @text="Downloads in the last 90 days"/>
4242
</span>
4343
{{ format-num @crate.recent_downloads }}
4444
</span>
@@ -48,11 +48,11 @@
4848
<span>
4949
<span>
5050
Updated:
51-
<EmberTooltip @text="The last time the crate was updated" />
51+
<Tooltip @text="The last time the crate was updated" />
5252
</span>
5353
<time datetime="{{date-format-iso @crate.updated_at}}" data-test-updated-at>
5454
{{date-format-distance-to-now @crate.updated_at addSuffix=true}}
55-
<EmberTooltip @text={{ @crate.updated_at }}/>
55+
<Tooltip @text={{ @crate.updated_at }}/>
5656
</time>
5757
</span>
5858
</div>

‎app/components/crate-sidebar.hbs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
{{svg-jar "calendar"}}
1414
<span>
1515
{{date-format-distance-to-now @version.created_at addSuffix=true}}
16-
<EmberTooltip @text={{date-format @version.created_at 'PPP'}} />
16+
<Tooltip @text={{date-format @version.created_at 'PPP'}} />
1717
</span>
1818
</time>
1919

@@ -120,7 +120,7 @@
120120
Try on Rust Playground
121121

122122
{{#if this.canHover}}
123-
<EmberTooltip
123+
<Tooltip
124124
@text="The top 100 crates are available on the Rust Playground for you to try out directly in your browser." />
125125
{{/if}}
126126
</a>

‎app/components/crate-sidebar.module.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
.date,
3838
.msrv,
3939
.edition {
40-
[title], :global(.ember-tooltip-target) {
40+
> span {
4141
cursor: help;
4242
}
4343
}

‎app/components/dependency-list/row.hbs

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -36,23 +36,20 @@
3636

3737
{{#if this.featuresDescription}}
3838
<span local-class="features-label" data-test-features>
39-
{{! extra <span> for better tooltip alignment }}
40-
<span>
41-
{{this.featuresDescription}}
39+
{{this.featuresDescription}}
4240

43-
<EmberTooltip>
44-
<ul local-class="feature-list">
41+
<Tooltip local-class="tooltip">
42+
<ul local-class="feature-list">
43+
<li>
44+
{{svg-jar (if @dependency.default_features "checkbox" "checkbox-empty")}} default features
45+
</li>
46+
{{#each @dependency.features as |feature|}}
4547
<li>
46-
{{svg-jar (if @dependency.default_features "checkbox" "checkbox-empty")}} default features
48+
{{svg-jar "checkbox"}} {{feature}}
4749
</li>
48-
{{#each @dependency.features as |feature|}}
49-
<li>
50-
{{svg-jar "checkbox"}} {{feature}}
51-
</li>
52-
{{/each}}
53-
</ul>
54-
</EmberTooltip>
55-
</span>
50+
{{/each}}
51+
</ul>
52+
</Tooltip>
5653
</span>
5754
{{/if}}
5855
</div>

‎app/components/dependency-list/row.module.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,13 @@
3131
--placeholder-opacity: 0.15;
3232
}
3333

34-
[title], :global(.ember-tooltip-target) {
34+
[title], .features-label {
3535
position: relative;
3636
z-index: 1;
3737
cursor: help;
3838
}
3939

40-
:global(.ember-tooltip) {
40+
.tooltip {
4141
word-break: break-all;
4242
}
4343

@@ -112,7 +112,7 @@
112112
margin-bottom: -.1em;
113113
}
114114

115-
:global(.ember-tooltip) {
115+
.tooltip {
116116
text-transform: none;
117117
letter-spacing: normal;
118118
}
@@ -133,7 +133,7 @@
133133

134134
.feature-list {
135135
padding: 0;
136-
margin: 10px 5px;
136+
margin: var(--space-2xs) var(--space-3xs);
137137
list-style: none;
138138

139139
svg {

‎app/components/edition.hbs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<span>
22
{{@version.edition}} edition
33

4-
<EmberTooltip>
4+
<Tooltip>
55
This crate version does not declare a Minimum Supported Rust Version, but
66
does require the {{@version.edition}} Rust Edition.
77

@@ -10,5 +10,5 @@
1010
but this crate may require features that were added in later versions of
1111
Rust.
1212
</div>
13-
</EmberTooltip>
13+
</Tooltip>
1414
</span>

‎app/components/ember-tooltip.js

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎app/components/msrv.hbs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<span>
22
v{{@version.msrv}}
33

4-
<EmberTooltip>
4+
<Tooltip>
55
&quot;Minimum Supported Rust Version&quot;
66
{{#if @version.edition}}
77
<div local-class="edition">requires Rust Edition {{@version.edition}}</div>
88
{{/if}}
9-
</EmberTooltip>
9+
</Tooltip>
1010
</span>

‎app/components/privileged-action.hbs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@
1212
<fieldset data-test-placeholder-fieldset disabled="disabled">
1313
{{yield}}
1414
</fieldset>
15-
<EmberTooltip>
15+
<Tooltip>
1616
You must enable admin actions before you can perform this operation.
17-
</EmberTooltip>
17+
</Tooltip>
1818
</div>
1919
{{/if}}
2020
{{else}}

‎app/components/settings/api-tokens.hbs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848

4949
{{#each (this.listToParts token.endpoint_scopes) as |part|~}}
5050
{{#if (eq part.type "element")}}
51-
<strong>{{part.value}}<EmberTooltip @text={{this.scopeDescription part.value}} /></strong>
51+
<strong>{{part.value}}<Tooltip @text={{this.scopeDescription part.value}} /></strong>
5252
{{~else~}}
5353
{{part.value}}
5454
{{/if}}
@@ -62,7 +62,7 @@
6262

6363
{{#each (this.listToParts token.crate_scopes) as |part|~}}
6464
{{#if (eq part.type "element")}}
65-
<strong>{{part.value}}<EmberTooltip @text={{this.patternDescription part.value}} /></strong>
65+
<strong>{{part.value}}<Tooltip @text={{this.patternDescription part.value}} /></strong>
6666
{{~else~}}
6767
{{part.value}}
6868
{{/if}}

‎app/components/tooltip.hbs

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div ...attributes local-class="tooltip" {{attach-tooltip hide=this.hide show=this.show side=@side}}>
2+
{{#unless this.hidden}}
3+
{{#if (has-block)}}
4+
{{yield}}
5+
{{else}}
6+
{{@text}}
7+
{{/if}}
8+
{{/unless}}
9+
</div>

‎app/components/tooltip.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { action } from '@ember/object';
2+
import Component from '@glimmer/component';
3+
import { tracked } from '@glimmer/tracking';
4+
5+
export default class Tooltip extends Component {
6+
@tracked hidden = true;
7+
8+
@action hide() {
9+
this.hidden = true;
10+
}
11+
12+
@action show() {
13+
this.hidden = false;
14+
}
15+
}

‎app/components/tooltip.module.css

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.tooltip {
2+
display: none;
3+
width: max-content;
4+
max-width: 300px;
5+
position: absolute;
6+
top: 0;
7+
left: 0;
8+
background: #3a3c47;
9+
color: white;
10+
font-family: var(--font-body);
11+
font-size: 14px;
12+
font-weight: normal;
13+
overflow: hidden;
14+
text-wrap: auto;
15+
padding: var(--space-2xs) var(--space-xs);
16+
border-radius: var(--space-3xs);
17+
z-index: 2;
18+
19+
strong {
20+
color: unset;
21+
}
22+
}

‎app/components/version-list/row.hbs

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@
2020
{{@version.releaseTrack}}
2121
{{/if}}
2222

23-
<EmberTooltip @side="right" data-test-release-track-title>
23+
<Tooltip @side="right" local-class="tooltip" data-test-release-track-title>
2424
{{this.releaseTrackTitle}}
25-
</EmberTooltip>
25+
</Tooltip>
2626
</div>
2727

2828
<LinkTo
@@ -56,12 +56,12 @@
5656
{{svg-jar "calendar"}}
5757
{{date-format-distance-to-now @version.created_at addSuffix=true}}
5858

59-
<EmberTooltip>
59+
<Tooltip local-class="tooltip">
6060
{{date-format @version.created_at 'PPP'}}
6161
{{#if @version.isNew}}
6262
(<span local-class="new">new</span>)
6363
{{/if}}
64-
</EmberTooltip>
64+
</Tooltip>
6565
</time>
6666
</div>
6767

@@ -98,7 +98,7 @@
9898
{{svg-jar "checkbox"}}
9999
{{@version.featureList.length}} {{if (eq @version.featureList.length 1) "Feature" "Features"}}
100100

101-
<EmberTooltip>
101+
<Tooltip local-class="tooltip">
102102
<ul local-class="feature-list">
103103
{{#each @version.featureList as |feature|}}
104104
<li>
@@ -107,7 +107,7 @@
107107
</li>
108108
{{/each}}
109109
</ul>
110-
</EmberTooltip>
110+
</Tooltip>
111111
</span>
112112
{{/if}}
113113
</div>

‎app/components/version-list/row.module.css

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -40,20 +40,23 @@
4040
--hover-bg-color: light-dark(hsl(0, 92%, 98%), hsl(0, 10%, 11%));
4141
--fg-color: light-dark(hsl(0, 84%, 32%), hsl(0, 92%, 90%));
4242
}
43+
}
4344

44-
[title], :global(.ember-tooltip-target) {
45-
position: relative;
46-
z-index: 1;
47-
cursor: help;
48-
}
45+
.release-track, .date, .num-features {
46+
z-index: 1;
47+
cursor: help;
48+
}
49+
50+
.date, .num-features {
51+
position: relative;
4952
}
5053

5154
.version {
5255
display: grid;
5356
grid-template-columns: auto auto;
5457
place-items: center;
5558

56-
:global(.ember-tooltip) {
59+
.tooltip {
5760
word-break: break-all;
5861
}
5962

@@ -158,7 +161,7 @@
158161
margin-bottom: -.1em;
159162
}
160163

161-
:global(.ember-tooltip) {
164+
.tooltip {
162165
text-transform: none;
163166
letter-spacing: normal;
164167
}
@@ -199,7 +202,7 @@
199202
}
200203
}
201204

202-
.date.new, :global(.tooltip) .new {
205+
.date.new, .tooltip .new {
203206
color: hsl(39, 98%, 47%);
204207
}
205208

@@ -221,7 +224,7 @@
221224

222225
.feature-list {
223226
padding: 0;
224-
margin: var(--space-xs) var(--space-2xs);
227+
margin: var(--space-2xs) var(--space-3xs);
225228
list-style: none;
226229
}
227230

0 commit comments

Comments
 (0)