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.

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

Allow linkStyle background-color attribute to override edgeLabel class background-color #5500

Open
chrisbloom7 opened this issue May 2, 2024 · 1 comment
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect

Comments

@chrisbloom7
Copy link

chrisbloom7 commented May 2, 2024

Description

I would expect the following code to render the connector line in green, the label in red, and the label background in blue:

graph LR
  A -->|It's the missing link!| B
  
  linkStyle 0 color:red,background-color:hotpink,stroke:green,fill:yellow;

In the rendered HTML, the color attribute is forwarded to the .edgeLabel node and applied as an inline style, thus overriding the default edgeSpan class color. However, the background-color attribute is added to the connector path node inline style, even though path elements do not have a background-color style, only a fill style. I would expect the background-color attribute to be forwarded to the .edgeLabel node along with the color.

<g class="root">
  <g class="clusters"></g>
  <g class="edgePaths">
    <!--
    The background-color attribute is applied here, to the path node, which cannot use it
    -->
    <path marker-end="url(#graph-div_flowchart-pointEnd)" style="background-color:hotpink;stroke:green;fill:yellow;"
      class="edge-thickness-normal edge-pattern-solid flowchart-link LS-A LE-B" id="L-A-B-0"
      d="M24.438,19.5L40.454,19.5C56.471,19.5,88.505,19.5,119.656,19.5C150.806,19.5,181.073,19.5,196.207,19.5L211.341,19.5">
    </path>
  </g>
  <g class="edgeLabels">
    <g transform="translate(120.5390625, 19.5)" class="edgeLabel">
      <g transform="translate(-71.1015625, -12)" class="label">
        <foreignObject height="24" width="142.203125">
          <div xmlns="http://www.w3.org/1999/xhtml" style="color: red; display: inline-block; white-space: nowrap;">
            <!--
            The color attribute is applied here, but the background-color is missing even though it can use it
            -->
            <span style="color:red;" class="edgeLabel">It's the missing link!</span></div>
        </foreignObject>

Steps to reproduce

  1. Replicate the example graph definition above in a mermaid compatible editor
  2. View the rendered workflow
  3. Observe that the connector text label background retains the default color from the .edgeLink CSS class

Screenshots

Screenshot showing rendered connector with background-color attribute ignored

screenshot of rendered mermaid graph

Screenshot showing rendered HTML with color attribute applied but no background-color attribute.

screenshot of rendered HTML from Chrome inspector

Code Sample

Example in live editor

Setup

  • Mermaid version: v10.9.0, v11.0.0-alpha.7+e68125e
  • Browser and Version: Chrome for Mac OS X

Suggested Solutions

Given that the path element does not have a background-color style attribute, I would expect the background-color attribute to be forwarded to the .edgeLabel node along with the color attribute.

Additional Context

No response

@chrisbloom7 chrisbloom7 added Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect labels May 2, 2024
@chrisbloom7
Copy link
Author

chrisbloom7 commented May 2, 2024

In fact, I'd argue that anything other than a fill, stroke, and stroke-width style attribute in a linkStyle definition should be forwarded to the edgeLabel node since those are the only three style attributes a path element respects.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect
Projects
None yet
Development

No branches or pull requests

1 participant