diff --git a/lerna.json b/lerna.json index 621b01195..0d4777f15 100644 --- a/lerna.json +++ b/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" diff --git a/packages/apsara-icons/package.json b/packages/apsara-icons/package.json index 5e715f4bb..fef99ef35 100644 --- a/packages/apsara-icons/package.json +++ b/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", diff --git a/packages/apsara-ui/package.json b/packages/apsara-ui/package.json index 7ca5002f7..db8fa94af 100644 --- a/packages/apsara-ui/package.json +++ b/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 ", "license": "Apache-2.0", diff --git a/packages/apsara-ui/src/Header/Header.styles.tsx b/packages/apsara-ui/src/Header/Header.styles.tsx index 7b347e10b..3e141856f 100644 --- a/packages/apsara-ui/src/Header/Header.styles.tsx +++ b/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` diff --git a/packages/apsara-ui/src/Listing/Filters/Filters.styles.tsx b/packages/apsara-ui/src/Listing/Filters/Filters.styles.tsx index dfcd6d2fc..875f70a70 100644 --- a/packages/apsara-ui/src/Listing/Filters/Filters.styles.tsx +++ b/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) { diff --git a/packages/apsara-ui/src/Listing/Listing.styles.tsx b/packages/apsara-ui/src/Listing/Listing.styles.tsx index bd553fef0..7704421d2 100644 --- a/packages/apsara-ui/src/Listing/Listing.styles.tsx +++ b/packages/apsara-ui/src/Listing/Listing.styles.tsx @@ -11,7 +11,41 @@ export const ListingWrapper = styled.div` export const ListingSearch: React.FC = 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; + } + } } `; diff --git a/packages/apsara-ui/src/Listing/Listing.tsx b/packages/apsara-ui/src/Listing/Listing.tsx index de4f9dc51..a2c4a4410 100644 --- a/packages/apsara-ui/src/Listing/Listing.tsx +++ b/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({ className = "", @@ -59,7 +60,7 @@ function Listing({ /> )} {renderExtraFilters} - {renderExtraItems} + {renderExtraItems &&
{renderExtraItems}
} ); } diff --git a/packages/apsara-ui/src/Listing/constants.ts b/packages/apsara-ui/src/Listing/constants.ts new file mode 100644 index 000000000..273c989d2 --- /dev/null +++ b/packages/apsara-ui/src/Listing/constants.ts @@ -0,0 +1 @@ +export const prefixCls = "apsara-listing"; diff --git a/packages/apsara-ui/src/Popover/Popover.stories.tsx b/packages/apsara-ui/src/Popover/Popover.stories.tsx index 079b385e5..cce6dea54 100644 --- a/packages/apsara-ui/src/Popover/Popover.stories.tsx +++ b/packages/apsara-ui/src/Popover/Popover.stories.tsx @@ -32,6 +32,7 @@ export const popoverContent = () => { text: "Cancel", style: { marginLeft: "10px" }, }} + popperContentProps={{ alignOffset: -80 }} > diff --git a/packages/apsara-ui/src/Popover/Popover.styles.tsx b/packages/apsara-ui/src/Popover/Popover.styles.tsx index 333e4dd7e..fa692a413 100644 --- a/packages/apsara-ui/src/Popover/Popover.styles.tsx +++ b/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; diff --git a/packages/apsara-ui/src/Popover/Popover.tsx b/packages/apsara-ui/src/Popover/Popover.tsx index 5038e200a..ca45d02f7 100644 --- a/packages/apsara-ui/src/Popover/Popover.tsx +++ b/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({ {children} - +