search

salesforce-ux / design-system

Salesforce Lightning Design System
https://www.lightningdesignsystem.com
Other
3.57k stars 827 forks source link

Hard assets URLs usage #595

Closed MattIPv4 closed 2 years ago

MattIPv4 commented 5 years ago

(REQUIRED) Include one or more screenshots if applicable, as well as a Codepen with the reduced test case.

image

Describe the issue. Is it a bug or a feature request (new component, new icon, new CSS class)?

The usage of hard URLs for some asset paths is causing issues when loading the css through a cdn service such as cdnjs. Throughout the file soft URL paths are used which work perfectly (fonts etc.) but the hard URLs being used in some places are leading to issues.

Is this issue related to a specific component, variant, and/or state? If so, please detail which.

Brand band, Popover walkthrough, Global header logo, Avatar, Einstein header, Welcome mat

Are any specific browsers impacted by this bug?

N/A

Which version of the Salesforce Lightning Design System are you using?

2.7.5

What steps and/or code are needed to reproduce this issue?

Load the css from cdnjs: https://cdnjs.cloudflare.com/ajax/libs/design-system/2.7.5/styles/salesforce-lightning-design-system.css

What did you expect to happen?

Assets imported through soft URLs so that they work on a cdn

What actually happened?

Hard URLs cause asset imports to break

MattIPv4 commented 5 years ago

cdnjs issue: https://github.com/cdnjs/cdnjs/issues/13164

pascalmercier commented 5 years ago

I'm facing the very same issue from a slightly different perspective (NPM). Any timeline to get this resolved?

stale[bot] commented 5 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. If you still need help with your issue, please comment and we will reply to you shortly. Thank you for your contributions to the Salesforce Lightning Design System.

MattIPv4 commented 5 years ago

Looks like this still isn't resolved as of 2.9.3

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. If you still need help with your issue, please comment and we will reply to you shortly. Thank you for your contributions to the Salesforce Lightning Design System.

MattIPv4 commented 4 years ago

Issue still present in 2.10.2

npm view @salesforce-ux/design-system version

2.10.2

grep '/assets' node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css

  background-image: url("/assets/images/themes/oneSalesforce/banner-brand-default.png"), linear-gradient(to top, rgba(25, 85, 148, 0) 0, #195594);
  background-image: url("/assets/images/themes/oneSalesforce/banner-group-public-default.png"); }
  background-image: url("/assets/images/themes/oneSalesforce/banner-user-default.png"); }
  background-image: url("/assets/images/popovers/popover-header.png");
  background-image: url("/assets/images/popovers/popover-action.png");
  background-image: url("/assets/images/logo-noname.svg");
  background: url("/assets/images/group_avatar_96.png") top left/cover no-repeat; }
  background: url("/assets/images/group_avatar_160.png") top left/cover no-repeat; }
  background: url("/assets/images/group_avatar_200.png") top left/cover no-repeat; }
  background: url("/assets/images/profile_avatar_96.png") top left/cover no-repeat; }
  background: url("/assets/images/profile_avatar_160.png") top left/cover no-repeat; }
  background: url("/assets/images/profile_avatar_200.png") top left/cover no-repeat; }
  background-image: url("/assets/images/einstein-headers/einstein-header-background.svg");
  background-image: url("/assets/images/einstein-headers/einstein-figure.svg");
  background-image: url("/assets/images/welcome-mat/bg-info@2x.png");
stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. If you still need help with your issue, please comment and we will reply to you shortly. Thank you for your contributions to the Salesforce Lightning Design System.

MattIPv4 commented 4 years ago

Issue still present in 2.11.6:

npm view @salesforce-ux/design-system version
2.11.6

grep '/assets' node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css
  background-image:url("/assets/images/themes/oneSalesforce/banner-brand-default.png"), -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(25, 85, 148, 0)), to(#195594));
  background-image:url("/assets/images/themes/oneSalesforce/banner-brand-default.png"), linear-gradient(to top, rgba(25, 85, 148, 0) 0, #195594);
  background-image:url("/assets/images/themes/oneSalesforce/banner-group-public-default.png");
  background-image:url("/assets/images/themes/oneSalesforce/banner-user-default.png");
  background-image:url("/assets/images/popovers/popover-header.png");
  background-image:url("/assets/images/popovers/popover-action.png");
  background-image:url("/assets/images/logo-noname.svg");
  background:url("/assets/images/group_avatar_96.png") top left/cover no-repeat;
  background:url("/assets/images/group_avatar_160.png") top left/cover no-repeat;
  background:url("/assets/images/group_avatar_200.png") top left/cover no-repeat;
  background:url("/assets/images/profile_avatar_96.png") top left/cover no-repeat;
  background:url("/assets/images/profile_avatar_160.png") top left/cover no-repeat;
  background:url("/assets/images/profile_avatar_200.png") top left/cover no-repeat;
  background-image:url("/assets/images/einstein-headers/einstein-header-background.svg");
  background-image:url("/assets/images/einstein-headers/einstein-figure.svg");
  background-image:url("/assets/images/welcome-mat/bg-info@2x.png");
Jacob-Doetsch commented 4 years ago

We are encountering the same problem when trying to use the NPM distribution of design-system on a page that is not served at the root of the host. For example, if we are linking salesforce-lightning-design-system.css on a page index.html served at <hostname>/foo/bar/index.html then the affected assets can only resolve from <hostname>/assets... which, in our situation, we are unable to accomodate.

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. If you still need help with your issue, please comment and we will reply to you shortly. Thank you for your contributions to the Salesforce Lightning Design System.

MattIPv4 commented 4 years ago

Issue still present in 2.12.2:

npm view @salesforce-ux/design-system version
2.12.2

grep '/assets' node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css
  background-image:url("/assets/images/themes/oneSalesforce/banner-brand-default.png"), -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(25, 85, 148, 0)), to(#195594));
  background-image:url("/assets/images/themes/oneSalesforce/banner-brand-default.png"), linear-gradient(to top, rgba(25, 85, 148, 0) 0, #195594);
  background-image:url("/assets/images/themes/oneSalesforce/banner-group-public-default.png");
  background-image:url("/assets/images/themes/oneSalesforce/banner-user-default.png");
  background-image:url("/assets/images/popovers/popover-header.png");
  background-image:url("/assets/images/popovers/popover-action.png");
  background-image:url("/assets/images/logo-noname.svg");
  background:url("/assets/images/group_avatar_96.png") top left/cover no-repeat;
  background:url("/assets/images/group_avatar_160.png") top left/cover no-repeat;
  background:url("/assets/images/group_avatar_200.png") top left/cover no-repeat;
  background:url("/assets/images/profile_avatar_96.png") top left/cover no-repeat;
  background:url("/assets/images/profile_avatar_160.png") top left/cover no-repeat;
  background:url("/assets/images/profile_avatar_200.png") top left/cover no-repeat;
  background-image:url("/assets/images/einstein-headers/einstein-header-background.svg");
  background-image:url("/assets/images/einstein-headers/einstein-figure.svg");
  background-image:url("/assets/images/welcome-mat/bg-info@2x.png");
bensleveritt commented 4 years ago

Interestingly, I found a reference to it being fixed in 2016 https://github.com/salesforce-ux/design-system/issues/83. Am still digging through to see what was actually changed (the issue isn't linked to a PR/commit), and perhaps how to fix it again

bercos commented 4 years ago

I'm running into this issue on 2.13.7

danigonlinea commented 3 years ago

Still happening with v2.14.1

image

Fonts have a relative path but this is not happening with other assets. We work with React Lightning Design System and build with Webpack to bundle those dependencies but it is not possible because it is not finding those paths, so needed to change to relative paths manually (which we would like to avoid).

kflournoy-sf commented 3 years ago

Hi @MattIPv4 @danigonlinea @pascalmercier @Jacob-Doetsch @bensleveritt @bercos ,

I wanted to let you know that this is on our roadmap, but I can't give you a timeline when it will be addressed. So even though Stalebot will keep trying to close this, please know that we do hear you about this request!

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. If you still need help with your issue, please comment and we will reply to you shortly. Thank you for your contributions to the Salesforce Lightning Design System.

MattIPv4 commented 3 years ago

Issue still present:

npm view @salesforce-ux/design-system version
2.15.8

grep '/assets' node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css
  background-image:url("/assets/images/themes/oneSalesforce/banner-brand-default.png"), -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(1, 68, 134, 0)), to(#014486));
  background-image:url("/assets/images/themes/oneSalesforce/banner-brand-default.png"), linear-gradient(to top, rgba(1, 68, 134, 0) 0, #014486);
  background-image:url("/assets/images/themes/oneSalesforce/banner-group-public-default.png");
  background-image:url("/assets/images/themes/oneSalesforce/banner-user-default.png");
  background-image:url("/assets/images/popovers/popover-header.png");
  background-image:url("/assets/images/popovers/popover-action.png");
  background-image:url("/assets/images/logo-noname.svg");
  background:url("/assets/images/group_avatar_96.png") top left/cover no-repeat;
  background:url("/assets/images/group_avatar_160.png") top left/cover no-repeat;
  background:url("/assets/images/group_avatar_200.png") top left/cover no-repeat;
  background:url("/assets/images/profile_avatar_96.png") top left/cover no-repeat;
  background:url("/assets/images/profile_avatar_160.png") top left/cover no-repeat;
  background:url("/assets/images/profile_avatar_200.png") top left/cover no-repeat;
  background-image:url("/assets/images/einstein-headers/einstein-header-background.svg");
  background-image:url("/assets/images/einstein-headers/einstein-figure.svg");
  background-image:url("/assets/images/welcome-mat/bg-info@2x.png");
stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. If you still need help with your issue, please comment and we will reply to you shortly. Thank you for your contributions to the Salesforce Lightning Design System.

MattIPv4 commented 2 years ago 
npm i @salesforce-ux/design-system

npm view @salesforce-ux/design-system version
2.16.2

grep '/assets' node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css
  background-image:url("/assets/images/themes/oneSalesforce/banner-brand-default.png"), -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(1, 68, 134, 0)), to(#014486));
  background-image:url("/assets/images/themes/oneSalesforce/banner-brand-default.png"), linear-gradient(to top, rgba(1, 68, 134, 0) 0, #014486);
  background-image:url("/assets/images/themes/oneSalesforce/banner-group-public-default.png");
  background-image:url("/assets/images/themes/oneSalesforce/banner-user-default.png");
  background-image:url("/assets/images/popovers/popover-header.png");
  background-image:url("/assets/images/popovers/popover-action.png");
  background-image:url("/assets/images/logo-noname.svg");
  background:url("/assets/images/group_avatar_96.png") top left/cover no-repeat;
  background:url("/assets/images/group_avatar_160.png") top left/cover no-repeat;
  background:url("/assets/images/group_avatar_200.png") top left/cover no-repeat;
  background:url("/assets/images/profile_avatar_96.png") top left/cover no-repeat;
  background:url("/assets/images/profile_avatar_160.png") top left/cover no-repeat;
  background:url("/assets/images/profile_avatar_200.png") top left/cover no-repeat;
  background-image:url("/assets/images/einstein-headers/einstein-header-background.svg");
  background-image:url("/assets/images/einstein-headers/einstein-figure.svg");
  background-image:url("/assets/images/welcome-mat/bg-info@2x.png");
philippfrank commented 2 years ago

@Dottenpixel @kflournoy-sf What does it take to fix this? It is very annoying in any build pipeline that needs to use and reference some of these SVG assets. I have a hard time understanding why - after 4 years (!!!) - this is still an open issue. It certainly can be fixed in a 100%-backwards-compatible way if that is your concern. Thanks in advance!

aneeshack4 commented 2 years ago

@MattIPv4 @philippfrank this is on our radar. Apologies for the delay - we've been busy rolling out new features like Styling Hooks but we're hoping to address this soon.

laurensuh commented 2 years ago

Hi @MattIPv4 @philippfrank we have addressed this issue for our upcoming release. It should be available early August. Cheers!