-
Notifications
You must be signed in to change notification settings - Fork 3.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'release' of github.com:appsmithorg/appsmith into chore/…
…37853-new-integrations
- Loading branch information
Showing
151 changed files
with
8,947 additions
and
5,310 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
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
25 changes: 25 additions & 0 deletions
25
...esign-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.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,25 @@ | ||
| import { Canvas, Meta } from "@storybook/blocks"; | ||
|
|
||
| import * as EditorSegmentsStories from "./EditorSegments.stories"; | ||
|
|
||
| <Meta of={EditorSegmentsStories} /> | ||
|
|
||
| # Editor Segments | ||
|
|
||
| Editor Segments is is built on top of the ADS component - Segmented Control. It is a preset template built for Entity Explorer which has a `max-width of 247px` and has extra padding around each of the segments. | ||
|
|
||
| Editor Segments present a range of options, and should be used when the user can execute those options instantaneously. It can also accept `children` to add more UI controls, if needed. These will be placed on the right side of the segments. It takes `options`, `selectedSegment` and `onSegmentChange` props to handle the value and onChange functionalities of Segmented Control component. | ||
|
|
||
| The options presented should not be binary. If you have a `yes | no` scenario, use a switch, instead. | ||
|
|
||
| ## Anatomy | ||
|
|
||
| ### Default implementation | ||
|
|
||
| Note: The `options` needs to be passed as required, the UI shown below are not default values being provided to the Editor segments. It also means the `selectedSegment` and `onSegmentChange` props needs to be passed as well. | ||
|
|
||
| <Canvas of={EditorSegmentsStories.EditorSegmentsStory} /> | ||
|
|
||
| ### More UI controls | ||
|
|
||
| <Canvas of={EditorSegmentsStories.EditorSegmentsStoryWithChildren} /> |
101 changes: 101 additions & 0 deletions
101
.../design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.stories.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,101 @@ | ||
| import React from "react"; | ||
| import { EditorSegments } from "./EditorSegments"; | ||
| import type { EditorSegmentsProps } from "./EditorSegments.types"; | ||
| import type { StoryObj } from "@storybook/react"; | ||
| import { Button } from "../../../Button"; | ||
|
|
||
| export default { | ||
| title: "ADS/Templates/Entity Explorer/Editor Segments", | ||
| component: EditorSegments, | ||
| }; | ||
|
|
||
| // eslint-disable-next-line react/function-component-definition | ||
| const Template = (args: EditorSegmentsProps) => { | ||
| return <EditorSegments {...args}>{args.children}</EditorSegments>; | ||
| }; | ||
|
|
||
| export const EditorSegmentsStory = Template.bind({}) as StoryObj; | ||
| EditorSegmentsStory.storyName = "Default"; | ||
| EditorSegmentsStory.args = { | ||
| options: [ | ||
| { | ||
| value: "queries", | ||
| label: "Queries", | ||
| startIcon: "queries-v3", | ||
| }, | ||
| { | ||
| value: "js", | ||
| label: "JS", | ||
| startIcon: "content-type-json", | ||
| }, | ||
| { | ||
| value: "ui", | ||
| label: "UI", | ||
| startIcon: "dashboard-line", | ||
| isDisabled: true, | ||
| }, | ||
| ], | ||
| defaultValue: "queries", | ||
| }; | ||
|
|
||
| export const EditorSegmentsStoryWithIcons = Template.bind({}) as StoryObj; | ||
| EditorSegmentsStoryWithIcons.storyName = "Only Icons"; | ||
| EditorSegmentsStoryWithIcons.args = { | ||
| options: [ | ||
| { | ||
| value: "queries", | ||
| startIcon: "queries-v3", | ||
| }, | ||
| { | ||
| value: "js", | ||
| startIcon: "content-type-json", | ||
| }, | ||
| { | ||
| value: "ui", | ||
| startIcon: "dashboard-line", | ||
| }, | ||
| ], | ||
| defaultValue: "queries", | ||
| }; | ||
|
|
||
| export const EditorSegmentsStoryWithLabels = Template.bind({}) as StoryObj; | ||
| EditorSegmentsStoryWithLabels.storyName = "Only Labels"; | ||
| EditorSegmentsStoryWithLabels.args = { | ||
| options: [ | ||
| { | ||
| value: "queries", | ||
| label: "Queries", | ||
| }, | ||
| { | ||
| value: "js", | ||
| label: "JS", | ||
| }, | ||
| { | ||
| value: "ui", | ||
| label: "UI", | ||
| }, | ||
| ], | ||
| defaultValue: "queries", | ||
| }; | ||
|
|
||
| export const EditorSegmentsStoryWithChildren = Template.bind({}) as StoryObj; | ||
| EditorSegmentsStoryWithChildren.storyName = "With Children"; | ||
| EditorSegmentsStoryWithChildren.args = { | ||
| options: [ | ||
| { | ||
| value: "queries", | ||
| label: "Queries", | ||
| }, | ||
| { | ||
| value: "js", | ||
| label: "JS", | ||
| }, | ||
| { | ||
| value: "ui", | ||
| label: "UI", | ||
| }, | ||
| ], | ||
| defaultValue: "queries", | ||
| isFullWidth: true, | ||
| children: <Button isIconButton kind="secondary" startIcon="plus" />, | ||
| }; |
8 changes: 8 additions & 0 deletions
8
...es/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.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,8 @@ | ||
| import styled from "styled-components"; | ||
| import { Flex } from "../../../Flex"; | ||
|
|
||
| export const Container = styled(Flex)` | ||
| .editor-pane-segment-control { | ||
| max-width: 247px; | ||
| } | ||
| `; |
33 changes: 33 additions & 0 deletions
33
...packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.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,33 @@ | ||
| import React from "react"; | ||
| import { SegmentedControl } from "../../../SegmentedControl"; | ||
| import { Container } from "./EditorSegments.styles"; | ||
| import type { EditorSegmentsProps } from "./EditorSegments.types"; | ||
|
|
||
| const EditorSegments = (props: EditorSegmentsProps) => { | ||
| const { children, onSegmentChange, options, selectedSegment } = props; | ||
|
|
||
| return ( | ||
| <Container | ||
| alignItems="center" | ||
| backgroundColor="var(--ads-v2-colors-control-track-default-bg)" | ||
| className="ide-editor-left-pane__header" | ||
| gap="spaces-2" | ||
| justifyContent="space-between" | ||
| padding="spaces-2" | ||
| > | ||
| <SegmentedControl | ||
| className="editor-pane-segment-control" | ||
| onChange={onSegmentChange} | ||
| options={options} | ||
| value={selectedSegment} | ||
| /> | ||
| {children} | ||
| </Container> | ||
| ); | ||
| }; | ||
|
|
||
| EditorSegments.displayName = "EditorSegments"; | ||
|
|
||
| EditorSegments.defaultProps = {}; | ||
|
|
||
| export { EditorSegments }; |
8 changes: 8 additions & 0 deletions
8
...ges/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.types.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,8 @@ | ||
| import type { SegmentedControlOption } from "../../../SegmentedControl"; | ||
|
|
||
| export interface EditorSegmentsProps { | ||
| selectedSegment: string; | ||
| onSegmentChange: (value: string) => void; | ||
| options: SegmentedControlOption[]; | ||
| children?: React.ReactNode | React.ReactNode[]; | ||
| } |
2 changes: 2 additions & 0 deletions
2
app/client/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/index.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,2 @@ | ||
| export * from "./EditorSegments"; | ||
| export * from "./EditorSegments.types"; |
1 change: 1 addition & 0 deletions
1
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 |
|---|---|---|
| @@ -1,2 +1,3 @@ | ||
| export { ListItemContainer, ListHeaderContainer } from "./styles"; | ||
| export { ListWithHeader } from "./ListWithHeader"; | ||
| export { EditorSegments } from "./EditorSegments"; |
Oops, something went wrong.