@instructure/outcomes-ui 4.1.2 → 4.1.3

package/es/translated/en-GB-x-ukhe/components/Gradebook/table/Table/index.js

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["id", "columns", "data", "caption", "renderAboveHeader", "dragDropConfig"];
-import React, { useRef, useCallback } from 'react';
+import React, { useRef, useCallback, useEffect } from 'react';
 import { DragDropContext } from 'react-dnd';
 import ReactDnDHTML5Backend from 'react-dnd-html5-backend';
 import { Table as InstUITable } from '@instructure/ui-table';
@@ -22,27 +22,47 @@ export var TableComponent = function TableComponent(_ref) {
     dragDropConfig = _ref.dragDropConfig,
     tableProps = _objectWithoutProperties(_ref, _excluded);
   var tableRef = useRef(null);
-  var getCellElement = useCallback(function (rowIndex, colIndex) {
+  var columnsRef = useRef(columns);
+
+  // Keep columnsRef in sync with latest columns
+  useEffect(function () {
+    columnsRef.current = columns;
+  }, [columns]);
+  var getCellElement = useCallback(function (rowIndex, colKey) {
     if (!tableRef.current) return null;
-    var cellId;
-    if (rowIndex === -1) {
-      cellId = "header-".concat(colIndex);
-    } else {
-      cellId = "cell-".concat(rowIndex, "-").concat(colIndex);
-    }
-    return tableRef.current.querySelector("[data-cell-id=\"".concat(cellId, "\"]"));
+    var selector = "[data-row-index=\"".concat(rowIndex, "\"][data-col-key=\"").concat(colKey, "\"]");
+    return tableRef.current.querySelector(selector);
   }, []);
-  var focusCell = useCallback(function (rowIndex, colIndex) {
-    var cell = getCellElement(rowIndex, colIndex);
+  var focusCell = useCallback(function (rowIndex, colKey) {
+    var cell = getCellElement(rowIndex, colKey);
     if (cell) {
+      if (rowIndex === -1) {
+        var focusable = cell.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        if (focusable) {
+          focusable.focus();
+          return;
+        }
+      }
       cell.focus();
     }
   }, [getCellElement]);
-  var handleKeyDown = useCallback(function (event, rowIndex, colIndex) {
-    if (event.target !== event.currentTarget) return;
+  var handleKeyDown = useCallback(function (event) {
+    // Allow arrow key navigation from the cell itself or from buttons within the cell
+    // (e.g., header options menu), but prevent navigation from other interactive elements
+    // (e.g., chart components that have their own keyboard navigation)
+    if (event.target !== event.currentTarget) {
+      var _target = event.target;
+      var isButton = _target.tagName === 'BUTTON' || _target.getAttribute('role') === 'button';
+      if (!isButton) {
+        return;
+      }
+    }
+    var target = event.currentTarget;
+    var rowIndex = parseInt(target.dataset.rowIndex || '0', 10);
+    var colKey = target.dataset.colKey || '';
     var key = event.key;
     var newRowIndex = rowIndex;
-    var newColIndex = colIndex;
+    var newColKey = colKey;
     switch (key) {
       case 'ArrowUp':
         {
@@ -59,30 +79,44 @@ export var TableComponent = function TableComponent(_ref) {
         newRowIndex = Math.min(data.length - 1, rowIndex + 1);
         break;
       case 'ArrowLeft':
-        event.preventDefault();
-        newColIndex = Math.max(0, colIndex - 1);
-        break;
+        {
+          var _columnsRef$current$n;
+          event.preventDefault();
+          var currentColIndex = columnsRef.current.findIndex(function (col) {
+            return col.key === colKey;
+          });
+          var newColIndex = Math.max(0, currentColIndex - 1);
+          newColKey = ((_columnsRef$current$n = columnsRef.current[newColIndex]) === null || _columnsRef$current$n === void 0 ? void 0 : _columnsRef$current$n.key) || colKey;
+          break;
+        }
       case 'ArrowRight':
-        event.preventDefault();
-        newColIndex = Math.min(columns.length - 1, colIndex + 1);
-        break;
+        {
+          var _columnsRef$current$_;
+          event.preventDefault();
+          var _currentColIndex = columnsRef.current.findIndex(function (col) {
+            return col.key === colKey;
+          });
+          var _newColIndex = Math.min(columnsRef.current.length - 1, _currentColIndex + 1);
+          newColKey = ((_columnsRef$current$_ = columnsRef.current[_newColIndex]) === null || _columnsRef$current$_ === void 0 ? void 0 : _columnsRef$current$_.key) || colKey;
+          break;
+        }
       default:
         return;
     }
-    if (newRowIndex !== rowIndex || newColIndex !== colIndex) {
-      focusCell(newRowIndex, newColIndex);
+    if (newRowIndex !== rowIndex || newColKey !== colKey) {
+      focusCell(newRowIndex, newColKey);
     }
-  }, [data.length, columns.length, focusCell, renderAboveHeader]);
+  }, [data.length, focusCell, renderAboveHeader]);
   var renderColHeader = useCallback(function (col, colIndex, draggableIndex, dragDropConfig) {
     var colHeaderProps = _objectSpread({
       id: col.key,
       width: col.width,
       isSticky: col.isSticky,
-      'data-cell-id': "header-".concat(colIndex),
+      'data-cell-id': "header-".concat(col.key),
+      'data-row-index': -1,
+      'data-col-key': col.key,
       tabIndex: 0,
-      onKeyDown: function onKeyDown(e) {
-        return handleKeyDown(e, -1, colIndex);
-      }
+      onKeyDown: handleKeyDown
     }, col.colHeaderProps);
     var dragLabel = col.dragLabel || col.key;
     return col.draggable && dragDropConfig ? /*#__PURE__*/React.createElement(DragDropWrapper, Object.assign({
@@ -135,14 +169,14 @@ export var TableComponent = function TableComponent(_ref) {
     return /*#__PURE__*/React.createElement(InstUITable.Body, null, data.map(function (row, rowIndex) {
       return /*#__PURE__*/React.createElement(Row, {
         key: rowIndex
-      }, columns.map(function (col, colIndex) {
+      }, columns.map(function (col) {
         var props = _objectSpread({
           id: "".concat(rowIndex, "-").concat(col.key),
-          'data-cell-id': "cell-".concat(rowIndex, "-").concat(colIndex),
+          'data-cell-id': "cell-".concat(rowIndex, "-").concat(col.key),
+          'data-row-index': rowIndex,
+          'data-col-key': col.key,
           tabIndex: 0,
-          onKeyDown: function onKeyDown(e) {
-            return handleKeyDown(e, rowIndex, colIndex);
-          },
+          onKeyDown: handleKeyDown,
           isSticky: col.isSticky
         }, col.cellProps);
         if (col.isRowHeader) {
@@ -170,6 +204,7 @@ export var TableComponent = function TableComponent(_ref) {
   }), /*#__PURE__*/React.createElement(View, {
     as: "div",
     overflowX: "auto",
+    padding: "none none small none",
     elementRef: function elementRef(el) {
       if (el instanceof HTMLDivElement) {
         ;

package/es/translated/en-GB-x-ukhe/components/Gradebook/table/Table/index.stories.js

@@ -212,22 +212,66 @@ export var WithCustomCell = {
     data: sampleData
   }
 };
+
+// Performance test data generation
+
+// Stable render function for performance test cells (defined once, reused everywhere)
+var renderPerformanceCell = function renderPerformanceCell(cellData) {
+  return /*#__PURE__*/React.createElement(Text, null, cellData);
+};
+var generatePerformanceTestData = function generatePerformanceTestData(numRows, numCols) {
+  var data = Array.from({
+    length: numRows
+  }, function (_, i) {
+    var row = {
+      id: "".concat(i + 1),
+      student: "Student ".concat(i + 1)
+    };
+    // Dynamically add columns
+    for (var j = 1; j <= numCols; j++) {
+      row["col".concat(j)] = Math.floor(Math.random() * 100);
+    }
+    return row;
+  });
+  var columns = [{
+    key: 'student',
+    header: 'Student Name',
+    width: '150px',
+    isRowHeader: true,
+    draggable: false
+  }].concat(_toConsumableArray(Array.from({
+    length: numCols
+  }, function (_, i) {
+    return {
+      key: "col".concat(i + 1),
+      header: "Column ".concat(i + 1),
+      width: '120px',
+      draggable: true,
+      render: renderPerformanceCell // Use the stable function reference
+    };
+  })));
+  return {
+    data: data,
+    columns: columns
+  };
+};
 export var WithDraggableColumns = {
   parameters: {
     storyshots: {
       disable: true
     }
   },
-  render: function render(args) {
-    var _React$useState = React.useState(basicColumns.map(function (col) {
-        return _objectSpread(_objectSpread({}, col), {}, {
-          draggable: col.key !== 'name' // All columns except name are draggable
-        });
-      })),
+  render: function render() {
+    var testData = React.useMemo(function () {
+      return generatePerformanceTestData(100, 99);
+    }, []);
+    var _React$useState = React.useState(function () {
+        return testData.columns;
+      }),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       columns = _React$useState2[0],
       setColumns = _React$useState2[1];
-    var handleMove = function handleMove(draggedId, hoverIndex) {
+    var handleMove = React.useCallback(function (draggedId, hoverIndex) {
       setColumns(function (prevColumns) {
         // Get only draggable columns
         var draggableColumns = prevColumns.filter(function (col) {
@@ -255,28 +299,23 @@ export var WithDraggableColumns = {
         });
         return [].concat(_toConsumableArray(nonDraggableColumns), _toConsumableArray(newDraggableColumns));
       });
-    };
-    var handleDragEnd = function handleDragEnd() {
-      // eslint-disable-next-line no-console
-      console.log('Drag ended - final column order:', columns.map(function (c) {
-        return c.key;
-      }));
-    };
+    }, []);
+    var dragDropConfig = React.useMemo(function () {
+      return {
+        type: 'COLUMN',
+        enabled: true,
+        onMove: handleMove
+      };
+    }, [handleMove]);
     var DraggableTable = Table;
-    return /*#__PURE__*/React.createElement(DraggableTable, Object.assign({}, args, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, "\n            #performance-test-table {\n              border-spacing: 24px 0;\n              border-collapse: separate;\n            }\n          "), /*#__PURE__*/React.createElement(DraggableTable, {
+      id: "performance-test-table",
+      caption: "Table with Draggable Columns (100\xD7100) - Drag columns to reorder",
       columns: columns,
+      data: testData.data,
       layout: "fixed",
-      dragDropConfig: {
-        type: 'COLUMN',
-        enabled: true,
-        onMove: handleMove,
-        onDragEnd: handleDragEnd
-      }
+      dragDropConfig: dragDropConfig
     }));
-  },
-  args: {
-    caption: 'Table with Draggable Columns (drag columns to reorder)',
-    data: sampleData
   }
 };
 export var WithAboveHeaderRow = {

package/es/translated/en-GB-x-ukhe/util/gradebook/constants.js

@@ -32,6 +32,8 @@ export var ScoreDisplayFormat = /*#__PURE__*/function (ScoreDisplayFormat) {
   ScoreDisplayFormat["ICON_ONLY"] = "icon_only";
   ScoreDisplayFormat["ICON_AND_POINTS"] = "icon_and_points";
   ScoreDisplayFormat["ICON_AND_LABEL"] = "icon_and_label";
+  ScoreDisplayFormat["PERCENT"] = "percent";
+  ScoreDisplayFormat["PERCENT_AND_RATIO"] = "percent_and_ratio";
   return ScoreDisplayFormat;
 }({});
 export var OutcomeArrangement = /*#__PURE__*/function (OutcomeArrangement) {

package/es/translated/en-IE/components/Gradebook/context/GradebookAppContext/GradebookAppProvider.js

@@ -11,6 +11,7 @@ export var GradebookAppProvider = function GradebookAppProvider(_ref) {
     settings = _useState2[0],
     setSettings = _useState2[1];
   var value = {
+    // If the settings will be implemented on the app level, we can remove this (MC won't use it)
     settings: {
       settings: settings,
       setSettings: setSettings,

package/es/translated/en-IE/components/Gradebook/gradebook-table/ColumnHeader/__tests__/index.test.js

@@ -168,4 +168,14 @@ describe('ColumnHeader', function () {
     render(/*#__PURE__*/React.createElement(ColumnHeader, defaultProps));
     expect(screen.getByTestId('column-header')).toBeInTheDocument();
   });
+  it('renders the optionsMenu prop when provided', function () {
+    var customMenu = /*#__PURE__*/React.createElement("button", {
+      "data-testid": "custom-options-menu"
+    }, "Custom Menu");
+    render(/*#__PURE__*/React.createElement(ColumnHeader, Object.assign({}, defaultProps, {
+      optionsMenu: customMenu
+    })));
+    expect(screen.getByTestId('custom-options-menu')).toBeInTheDocument();
+    expect(screen.getByText('Custom Menu')).toBeInTheDocument();
+  });
 });

package/es/translated/en-IE/components/Gradebook/gradebook-table/ColumnHeader/index.js

@@ -11,7 +11,9 @@ import TruncateWithTooltip from "../../shared/TruncateWithTooltip/index.js";
 import { getInverseColor } from "../../../../util/gradebook/colors.js";
 export var ColumnHeader = function ColumnHeader(_ref) {
   var title = _ref.title,
+    titleId = _ref.titleId,
     optionsMenuTriggerLabel = _ref.optionsMenuTriggerLabel,
+    optionsMenu = _ref.optionsMenu,
     _ref$optionsMenuItems = _ref.optionsMenuItems,
     optionsMenuItems = _ref$optionsMenuItems === void 0 ? [] : _ref$optionsMenuItems,
     icon = _ref.icon,
@@ -28,7 +30,7 @@ export var ColumnHeader = function ColumnHeader(_ref) {
     alignItems: "center",
     justifyItems: "space-between",
     height: CELL_HEIGHT,
-    padding: "none none none x-small"
+    padding: "none x-small none x-small"
   }, /*#__PURE__*/React.createElement(Flex.Item, {
     shouldGrow: true,
     shouldShrink: true,
@@ -43,7 +45,8 @@ export var ColumnHeader = function ColumnHeader(_ref) {
     overflowX: "hidden",
     padding: "0 xx-small 0 0"
   }, /*#__PURE__*/React.createElement(AccessibleContent, {
-    alt: title
+    alt: title,
+    id: titleId
   }, /*#__PURE__*/React.createElement(Text, {
     weight: "bold"
   }, /*#__PURE__*/React.createElement(TruncateWithTooltip, null, title)))))), optionsMenuItems.length > 0 && /*#__PURE__*/React.createElement(Menu, {
@@ -55,5 +58,5 @@ export var ColumnHeader = function ColumnHeader(_ref) {
       screenReaderLabel: optionsMenuTriggerLabel,
       color: getInverseColor(background)
     }, /*#__PURE__*/React.createElement(IconMoreLine, null))
-  }, optionsMenuItems)));
+  }, optionsMenuItems), optionsMenu));
 };

package/es/translated/en-IE/components/Gradebook/gradebook-table/ColumnHeader/index.stories.js

@@ -25,6 +25,12 @@ export var LongTitle = {
     title: 'This is a long title that should be truncated with an ellipsis when it exceeds the available space'
   }
 };
+export var WithTitleId = {
+  args: {
+    title: 'Test Title',
+    titleId: 'test-title-id'
+  }
+};
 export var WithMenu = {
   args: {
     title: 'Test Title',

package/es/translated/en-IE/components/Gradebook/gradebook-table/ScoreCellContent/ScoreWithLabel.js

@@ -6,6 +6,7 @@ import { MasteryLevelIcon } from "../../icons/MasteryLevelIcon/index.js";
 var Label = function Label(_ref) {
   var scoreDisplayFormat = _ref.scoreDisplayFormat,
     score = _ref.score,
+    totalScore = _ref.totalScore,
     text = _ref.text;
   if (scoreDisplayFormat === ScoreDisplayFormat.ICON_AND_LABEL) {
     return /*#__PURE__*/React.createElement(Text, {
@@ -17,22 +18,34 @@ var Label = function Label(_ref) {
       size: "legend"
     }, score);
   }
+  var isPercentFormat = scoreDisplayFormat === ScoreDisplayFormat.PERCENT;
+  var isPercentAndRatioFormat = scoreDisplayFormat === ScoreDisplayFormat.PERCENT_AND_RATIO;
+  if (isPercentFormat || isPercentAndRatioFormat) {
+    var percent = score != null && totalScore != null && totalScore !== 0 ? "".concat(Math.round(score / totalScore * 100), "%") : null;
+    return percent != null ? /*#__PURE__*/React.createElement(Flex, {
+      gap: "x-small"
+    }, /*#__PURE__*/React.createElement(Text, {
+      weight: "bold"
+    }, percent), isPercentAndRatioFormat && /*#__PURE__*/React.createElement(Text, null, "(".concat(score, "/").concat(totalScore, ")"))) : null;
+  }
 };
 export var ScoreWithLabel = function ScoreWithLabel(_ref2) {
   var masteryLevel = _ref2.masteryLevel,
     score = _ref2.score,
+    totalScore = _ref2.totalScore,
     label = _ref2.label,
     _ref2$scoreDisplayFor = _ref2.scoreDisplayFormat,
     scoreDisplayFormat = _ref2$scoreDisplayFor === void 0 ? ScoreDisplayFormat.ICON_ONLY : _ref2$scoreDisplayFor;
+  var isPercentFormat = [ScoreDisplayFormat.PERCENT, ScoreDisplayFormat.PERCENT_AND_RATIO].includes(scoreDisplayFormat);
   var justifyItems = scoreDisplayFormat === ScoreDisplayFormat.ICON_ONLY ? 'center' : 'start';
   return /*#__PURE__*/React.createElement(Flex, {
     width: "100%",
     height: "100%",
     alignItems: "center",
     gap: "small",
-    padding: "none medium-small",
+    padding: "none small",
     justifyItems: justifyItems
-  }, /*#__PURE__*/React.createElement(MasteryLevelIcon, {
+  }, !isPercentFormat && /*#__PURE__*/React.createElement(MasteryLevelIcon, {
     masteryLevel: masteryLevel,
     width: "1.5rem",
     height: "1.5rem",
@@ -41,6 +54,7 @@ export var ScoreWithLabel = function ScoreWithLabel(_ref2) {
   }), /*#__PURE__*/React.createElement(Label, {
     scoreDisplayFormat: scoreDisplayFormat,
     score: score,
+    totalScore: totalScore,
     text: label
   }));
 };

package/es/translated/en-IE/components/Gradebook/gradebook-table/ScoreCellContent/__tests__/ScoreWithLabel.test.js

@@ -38,6 +38,47 @@ describe('ScoreWithLabel', function () {
       expect(pointsText).toBeInTheDocument();
       expect(pointsText.closest('[class*="screenReaderContent"]')).not.toBeInTheDocument();
     });
+    it('shows percent with PERCENT format', function () {
+      render(/*#__PURE__*/React.createElement(ScoreWithLabel, Object.assign({}, defaultProps, {
+        score: 3,
+        totalScore: 4,
+        scoreDisplayFormat: ScoreDisplayFormat.PERCENT
+      })));
+      expect(screen.getByText('75%')).toBeInTheDocument();
+    });
+    it('does not show mastery icon with PERCENT format', function () {
+      var _render = render(/*#__PURE__*/React.createElement(ScoreWithLabel, Object.assign({}, defaultProps, {
+          score: 3,
+          totalScore: 4,
+          scoreDisplayFormat: ScoreDisplayFormat.PERCENT
+        }))),
+        container = _render.container;
+      expect(container.querySelector('svg')).not.toBeInTheDocument();
+    });
+    it('shows percent and ratio with PERCENT_AND_RATIO format', function () {
+      render(/*#__PURE__*/React.createElement(ScoreWithLabel, Object.assign({}, defaultProps, {
+        score: 3,
+        totalScore: 4,
+        scoreDisplayFormat: ScoreDisplayFormat.PERCENT_AND_RATIO
+      })));
+      expect(screen.getByText('75%')).toBeInTheDocument();
+      expect(screen.getByText('(3/4)')).toBeInTheDocument();
+    });
+    it('does not show mastery icon with PERCENT_AND_RATIO format', function () {
+      var _render2 = render(/*#__PURE__*/React.createElement(ScoreWithLabel, Object.assign({}, defaultProps, {
+          score: 3,
+          totalScore: 4,
+          scoreDisplayFormat: ScoreDisplayFormat.PERCENT_AND_RATIO
+        }))),
+        container = _render2.container;
+      expect(container.querySelector('svg')).not.toBeInTheDocument();
+    });
+    it('shows null when totalScore is missing with PERCENT format', function () {
+      render(/*#__PURE__*/React.createElement(ScoreWithLabel, Object.assign({}, defaultProps, {
+        scoreDisplayFormat: ScoreDisplayFormat.PERCENT
+      })));
+      expect(screen.queryByText(/%/)).not.toBeInTheDocument();
+    });
   });
   it('uses default ICON_ONLY format when not specified', function () {
     render(/*#__PURE__*/React.createElement(ScoreWithLabel, defaultProps));

package/es/translated/en-IE/components/Gradebook/gradebook-table/ScoreCellContent/__tests__/index.test.js

@@ -21,23 +21,31 @@ describe('ScoreCellContent', function () {
       render(/*#__PURE__*/React.createElement(ScoreCellContent, Object.assign({}, defaultProps, {
         onAction: jest.fn()
       })));
-      expect(screen.queryByTestId('score-cell-action-button')).not.toBeInTheDocument();
+      expect(screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '0'
+      });
     });
     it('shows action button when focus is true', function () {
       render(/*#__PURE__*/React.createElement(ScoreCellContent, Object.assign({}, defaultProps, {
         onAction: jest.fn(),
         focus: true
       })));
-      expect(screen.getByTestId('score-cell-action-button')).toBeInTheDocument();
+      expect(screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '1'
+      });
     });
     it('shows action button on hover (internal state)', function () {
       render(/*#__PURE__*/React.createElement(ScoreCellContent, Object.assign({}, defaultProps, {
         onAction: jest.fn()
       })));
-      expect(screen.queryByTestId('score-cell-action-button')).not.toBeInTheDocument();
+      expect(screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '0'
+      });
       var viewElement = screen.getByTestId('score-cell-content');
       fireEvent.mouseEnter(viewElement);
-      expect(screen.getByTestId('score-cell-action-button')).toBeInTheDocument();
+      expect(screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '1'
+      });
     });
     it('hides action button on mouse leave (internal state)', function () {
       render(/*#__PURE__*/React.createElement(ScoreCellContent, Object.assign({}, defaultProps, {
@@ -45,16 +53,22 @@ describe('ScoreCellContent', function () {
       })));
       var viewElement = screen.getByTestId('score-cell-content');
       fireEvent.mouseEnter(viewElement);
-      expect(screen.getByTestId('score-cell-action-button')).toBeInTheDocument();
+      expect(screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '1'
+      });
       fireEvent.mouseLeave(viewElement);
-      expect(screen.queryByTestId('score-cell-action-button')).not.toBeInTheDocument();
+      expect(screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '0'
+      });
     });
     it('shows action button when hover prop is true (controlled)', function () {
       render(/*#__PURE__*/React.createElement(ScoreCellContent, Object.assign({}, defaultProps, {
         onAction: jest.fn(),
         hover: true
       })));
-      expect(screen.getByTestId('score-cell-action-button')).toBeInTheDocument();
+      expect(screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '1'
+      });
     });
     it('does not update internal hover state when hover prop is controlled', function () {
       render(/*#__PURE__*/React.createElement(ScoreCellContent, Object.assign({}, defaultProps, {
@@ -65,7 +79,9 @@ describe('ScoreCellContent', function () {
       fireEvent.mouseEnter(viewElement);
 
       // Button should not appear because hover prop is controlled and set to false
-      expect(screen.queryByTestId('score-cell-action-button')).not.toBeInTheDocument();
+      expect(screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '0'
+      });
     });
   });
   describe('action button interaction', function () {
@@ -84,7 +100,7 @@ describe('ScoreCellContent', function () {
         onAction: void 0,
         focus: true
       })));
-      expect(screen.queryByTestId('score-cell-action-button')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('score-cell-action-wrapper')).not.toBeInTheDocument();
     });
   });
   describe('scoreDisplayFormat', function () {
@@ -107,5 +123,22 @@ describe('ScoreCellContent', function () {
       })));
       expect(screen.getByText('3')).toBeInTheDocument();
     });
+    it('renders percent with PERCENT format', function () {
+      render(/*#__PURE__*/React.createElement(ScoreCellContent, Object.assign({}, defaultProps, {
+        score: 3,
+        totalScore: 4,
+        scoreDisplayFormat: ScoreDisplayFormat.PERCENT
+      })));
+      expect(screen.getByText('75%')).toBeInTheDocument();
+    });
+    it('renders percent and ratio with PERCENT_AND_RATIO format', function () {
+      render(/*#__PURE__*/React.createElement(ScoreCellContent, Object.assign({}, defaultProps, {
+        score: 3,
+        totalScore: 4,
+        scoreDisplayFormat: ScoreDisplayFormat.PERCENT_AND_RATIO
+      })));
+      expect(screen.getByText('75%')).toBeInTheDocument();
+      expect(screen.getByText('(3/4)')).toBeInTheDocument();
+    });
   });
 });

package/es/translated/en-IE/components/Gradebook/gradebook-table/ScoreCellContent/index.js

@@ -3,14 +3,16 @@ import React, { useState } from 'react';
 import { View } from '@instructure/ui-view';
 import { Flex } from '@instructure/ui-flex';
 import { IconButton } from '@instructure/ui-buttons';
-import { IconExpandStartLine } from '@instructure/ui-icons';
 import { ScoreWithLabel } from "./ScoreWithLabel.js";
 export var ScoreCellContent = function ScoreCellContent(_ref) {
   var masteryLevel = _ref.masteryLevel,
     scoreDisplayFormat = _ref.scoreDisplayFormat,
     score = _ref.score,
+    totalScore = _ref.totalScore,
     label = _ref.label,
     onAction = _ref.onAction,
+    actionScreenReaderLabel = _ref.actionScreenReaderLabel,
+    actionIcon = _ref.actionIcon,
     focus = _ref.focus,
     hoverControlled = _ref.hover,
     _ref$background = _ref.background,
@@ -49,9 +51,16 @@ export var ScoreCellContent = function ScoreCellContent(_ref) {
   }, /*#__PURE__*/React.createElement(ScoreWithLabel, {
     masteryLevel: masteryLevel,
     score: score,
+    totalScore: totalScore,
     scoreDisplayFormat: scoreDisplayFormat,
     label: label
-  }))), showAction && /*#__PURE__*/React.createElement(View, {
+  }))), onAction && /*#__PURE__*/React.createElement("div", {
+    "data-testid": "score-cell-action-wrapper",
+    style: {
+      opacity: showAction ? 1 : 0,
+      pointerEvents: showAction ? 'auto' : 'none'
+    }
+  }, /*#__PURE__*/React.createElement(View, {
     position: "absolute",
     insetInlineEnd: "0",
     insetBlockStart: "50%",
@@ -59,13 +68,14 @@ export var ScoreCellContent = function ScoreCellContent(_ref) {
       transform: 'translateY(-50%)'
     }
   }, /*#__PURE__*/React.createElement(IconButton, {
+    "aria-haspopup": "dialog",
     withBackground: false,
     withBorder: false,
     size: "small",
     margin: "0 xxx-small 0 0",
-    renderIcon: /*#__PURE__*/React.createElement(IconExpandStartLine, null),
-    screenReaderLabel: "View Contributing Score Details",
+    renderIcon: actionIcon,
+    screenReaderLabel: actionScreenReaderLabel || "View Contributing Score Details",
     onClick: onAction,
     "data-testid": "score-cell-action-button"
-  })));
+  }))));
 };

package/es/translated/en-IE/components/Gradebook/gradebook-table/ScoreCellContent/index.stories.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View } from '@instructure/ui-view';
 import { action } from '@storybook/addon-actions';
+import { IconExpandStartLine } from '@instructure/ui-icons';
 import { ScoreDisplayFormat } from "../../../../util/gradebook/constants.js";
 import { ScoreCellContent } from "./index.js";
 var meta = {
@@ -46,6 +47,26 @@ export var IconAndLabel = {
     background: 'secondary'
   }
 };
+export var Percent = {
+  args: {
+    scoreDisplayFormat: ScoreDisplayFormat.PERCENT,
+    masteryLevel: 'mastery',
+    label: 'Mastery',
+    score: 3,
+    totalScore: 4,
+    background: 'secondary'
+  }
+};
+export var PercentAndRatio = {
+  args: {
+    scoreDisplayFormat: ScoreDisplayFormat.PERCENT_AND_RATIO,
+    masteryLevel: 'mastery',
+    label: 'Mastery',
+    score: 3,
+    totalScore: 4,
+    background: 'secondary'
+  }
+};
 export var OnAction = {
   args: {
     scoreDisplayFormat: ScoreDisplayFormat.ICON_AND_POINTS,
@@ -53,6 +74,7 @@ export var OnAction = {
     label: 'Remediation',
     score: 1,
     onAction: action('onAction'),
+    actionIcon: /*#__PURE__*/React.createElement(IconExpandStartLine, null),
     background: 'secondary'
   }
 };
@@ -65,6 +87,7 @@ export var FocusControlled = {
     label: 'No Evidence',
     score: 0,
     onAction: action('onAction'),
+    actionIcon: /*#__PURE__*/React.createElement(IconExpandStartLine, null),
     focus: true,
     background: 'secondary'
   }