feat: support responsive for listing table

lerna.json

@@ -2,7 +2,7 @@
     "packages": ["packages/*"],
     "npmClient": "yarn",
     "useWorkspaces": true,
-    "version": "0.11.9",
+    "version": "0.12.0-alpha.7",
     "command": {
         "version": {
             "message": "chore(release): publish %s"

packages/apsara-icons/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@goto-company/icons",
-    "version": "0.11.9",
+    "version": "0.12.0-alpha.7",
     "description": "Apsara icons",
     "scripts": {
         "build": "node scripts/build.js",

packages/apsara-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@goto-company/apsara",
-    "version": "0.11.9",
+    "version": "0.12.0-alpha.7",
     "description": "A list of base components for apsara",
     "author": "Praveen Yadav <[email protected]>",
     "license": "Apache-2.0",

packages/apsara-ui/src/Header/Header.styles.tsx

@@ -62,6 +62,12 @@ export const Wrapper = styled.div`
     background-color: ${({ theme }) => theme?.header?.menuBg};
     border-bottom: solid 1px ${({ theme }) => theme?.colors?.black[3]};
     line-height: 64px;
+    @media (max-width: 768px) {
+        padding: 0 24px;
+    }
+    @media (max-width: 480px) {
+        padding: 0 16px;
+    }
 `;
 
 export const RightBar = styled.div`

packages/apsara-ui/src/Listing/Filters/Filters.styles.tsx

@@ -18,10 +18,12 @@ export const FilterPopup = styled.div`
 export const FilterBody = styled.div`
     display: flex;
     flex-direction: row;
+    overflow-x: auto;
 `;
 
 export const FilterColumn = styled.div`
-    min-width: 162px;
+    width: max-content;
+    flex-shrink: 0;
     padding: 16px 24px 2px 24px;
 
     &:not(:last-child) {

packages/apsara-ui/src/Listing/Listing.styles.tsx

@@ -11,7 +11,41 @@ export const ListingWrapper = styled.div`
 export const ListingSearch: React.FC<SearchProps> = styled(Search)`
     margin-bottom: 20px;
     .search_input {
-        margin-right: 10px !important;
+        margin-right: 1%;
+    }
+    .apsara-listing-extra-actions {
+        display: flex;
+        align-items: center;
+        width: 30%;
+        display: flex;
+        justify-content: flex-end;
+        @media (max-width: 768px) {
+            width: 64%;
+        }
+    }
+
+    @media (max-width: 768px) {
+        &:has(.apsara-listing-extra-actions) {
+            flex-wrap: wrap;
+            .apsara-input {
+                width: 80%;
+            }
+            .popover-trigger {
+                width: 19%;
+                button {
+                    width: 100%;
+                }
+            }
+            .apsara-listing-extra-actions {
+                padding: 0;
+                order: -1;
+                margin-bottom: 8px;
+                margin-left: auto;
+                width: 100%;
+                display: flex;
+                justify-content: flex-end;
+            }
+        }
     }
 `;
 

packages/apsara-ui/src/Listing/Listing.tsx

@@ -5,6 +5,7 @@ import VirtualisedTable from "../TableV2/VirtualisedTable";
 import useSearchFilter from "./hooks/useSearchFilter";
 import { ListingProps } from "./Listing.types";
 import { ListingSearch, ListingWrapper } from "./Listing.styles";
+import { prefixCls } from "./constants";
 
 function Listing<T>({
     className = "",
@@ -59,7 +60,7 @@ function Listing<T>({
                     />
                 )}
                 {renderExtraFilters}
-                {renderExtraItems}
+                {renderExtraItems && <div className={`${prefixCls}-extra-actions`}>{renderExtraItems}</div>}
             </ListingSearch>
         );
     }

packages/apsara-ui/src/Listing/constants.ts

@@ -0,0 +1 @@
+export const prefixCls = "apsara-listing";

packages/apsara-ui/src/Popover/Popover.stories.tsx

@@ -32,6 +32,7 @@ export const popoverContent = () => {
                     text: "Cancel",
                     style: { marginLeft: "10px" },
                 }}
+                popperContentProps={{ alignOffset: -80 }}
             >
                 <Button>Default Button</Button>
             </Popover>

packages/apsara-ui/src/Popover/Popover.styles.tsx

@@ -39,6 +39,8 @@ export const Footer = styled.div`
 `;
 
 export const StyledContent = styled(PopoverPrimitive.Content)`
+    max-width: 90vw;
+    overflow: hidden;
     border-radius: 4px;
     padding: 20px;
     width: max-content;

packages/apsara-ui/src/Popover/Popover.tsx

@@ -68,6 +68,7 @@ export const PopoverContent = ({
 
 interface ButtonConfirmationPopover extends ButtonPopoverContentProps {
     children?: React.ReactNode;
+    popperContentProps?: PopoverPrimitive.PopperContentProps;
 }
 
 function ConfirmationPopover({
@@ -81,6 +82,7 @@ function ConfirmationPopover({
     okBtnProps,
     cancelBtnProps,
     children,
+    popperContentProps = {},
 }: ButtonConfirmationPopover) {
     const [internalOpen, setInternalOpen] = useState(false);
     const controlled = typeof open !== "boolean";
@@ -123,7 +125,7 @@ function ConfirmationPopover({
                 <span aria-label="Update dimensions">{children}</span>
             </PopoverTrigger>
             <PopoverPrimitive.Portal>
-                <StyledContent className="apsara-popover-content" side="bottom" align="end">
+                <StyledContent className="apsara-popover-content" side="bottom" align="end" {...popperContentProps}>
                     <PopoverContent
                         title={title}
                         message={message}