Skip to content

Commit 3aabdac

Browse files
zamoorezamoore
authored
FlightIcon => Hds::Icon Internal migration - showcase & website (#2338)
1 parent f40f50d commit 3aabdac

File tree

31 files changed

+82
-242
lines changed

31 files changed

+82
-242
lines changed

‎showcase/app/components/shw/frame/index.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<div class="shw-frame__browser">
1111
<div class="shw-frame__browser-navigation">
1212
<a class="shw-frame__open-link" href={{this.src}} target="_blank" rel="noopener noreferrer">
13-
<FlightIcon @name="external-link" @isInlineBlock={{false}} @stretched={{true}} />
13+
<Hds::Icon @name="external-link" @stretched={{true}} />
1414
<span class="sr-only">open the frame in a new window</span>
1515
</a>
1616
</div>

‎showcase/app/router.ts

-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ export default class Router extends EmberRouter {
1414
Router.map(function () {
1515
this.route('foundations', function () {
1616
this.route('typography');
17-
this.route('icon');
1817
this.route('elevation');
1918
this.route('focus-ring');
2019
});

‎showcase/app/routes/foundations/icon.js

-8
This file was deleted.

‎showcase/app/styles/_globals.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ body {
125125
border-color: var(--shw-color-action-active-border);
126126
}
127127

128-
.flight-icon {
128+
.hds-icon {
129129
color: var(--shw-color-action-active-foreground);
130130
}
131131
}

‎showcase/app/styles/showcase-pages/app-footer.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ body.components-app-footer {
2727
color: #fff;
2828
background: #000;
2929

30-
.flight-icon { fill: currentColor; }
30+
.hds-icon { fill: currentColor; }
3131
}
3232
}
3333
}

‎showcase/app/styles/showcase-pages/icon.scss

+1-2
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,9 @@
66
// ICON
77
// The icon page is currently displayed in 2 places,
88
// foundations for FlightIcon and components for Hds::icon
9-
body.foundations-icon,
109
body.components-icon {
1110
.shw-foundation-outline-icons {
12-
.flight-icon {
11+
.hds-icon {
1312
outline: 1px dotted #CCC;
1413
}
1514
}

‎showcase/app/styles/showcase-pages/rich-tooltip.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ body.components-rich-tooltip {
9292
gap: 8px;
9393
align-items: flex-start;
9494

95-
.flight-icon {
95+
.hds-icon {
9696
flex: none;
9797
margin-top: 2px;
9898
}

‎showcase/app/styles/showcase-pages/table.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ body.components-table {
1717
display: flex;
1818
align-items: center;
1919

20-
.flight-icon {
20+
.hds-icon {
2121
flex: none;
2222
margin-right: 5px;
2323
}

‎showcase/app/templates/application.hbs

+1-4
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,7 @@
1616
</header>
1717

1818
<aside class="shw-page-aside">
19-
<LinkTo class="shw-back-to-components-list" @route="index"><FlightIcon
20-
@name="arrow-left"
21-
@isInlineBlock={{false}}
22-
/>
19+
<LinkTo class="shw-back-to-components-list" @route="index"><Hds::Icon @name="arrow-left" />
2320
Component list</LinkTo>
2421
</aside>
2522

‎showcase/app/templates/components/application-state.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -368,7 +368,7 @@
368368
<SF.Item @label="With icon / {{align}} aligned">
369369
<Hds::ApplicationState @align={{align}} as |A|>
370370
<A.Media>
371-
<FlightIcon @name="channel" @size="24" @isInlineBlock={{false}} />
371+
<Hds::Icon @name="channel" @size="24" />
372372
</A.Media>
373373
<A.Header @title="Empty state title" />
374374
<A.Body

‎showcase/app/templates/components/rich-tooltip.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -599,7 +599,7 @@
599599
Lorem ipsum dolor
600600
{{/if}}
601601
{{#if (eq toggle "icon")}}
602-
<FlightIcon @name="org" @isInlineBlock={{false}} />
602+
<Hds::Icon @name="org" />
603603
{{/if}}
604604
{{#if (eq toggle "badge")}}
605605
<Hds::Badge @text="Lorem ipsum" @color="neutral" @icon="hexagon" type="outlined" />
@@ -866,7 +866,7 @@
866866
</B.Td>
867867
<B.Td>
868868
<div class="shw-component-rich-tooltip-demo-table-cell-content-flex">
869-
<FlightIcon @name={{B.data.cluster-icon}} />
869+
<Hds::Icon @name={{B.data.cluster-icon}} @isInline={{true}} />
870870
<div>
871871
<Hds::RichTooltip as |RT|>
872872
<RT.Toggle @text={{B.data.cluster-partition}} />

‎showcase/app/templates/components/table.hbs

+19-16
Original file line numberDiff line numberDiff line change
@@ -949,7 +949,7 @@
949949
<B.Td><Hds::Link::Inline @href="#showcase">{{B.data.artist}}</Hds::Link::Inline></B.Td>
950950
<B.Td>
951951
<div class="shw-component-table-cell-content-div">
952-
<FlightIcon @name={{B.data.icon}} />
952+
<Hds::Icon @name={{B.data.icon}} @isInline={{true}} />
953953
{{B.data.album}}
954954
</div>
955955
</B.Td>
@@ -1543,15 +1543,18 @@
15431543
</B.Tr>
15441544
<B.Tr>
15451545
<B.Th>Icon</B.Th>
1546-
<B.Td @align="left"><FlightIcon @name="film" /></B.Td>
1547-
<B.Td @align="center"><FlightIcon @name="film" /></B.Td>
1548-
<B.Td @align="right"><FlightIcon @name="film" /></B.Td>
1546+
<B.Td @align="left"><Hds::Icon @name="film" @isInline={{true}} /></B.Td>
1547+
<B.Td @align="center"><Hds::Icon @name="film" @isInline={{true}} /></B.Td>
1548+
<B.Td @align="right"><Hds::Icon @name="film" @isInline={{true}} /></B.Td>
15491549
</B.Tr>
15501550
<B.Tr>
15511551
<B.Th>Icon + Inline text</B.Th>
1552-
<B.Td @align="left"><FlightIcon @name="film" /> <span>Text in a <code>&lt;span&gt;</code></span></B.Td>
1553-
<B.Td @align="center"><FlightIcon @name="film" /> <span>Text in a <code>&lt;span&gt;</code></span></B.Td>
1554-
<B.Td @align="right"><FlightIcon @name="film" /> <span>Text in a <code>&lt;span&gt;</code></span></B.Td>
1552+
<B.Td @align="left"><Hds::Icon @name="film" @isInline={{true}} />
1553+
<span>Text in a <code>&lt;span&gt;</code></span></B.Td>
1554+
<B.Td @align="center"><Hds::Icon @name="film" @isInline={{true}} />
1555+
<span>Text in a <code>&lt;span&gt;</code></span></B.Td>
1556+
<B.Td @align="right"><Hds::Icon @name="film" @isInline={{true}} />
1557+
<span>Text in a <code>&lt;span&gt;</code></span></B.Td>
15551558
</B.Tr>
15561559
<B.Tr>
15571560
<B.Th>Badge</B.Th>
@@ -1640,11 +1643,11 @@
16401643
<B.Tr @selectionKey="row">
16411644
<B.Th>Top (default)<Shw::Placeholder @height="50" /></B.Th>
16421645
<B.Td>Text is top aligned</B.Td>
1643-
<B.Td><FlightIcon @name="film" /></B.Td>
1644-
<B.Td><FlightIcon @name="film" /> <span>Text in a <code>&lt;span&gt;</code></span></B.Td>
1646+
<B.Td><Hds::Icon @name="film" @isInline={{true}} /></B.Td>
1647+
<B.Td><Hds::Icon @name="film" @isInline={{true}} /> <span>Text in a <code>&lt;span&gt;</code></span></B.Td>
16451648
<B.Td>
16461649
<div {{style display="flex" gap="8px" align-items="center"}}>
1647-
<FlightIcon @name="film" />
1650+
<Hds::Icon @name="film" />
16481651
<span>Text in a <code>&lt;span&gt;</code></span>
16491652
</div>
16501653
</B.Td>
@@ -1682,11 +1685,11 @@
16821685
<B.Tr @selectionKey="row">
16831686
<B.Th><Shw::Placeholder @height="25" />Middle<Shw::Placeholder @height="25" /></B.Th>
16841687
<B.Td>Text is middle aligned</B.Td>
1685-
<B.Td><FlightIcon @name="film" /></B.Td>
1686-
<B.Td><FlightIcon @name="film" /> <span>Text in a <code>&lt;span&gt;</code></span></B.Td>
1688+
<B.Td><Hds::Icon @name="film" @isInline={{true}} /></B.Td>
1689+
<B.Td><Hds::Icon @name="film" @isInline={{true}} /> <span>Text in a <code>&lt;span&gt;</code></span></B.Td>
16871690
<B.Td>
16881691
<div {{style display="flex" gap="8px" align-items="center"}}>
1689-
<FlightIcon @name="film" />
1692+
<Hds::Icon @name="film" />
16901693
<span>Text in a <code>&lt;span&gt;</code></span>
16911694
</div>
16921695
</B.Td>
@@ -1724,11 +1727,11 @@
17241727
<B.Tr @selectionKey="row">
17251728
<B.Th><Shw::Placeholder @height="25" />Baseline<Shw::Placeholder @height="25" /></B.Th>
17261729
<B.Td>Text is middle aligned</B.Td>
1727-
<B.Td><FlightIcon @name="film" /></B.Td>
1728-
<B.Td><FlightIcon @name="film" /> <span>Text in a <code>&lt;span&gt;</code></span></B.Td>
1730+
<B.Td><Hds::Icon @name="film" @isInline={{true}} /></B.Td>
1731+
<B.Td><Hds::Icon @name="film" @isInline={{true}} /> <span>Text in a <code>&lt;span&gt;</code></span></B.Td>
17291732
<B.Td>
17301733
<div {{style display="flex" gap="8px" align-items="center"}}>
1731-
<FlightIcon @name="film" />
1734+
<Hds::Icon @name="film" @isInline={{true}} />
17321735
<span>Text in a <code>&lt;span&gt;</code></span>
17331736
</div>
17341737
</B.Td>

‎showcase/app/templates/components/tooltip.hbs

+29-28
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@
1414

1515
<Shw::Text::H4>On its own</Shw::Text::H4>
1616
<Shw::Flex as |SF|>
17-
<SF.Item @label="With a FlightIcon as content">
17+
<SF.Item @label="With Icon as content">
1818
<Hds::TooltipButton @text="Here is more information" aria-label="Information">
19-
<FlightIcon @name="info" />
19+
<Hds::Icon @name="info" />
2020
</Hds::TooltipButton>
2121
</SF.Item>
2222

@@ -48,16 +48,16 @@
4848
<Shw::Text::H4>Used next to text</Shw::Text::H4>
4949
<p>
5050
<span class="hds-typography-display-300">Lorem ipsum dolor sit amet consectetur</span>
51-
<Hds::TooltipButton @text="Here is more info" aria-label="Information"><FlightIcon
52-
@name="info"
53-
/></Hds::TooltipButton>
51+
<Hds::TooltipButton @text="Here is more info" aria-label="Information">
52+
<Hds::Icon @name="info" />
53+
</Hds::TooltipButton>
5454
</p>
5555

5656
<p class="hds-typography-body-300">
5757
Lorem ipsum dolor sit amet consectetur
58-
<Hds::TooltipButton aria-label="more information" @text="Here is more info"><FlightIcon
59-
@name="info"
60-
/></Hds::TooltipButton>
58+
<Hds::TooltipButton aria-label="more information" @text="Here is more info">
59+
<Hds::Icon @name="info" />
60+
</Hds::TooltipButton>
6161
adipisicing elit. Doloremque blanditiis sapiente iste beatae voluptates voluptatum.
6262
</p>
6363

@@ -73,33 +73,34 @@
7373
<T.Panel>
7474
<p class="hds-typography-body-300">
7575
Content 1
76-
<Hds::TooltipButton @text="Here is more info" aria-label="Information"><FlightIcon
77-
@name="info"
78-
/></Hds::TooltipButton>
76+
<Hds::TooltipButton @text="Here is more info" aria-label="Information">
77+
<Hds::Icon @name="info" />
78+
</Hds::TooltipButton>
7979
</p>
8080
</T.Panel>
8181
<T.Panel><p class="hds-typography-body-300">
8282
Content 2
83-
<Hds::TooltipButton @text="Here is more info" aria-label="Information"><FlightIcon
84-
@name="info"
85-
/></Hds::TooltipButton>
83+
<Hds::TooltipButton @text="Here is more info" aria-label="Information">
84+
<Hds::Icon @name="info" />
85+
</Hds::TooltipButton>
8686
</p></T.Panel>
8787
<T.Panel><p class="hds-typography-body-300">
8888
Content 3
89-
<Hds::TooltipButton @text="Here is more info" aria-label="Information"><FlightIcon
90-
@name="info"
91-
/></Hds::TooltipButton>
92-
</p></T.Panel>
89+
<Hds::TooltipButton @text="Here is more info" aria-label="Information">
90+
<Hds::Icon @name="info" />
91+
</Hds::TooltipButton>
92+
</p>
93+
</T.Panel>
9394
</Hds::Tabs>
9495
</SF.Item>
9596
<SF.Item @label="Used within an alert">
9697
<Hds::Alert @type="inline" @color="warning" @onDismiss={{this.noop}} as |A|>
9798
<A.Title>Warning</A.Title>
9899
<A.Description>
99100
Caution is advised.
100-
<Hds::TooltipButton @text="Be careful with this" aria-label="Information"><FlightIcon
101-
@name="info"
102-
/></Hds::TooltipButton>
101+
<Hds::TooltipButton @text="Be careful with this" aria-label="Information">
102+
<Hds::Icon @name="info" />
103+
</Hds::TooltipButton>
103104
</A.Description>
104105
</Hds::Alert>
105106
</SF.Item>
@@ -114,7 +115,7 @@
114115
<p class="hds-typography-body-300">
115116
Lorem ipsum dolor sit amet consectetur
116117
<Hds::TooltipButton @text="Here is more info" @isInline={{false}} aria-label="Information">
117-
<FlightIcon @name="info" />
118+
<Hds::Icon @name="info" />
118119
</Hds::TooltipButton>
119120
adipisicing elit. Doloremque blanditiis sapiente iste beatae voluptates voluptatum.
120121
</p>
@@ -185,7 +186,7 @@
185186
aria-label="tooltip button example"
186187
@text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
187188
>
188-
<FlightIcon @name="info" />
189+
<Hds::Icon @name="info" />
189190
</Hds::TooltipButton>
190191
</div>
191192
</SF.Item>
@@ -262,11 +263,11 @@
262263
mock-state-value={{state}}
263264
@extraTippyOptions={{hash showOnCreate=true}}
264265
aria-label="Information"
265-
><FlightIcon @name="info" /></Hds::TooltipButton>
266+
><Hds::Icon @name="info" /></Hds::TooltipButton>
266267
{{else}}
267-
<Hds::TooltipButton @text="More info" aria-label="Information" mock-state-value={{state}}><FlightIcon
268-
@name="info"
269-
/></Hds::TooltipButton>
268+
<Hds::TooltipButton @text="More info" aria-label="Information" mock-state-value={{state}}>
269+
<Hds::Icon @name="info" />
270+
</Hds::TooltipButton>
270271
{{/if}}
271272
</SF.Item>
272273
{{/each}}
@@ -343,7 +344,7 @@
343344
@text="<b>Hello</b> <em>there</em>!"
344345
aria-label="Information"
345346
>
346-
<FlightIcon @name="info" />
347+
<Hds::Icon @name="info" />
347348
</Hds::TooltipButton>
348349

349350
<Shw::Divider />

0 commit comments

Comments
 (0)