fix: Drawer PurePanel style missing (#37946)

* fix: Drawer PurePanel style missing * docs: clean up useless demo code
2 years ago · 2b15bdafac
5 changed files with 121 additions and 90 deletions
--- a/components/drawer/tests/snapshots/demo-extend.test.tsx.snap
+++ b/components/drawer/tests/snapshots/demo-extend.test.tsx.snap
@ -2974,59 +2974,63 @@ exports[`renders ./components/drawer/demo/render-in-current.md extend context co

 exports[`renders ./components/drawer/demo/render-panel.md extend context correctly 1`] = `
 <div
-  class="ant-drawer ant-drawer-pure"
-  style="height: 300px; box-shadow: 0 0 5px red;"
+  style="padding: 32px; background: rgb(230, 230, 230);"
 >
  <div
-    class="ant-drawer-wrapper-body"
+    class="ant-drawer ant-drawer-pure ant-drawer-right"
+    style="height: 300px;"
  >
    <div
-      class="ant-drawer-header"
+      class="ant-drawer-wrapper-body"
    >
      <div
-        class="ant-drawer-header-title"
+        class="ant-drawer-header"
      >
-        <button
-          aria-label="Close"
-          class="ant-drawer-close"
-          type="button"
+        <div
+          class="ant-drawer-header-title"
        >
-          <span
-            aria-label="close"
-            class="anticon anticon-close"
-            role="img"
+          <button
+            aria-label="Close"
+            class="ant-drawer-close"
+            type="button"
          >
-            <svg
-              aria-hidden="true"
-              data-icon="close"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+            <span
+              aria-label="close"
+              class="anticon anticon-close"
+              role="img"
            >
-              <path
-                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-              />
-            </svg>
-          </span>
-        </button>
-        <div
-          class="ant-drawer-title"
-        >
-          Hello Title
+              <svg
+                aria-hidden="true"
+                data-icon="close"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                />
+              </svg>
+            </span>
+          </button>
+          <div
+            class="ant-drawer-title"
+          >
+            Hello Title
+          </div>
        </div>
      </div>
-    </div>
-    <div
-      class="ant-drawer-body"
-    >
-      Hello Content
-    </div>
-    <div
-      class="ant-drawer-footer"
-    >
-      Footer!
+      <div
+        class="ant-drawer-body"
+      >
+        Hello Content
+      </div>
+      <div
+        class="ant-drawer-footer"
+      >
+        Footer!
+      </div>
    </div>
  </div>
 </div>
--- a/components/drawer/tests/snapshots/demo.test.ts.snap
+++ b/components/drawer/tests/snapshots/demo.test.ts.snap
@ -333,59 +333,63 @@ exports[`renders ./components/drawer/demo/render-in-current.md correctly 1`] = `

 exports[`renders ./components/drawer/demo/render-panel.md correctly 1`] = `
 <div
-  class="ant-drawer ant-drawer-pure"
-  style="height: 300px; box-shadow: 0 0 5px red;"
+  style="padding: 32px; background: rgb(230, 230, 230);"
 >
  <div
-    class="ant-drawer-wrapper-body"
+    class="ant-drawer ant-drawer-pure ant-drawer-right"
+    style="height: 300px;"
  >
    <div
-      class="ant-drawer-header"
+      class="ant-drawer-wrapper-body"
    >
      <div
-        class="ant-drawer-header-title"
+        class="ant-drawer-header"
      >
-        <button
-          aria-label="Close"
-          class="ant-drawer-close"
-          type="button"
+        <div
+          class="ant-drawer-header-title"
        >
-          <span
-            aria-label="close"
-            class="anticon anticon-close"
-            role="img"
+          <button
+            aria-label="Close"
+            class="ant-drawer-close"
+            type="button"
          >
-            <svg
-              aria-hidden="true"
-              data-icon="close"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+            <span
+              aria-label="close"
+              class="anticon anticon-close"
+              role="img"
            >
-              <path
-                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-              />
-            </svg>
-          </span>
-        </button>
-        <div
-          class="ant-drawer-title"
-        >
-          Hello Title
+              <svg
+                aria-hidden="true"
+                data-icon="close"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                />
+              </svg>
+            </span>
+          </button>
+          <div
+            class="ant-drawer-title"
+          >
+            Hello Title
+          </div>
        </div>
      </div>
-    </div>
-    <div
-      class="ant-drawer-body"
-    >
-      Hello Content
-    </div>
-    <div
-      class="ant-drawer-footer"
-    >
-      Footer!
+      <div
+        class="ant-drawer-body"
+      >
+        Hello Content
+      </div>
+      <div
+        class="ant-drawer-footer"
+      >
+        Footer!
+      </div>
    </div>
  </div>
 </div>
--- a/components/drawer/demo/render-panel.md
+++ b/components/drawer/demo/render-panel.md
@ -22,12 +22,10 @@ import { Drawer } from 'antd';
 const { _InternalPanelDoNotUseOrYouWillBeFired: InternalDrawer } = Drawer;

 export default () => (
-  <InternalDrawer
-    title="Hello Title"
-    style={{ height: 300, boxShadow: '0 0 5px red' }}
-    footer="Footer!"
-  >
-    Hello Content
-  </InternalDrawer>
+  <div style={{ padding: 32, background: '#e6e6e6' }}>
+    <InternalDrawer title="Hello Title" style={{ height: 300 }} footer="Footer!">
+      Hello Content
+    </InternalDrawer>
+  </div>
 );
 ```
--- a/components/drawer/index.tsx
+++ b/components/drawer/index.tsx
@ -150,11 +150,13 @@ function PurePanel({
  prefixCls: customizePrefixCls,
  style,
  className,
+  placement = 'right',
  ...restProps
 }: Omit<DrawerPanelProps, 'prefixCls' | 'drawerStyle'> & {
  prefixCls?: string;
  style?: React.CSSProperties;
  className?: string;
+  placement?: DrawerProps['placement'];
 }) {
  const { getPrefixCls } = React.useContext(ConfigContext);

@ -164,7 +166,16 @@ function PurePanel({
  const [wrapSSR, hashId] = useStyle(prefixCls);

  return wrapSSR(
-    <div className={classNames(prefixCls, `${prefixCls}-pure`, hashId, className)} style={style}>
+    <div
+      className={classNames(
+        prefixCls,
+        `${prefixCls}-pure`,
+        `${prefixCls}-${placement}`,
+        hashId,
+        className,
+      )}
+      style={style}
+    >
      <DrawerPanel prefixCls={prefixCls} {...restProps} />
    </div>,
  );
--- a/components/drawer/style/index.tsx
+++ b/components/drawer/style/index.tsx
@ -47,6 +47,20 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {

      '&-pure': {
        position: 'relative',
+        background: colorBgElevated,
+
+        [`&${componentCls}-left`]: {
+          boxShadow: token.boxShadowDrawerLeft,
+        },
+        [`&${componentCls}-right`]: {
+          boxShadow: token.boxShadowDrawerRight,
+        },
+        [`&${componentCls}-top`]: {
+          boxShadow: token.boxShadowDrawerUp,
+        },
+        [`&${componentCls}-bottom`]: {
+          boxShadow: token.boxShadowDrawerDown,
+        },
      },

      '&-inline': {