CODEWITHSUNDEEP
office-ui-fabric-reactfluentui-react
GingerModine
GingerModine

Reputation: 3

Add class and id to React Fabric UI pivot item headerButtonProps

I can't seem to get a className or id to render with the tab button link via the headerButtonProps in the PivotItem. I think this should be possible since version 7.114.0 added IButtonProps for the pivot button.. am I missing something obvious? My data attribute renders just fine, as well as the class name and id for the container element around the tab content.

<PivotItem
  headerText={tab.label}
  itemKey={tab.id}
  key={tab.id}
  headerButtonProps={{
    'data-test': 'test',
    className: 'tab-button',
    id: 'tab-id'
  }}
  itemCount={tab.count}
  className={tab.className}
  id={tab.idName}
 >
  {tab.content}
</PivotItem>

Upvotes: 0

Views: 1257

Answers (1)

t0mgerman
t0mgerman

Reputation: 184

if you press F12 in vs-code on the Pivot or PivotItem components, that will take you to the source code in node_modules. Navigate to the nearby Pivot.base.js file - I think line #48 shows why this is happening:

return (React.createElement(CommandButton, tslib_1.__assign({}, headerButtonProps, { id: tabId, key: itemKey, className: isSelected ? _this._classNames.linkIsSelected : _this._classNames.link, onClick: _this._onLinkClick.bind(_this, itemKey), onKeyPress: _this._onKeyPress.bind(_this, itemKey), ariaLabel: link.ariaLabel, role: "tab", "aria-selected": isSelected, name: link.headerText, keytipProps: link.keytipProps, "data-content": contentString }), linkContent));

This is the default implementation for renderPivotLink - and you can see it takes headerButtonProps from the link parameter. I assume the link parameter is derived from children of type PivotItem.

The tslib_1.__assign() method on line #48 is effectively merging the headerButtonProps you passed in with the object in the third parameter, and the third parameter sets both id and className - so these values override yours.

If these two parameters were switched around, your className, or ID etc would replace those that are set in the Pivot source code -- they obviously don't want people doing that so this is the right order. They could have chosen to set className to an object merging your classNames with the ones from the source code -- that's what they do in some other components -- but they're not doing it here.

If you wanted to suggest that they do that - it might be a nice idea for an Issue or Pull Request on the repo: https://github.com/microsoft/fluentui/tree/master/packages/react

I realise I'm 2 months late responding to you - however, if you were looking to do something in CSS or JS/TS based on the ID or Class - you can still do so using your data attributes as a selector.

For stylesheets - give the parenting Pivot itself a className - example (SCSS):

.parentPivot {
   button[data-your-attribute="someValue"] {
      /* your styling here */
   }
}

In code (TS):

   const yourElement = document.querySelector(`.${pivotClassName} button[data-your-attribute="someValue"]`);
   if (yourElement) {
      // do stuff
   }

Hope that helps for the future!

Tom

Upvotes: 1

Related Questions