[SalesForce] What does SLDS CSS class `.slds-hint-parent` do

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>

Best Answer

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.

Related Topic