diff --git a/components/docked-composer/__docs__/__snapshots__/storybook-stories.storyshot b/components/docked-composer/__docs__/__snapshots__/storybook-stories.storyshot
index 885e1e1be8..dc95532a01 100644
--- a/components/docked-composer/__docs__/__snapshots__/storybook-stories.storyshot
+++ b/components/docked-composer/__docs__/__snapshots__/storybook-stories.storyshot
@@ -5,337 +5,97 @@ exports[`DOM snapshots SLDSDockedComposer Default 1`] = `
   className="slds-p-around_medium"
 >
   <div
-    className="slds-docked_container"
-    id="docked-composer-container"
+    style={
+      Object {
+        "height": "500px",
+        "position": "relative",
+      }
+    }
   >
-    <section
-      aria-describedby="docked-composer-body"
-      aria-labelledby="docked-composer-dialog-heading"
-      className="slds-docked-composer slds-grid slds-grid_vertical slds-is-open"
-      role="dialog"
+    <div
+      className="slds-docked_container"
+      id="docked-composer-container"
     >
-      <header
-        aria-live="assertive"
-        className="slds-docked-composer__header slds-grid slds-shrink-none"
+      <section
+        aria-describedby="docked-composer-body"
+        aria-labelledby="docked-composer-dialog-heading"
+        className="slds-docked-composer slds-grid slds-grid_vertical slds-is-open"
+        role="dialog"
       >
-        <div
-          className="slds-media slds-media_center slds-no-space"
+        <header
+          aria-live="assertive"
+          className="slds-docked-composer__header slds-grid slds-shrink-none"
         >
           <div
-            className="slds-media__body"
+            className="slds-media slds-media_center slds-no-space"
           >
-            <h2
-              className="slds-truncate"
-              id="docked-composer-dialog-heading"
-              title="What's New this Release?"
+            <div
+              className="slds-media__body"
             >
-              What's New this Release?
-            </h2>
+              <h2
+                className="slds-truncate"
+                id="docked-composer-dialog-heading"
+                title="What's New this Release?"
+              >
+                What's New this Release?
+              </h2>
+            </div>
           </div>
-        </div>
-        <div
-          className="slds-col_bump-left slds-shrink-none"
-        >
-          <button
-            className="slds-button slds-button_icon slds-button_icon-bare"
-            disabled={false}
-            id="docked-composer-minimize-button"
-            onClick={[Function]}
-            title="Minimize"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="slds-button__icon"
-            >
-              <use
-                href="/assets/icons/utility-sprite/svg/symbols.svg#minimize_window"
-              />
-            </svg>
-            <span
-              className="slds-assistive-text"
-            >
-              Minimize
-            </span>
-          </button>
-          <button
-            className="slds-button slds-button_icon slds-button_icon-bare"
-            disabled={false}
-            id="docked-composer-close-button"
-            onClick={[Function]}
-            title="Close"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="slds-button__icon"
-            >
-              <use
-                href="/assets/icons/utility-sprite/svg/symbols.svg#close"
-              />
-            </svg>
-            <span
-              className="slds-assistive-text"
-            >
-              Close
-            </span>
-          </button>
-        </div>
-      </header>
-      <div
-        className="slds-docked-composer__body"
-        id="docked-composer-body"
-      >
-        <ul
-          className="slds-accordion"
-          name="base-example-accordion"
-        >
-          <li
-            className="slds-accordion__list-item"
+          <div
+            className="slds-col_bump-left slds-shrink-none"
           >
-            <section
-              className="slds-accordion__section"
+            <button
+              className="slds-button slds-button_icon slds-button_icon-bare"
+              disabled={false}
+              id="docked-composer-minimize-button"
+              onClick={[Function]}
+              title="Minimize"
+              type="button"
             >
-              <div
-                className="slds-accordion__summary"
+              <svg
+                aria-hidden="true"
+                className="slds-button__icon"
               >
-                <h3
-                  className="slds-text-heading_small slds-accordion__summary-heading slds-has-flexi-truncate"
-                >
-                  <button
-                    aria-controls="1-accordion-panel"
-                    aria-expanded={false}
-                    className="slds-button slds-button_reset slds-accordion__summary-action"
-                    disabled={false}
-                    id="1-accordion-button"
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      className="slds-button__icon slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left"
-                    >
-                      <use
-                        href="/assets/icons/utility-sprite/svg/symbols.svg#switch"
-                      />
-                    </svg>
-                    <span
-                      className="slds-truncate"
-                      title="Accordion Summary"
-                    >
-                      Accordion Summary
-                    </span>
-                  </button>
-                </h3>
-                <div
-                  className="slds-dropdown-trigger slds-dropdown-trigger_click"
-                  id="1"
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onKeyDown={[Function]}
-                  onMouseEnter={null}
-                  onMouseLeave={null}
-                >
-                  <button
-                    aria-expanded={false}
-                    aria-haspopup={true}
-                    className="slds-button slds-button_icon-border-filled slds-button_icon-x-small ignore-click-1 slds-shrink-none"
-                    disabled={false}
-                    onClick={[Function]}
-                    tabIndex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      className="slds-button__icon"
-                    >
-                      <use
-                        href="/assets/icons/utility-sprite/svg/symbols.svg#down"
-                      />
-                    </svg>
-                    <span
-                      className="slds-assistive-text"
-                    >
-                      More Options
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <div
-                aria-hidden={true}
-                className="slds-accordion__content"
-                id="1-accordion-panel"
+                <use
+                  href="/assets/icons/utility-sprite/svg/symbols.svg#minimize_window"
+                />
+              </svg>
+              <span
+                className="slds-assistive-text"
               >
-                Accordion details - A
-              </div>
-            </section>
-          </li>
-          <li
-            className="slds-accordion__list-item"
-          >
-            <section
-              className="slds-accordion__section"
+                Minimize
+              </span>
+            </button>
+            <button
+              className="slds-button slds-button_icon slds-button_icon-bare"
+              disabled={false}
+              id="docked-composer-close-button"
+              onClick={[Function]}
+              title="Close"
+              type="button"
             >
-              <div
-                className="slds-accordion__summary"
-              >
-                <h3
-                  className="slds-text-heading_small slds-accordion__summary-heading slds-has-flexi-truncate"
-                >
-                  <button
-                    aria-controls="2-accordion-panel"
-                    aria-expanded={false}
-                    className="slds-button slds-button_reset slds-accordion__summary-action"
-                    disabled={false}
-                    id="2-accordion-button"
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      className="slds-button__icon slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left"
-                    >
-                      <use
-                        href="/assets/icons/utility-sprite/svg/symbols.svg#switch"
-                      />
-                    </svg>
-                    <span
-                      className="slds-truncate"
-                      title="Accordion Summary"
-                    >
-                      Accordion Summary
-                    </span>
-                  </button>
-                </h3>
-                <div
-                  className="slds-dropdown-trigger slds-dropdown-trigger_click"
-                  id="2"
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onKeyDown={[Function]}
-                  onMouseEnter={null}
-                  onMouseLeave={null}
-                >
-                  <button
-                    aria-expanded={false}
-                    aria-haspopup={true}
-                    className="slds-button slds-button_icon-border-filled slds-button_icon-x-small ignore-click-2 slds-shrink-none"
-                    disabled={false}
-                    onClick={[Function]}
-                    tabIndex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      className="slds-button__icon"
-                    >
-                      <use
-                        href="/assets/icons/utility-sprite/svg/symbols.svg#down"
-                      />
-                    </svg>
-                    <span
-                      className="slds-assistive-text"
-                    >
-                      More Options
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <div
-                aria-hidden={true}
-                className="slds-accordion__content"
-                id="2-accordion-panel"
+              <svg
+                aria-hidden="true"
+                className="slds-button__icon"
               >
-                Accordion details - B
-              </div>
-            </section>
-          </li>
-          <li
-            className="slds-accordion__list-item"
-          >
-            <section
-              className="slds-accordion__section"
-            >
-              <div
-                className="slds-accordion__summary"
+                <use
+                  href="/assets/icons/utility-sprite/svg/symbols.svg#close"
+                />
+              </svg>
+              <span
+                className="slds-assistive-text"
               >
-                <h3
-                  className="slds-text-heading_small slds-accordion__summary-heading slds-has-flexi-truncate"
-                >
-                  <button
-                    aria-controls="3-accordion-panel"
-                    aria-expanded={false}
-                    className="slds-button slds-button_reset slds-accordion__summary-action"
-                    disabled={false}
-                    id="3-accordion-button"
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      className="slds-button__icon slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left"
-                    >
-                      <use
-                        href="/assets/icons/utility-sprite/svg/symbols.svg#switch"
-                      />
-                    </svg>
-                    <span
-                      className="slds-truncate"
-                      title="Accordion Summary"
-                    >
-                      Accordion Summary
-                    </span>
-                  </button>
-                </h3>
-                <div
-                  className="slds-dropdown-trigger slds-dropdown-trigger_click"
-                  id="3"
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onKeyDown={[Function]}
-                  onMouseEnter={null}
-                  onMouseLeave={null}
-                >
-                  <button
-                    aria-expanded={false}
-                    aria-haspopup={true}
-                    className="slds-button slds-button_icon-border-filled slds-button_icon-x-small ignore-click-3 slds-shrink-none"
-                    disabled={false}
-                    onClick={[Function]}
-                    tabIndex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      className="slds-button__icon"
-                    >
-                      <use
-                        href="/assets/icons/utility-sprite/svg/symbols.svg#down"
-                      />
-                    </svg>
-                    <span
-                      className="slds-assistive-text"
-                    >
-                      More Options
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <div
-                aria-hidden={true}
-                className="slds-accordion__content"
-                id="3-accordion-panel"
-              >
-                Accordion details - C
-              </div>
-            </section>
-          </li>
-        </ul>
-      </div>
-    </section>
+                Close
+              </span>
+            </button>
+          </div>
+        </header>
+        <div
+          className="slds-docked-composer__body"
+          id="docked-composer-body"
+        />
+      </section>
+    </div>
   </div>
 </div>
 `;
@@ -345,84 +105,93 @@ exports[`DOM snapshots SLDSDockedComposer Minimized 1`] = `
   className="slds-p-around_medium"
 >
   <div
-    className="slds-docked_container hello-world"
-    id="docked-composer-container"
+    style={
+      Object {
+        "height": "500px",
+        "position": "relative",
+      }
+    }
   >
-    <section
-      aria-describedby="docked-composer-body"
-      aria-labelledby="docked-composer-dialog-heading"
-      className="slds-docked-composer slds-grid slds-grid_vertical slds-is-closed"
-      role="dialog"
+    <div
+      className="slds-docked_container hello-world"
+      id="docked-composer-container"
     >
-      <header
-        aria-live="assertive"
-        className="slds-docked-composer__header slds-grid slds-shrink-none"
+      <section
+        aria-describedby="docked-composer-body"
+        aria-labelledby="docked-composer-dialog-heading"
+        className="slds-docked-composer slds-grid slds-grid_vertical slds-is-closed"
+        role="dialog"
       >
-        <div
-          className="slds-media slds-media_center slds-no-space"
+        <header
+          aria-live="assertive"
+          className="slds-docked-composer__header slds-grid slds-shrink-none"
         >
           <div
-            className="slds-media__body"
+            className="slds-media slds-media_center slds-no-space"
           >
-            <h2
-              className="slds-truncate"
-              id="docked-composer-dialog-heading"
-              title="What's New this Release?"
+            <div
+              className="slds-media__body"
             >
-              What's New this Release?
-            </h2>
+              <h2
+                className="slds-truncate"
+                id="docked-composer-dialog-heading"
+                title="What's New this Release?"
+              >
+                What's New this Release?
+              </h2>
+            </div>
           </div>
-        </div>
-        <div
-          className="slds-col_bump-left slds-shrink-none"
-        >
-          <button
-            className="slds-button slds-button_icon slds-button_icon-bare"
-            disabled={false}
-            id="docked-composer-expand-button"
-            onClick={[Function]}
-            title="ExPaNd"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="slds-button__icon"
-            >
-              <use
-                href="/assets/icons/utility-sprite/svg/symbols.svg#expand_alt"
-              />
-            </svg>
-            <span
-              className="slds-assistive-text"
-            >
-              ExPaNd
-            </span>
-          </button>
-          <button
-            className="slds-button slds-button_icon slds-button_icon-bare"
-            disabled={false}
-            id="docked-composer-close-button"
-            onClick={[Function]}
-            title="ClOsE"
-            type="button"
+          <div
+            className="slds-col_bump-left slds-shrink-none"
           >
-            <svg
-              aria-hidden="true"
-              className="slds-button__icon"
+            <button
+              className="slds-button slds-button_icon slds-button_icon-bare"
+              disabled={false}
+              id="docked-composer-expand-button"
+              onClick={[Function]}
+              title="ExPaNd"
+              type="button"
             >
-              <use
-                href="/assets/icons/utility-sprite/svg/symbols.svg#close"
-              />
-            </svg>
-            <span
-              className="slds-assistive-text"
+              <svg
+                aria-hidden="true"
+                className="slds-button__icon"
+              >
+                <use
+                  href="/assets/icons/utility-sprite/svg/symbols.svg#expand_alt"
+                />
+              </svg>
+              <span
+                className="slds-assistive-text"
+              >
+                ExPaNd
+              </span>
+            </button>
+            <button
+              className="slds-button slds-button_icon slds-button_icon-bare"
+              disabled={false}
+              id="docked-composer-close-button"
+              onClick={[Function]}
+              title="ClOsE"
+              type="button"
             >
-              ClOsE
-            </span>
-          </button>
-        </div>
-      </header>
-    </section>
+              <svg
+                aria-hidden="true"
+                className="slds-button__icon"
+              >
+                <use
+                  href="/assets/icons/utility-sprite/svg/symbols.svg#close"
+                />
+              </svg>
+              <span
+                className="slds-assistive-text"
+              >
+                ClOsE
+              </span>
+            </button>
+          </div>
+        </header>
+      </section>
+    </div>
   </div>
 </div>
 `;
diff --git a/components/docked-composer/__examples__/base.jsx b/components/docked-composer/__examples__/base.jsx
index 1146853dd6..fc14f49934 100644
--- a/components/docked-composer/__examples__/base.jsx
+++ b/components/docked-composer/__examples__/base.jsx
@@ -1,16 +1,19 @@
 /* eslint-disable no-console, react/prop-types */
 import React from 'react';
 
+import IconSettings from '~/components/icon-settings';
 import DockedComposer from '~/components/docked-composer';
-import Accordion from '~/components/accordion/__examples__/base';
 
 class Example extends React.Component {
 	static displayName = 'DockedComposerExample';
 
-	state = {
-		isExpanded: true,
-		isOpen: true,
-	};
+	constructor() {
+		super();
+		this.state = {
+			isExpanded: true,
+			isOpen: true,
+		};
+	}
 
 	handleMinimize = (event, data) => {
 		this.setState({ isExpanded: false });
@@ -26,19 +29,27 @@ class Example extends React.Component {
 
 	render() {
 		return this.state.isOpen ? (
-			<DockedComposer
-				header="What's New this Release?"
-				body={<Accordion />}
-				id="docked-composer"
-				events={{
-					onRequestMinimize: this.handleMinimize,
-					onRequestExpand: this.handleExpand,
-					onRequestClose: this.handleClose,
-				}}
-				isOpen={this.state.isExpanded}
-			/>
+			<IconSettings iconPath="/assets/icons">
+				<div
+					style={{
+						height: '500px',
+						position: 'relative',
+					}}
+				>
+					<DockedComposer
+						header="What's New this Release?"
+						id="docked-composer"
+						events={{
+							onRequestMinimize: this.handleMinimize,
+							onRequestExpand: this.handleExpand,
+							onRequestClose: this.handleClose,
+						}}
+						isOpen={this.state.isExpanded}
+					/>
+				</div>
+			</IconSettings>
 		) : null;
 	}
 }
 
-export default Example;
+export default Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime
diff --git a/components/docked-composer/__examples__/minimized.jsx b/components/docked-composer/__examples__/minimized.jsx
index 2983a01e9a..7d449a0cc9 100644
--- a/components/docked-composer/__examples__/minimized.jsx
+++ b/components/docked-composer/__examples__/minimized.jsx
@@ -1,16 +1,19 @@
 /* eslint-disable no-console, react/prop-types */
 import React from 'react';
 
+import IconSettings from '~/components/icon-settings';
 import DockedComposer from '~/components/docked-composer';
-import Accordion from '~/components/accordion/__examples__/base';
 
-class Minimized extends React.Component {
+class Example extends React.Component {
 	static displayName = 'DockedComposerMinimized';
 
-	state = {
-		isExpanded: false,
-		isOpen: true,
-	};
+	constructor() {
+		super();
+		this.state = {
+			isExpanded: false,
+			isOpen: true,
+		};
+	}
 
 	handleMinimize = (event, data) => {
 		this.setState({ isExpanded: false });
@@ -26,25 +29,33 @@ class Minimized extends React.Component {
 
 	render() {
 		return this.state.isOpen ? (
-			<DockedComposer
-				header="What's New this Release?"
-				body={<Accordion />}
-				classNameContainer="hello-world"
-				assistiveText={{
-					expandButton: 'ExPaNd',
-					minimizeButton: 'MiNiMiZe',
-					closeButton: 'ClOsE',
-				}}
-				id="docked-composer"
-				events={{
-					onRequestMinimize: this.handleMinimize,
-					onRequestExpand: this.handleExpand,
-					onRequestClose: this.handleClose,
-				}}
-				isOpen={this.state.isExpanded}
-			/>
+			<IconSettings iconPath="/assets/icons">
+				<div
+					style={{
+						height: '500px',
+						position: 'relative',
+					}}
+				>
+					<DockedComposer
+						header="What's New this Release?"
+						classNameContainer="hello-world"
+						assistiveText={{
+							expandButton: 'ExPaNd',
+							minimizeButton: 'MiNiMiZe',
+							closeButton: 'ClOsE',
+						}}
+						id="docked-composer"
+						events={{
+							onRequestMinimize: this.handleMinimize,
+							onRequestExpand: this.handleExpand,
+							onRequestClose: this.handleClose,
+						}}
+						isOpen={this.state.isExpanded}
+					/>
+				</div>
+			</IconSettings>
 		) : null;
 	}
 }
 
-export default Minimized;
+export default Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime
diff --git a/package.json b/package.json
index 18b490f441..9fce6b4b67 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "design-system-react",
-	"version": "0.10.56",
+	"version": "0.10.57",
 	"description": "Salesforce Lightning Design System for React",
 	"license": "BSD-3-Clause",
 	"engines": {