[core] feat(NonIdealState): new iconMuted prop (#6611)

Co-authored-by: Adi Dahiya <[email protected]>

Author: AlexKempen

packages/core/src/common/classes.ts

@@ -359,6 +359,7 @@ export const TREE_ROOT = `${NS}-tree-root`;
 export const ICON = `${NS}-icon`;
 export const ICON_STANDARD = `${ICON}-standard`;
 export const ICON_LARGE = `${ICON}-large`;
+export const ICON_MUTED = `${ICON}-muted`;
 
 /**
  * Returns the namespace prefix for all Blueprint CSS classes.

packages/core/src/components/forms/controlProps.ts

@@ -68,7 +68,7 @@ export interface ControlProps
     label?: string;
 
     /**
-     * JSX Element label for the control.
+     * JSX element label for the control.
      *
      * This prop is a workaround for TypeScript consumers as the type definition for `label` only
      * accepts strings. JavaScript consumers can provide a JSX element directly to `label`.

packages/core/src/components/icon/_icon.scss

@@ -33,6 +33,25 @@
       fill: currentcolor;
     }
   }
+
+  // muted icon style used by NonIdealState
+  &.#{$ns}-icon-muted svg {
+    fill-opacity: 15%;
+    // need to show overflow for some strokes on paths that reach the edge of the icon bounding box
+    overflow: visible;
+
+    path {
+      stroke: $gray3;
+      stroke-opacity: 50%;
+      stroke-width: 0.5px;
+    }
+  }
+
+  .#{$ns}-dark & {
+    .#{$ns}-icon-muted svg {
+      fill-opacity: 20%;
+    }
+  }
 }
 
 // intent colors for both SVG and font icons are set in _typography-colors.scss

packages/core/src/components/non-ideal-state/_non-ideal-state.scss

@@ -10,7 +10,7 @@ Non-ideal state
 Markup:
 <div class="#{$ns}-non-ideal-state">
   <div class="#{$ns}-non-ideal-state-visual" style="font-size: 48px; line-height: 48px;">
-    <span class="#{$ns}-icon #{$ns}-icon-folder-open"></span>
+    <span class="#{$ns}-icon #{$ns}-icon-muted #{$ns}-icon-folder-open"></span>
   </div>
   <div class="#{$ns}-non-ideal-state-text">
     <h4 class="#{$ns}-heading">This folder is empty</h4>
@@ -68,22 +68,4 @@ Styleguide non-ideal-state
 
 .#{$ns}-non-ideal-state-visual {
   color: $gray3;
-
-  .#{$ns}-icon svg {
-    fill-opacity: 15%;
-    // need to show overflow for some strokes on paths that reach the edge of the icon bounding box
-    overflow: visible;
-
-    path {
-      stroke: $gray3;
-      stroke-opacity: 50%;
-      stroke-width: 0.5px;
-    }
-  }
-
-  .#{$ns}-dark & {
-    .#{$ns}-icon svg {
-      fill-opacity: 20%;
-    }
-  }
 }

packages/core/src/components/non-ideal-state/non-ideal-state.md

@@ -7,12 +7,12 @@ parent: components
 Non-ideal UI states inform the user that some content is unavailable. There are several types of non-ideal states,
 including:
 
-* **Empty state:** a container has just been created and has no data in it yet, or a container's contents have been
-  intentionally removed.
-* **Loading state:** a container is awaiting data. A good practice is to show a spinner for this state with optional
-  explanatory text below the spinner.
-* **Error state:** something went wrong (for instance, 404 and 500 HTTP errors). In this case, a good practice is to
-  add a call to action directing the user what to do next.
+*   **Empty state:** a container has just been created and has no data in it yet, or a container's contents have been
+    intentionally removed.
+*   **Loading state:** a container is awaiting data. A good practice is to show a spinner for this state with optional
+    explanatory text below the spinner.
+*   **Error state:** something went wrong (for instance, 404 and 500 HTTP errors). In this case, a good practice is to
+    add a call to action directing the user what to do next.
 
 @reactExample NonIdealStateExample
 
@@ -27,8 +27,7 @@ __NonIdealState__ component props are rendered in this order in the DOM, with co
 
 By default, a vertical layout is used, but you can make it horizontal with `layout="horizontal"`.
 
-Icons take on a muted appearance inside this component, but their shape contrast is preserved by adding a small stroke
-to the SVG paths.
+Icons will also take on a muted appearance inside this component, with their shape contrast preserved by adding a small stroke to the SVG paths. This behavior can be disabled by setting `iconMuted={false}`.
 
 @## Props interface
 

packages/core/src/components/non-ideal-state/nonIdealState.tsx

@@ -46,7 +46,7 @@ export interface NonIdealStateProps extends Props {
      */
     description?: React.ReactChild;
 
-    /** The name of a Blueprint icon or a JSX Element (such as `<Spinner/>`) to render above the title. */
+    /** The name of a Blueprint icon or a JSX element (such as `<Spinner/>`) to render above the title. */
     icon?: IconName | MaybeElement;
 
     /**
@@ -56,6 +56,13 @@ export interface NonIdealStateProps extends Props {
      */
     iconSize?: NonIdealStateIconSize;
 
+    /**
+     * Whether the icon should use a muted style.
+     *
+     * @default true
+     */
+    iconMuted?: boolean;
+
     /**
      * Component layout, either vertical or horizontal.
      *
@@ -76,6 +83,7 @@ export class NonIdealState extends AbstractPureComponent<NonIdealStateProps> {
     public static displayName = `${DISPLAYNAME_PREFIX}.NonIdealState`;
 
     public static defaultProps: Partial<NonIdealStateProps> = {
+        iconMuted: true,
         iconSize: NonIdealStateIconSize.STANDARD,
         layout: "vertical",
     };
@@ -94,7 +102,7 @@ export class NonIdealState extends AbstractPureComponent<NonIdealStateProps> {
     }
 
     private maybeRenderVisual() {
-        const { icon, iconSize } = this.props;
+        const { icon, iconMuted, iconSize } = this.props;
         if (icon == null) {
             return undefined;
         } else {
@@ -103,7 +111,13 @@ export class NonIdealState extends AbstractPureComponent<NonIdealStateProps> {
                     className={Classes.NON_IDEAL_STATE_VISUAL}
                     style={{ fontSize: `${iconSize}px`, lineHeight: `${iconSize}px` }}
                 >
-                    <Icon icon={icon} size={iconSize} aria-hidden={true} tabIndex={-1} />
+                    <Icon
+                        className={classNames({ [Classes.ICON_MUTED]: iconMuted })}
+                        icon={icon}
+                        size={iconSize}
+                        aria-hidden={true}
+                        tabIndex={-1}
+                    />
                 </div>
             );
         }

packages/core/test/non-ideal-state/nonIdealStateTests.tsx

@@ -25,17 +25,22 @@ describe("<NonIdealState>", () => {
         const wrapper = shallow(
             <NonIdealState
                 action={<p>More text!</p>}
-                description="An error occured."
+                description="An error occurred."
                 title="ERROR"
                 icon="folder-close"
             />,
         );
         assert.exists(wrapper.find(H4), "missing H4");
-        [Classes.NON_IDEAL_STATE_VISUAL, Classes.NON_IDEAL_STATE].forEach(className => {
-            assert.isTrue(wrapper.find(`.${className}`).exists(), `missing ${className}`);
+        [Classes.NON_IDEAL_STATE_VISUAL, Classes.ICON_MUTED, Classes.NON_IDEAL_STATE].forEach(className => {
+            assert.exists(wrapper.find(`.${className}`), `missing ${className}`);
         });
     });
 
+    it("does not apply icon muted style", () => {
+        const wrapper = shallow(<NonIdealState title="ERROR" icon="folder-close" iconMuted={false} />);
+        assert.isFalse(wrapper.find(`.${Classes.ICON_MUTED}`).exists(), `unexpected ${Classes.ICON_MUTED}`);
+    });
+
     it("ensures description is wrapped in an element", () => {
         const wrapper = shallow(<NonIdealState action={<strong />} description="foo" />);
         const div = wrapper.find(`.${Classes.NON_IDEAL_STATE_TEXT}`).children().find("div");