Skip to main content

#SLDS Styles3 utenti parlano di questo argomento

I am testing out the new SLDS V2 styling in one of my sandboxes and I noticed that when clicking on global actions, the icons that I added are now being compressed due to the length of the names (in SLDS it just doesn't show the whole name). Other than shorting the name of the global action, (which is not always going to be possible). Thoughts? Options? 

 

Icons in Global Actions issue?

 

#Design Strategy #SLDS Styles #Nonprofit

1 risposta
  1. 25 set, 10:22

    Hi Heath, 

     

    This is a real SLDS 2 rendering behavior, not a config mistake on your end — global actions with longer labels get visually compressed differently under SLDS 2 vs SLDS 1 styling, and there's no admin-facing setting yet to control icon/label sizing in that specific menu. 

     

    Practical options right now: 

     

    1. Revert to SLDS 1 for this sandbox while testing. Setup → Themes and Branding → select an SLDS 1 theme → Activate. This is a fully supported toggle (not a hack), so you can confirm your global actions render as expected under SLDS 1 while you evaluate SLDS 2 elsewhere, without being blocked by this specific issue. 

     

    2. Report it through the official channel rather than working around it silently. Since SLDS 2 is still actively being refined post-GA, this is exactly the kind of feedback Salesforce wants — submit it via the Design System Roadmap feedback link (Trailhead's SLDS 2 support module points to it) so it's tracked against the actual component team, not just a community workaround. 

     

    3. As a partial mitigation if you do stay on SLDS 2: since the truncation is driven by label length, consider whether the action's Label (display name) can be shortened while keeping a more descriptive Description/tooltip — I know you said shortening isn't always possible, but for actions where a shorter label + longer help text would work, that's the only user-facing lever available today without a platform fix. 

     

    There's currently no styling hook exposed to override how global action menu items handle long labels + icons together under SLDS 2 — this is genuinely on Salesforce's side to fix in a future refinement, not something fixable via custom CSS/styling hooks from your org. 

     

    Reference:

    https://trailhead.salesforce.com/content/learn/modules/salesforce-lightning-design-system-2-for-developers/get-help-and-support-with-slds-2

0/9000

Applying SLDS styles on Lightning App Page(a.k.a flexipage) to a ReactJS container application:

 

In-short: what is the equivalent of this visualforce page solution in Lightning Page(flexipage created from Lightning App Builder)

 

Visualforce way(working):

<apex:page>

  <!-- Imports the SLDS styles with 'slds-scope' automatically  -->

  <apex:slds />

    <!-- REQUIRED SLDS WRAPPER -->

    <div class="slds-scope">

 

If you are already thinking of SLDS styles load automatically. My use case is bit different. I would need slds_* class to apply in my ReactJS(that uses slds lightning components) App embedded from <lightning:container src="MyStaticResource + /index.html" />

 

Again(though it works) I DO NOT WANT to deal with downloading slds.min.css custom scope'd from here and upload to static resource etc. for two reasons. i) I would like to keep my ReactJS dist bundle smaller ii) To avoid another manual step  - https://tools.lightningdesignsystem.com/css-customizer

 

Appreciate any suggestion. Thanks!

<apex:slds />

0/9000