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.

Sign up for GitHub

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

feat: support SAPBusinessSuite icons v1 and v2 font ( Horizon ) #6535

Merged
merged 10 commits into from
Feb 20, 2023
Merged

feat: support SAPBusinessSuite icons v1 and v2 font ( Horizon ) #6535

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e77a191
feat: support business icons v1 and v2 font ( Horizon )
hinzzx Feb 17, 2023
6d40bed
feat: self code review change
hinzzx Feb 17, 2023
4380723
feat: fix typo
hinzzx Feb 17, 2023
92e9670
feat: fix typo
hinzzx Feb 17, 2023
90c9f8d
feat: code review changes
hinzzx Feb 18, 2023
295398f
feat: correct alias of business-suite
hinzzx Feb 20, 2023
967ea89
feat: fix typos and code review change
hinzzx Feb 20, 2023
dcea740
feat: add similarity in icon versions in readme.md
hinzzx Feb 20, 2023
8a5b07d
Merge branch 'main' into bsicons
ilhan007 Feb 20, 2023
efda464
chore: add test
ilhan007 Feb 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/base/src/config/Icons.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { getIconCollectionByAlias } from "../assets-meta/IconCollectionsAlias.js
const IconCollectionConfiguration = new Map<string, string>();

// All supported icon collections + unknown custom ones
type IconCollection = "SAP-icons" | "SAP-icons-v4" | "SAP-icons-v5" | "horizon" | "tnt" | "tnt-v2" | "tnt-v3" | "business-suite-v1" | "business-suite-v2" | string;
type IconCollection = "SAP-icons" | "SAP-icons-v4" | "SAP-icons-v5" | "horizon" | "tnt" | "tnt-v2" | "tnt-v3" | "business-suite" | "business-suite-v1" | "business-suite-v2" | string;

// All registered icon collections - all icon collections resolves to these options at the end
enum RegisteredIconCollection {
Expand Down Expand Up @@ -88,6 +88,7 @@ const getEffectiveIconCollection = (collectionName?: IconCollection): IconCollec
* - "tnt" (and its alias "SAP-icons-TNT") resolves to "tnt-v2" in "Quartz", "Belize", and resolves to "tnt-v3" in "Horizon"
* - "tnt-v2" forces "TNT icons v2" in any theme and resolves to itself "tnt-v2"
* - "tnt-v3" forces "TNT icons v3" in any theme and resolves to itself "tnt-v3"
* - "business-suite" (and its alias "SAP-icons-business-suite") resolves to "business-suite-v1" in "Quartz", "Belize", and resolves to "business-suite-v2" in "Horizon"
* - "business-suite-v1" forces "Business Suite icons v1" in any theme and resolves to itself "business-suite-v1"
* - "business-suite-v2" forces "Business Suite icons v2" in any theme and resolves to itself "business-suite-v2"
*
Expand Down
22 changes: 22 additions & 0 deletions packages/icons-business-suite/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,28 @@ Example usage with `<ui5-icon>` web component:
<ui5-icon name="business-suite/1x2-grid-layout"></ui5-icon>
```

The package provides two versions of each icon (Business Suite Icons verson 1.x and Business Suite Icons version 2.x).
If you don't specify the versioned collection name, like in the example above:

```html
<ui5-icon name="business-suite/1x2-grid-layout"></ui5-icon>
```

the framework will detect the current theme and render the corresponding icon - from `SAP Icons Business suite V2` (collection name `business-suite-v2`) for SAP Horizon theme family (sap_horizon, sap_horizon_dark, etc.), and from `SAP Icons Business suite V1` (collection name `business-suite-v1`) for all the rest (sap_fiori_3, sap_fiori_3_dark, etc.).

### Collections `business-suite-v1` and `business-suite-v2 `

In case you want to always display the `SAP Icons Business suite V1` icons in all themes, you can set it explicitly via the `business-suite-v1` collection name:

```html
<ui5-icon name="business-suite-v1/answered"></ui5-icon>
```

The same applies if you want to always display the `SAP Icons Business suite V2` icons. You can set it explicitly via the `business-suite-v2` collection name:
```html
<ui5-icon name="business-suite-v2/answered"></ui5-icon>
```

For a full list of the icons in the `business-suite` collection, click [here](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).

## Resources
Expand Down
2 changes: 1 addition & 1 deletion packages/icons-tnt/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ If you don't specify the versioned collection name, like in the example above:
<ui5-icon name="tnt/actor"></ui5-icon>
```

the framework will detect the current theme and render the corresponding icon - from `TNT Icons v3` (collection name `tnt-v3`) for SAP Horizon theme family (sap_horizon, sap_horizon_darl, etc.), and from `TNT Icons v2` (collection name `tnt-v2`) for all the rest (sap_fiori_3, sap_fiori_3_dark, etc.).
the framework will detect the current theme and render the corresponding icon - from `TNT Icons v3` (collection name `tnt-v3`) for SAP Horizon theme family (sap_horizon, sap_horizon_dark, etc.), and from `TNT Icons v2` (collection name `tnt-v2`) for all the rest (sap_fiori_3, sap_fiori_3_dark, etc.).

### Collections `tnt-v2` and `tnt-v3 `

Expand Down
2 changes: 1 addition & 1 deletion packages/icons/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ As SAP Icons is the default icon collection, you can skip the collection name an
```

The package provides two versions of each icon (SAP Icons version 4.x and SAP Icons version 5.x). If you don't specify a collection name like in the example above,
the framework will detect the current theme and render the corresponding icon - `SAP Icons v5` for SAP Horizon theme family (sap_horizon, sap_horizon_darl, etc.), and `SAP Icons v4` for all the rest (sap_fiori_3, sap_fiori_3_dark, etc.).
the framework will detect the current theme and render the corresponding icon - `SAP Icons v5` for SAP Horizon theme family (sap_horizon, sap_horizon_dark, etc.), and `SAP Icons v4` for all the rest (sap_fiori_3, sap_fiori_3_dark, etc.).

### Collections `SAP-icon-v4` and `SAP-icon-v5`

Expand Down
87 changes: 15 additions & 72 deletions packages/main/test/pages/Icon_and_theming.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,82 +34,25 @@
<ui5-icon name="tnt-v3/actor"></ui5-icon>

<br/><br/>
<div>BS Icons - single version ("business-suite-v1/add-polygone")</div>
<div>BS Icons auto - single version ("business-suite/add-polygone")</div>
<ui5-icon class="samples-margin" name="business-suite/add-polygone"></ui5-icon>

<div>BS Icons auto - multiple different icon examples </div>
<ui5-icon class="samples-margin" name="business-suite/ab-testing"></ui5-icon>
<ui5-icon class="samples-margin" name="business-suite/bank-account"></ui5-icon>
<ui5-icon class="samples-margin" name="business-suite/causes"></ui5-icon>
<ui5-icon class="samples-margin" name="business-suite/driver"></ui5-icon>

<div>BS Icons - V1 ("business-suite-v1/add-polygone")</div>
<ui5-icon class="samples-margin" name="business-suite-v1/add-polygone"></ui5-icon>

<div> BS Icons - couples' (v1 and v2) showcase of different icons</div>
<div class="couples-box">
<div class="two-icons-box">
<div class="version">v1</div>
<ui5-icon class="samples-margin" name="business-suite-v1/add-outside"></ui5-icon>
</div>

<div class="two-icons-box">
<div class="version">v2</div>
<ui5-icon class="samples-margin" name="business-suite-v2/add-outside"></ui5-icon>
</div>

<div class="two-icons-box">
<div class="version">v1</div>
<ui5-icon class="samples-margin" name="business-suite-v1/activate"></ui5-icon>
</div>

<div class="two-icons-box">
<div class="version">v2</div>
<ui5-icon class="samples-margin" name="business-suite-v2/activate"></ui5-icon>
</div>

<div class="two-icons-box">
<div class="version">v1</div>
<ui5-icon class="samples-margin" name="business-suite-v1/add-note"></ui5-icon>
</div>

<div class="two-icons-box">
<div class="version">v2</div>
<ui5-icon class="samples-margin" name="business-suite-v2/add-note"></ui5-icon>
</div>

<div class="two-icons-box">
<div class="version">v1</div>
<ui5-icon class="samples-margin" name="business-suite-v1/add-point"></ui5-icon>
</div>

<div class="two-icons-box">
<div class="version">v2</div>
<ui5-icon class="samples-margin" name="business-suite-v2/add-point"></ui5-icon>
</div>

<div class="two-icons-box">
<div class="version">v1</div>
<ui5-icon class="samples-margin" name="business-suite-v1/products"></ui5-icon>
</div>

<div class="two-icons-box">
<div class="version">v2</div>
<ui5-icon class="samples-margin" name="business-suite-v2/products"></ui5-icon>
</div>
</div>

<style>
.two-icons-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<div>BS Icons - V2 ("business-suite-v2/add-polygone")</div>
<ui5-icon class="samples-margin" name="business-suite-v2/add-polygone"></ui5-icon>

.couples-box {
display: flex;
flex-direction: row;
gap: 10px;
margin-top: 1rem;
}
<div>BS Icons - V1 and V2 ("business-suite-v1/answered" and ("business-suite-v2/answered"))</div>
<ui5-icon class="samples-margin" name="business-suite-v1/answered"></ui5-icon>
<ui5-icon class="samples-margin" name="business-suite-v2/answered"></ui5-icon>

.version {
font-size: 0.75rem;
margin-bottom: 0.25rem;
}
</style>

<script>
themeToggle.addEventListener("click", event => {
Expand Down