[799] Add tooltips to the diagram toolbar's icons

Bug: #799 Signed-off-by: Pierre-Charles David <[email protected]>
eclipse-sirius · Nov 2, 2021 · 7769d55 · 7769d55
1 parent 45c82d6
commit 7769d55
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -11,6 +11,11 @@
 
 - https://github.com/eclipse-sirius/sirius-components/issues/804[#804] [core] Update the name of our configuration properties. The configuration property `sirius.web.graphql.websocket.allowed.origins` will now be `sirius.components.cors.allowedOriginPatterns` and it will support complex patterns on top of regular origins. The default value will be restored to nothing since it has temporarily been set to `*`. In a development environment, the recommended value would be both patterns `https://localhost:[*]` and `http://localhost:[*]` in order to accept requests from any application hosted on the same machine. The configuration property `org.eclipse.sirius.web.editingContextEventProcessorRegistry.disposeDelay` will now be `sirius.components.editingContext.disposeDelay`. Its default value will be 1s since it is the only realistic option with domain and view support.
 
+=== Improvements
+
+- https://github.com/eclipse-sirius/sirius-components/issues/799[#799] [diagram] The buttons in the diagram's toolbar now have proper tooltips
+
+
 == v0.5.0
 
 === Architectural decision records

diff --git a/frontend/src/diagram/Toolbar.tsx b/frontend/src/diagram/Toolbar.tsx
@@ -97,6 +97,7 @@ export const Toolbar = ({
             onChange={updateZoomLevel}
             variant="standard"
             disableUnderline
+            title="Zoom level"
             data-testid="zoom-level">
             <MenuItem value={'4'}>400%</MenuItem>
             <MenuItem value={'2'}>200%</MenuItem>
@@ -111,16 +112,29 @@ export const Toolbar = ({
             <MenuItem value={'0.05'}>5%</MenuItem>
           </Select>
         </FormControl>
-        <IconButton size="small" color="inherit" aria-label="zoom in" onClick={onZoomIn} data-testid="zoom-in">
+        <IconButton
+          size="small"
+          color="inherit"
+          aria-label="zoom in"
+          title="Zoom in"
+          onClick={onZoomIn}
+          data-testid="zoom-in">
           <ZoomInIcon fontSize="small" />
         </IconButton>
-        <IconButton size="small" color="inherit" aria-label="zoom out" onClick={onZoomOut} data-testid="zoom-out">
+        <IconButton
+          size="small"
+          color="inherit"
+          aria-label="zoom out"
+          title="Zoom out"
+          onClick={onZoomOut}
+          data-testid="zoom-out">
           <ZoomOutIcon fontSize="small" />
         </IconButton>
         <IconButton
           size="small"
           color="inherit"
           aria-label="fit to screen"
+          title="Fit to screen"
           onClick={onFitToScreen}
           data-testid="fit-to-screen">
           <AspectRatioIcon fontSize="small" />
@@ -129,12 +143,13 @@ export const Toolbar = ({
           size="small"
           color="inherit"
           aria-label="arrange-all"
+          title="Arrange all"
           disabled={autoLayout}
           onClick={onArrangeAll}
           data-testid="arrange-all">
           <AccountTreeIcon fontSize="small" />
         </IconButton>
-        <IconButton size="small" color="inherit" aria-label="share" onClick={onShare} data-testid="share">
+        <IconButton size="small" color="inherit" aria-label="share" title="Share" onClick={onShare} data-testid="share">
           <ShareIcon fontSize="small" />
         </IconButton>