diff --git a/apis/locale/locales/en-US.json b/apis/locale/locales/en-US.json index 50d5143ae..2c6dba388 100644 --- a/apis/locale/locales/en-US.json +++ b/apis/locale/locales/en-US.json @@ -55,6 +55,10 @@ "value": "Dismiss", "comment": "Dismiss the disclaimer that not all data is being shown" }, + "Listbox.DrillDown": { + "value": "Drill-down dimension", + "comment": "Tooltip for the drill-down icons on the dimension titles in charts. (pde 160210)" + }, "Menu.More": { "value": "More", "comment": "Menu option to display list of additional actions to choose from (ffd 20200520)" diff --git a/apis/nucleus/src/components/listbox/ListBoxInline.jsx b/apis/nucleus/src/components/listbox/ListBoxInline.jsx index 632a448d1..aac877b0b 100644 --- a/apis/nucleus/src/components/listbox/ListBoxInline.jsx +++ b/apis/nucleus/src/components/listbox/ListBoxInline.jsx @@ -5,6 +5,7 @@ import Lock from '@nebula.js/ui/icons/lock'; import { IconButton, Grid, Typography } from '@mui/material'; import { useTheme } from '@nebula.js/ui/theme'; import SearchIcon from '@nebula.js/ui/icons/search'; +import DrillDownIcon from '@nebula.js/ui/icons/drill-down'; import useLayout from '../../hooks/useLayout'; import ListBox from './ListBox'; import createListboxSelectionToolbar from './interactions/listbox-selection-toolbar'; @@ -16,8 +17,9 @@ import addListboxTheme from './assets/addListboxTheme'; import useAppSelections from '../../hooks/useAppSelections'; const PREFIX = 'ListBoxInline'; +const ICON_PADDING = 7; const searchIconWidth = 28; - +const drillDownIconWidth = 24; const classes = { listBoxHeader: `${PREFIX}-listBoxHeader`, screenReaderOnly: `${PREFIX}-screenReaderOnly`, @@ -168,7 +170,7 @@ function ListBoxInline({ options, layout }) { } const isLocked = layout.qListObject.qDimensionInfo.qLocked === true; - + const isDrillDown = layout.qListObject.qDimensionInfo.qGrouping === 'H'; const listboxSelectionToolbarItems = toolbar ? createListboxSelectionToolbar({ layout, @@ -193,7 +195,12 @@ function ListBoxInline({ options, layout }) { }; const shouldAutoFocus = searchVisible && search === 'toggle'; - const showIcon = isLocked || (searchEnabled !== false && !constraints?.active); + const showSearchIcon = searchEnabled !== false && !constraints?.active; + const showSearchOrLockIcon = isLocked || showSearchIcon; + const showIcons = showSearchOrLockIcon || isDrillDown; + const iconsWidth = (showSearchOrLockIcon ? searchIconWidth : 0) + (isDrillDown ? drillDownIconWidth : 0); + const drillDownPaddingLeft = showSearchOrLockIcon ? 0 : ICON_PADDING; + const headerPaddingLeft = parseFloat(theme.spacing(1)) - (showIcons ? ICON_PADDING : 0); return ( {toolbar && ( - + - {showIcon && ( - + {showIcons && ( + {isLocked ? ( ) : ( + showSearchIcon && ( + + + + ) + )} + {isDrillDown && ( - + )} diff --git a/packages/ui/icons/drill-down.js b/packages/ui/icons/drill-down.js new file mode 100644 index 000000000..45de60e7d --- /dev/null +++ b/packages/ui/icons/drill-down.js @@ -0,0 +1,15 @@ +import SvgIcon from './SvgIcon'; + +const drillDown = (props) => ({ + ...props, + shapes: [ + { + type: 'path', + attrs: { + d: 'M15.9993744,3 L15.9993744,5 L4.99937445,5 L4.99937445,3 L15.9993744,3 Z M8.99937445,7 L15.9993744,7 L15.9993744,9 L8.99937445,9 L8.99937445,7 Z M11.9993744,11 L15.9993744,11 L15.9993744,13 L11.9993744,13 L11.9993744,11 Z M2.2,11 L7,11 L7,9.00369263 C7,8.89323568 7.08954305,8.80369263 7.2,8.80369263 C7.2549016,8.80369263 7.30738916,8.82626165 7.34515712,8.86610844 L10.1852182,11.8624926 C10.2583124,11.93961 10.258346,12.0604218 10.1852948,12.13758 L7.34523376,15.1373102 C7.2692928,15.2175206 7.14270711,15.2209817 7.06249671,15.1450407 C7.02260076,15.1072683 7,15.0547472 7,14.9998069 L7,12.9043747 C4.79351111,12.9043747 2.8018683,12.9266213 1.02507156,12.9711145 L1.02507252,12.9711526 C0.472939773,12.9849787 0.014139487,12.5485949 0.000313396522,11.9964622 C0.000104473692,11.988119 -1.32268838e-12,11.9797736 -1.3231638e-12,11.9714278 L-1.83320026e-12,3 L2,3 L2,10.8 C2,10.9104569 2.08954305,11 2.2,11 Z', + }, + }, + ], +}); +export default (props) => SvgIcon(drillDown(props)); +export { drillDown }; diff --git a/test/rendering/listbox/listbox.spec.js-snapshots/listbox-basic-linux.png b/test/rendering/listbox/listbox.spec.js-snapshots/listbox-basic-linux.png index ec9d82deb..116a035b6 100644 Binary files a/test/rendering/listbox/listbox.spec.js-snapshots/listbox-basic-linux.png and b/test/rendering/listbox/listbox.spec.js-snapshots/listbox-basic-linux.png differ diff --git a/test/rendering/listbox/listbox.spec.js-snapshots/listbox-checkboxes-select-AI-linux.png b/test/rendering/listbox/listbox.spec.js-snapshots/listbox-checkboxes-select-AI-linux.png index 32781e045..d27a5f46c 100644 Binary files a/test/rendering/listbox/listbox.spec.js-snapshots/listbox-checkboxes-select-AI-linux.png and b/test/rendering/listbox/listbox.spec.js-snapshots/listbox-checkboxes-select-AI-linux.png differ diff --git a/test/rendering/listbox/listbox.spec.js-snapshots/listbox-key-scroll-linux.png b/test/rendering/listbox/listbox.spec.js-snapshots/listbox-key-scroll-linux.png index 5d6e0a8cd..3b9e6c015 100644 Binary files a/test/rendering/listbox/listbox.spec.js-snapshots/listbox-key-scroll-linux.png and b/test/rendering/listbox/listbox.spec.js-snapshots/listbox-key-scroll-linux.png differ diff --git a/test/rendering/listbox/listbox.spec.js-snapshots/listbox-search-B-linux.png b/test/rendering/listbox/listbox.spec.js-snapshots/listbox-search-B-linux.png index f2a60add1..f65b94972 100644 Binary files a/test/rendering/listbox/listbox.spec.js-snapshots/listbox-search-B-linux.png and b/test/rendering/listbox/listbox.spec.js-snapshots/listbox-search-B-linux.png differ diff --git a/test/rendering/listbox/listbox.spec.js-snapshots/listbox-select-EH-linux.png b/test/rendering/listbox/listbox.spec.js-snapshots/listbox-select-EH-linux.png index 8dc920260..6ea531c0a 100644 Binary files a/test/rendering/listbox/listbox.spec.js-snapshots/listbox-select-EH-linux.png and b/test/rendering/listbox/listbox.spec.js-snapshots/listbox-select-EH-linux.png differ