forked from twentyhq/twenty
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
removed @chakra-ui dependencies (twentyhq#7004)
Issue twentyhq#6976 @FelixMalfait I could not do ``` import { Banner } from 'twenty-ui'; const StyledBanner = styled(Banner) display: flex; align-items: center; padding: ${({ theme }) => theme.spacing(8)}; position: absolute; border-radius: 8px; &:hover { background-color: ${({ theme }) => theme.accent.primary}; } ; ``` The styles wont get overridden for Banner, so for now I styled a new banner in `UnmatchColumnBanner` which is inconsistent. I couldnt figure out why css properties are not being overridden, need help! @Bonapara Question - Should the click work on entire banner or just cheveron? For now it just on cheveron click. https://github.com/user-attachments/assets/0f409e78-a341-4f26-af74-117e4b2775a9 --------- Co-authored-by: Charles Bochet <[email protected]>
- Loading branch information
1 parent
4544114
commit 0dbd4a7
Showing
10 changed files
with
231 additions
and
350 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
53 changes: 53 additions & 0 deletions
53
...s/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumnBanner.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,53 @@ | ||
| import { useTheme } from '@emotion/react'; | ||
| import styled from '@emotion/styled'; | ||
| import { Banner, IconChevronDown, IconInfoCircle } from 'twenty-ui'; | ||
|
|
||
| const StyledBanner = styled(Banner)` | ||
| background: ${({ theme }) => theme.accent.secondary}; | ||
| border-radius: ${({ theme }) => theme.spacing(2)}; | ||
| padding: ${({ theme }) => theme.spacing(2) + ' ' + theme.spacing(2.5)}; | ||
| `; | ||
|
|
||
| const StyledText = styled.div` | ||
| color: ${({ theme }) => theme.color.blue}; | ||
| flex: 1; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; | ||
| `; | ||
|
|
||
| const StyledTransitionedIconChevronDown = styled(IconChevronDown)<{ | ||
| isExpanded: boolean; | ||
| }>` | ||
| color: ${({ theme }) => theme.color.blue}; | ||
| transform: ${({ isExpanded }) => | ||
| isExpanded ? 'rotate(180deg)' : 'rotate(0deg)'}; | ||
| transition: ${({ theme }) => | ||
| `transform ${theme.animation.duration.normal}s ease`}; | ||
| cursor: pointer; | ||
| `; | ||
|
|
||
| export const UnmatchColumnBanner = ({ | ||
| message, | ||
| isExpanded, | ||
| buttonOnClick, | ||
| }: { | ||
| message: string; | ||
| isExpanded: boolean; | ||
| buttonOnClick?: () => void; | ||
| }) => { | ||
| const theme = useTheme(); | ||
| return ( | ||
| <StyledBanner> | ||
| <IconInfoCircle color={theme.color.blue} size={theme.icon.size.md} /> | ||
| <StyledText>{message}</StyledText> | ||
| {buttonOnClick && ( | ||
| <StyledTransitionedIconChevronDown | ||
| isExpanded={isExpanded} | ||
| onClick={buttonOnClick} | ||
| size={theme.icon.size.md} | ||
| /> | ||
| )} | ||
| </StyledBanner> | ||
| ); | ||
| }; |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,6 @@ | ||
| export * from './components'; | ||
| export * from './display'; | ||
| export * from './layout'; | ||
| export * from './testing'; | ||
| export * from './theme'; | ||
| export * from './utilities'; |
42 changes: 42 additions & 0 deletions
42
packages/twenty-ui/src/layout/expandableContainer/components/ExpandableContainer.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,42 @@ | ||
| import styled from '@emotion/styled'; | ||
| import { isDefined } from '@ui/utilities'; | ||
| import React, { useLayoutEffect, useRef, useState } from 'react'; | ||
|
|
||
| const StyledTransitionContainer = styled.div<{ | ||
| isExpanded: boolean; | ||
| height: number; | ||
| }>` | ||
| max-height: ${({ isExpanded, height }) => (isExpanded ? `${height}px` : '0')}; | ||
| overflow: hidden; | ||
| position: relative; | ||
| transition: max-height | ||
| ${({ theme, isExpanded }) => | ||
| `${theme.animation.duration.normal}s ${isExpanded ? 'ease-in' : 'ease-out'}`}; | ||
| `; | ||
|
|
||
| type ExpandableContainerProps = { | ||
| isExpanded: boolean; | ||
| children: React.ReactNode; | ||
| }; | ||
|
|
||
| export const ExpandableContainer = ({ | ||
| isExpanded, | ||
| children, | ||
| }: ExpandableContainerProps) => { | ||
| const [contentHeight, setContentHeight] = useState(0); | ||
| const contentRef = useRef<HTMLDivElement>(null); | ||
|
|
||
| useLayoutEffect(() => { | ||
| if (isDefined(contentRef.current)) { | ||
| setContentHeight(contentRef.current.scrollHeight); | ||
| } | ||
| }, [isExpanded]); | ||
|
|
||
| return ( | ||
| <StyledTransitionContainer isExpanded={isExpanded} height={contentHeight}> | ||
| <div ref={contentRef}>{children}</div> | ||
| </StyledTransitionContainer> | ||
| ); | ||
| }; | ||
|
|
||
| export default ExpandableContainer; |
81 changes: 81 additions & 0 deletions
81
...-ui/src/layout/expandableContainer/components/__stories__/ExpandableContainer.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,81 @@ | ||
| import styled from '@emotion/styled'; | ||
| import { Meta, StoryObj } from '@storybook/react'; | ||
| import { ComponentDecorator } from '@ui/testing'; | ||
| import { useState } from 'react'; | ||
| import ExpandableContainer from '../ExpandableContainer'; | ||
|
|
||
| const StyledButton = styled.button` | ||
| padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(4)}; | ||
| background-color: ${({ theme }) => theme.color.blue50}; | ||
| color: ${({ theme }) => theme.font.color.primary}; | ||
| border: none; | ||
| border-radius: ${({ theme }) => theme.spacing(1)}; | ||
| cursor: pointer; | ||
| margin-bottom: ${({ theme }) => theme.spacing(3)}; | ||
| &:hover { | ||
| background-color: ${({ theme }) => theme.color.blue40}; | ||
| } | ||
| `; | ||
|
|
||
| const StyledContent = styled.div` | ||
| background-color: ${({ theme }) => theme.background.primary}; | ||
| height: 200px; | ||
| padding: ${({ theme }) => theme.spacing(3)}; | ||
| p { | ||
| color: ${({ theme }) => theme.font.color.primary}; | ||
| margin-bottom: ${({ theme }) => theme.spacing(2)}; | ||
| font-size: ${({ theme }) => theme.font.size.md}; | ||
| } | ||
| `; | ||
|
|
||
| const ExpandableContainerWithButton = (args: any) => { | ||
| const [isExpanded, setIsExpanded] = useState(args.isExpanded); | ||
|
|
||
| return ( | ||
| <div> | ||
| <StyledButton onClick={() => setIsExpanded(!isExpanded)}> | ||
| {isExpanded ? 'Collapse' : 'Expand'} | ||
| </StyledButton> | ||
| <ExpandableContainer isExpanded={isExpanded}> | ||
| <StyledContent> | ||
| <p> | ||
| This is some content inside the ExpandableContainer. It will grow | ||
| and shrink depending on the expand/collapse state. | ||
| </p> | ||
| <p> | ||
| Add more text or even other components here to test how the | ||
| container handles more content. | ||
| </p> | ||
| <p> | ||
| Feel free to adjust the height and content to see how it affects the | ||
| expand/collapse behavior. | ||
| </p> | ||
| </StyledContent> | ||
| </ExpandableContainer> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const meta: Meta<typeof ExpandableContainer> = { | ||
| title: 'UI/Layout/ExpandableContainer', | ||
| component: ExpandableContainerWithButton, | ||
| decorators: [ComponentDecorator], | ||
| argTypes: { | ||
| isExpanded: { | ||
| control: 'boolean', | ||
| description: 'Controls whether the container is expanded or collapsed', | ||
| defaultValue: false, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof ExpandableContainerWithButton>; | ||
|
|
||
| export const Default: Story = { | ||
| args: { | ||
| isExpanded: false, | ||
| }, | ||
| }; |
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 * from './expandableContainer/components/ExpandableContainer'; |
Oops, something went wrong.