3

SLDS and lightning component documentation regularly uses CSS classes in example code without reference in accompanying documentation. So, for example, I'm trying to understand .slds-hint-parent, which is included in SLDS's example code for Data Tables... but isn't included in the 'Overview of CSS Classes' section. Searching the web/SE/SLDS didn't provide answers either.

I'm not sure if the core issue here is me not knowing CSS well enough to find an answer that is readily available... or if Salesforce's notorious lack of documentation is biting me again.

I started digging in the downloadable design system zip, in /assets/styles/salesforce-lightning-design-system.css. It appears that slds-hint-parent has no defintion on its own - it's only when it's used as a parent class to other css classes that it has an effect, specifically, classes having to do with button icons.

The comment above one group of CSS classes offers some clarity:

 * @summary A parent class must be put on anything that contains a 
            .slds-button__icon_inverse-hint so that the child reacts 
             when the parent is hovered. This is for a dark background.
 * @selector .slds-button__icon_inverse-hint
 * @restrict .slds-button_icon .slds-button__icon
 */
.slds-button__icon_inverse-hint,
.slds-button__icon--inverse-hint {
  fill: rgba(255, 255, 255, 0.5); }

.slds-hint-parent .slds-button_icon-border-inverse,
.slds-hint-parent .slds-button--icon-border-inverse {
  border-color: rgba(255, 255, 255, 0.5); }

So my best guess so far is that slds-hint-parent is a parent class used so that a child button element would have the necessary visual reaction to being hovered over. Feels like a pretty flimsy understanding though, is there something I'm missing?

And what's really confusing me... what role is slds-hint-parent playing applied to the elment in the standard Data Table example provided on SLDS, if the only child class is slds-truncate?:

    <tr class="slds-hint-parent">
      <th data-label="Opportunity Name" scope="row">
        <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);" tabindex="-1">Cloudhub</a></div>
      </th>
      <td data-label="Account Name">
        <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
      </td>
    </tr>
1

Edit: More Research

There's only a small number of elements affected by slds-hint-parent even appears in SLDS. I suspect that this CSS rule is probably on the way out, since it doesn't do anything in Data Tables in the current version. The items that still has rules for slds-hint-parent are: buttons, button icons, and data table/inline edit. The main purpose is to provide a visual cue that something is active. It appears to be on the way out, though, since it's still using the slds-*--* CSS style name (newer styles use slds-*_* instead). At this point, I don't think I see a reason for using it, since it's no longer in the documentation. However, just to be sure, I'm going to ask the Salesforce UX team for clarification.


slds-hint-parent provides a visual cue for certain types of elements when the user moves the cursor over the object, particularly icons. It's rarely mentioned in the documentation, but we have a few quotes.

If a navigation bar item has an icon then we want to provide visual indication that its active when a user hovers into its region. To make this happen, apply the class .slds-hint-parent to the hover region, most cases would be .slds-context-bar__icon-action element.

--Global Navigation


.slds-hint-parent

Applied to: <tr>

Outcome: Highlights action overflow ribbons on row hover

Required: No, optional element or modifier

Comments: When you have an overflow action menu

--Data Tables

As you can see, its primary purpose is to provide hinting for active elements.

  • Thanks Fox. It seems to no longer be listed in the current version of the SLDS Data Table doc. And when I look at the CSS itself I can't seem to find it affecting <tr> or other table elements. I assume its presence in the Data Tables example code is outdated, then? Or is it related to the highlighted row on hover functionality? – smohyee Oct 31 '18 at 4:06
  • @smohyee Thanks for getting back to me. I realize what you're talking about now. It's still barely mentioned in the source code, even, so to be sure, I asked the SalesforceUX team to look at your question for you. You should probably get a response in the next 24 hours. – sfdcfox Oct 31 '18 at 6:14
  • Thanks Fox! I wish I could give feedback on the SLDS doc pages to ask them to remove references from example code if it is indeed on the way out. It creates confusion for the beginners who are using sample code as templates – smohyee Oct 31 '18 at 14:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.