-
Notifications
You must be signed in to change notification settings - Fork 3.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge remote-tracking branch 'origin/release' into test/frameworkfunc…
…tions
- Loading branch information
Showing
72 changed files
with
759 additions
and
634 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
38 changes: 38 additions & 0 deletions
38
app/client/packages/design-system/ads/src/Templates/EntityExplorer/ListWithHeader.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import React from "react"; | ||
| import { ListHeaderContainer } from "./styles"; | ||
| import { Text } from "../../Text"; | ||
| import { Flex } from "../../Flex"; | ||
|
|
||
| interface Props { | ||
| headerText: string; | ||
| headerControls?: React.ReactNode; | ||
| maxHeight?: string; | ||
| headerClassName?: string; | ||
| children: React.ReactNode | React.ReactNode[]; | ||
| } | ||
|
|
||
| export const ListWithHeader = (props: Props) => { | ||
| return ( | ||
| <Flex | ||
| flexDirection="column" | ||
| justifyContent="center" | ||
| maxHeight={props.maxHeight} | ||
| overflow="hidden" | ||
| > | ||
| <ListHeaderContainer className={props.headerClassName}> | ||
| <Text kind="heading-xs">{props.headerText}</Text> | ||
| {props.headerControls} | ||
| </ListHeaderContainer> | ||
| <Flex | ||
| alignItems="center" | ||
| flex="1" | ||
| flexDirection="column" | ||
| overflow="auto" | ||
| px="spaces-2" | ||
| width="100%" | ||
| > | ||
| {props.children} | ||
| </Flex> | ||
| </Flex> | ||
| ); | ||
| }; |
2 changes: 2 additions & 0 deletions
2
app/client/packages/design-system/ads/src/Templates/EntityExplorer/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export { ListItemContainer, ListHeaderContainer } from "./styles"; | ||
| export { ListWithHeader } from "./ListWithHeader"; |
23 changes: 23 additions & 0 deletions
23
app/client/packages/design-system/ads/src/Templates/EntityExplorer/styles.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import styled from "styled-components"; | ||
|
|
||
| export const ListItemContainer = styled.div` | ||
| width: 100%; | ||
| & .t--entity-item { | ||
| grid-template-columns: 0 auto 1fr auto auto auto auto auto; | ||
| height: 32px; | ||
| } | ||
| `; | ||
|
|
||
| export const ListHeaderContainer = styled.div` | ||
| padding: var(--ads-v2-spaces-3); | ||
| padding-right: var(--ads-v2-spaces-2); | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| height: 40px; | ||
| span { | ||
| line-height: 20px; | ||
| } | ||
| `; |
20 changes: 20 additions & 0 deletions
20
...ackages/design-system/ads/src/Templates/IDEHeader/HeaderSwitcher/HeaderSwitcher.styles.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import styled from "styled-components"; | ||
| import { PopoverContent } from "../../../Popover"; | ||
|
|
||
| export const SwitchTrigger = styled.div<{ active: boolean }>` | ||
| display: flex; | ||
| border-radius: var(--ads-v2-border-radius); | ||
| background-color: ${(props) => | ||
| props.active ? `var(--ads-v2-color-bg-subtle)` : "unset"}; | ||
| cursor: pointer; | ||
| padding: var(--ads-v2-spaces-2); | ||
| :hover { | ||
| background-color: var(--ads-v2-color-bg-subtle); | ||
| } | ||
| `; | ||
|
|
||
| export const ContentContainer = styled(PopoverContent)` | ||
| padding: 0; | ||
| padding-bottom: 0.25em; | ||
| `; |
88 changes: 88 additions & 0 deletions
88
...t/packages/design-system/ads/src/Templates/IDEHeader/HeaderSwitcher/IDEHeaderSwitcher.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| import React, { type ForwardedRef, useCallback } from "react"; | ||
| import { Flex } from "../../../Flex"; | ||
| import { Icon } from "../../../Icon"; | ||
| import { Popover, PopoverTrigger } from "../../../Popover"; | ||
| import { Text } from "../../../Text"; | ||
| import * as Styled from "./HeaderSwitcher.styles"; | ||
|
|
||
| interface Props { | ||
| prefix: string; | ||
| title?: string; | ||
| titleTestId: string; | ||
| active: boolean; | ||
| setActive: (active: boolean) => void; | ||
| onClick?: React.MouseEventHandler<HTMLDivElement>; | ||
| className?: string; | ||
| children: React.ReactNode; | ||
| } | ||
|
|
||
| export const IDEHeaderSwitcher = React.forwardRef( | ||
| (props: Props, ref: ForwardedRef<HTMLDivElement>) => { | ||
| const { | ||
| active, | ||
| children, | ||
| className, | ||
| onClick, | ||
| prefix, | ||
| setActive, | ||
| title, | ||
| titleTestId, | ||
| ...rest | ||
| } = props; | ||
|
|
||
| const separator = title ? " /" : ""; | ||
|
|
||
| const closeSwitcher = useCallback(() => { | ||
| return setActive(false); | ||
| }, [setActive]); | ||
|
|
||
| return ( | ||
| <Popover onOpenChange={setActive} open={active}> | ||
| <PopoverTrigger> | ||
| <Styled.SwitchTrigger | ||
| active={active} | ||
| className={`flex align-center items-center justify-center ${className}`} | ||
| data-testid={titleTestId} | ||
| onClick={onClick} | ||
| ref={ref} | ||
| {...rest} | ||
| > | ||
| <Text | ||
| color="var(--ads-v2-colors-content-label-inactive-fg)" | ||
| kind="body-m" | ||
| > | ||
| {prefix + separator} | ||
| </Text> | ||
| <Flex | ||
| alignItems="center" | ||
| className={titleTestId} | ||
| data-active={active} | ||
| gap="spaces-1" | ||
| height="100%" | ||
| justifyContent="center" | ||
| paddingLeft="spaces-2" | ||
| > | ||
| <Text isBold kind="body-m"> | ||
| {title} | ||
| </Text> | ||
| <Icon | ||
| color={ | ||
| title | ||
| ? undefined | ||
| : "var(--ads-v2-colors-content-label-inactive-fg)" | ||
| } | ||
| name={active ? "arrow-up-s-line" : "arrow-down-s-line"} | ||
| size="md" | ||
| /> | ||
| </Flex> | ||
| </Styled.SwitchTrigger> | ||
| </PopoverTrigger> | ||
| <Styled.ContentContainer align="start" onEscapeKeyDown={closeSwitcher}> | ||
| {children} | ||
| </Styled.ContentContainer> | ||
| </Popover> | ||
| ); | ||
| }, | ||
| ); | ||
|
|
||
| IDEHeaderSwitcher.displayName = "IDEHeaderSwitcher"; |
1 change: 1 addition & 0 deletions
1
app/client/packages/design-system/ads/src/Templates/IDEHeader/HeaderSwitcher/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { IDEHeaderSwitcher } from "./IDEHeaderSwitcher"; |
2 changes: 2 additions & 0 deletions
2
app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.constants.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export const IDE_HEADER_HEIGHT = 40; | ||
| export const LOGO_WIDTH = 50; |
28 changes: 28 additions & 0 deletions
28
app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import { Canvas, Meta } from "@storybook/blocks"; | ||
| import * as IDEHeaderStories from "./IDEHeader.stories"; | ||
|
|
||
| <Meta of={IDEHeaderStories} /> | ||
|
|
||
| # IDEHeader | ||
|
|
||
| IDEHeader sets the stage for the IDE experience. It is the topmost section of the IDE that contains the Appsmith logo, the app name, and the user profile. | ||
|
|
||
| <Canvas of={IDEHeaderStories.Default} /> | ||
|
|
||
| ## Anatomy | ||
|
|
||
| ### Left Section options | ||
|
|
||
| The local title | ||
|
|
||
| #### Header Title | ||
|
|
||
| A title that is specific to the app state. It is displayed on the left side of the header. | ||
|
|
||
| <Canvas of={IDEHeaderStories.WithHeaderTitle} /> | ||
|
|
||
| #### Header Dropdown | ||
|
|
||
| A dropdown that allows the user to switch between different pages. | ||
|
|
||
| <Canvas of={IDEHeaderStories.WithHeaderDropdown} /> |
Oops, something went wrong.