Can we (Salesforce) make some stencil examples available for some of our components?

For example, having list views, detail, buttons, tabs, cards/tiles, process paths, etc would be helpful.

Otherwise, you're going to have a whole bunch of people trying to follow our design guide but writing their own stencil stuff.

Note from Kaelig: "Stencils" are loading patterns, see https://www.lightningdesignsystem.com/design/loading

Good evening,

I stumbled onto an issue that appears to be a bug within Salesforce that hasn't been solved for quite a few years. When referencing SVG tags in Visualforce, the renderer seems to trip up when encountering XML namespace attributes. For example, if I reference the SVG component as suggested in the document, the "slds-media__body" tag is rewritten to be inside the "slds-media__figure" tag even though it is declared to be a sibling in the template.

<apex:page >
    <apex:stylesheet value="{!URLFOR($Resource.SLDS092, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
    <apex:form styleClass="slds">
        <!-- Without custom component for SVG -->
        <div class="slds-page-header" role="banner">
            <div class="slds-grid">
                <div class="slds-col slds-has-flexi-truncate">
                    <div class="slds-media">
                        <div class="slds-media__figure">
                            <svg aria-hidden="true" class="slds-icon slds-icon--large slds-icon-standard-opportunity">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS092, 'assets/icons/standard-sprite/svg/symbols.svg#opportunity')}" />
                            </svg>
                        </div>
                        <div class="slds-media__body">
                            <p class="slds-text-heading--label">Opportunity</p>
                            <div class="slds-grid">
                                <h1 class="slds-text-heading--medium slds-m-right--small slds-truncate slds-align-middle" title="Test Opportunity">Test Opportunity</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </apex:form>
</apex:page>

My solution thus far has been to create a custom component for the SVG tag, which appears to ensure that the template gets written correctly:

Component:

<apex:component >
    <apex:attribute name="styleClass" type="String" description="Class for svg tag" />
    <apex:attribute name="path" type="String" description="Path for svg tag" />
    <svg aria-hidden="true" class="{!styleClass}">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS092, path)}" />
    </svg>
</apex:component>

Page:

<apex:page >
    <apex:stylesheet value="{!URLFOR($Resource.SLDS092, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
    <apex:form styleClass="slds">
        <!-- With custom component for SVG -->
        <div class="slds-page-header" role="banner">
            <div class="slds-grid">
                <div class="slds-col slds-has-flexi-truncate">
                    <div class="slds-media">
                        <div class="slds-media__figure">
                            <c:svg styleClass="slds-icon slds-icon--large slds-icon-standard-opportunity" path="assets/icons/standard-sprite/svg/symbols.svg#opportunity" />
                        </div>
                        <div class="slds-media__body">
                            <p class="slds-text-heading--label">Opportunity</p>
                            <div class="slds-grid">
                                <h1 class="slds-text-heading--medium slds-m-right--small slds-truncate slds-align-middle" title="Test Opportunity">Test Opportunity</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </apex:form>
</apex:page>

Hi,

We're facing an issue whereby we ship our own scoped version of slds 2.0.2. We provide various components for our clients to use which have been styled with this. We've hit a problem whereby if a user creates a VF page in their org which embeds one of our slds based apex components, the fonts and svg icons do not download due to:

Font from origin 'https://na30.salesforce.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

And

Unsafe attempt to load URL https://my_managed_package.na30.visual.force.com/resource/1469571737000/my_managed_package__slds/assets/icons/action-sprite/svg/symbols.svg#back from frame with URL https://c.na30.visual.force.com/apex/QEFormsAllElementsLightning. Domains, protocols and ports must match.

We've seen this issue with our older non-slds theme and were told it's due to the following:

We discussed the issue with R&D. According to them, you have IE-specific rules in your stylesheet (they are used in filter properties, and look like this: filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);

that are causing the cssparser (3rd party library) to fail.

When it fails, the original source is used, that is why the font-face URLs are not being decorated, and you still see the problem.

There is a known bug for this issue (and one more) logged with the CSSPARSER team

• CSS Parser's Bug:

  https://sourceforge.net/p/cssparser/bugs/49

The workaround is to move the @font-face rules out of custom.css, into another CSS file in the same directory.

He counted only 8 @font-face rules, so the task is trivial.

I will attach the new files here (custom.css with the removed rules, and custom_font.css with the @font-face rules).

If you can recreate the zip file with custom_font.css in the same directory as custom.css, upload a new version of the package, and install the package on a subscriber org, then the font files will load again.

However I've searched slds and there's no old-school IE filters in there, so I'm wondering why this might be happening? And how can we solve it?

Starting to begin a tablet app that incorporates the new Lightning Design System that you guy's have created. Was looking to see if I could get my hands on a UI kit (psd or sketch) for the design system so I can closely stick to this new UI that has been designed. Thanks!

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

--

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

The static resource builds hosted on the Downloads page exceeds the static resource size limit of 5MB.

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

--

Are any specific browsers impacted by this bug?

--

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

2.10.0

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

• Download static resource build from the website
• Add it as static resource to the org source
• Push to org via sfdx

What did you expect to happen?

This specific build to work as a static resource (as advertised)

What actually happened?

--

The default scroll bar for an outputText inside Lightning Component is not working, especially for iPad and iPhone. The default scroll bar is coming but when one try to scroll it the whole page is getting scrolled instead of the outputText wrapper. Screenshot of the page with default scrollbar is attached below.

The class 'slds-scrollable--y' for getting the default scroll bar is given for outputText. HTML code for the outputText is shown below:

<div class="slds-col slds-size--1-of-1 noteBox">
        <ui:outputText value="{!v.quarterlyForecastView.quarterlyForecastObject.scfcst__Notes__c}" aura:id="viewModeScrollBarY" class="slds-scrollable--y"/>
 </div>

Can you please provide a solution? Thanks in advance.

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

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

Hi everyone! here is a description of bug after 'npm install'

package.json dependencies: "dependencies": { ... "@salesforce-ux/design-system": "^0.12.1", ... },

and body of Bug:

npm ERR! 404 Not Found : @salesforce-ux/design-system npm ERR! 404 npm ERR! 404 '@salesforce-ux/design-system' is not in the npm registry. npm ERR! 404 You should bug the author to publish it (or use the name yourself!) npm ERR! 404 It was specified as a dependency of 'audio-test' npm ERR! 404 npm ERR! 404 Note that you can also install from a npm ERR! 404 tarball, folder, http url, or git url.

npm-debug.log.zip

Hello, I'm trying to run the npm run build && npm run dist command on Windows 10 and getting the following error: (undefined) __internal\chunked\docs\ui\components\cards\docs.mdx.js from UglifyJs Invalid hex-character pattern in string [__internal\chunked\docs\ui\components\cards\docs.mdx.js:1,28] at webpack.run (C:/Code/git/UI/slds-assets-sync/scripts/compile/bundle.js:104:11) at runWithDependencies.err (C:\Code\git\UI\slds-assets-sync\node_modules\webpack\lib\MultiCompiler.js:247:6) at done (C:\Code\git\UI\slds-assets-sync\node_modules\neo-async\async.js:2920:13) at runCompilers (C:\Code\git\UI\slds-assets-sync\node_modules\webpack\lib\MultiCompiler.js:171:48) at err (C:\Code\git\UI\slds-assets-sync\node_modules\webpack\lib\MultiCompiler.js:178:7) at compiler.run (C:\Code\git\UI\slds-assets-sync\node_modules\webpack\lib\MultiCompiler.js:242:7) at hooks.done.callAsync.err (C:\Code\git\UI\slds-assets-sync\node_modules\webpack\lib\Compiler.js:185:14) at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Code\git\UI\slds-assets-sync\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:15:1) at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\Code\git\UI\slds-assets-sync\node_modules\tapable\lib\Hook.js:35:21) at emitRecords.err (C:\Code\git\UI\slds-assets-sync\node_modules\webpack\lib\Compiler.js:183:22) at Compiler.emitRecords (C:\Code\git\UI\slds-assets-sync\node_modules\webpack\lib\Compiler.js:295:39) at emitAssets.err (C:\Code\git\UI\slds-assets-sync\node_modules\webpack\lib\Compiler.js:177:10) at hooks.afterEmit.callAsync.err (C:\Code\git\UI\slds-assets-sync\node_modules\webpack\lib\Compiler.js:281:14) at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Code\git\UI\slds-assets-sync\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:15:1) at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\Code\git\UI\slds-assets-sync\node_modules\tapable\lib\Hook.js:35:21) at asyncLib.forEach.err (C:\Code\git\UI\slds-assets-sync\node_modules\webpack\lib\Compiler.js:278:27) [13:25:42] 'dist' errored after 1.52 min npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] gulp:babel-node ./node_modules/gulp/bin/gulp.js "dist"npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] gulp script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

I'm running node 8.11.2 and npm 6.4.1

When we use the datepicker inside a table the styling is going completely off. The <table> element inside the datepicker is getting styled as per the parent table rather than having its own styling.

Below code (and screenshot) should be able to give you guys an idea of what I am talking about.

<table class="slds-table slds-table--bordered slds-table--cell-buffer">
  <thead>
    <tr class="slds-text-heading--label">
      <th scope="col">
        <center>
            <div class="slds-truncate" title="Some date">Some Date</div>
        </center>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>
            <slds-date></slds-date><!--Exact code available on SLDS website for datepicker-->
        </td>
    </tr>
  </tbody>
</table>  

Create Visualforce page and Tab. The svg icons are not rendered on IE edge browser. The visualforce code of page is -

<apex:page sidebar="false" showHeader="false" docType="html-5.0" applyHtmlTag="false">
  <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <head>
            <meta charset="UTF-8"/>
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />

            <apex:stylesheet value="path to slds css" />

            <apex:includeScript value="path to svg4everybody" />

        </head>
        <body style="padding: 0;">
            <div class="slds">
                <span class="slds-icon_container slds-icon_container--circle slds-icon-action-description" title="description of icon when needed">
                  <svg aria-hidden="true" class="slds-icon slds-icon--small">
                    <use xlink:href="path to slds#description"></use>
                  </svg>
                  <span class="slds-assistive-text">Description of icon</span>
                </span>
            </div>
            <script>
                svg4everybody();
            </script>   
        </body>
  </html>       
</apex:page>

What accessibility support is there for the TreeGrid component. The treegrid role is in the specs but how well supported is it? How have you tested this component with AT?

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

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

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

Are any specific browsers impacted by this bug?

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

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

What did you expect to happen?

What actually happened?

There are broken links in the documentation : https://www.lightningdesignsystem.com/platforms/visualforce/

1. Clicking on most of the trailhead links on the documentation is causing 404 error.
2. Hyperlink for " A tool to create your custom CSS is available here " is redirecting to an unreachable page.

In the Dual Button, the color should be white. Because when you press it and the button is still focused, the color is the same as the background :

See : https://www.lightningdesignsystem.com/components/buttons/#Pressed

Hi,

I open pull request to fix this typo as mentioned on #735

I did not go through all recommended checks for pull request, because I think this is just a typo in documentation file.

Hope it works!