feat: expose classnames

qlik-oss · Sep 10, 2021 · 4834485 · 4834485
1 parent d3c9602
commit 4834485
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 3 deletions.
diff --git a/apis/nucleus/src/components/ActionsToolbarItem.jsx b/apis/nucleus/src/components/ActionsToolbarItem.jsx
@@ -19,6 +19,7 @@ const Item = React.forwardRef(({ item, addAnchor = false }, ref) => {
       onClick={item.action}
       disabled={disabled}
       style={style}
+      className="njs-cell-action"
     >
       {hasSvgIconShape && SvgIcon(item.getSvgIconShape())}
       {addAnchor && (

diff --git a/apis/nucleus/src/components/Footer.jsx b/apis/nucleus/src/components/Footer.jsx
@@ -2,6 +2,15 @@ import React from 'react';
 
 import { makeStyles, Typography, Grid } from '@material-ui/core';
 
+/**
+ * @interface
+ * @extends HTMLElement
+ */
+const CellFooter = {
+  /** @type {'njs-cell-footer'} */
+  className: 'njs-cell-footer',
+};
+
 const useStyles = makeStyles((theme) => ({
   itemStyle: {
     minWidth: 0,
@@ -14,7 +23,7 @@ const Footer = ({ layout }) => {
   return layout && layout.showTitles && layout.footnote ? (
     <Grid container>
       <Grid item className={itemStyle}>
-        <Typography noWrap variant="body2">
+        <Typography noWrap variant="body2" className={CellFooter.className}>
           {layout.footnote}
         </Typography>
       </Grid>

diff --git a/apis/nucleus/src/components/Header.jsx b/apis/nucleus/src/components/Header.jsx
@@ -10,6 +10,24 @@ const DIVIDER = 1;
 const NUMBER_OF_ITEMS = 6;
 const MIN_WIDTH = (ITEM_WIDTH + ITEM_SPACING) * NUMBER_OF_ITEMS + DIVIDER + ITEM_SPACING;
 
+/**
+ * @interface
+ * @extends HTMLElement
+ */
+const CellTitle = {
+  /** @type {'njs-cell-title'} */
+  className: 'njs-cell-title',
+};
+
+/**
+ * @interface
+ * @extends HTMLElement
+ */
+const CellSubTitle = {
+  /** @type {'njs-cell-sub-title'} */
+  className: 'njs-cell-sub-title',
+};
+
 const useStyles = makeStyles((theme) => ({
   containerStyle: {
     flexGrow: 0,
@@ -62,12 +80,12 @@ const Header = ({ layout, sn, anchorEl, hovering }) => {
       <Grid item zeroMinWidth xs>
         <Grid container wrap="nowrap" direction="column">
           {showTitle && (
-            <Typography variant="h6" noWrap>
+            <Typography variant="h6" noWrap className={CellTitle.className}>
               {layout.title}
             </Typography>
           )}
           {showSubtitle && (
-            <Typography variant="body2" noWrap>
+            <Typography variant="body2" noWrap className={CellSubTitle.className}>
               {layout.subtitle}
             </Typography>
           )}