Merge pull request #651 from illacloud/develop

Develop
illacloud · Jan 6, 2023 · 5800f17 · 5800f17
2 parents bbffccc + af07669
commit 5800f17
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 19 deletions.
diff --git a/packages/drawer/src/drawer.tsx b/packages/drawer/src/drawer.tsx
@@ -13,7 +13,6 @@ import { CloseIcon } from "@illa-design/icon"
 import { Button } from "@illa-design/button"
 import {
   applyDrawerCloseIcon,
-  applyDrawerContent,
   applyDrawerFooter,
   applyDrawerHeader,
   applyDrawerMask,
@@ -23,6 +22,7 @@ import {
   applyDrawerTitle,
   applyDrawerWrapper,
   applyModalCancelBtn,
+  fullStyle,
   maskAnimation,
 } from "./style"
 import { applyBoxStyle, deleteCssProps } from "@illa-design/theme"
@@ -57,7 +57,7 @@ export const Drawer = forwardRef<HTMLDivElement, DrawerProps>((props, ref) => {
 
   const renderDrawer = () => {
     const element = (
-      <RemoveScroll>
+      <RemoveScroll css={fullStyle}>
         <div css={applyDrawerScroll} {...deleteCssProps(otherProps)}>
           {title && (
             <div css={applyDrawerHeader}>
@@ -69,7 +69,7 @@ export const Drawer = forwardRef<HTMLDivElement, DrawerProps>((props, ref) => {
               <CloseIcon />
             </div>
           )}
-          <div css={applyDrawerContent}>{children}</div>
+          {children}
           {footer && (
             <div css={applyDrawerFooter}>
               <Button
@@ -89,7 +89,7 @@ export const Drawer = forwardRef<HTMLDivElement, DrawerProps>((props, ref) => {
       </RemoveScroll>
     )
     return focusLock ? (
-      <FocusLock disabled={!visible} autoFocus={autoFocus}>
+      <FocusLock css={fullStyle} disabled={!visible} autoFocus={autoFocus}>
         {element}
       </FocusLock>
     ) : (

diff --git a/packages/drawer/src/style.tsx b/packages/drawer/src/style.tsx
@@ -29,10 +29,10 @@ export function applyDrawerWrapper(isFixed?: boolean): SerializedStyles {
 }
 
 export const applyDrawerScroll = css`
-  overflow: auto;
+  position: relative;
+  overflow-y: auto;
+  width: 100%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
 `
 
 export const applyDrawerMask = css`
@@ -74,16 +74,10 @@ export const applyDrawerCloseIcon = css`
   line-height: 0;
 `
 
-export const applyDrawerContent = css`
-  position: relative;
-  flex: 1;
-  box-sizing: border-box;
-  height: 100%;
-  overflow: auto;
-  padding: 12px 24px;
-`
-
 export const applyDrawerFooter = css`
+  width: 100%;
+  position: absolute;
+  bottom: 0;
   box-sizing: border-box;
   flex-shrink: 0;
   text-align: right;
@@ -139,3 +133,8 @@ export function applyDrawerSlider(placement?: DrawerPlacement): Variants {
     },
   }
 }
+
+export const fullStyle = css`
+  width: 100%;
+  height: 100%;
+`
diff --git a/packages/select/src/style.tsx b/packages/select/src/style.tsx
@@ -100,7 +100,6 @@ export function applySelectView(
     transition: all 200ms ease-in-out;
     box-sizing: border-box;
     width: 100%;
-    font-size: 14px;
     border: solid 1px ${globalColor(`--${illaPrefix}-grayBlue-08`)};
     color: ${globalColor(`--${illaPrefix}-grayBlue-02`)};
     cursor: pointer;
@@ -156,7 +155,6 @@ export function applySelectViewText(
 ): SerializedStyles {
   return css`
     width: 100%;
-    font-size: 14px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -263,7 +261,6 @@ export function applyOptionStyle(
     box-sizing: border-box;
     width: 100%;
     padding: 0 12px;
-    font-size: 14px;
     text-align: left;
     cursor: pointer;
     line-height: ${OPTION_LINE_HEIGHT}px;
@@ -309,5 +306,6 @@ export function applySelectViewStyle(): SerializedStyles {
     display: flex;
     flex-direction: row;
     width: 100%;
+    font-size: 14px;
   `
 }