From a31adc63a97d7d189fa616c057b766c6dfcc1591 Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Fri, 28 Feb 2025 19:09:21 +0530 Subject: [PATCH] Updated docs and e2e test case --- .cspell/libraries.txt | 1 + .../integration/rendering/flowchart-v2.spec.js | 4 ++-- cypress/platform/e2e.html | 5 +---- cypress/platform/viewer.js | 5 +++++ docs/syntax/flowchart.md | 2 ++ packages/mermaid/src/diagrams/block/styles.ts | 16 ++-------------- packages/mermaid/src/diagrams/class/styles.js | 17 +++-------------- .../mermaid/src/diagrams/flowchart/styles.ts | 16 ++-------------- packages/mermaid/src/diagrams/globalStyles.ts | 15 +++++++++++++++ packages/mermaid/src/diagrams/kanban/styles.ts | 16 ++-------------- .../mermaid/src/diagrams/user-journey/styles.js | 17 +++-------------- packages/mermaid/src/docs/syntax/flowchart.md | 2 ++ .../src/rendering-util/createText.spec.ts | 5 +++++ 13 files changed, 45 insertions(+), 76 deletions(-) create mode 100644 packages/mermaid/src/diagrams/globalStyles.ts diff --git a/.cspell/libraries.txt b/.cspell/libraries.txt index 185d284f7..feee10fd1 100644 --- a/.cspell/libraries.txt +++ b/.cspell/libraries.txt @@ -26,6 +26,7 @@ dompurify elkjs fcose fontawesome +Fonticons Forgejo Foswiki Gitea diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index 4322500df..cbe06b1ad 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -86,7 +86,7 @@ describe('Flowchart v2', () => { B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] - C -->|Three| F[fa:fa-car Car] + C -->|Three| F[Car] `, { flowchart: { useMaxWidth: true } } ); @@ -109,7 +109,7 @@ describe('Flowchart v2', () => { B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] - C -->|Three| F[fa:fa-car Car] + C -->|Three| F[Car] `, { flowchart: { useMaxWidth: false } } ); diff --git a/cypress/platform/e2e.html b/cypress/platform/e2e.html index d610b958b..465fbfbf5 100644 --- a/cypress/platform/e2e.html +++ b/cypress/platform/e2e.html @@ -7,16 +7,13 @@ rel="stylesheet" /> diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js index 1bf2c050b..e120469fe 100644 --- a/cypress/platform/viewer.js +++ b/cypress/platform/viewer.js @@ -66,6 +66,11 @@ const contentLoaded = async function () { mermaid.registerLayoutLoaders(layouts); mermaid.initialize(graphObj.mermaid); + /** + * CC-BY-4.0 + * Copyright (c) Fonticons, Inc. - https://fontawesome.com/license/free + * https://fontawesome.com/icons/bell?f=classic&s=regular + */ const staticBellIconPack = { prefix: 'fa', icons: { diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index fa19a7f34..7bc3fd370 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -1942,6 +1942,8 @@ There are two ways to display these FontAwesome icons: You can register your own FontAwesome icon pack following the ["Registering icon packs" instructions](../config/icons.md). +Supported prefixes: `fa`, `fab`, `fas`, `far`, `fal`, `fad`. + > **Note** > Note that it will fall back to FontAwesome CSS if FontAwesome packs are not registered. diff --git a/packages/mermaid/src/diagrams/block/styles.ts b/packages/mermaid/src/diagrams/block/styles.ts index eac1f2d83..1a092142d 100644 --- a/packages/mermaid/src/diagrams/block/styles.ts +++ b/packages/mermaid/src/diagrams/block/styles.ts @@ -1,4 +1,5 @@ import * as khroma from 'khroma'; +import { getIconStyles } from '../globalStyles.js'; /** Returns the styles given options */ export interface BlockChartStyleOptions { @@ -142,20 +143,7 @@ const getStyles = (options: BlockChartStyleOptions) => font-size: 18px; fill: ${options.textColor}; } - .node label-icon path { - fill: currentColor; - stroke: revert; - stroke-width: revert; - } - /** - * These are copied from font-awesome.css - */ - .label-icon { - display: inline-block; - height: 1em; - overflow: visible; - vertical-align: -0.125em; - } + ${getIconStyles()} `; export default getStyles; diff --git a/packages/mermaid/src/diagrams/class/styles.js b/packages/mermaid/src/diagrams/class/styles.js index c88585ad0..ef22e28d1 100644 --- a/packages/mermaid/src/diagrams/class/styles.js +++ b/packages/mermaid/src/diagrams/class/styles.js @@ -1,3 +1,5 @@ +import { getIconStyles } from '../globalStyles.js'; + const getStyles = (options) => `g.classGroup text { fill: ${options.nodeBorder || options.classText}; @@ -157,20 +159,7 @@ g.classGroup line { font-size: 18px; fill: ${options.textColor}; } -.node label-icon path { - fill: currentColor; - stroke: revert; - stroke-width: revert; -} - /** - * These are copied from font-awesome.css - */ -.label-icon { - display: inline-block; - height: 1em; - overflow: visible; - vertical-align: -0.125em; -} + ${getIconStyles()} `; export default getStyles; diff --git a/packages/mermaid/src/diagrams/flowchart/styles.ts b/packages/mermaid/src/diagrams/flowchart/styles.ts index dc10f7917..d0717190c 100644 --- a/packages/mermaid/src/diagrams/flowchart/styles.ts +++ b/packages/mermaid/src/diagrams/flowchart/styles.ts @@ -1,5 +1,6 @@ // import khroma from 'khroma'; import * as khroma from 'khroma'; +import { getIconStyles } from '../globalStyles.js'; /** Returns the styles given options */ export interface FlowChartStyleOptions { @@ -177,20 +178,7 @@ const getStyles = (options: FlowChartStyleOptions) => } text-align: center; } - .node .label-icon path { - fill: currentColor; - stroke: revert; - stroke-width: revert; - } - /** - * These are copied from font-awesome.css - */ - .label-icon { - display: inline-block; - height: 1em; - overflow: visible; - vertical-align: -0.125em; - } + ${getIconStyles()} `; export default getStyles; diff --git a/packages/mermaid/src/diagrams/globalStyles.ts b/packages/mermaid/src/diagrams/globalStyles.ts new file mode 100644 index 000000000..01d3ea175 --- /dev/null +++ b/packages/mermaid/src/diagrams/globalStyles.ts @@ -0,0 +1,15 @@ +export const getIconStyles = () => ` + /* Font Awesome icon styling - consolidated */ + .label-icon { + display: inline-block; + height: 1em; + overflow: visible; + vertical-align: -0.125em; + } + + .node .label-icon path { + fill: currentColor; + stroke: revert; + stroke-width: revert; + } +`; diff --git a/packages/mermaid/src/diagrams/kanban/styles.ts b/packages/mermaid/src/diagrams/kanban/styles.ts index c71b7f873..a324fbc10 100644 --- a/packages/mermaid/src/diagrams/kanban/styles.ts +++ b/packages/mermaid/src/diagrams/kanban/styles.ts @@ -1,6 +1,7 @@ // @ts-expect-error Incorrect khroma types import { darken, lighten, isDark } from 'khroma'; import type { DiagramStylesProvider } from '../../diagram-api/types.js'; +import { getIconStyles } from '../globalStyles.js'; const genSections: DiagramStylesProvider = (options) => { let sections = ''; @@ -105,19 +106,6 @@ const getStyles: DiagramStylesProvider = (options) => dominant-baseline: middle; text-align: center; } - .node label-icon path { - fill: currentColor; - stroke: revert; - stroke-width: revert; - } - /** - * These are copied from font-awesome.css - */ - .label-icon { - display: inline-block; - height: 1em; - overflow: visible; - vertical-align: -0.125em; - } + ${getIconStyles()} `; export default getStyles; diff --git a/packages/mermaid/src/diagrams/user-journey/styles.js b/packages/mermaid/src/diagrams/user-journey/styles.js index fb3d3be0f..ebfb5658d 100644 --- a/packages/mermaid/src/diagrams/user-journey/styles.js +++ b/packages/mermaid/src/diagrams/user-journey/styles.js @@ -1,3 +1,5 @@ +import { getIconStyles } from '../globalStyles.js'; + const getStyles = (options) => `.label { font-family: ${options.fontFamily}; @@ -131,20 +133,7 @@ const getStyles = (options) => .actor-5 { ${options.actor5 ? `fill: ${options.actor5}` : ''}; } - .node label-icon path { - fill: currentColor; - stroke: revert; - stroke-width: revert; - } - /** - * These are copied from font-awesome.css - */ - .label-icon { - display: inline-block; - height: 1em; - overflow: visible; - vertical-align: -0.125em; - } + ${getIconStyles()} `; export default getStyles; diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index 806c5150c..75dd71e3b 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -1249,6 +1249,8 @@ There are two ways to display these FontAwesome icons: You can register your own FontAwesome icon pack following the ["Registering icon packs" instructions](../config/icons.md). +Supported prefixes: `fa`, `fab`, `fas`, `far`, `fal`, `fad`. + ```note Note that it will fall back to FontAwesome CSS if FontAwesome packs are not registered. ``` diff --git a/packages/mermaid/src/rendering-util/createText.spec.ts b/packages/mermaid/src/rendering-util/createText.spec.ts index 60912da2a..e2e13ef7d 100644 --- a/packages/mermaid/src/rendering-util/createText.spec.ts +++ b/packages/mermaid/src/rendering-util/createText.spec.ts @@ -32,6 +32,11 @@ describe('replaceIconSubstring', () => { }); it('correctly process the registered icons', async () => { + /** + * CC-BY-4.0 + * Copyright (c) Fonticons, Inc. - https://fontawesome.com/license/free + * https://fontawesome.com/icons/bell?f=classic&s=regular + */ const staticBellIconPack = { prefix: 'fa', icons: {