binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-2273] Chore: page alignments (#5505)

Browse source 
* chore: headers + common containers

* fix: filters code splitting

* fix: home header

* fix: header changes

* chore: page alignments fixed

* fix: uncommented filters

* fix: used enums

* fix: cards + filters

* fix: enum changes

* fix: reverted package changes

* fix: reverted package changes

* fix: Card + tags seperated + naming fixed

* fix: card + tags seperated + naming fixed

* fix: mobile headers fixed partially

* fix: build errors + minor css

* fix: checkbox spacing

* fix: review changes

* fix: lint errors

* fix: minor review changes
This commit is contained in:
Akshita Goyal 2024-09-05 12:16:24 +05:30 • committed by GitHub
parent c78b2344b8
commit 87dbb9b888
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
181 changed files with 1323 additions and 1122 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/tailwind-config-custom/tailwind.config.js
View file

@ -440,8 +440,8 @@ module.exports = {
const newUtilities = {
// Mobile screens
'.px-page-x': {
paddingLeft: '0.675rem',
paddingRight: '0.675rem',
paddingLeft: '1.25rem',
paddingRight: '1.25rem',
},
// Medium screens (768px and up)
'@media (min-width: 768px)': {

41
packages/ui/src/card/card.tsx Normal file
View file

@ -0,0 +1,41 @@
import * as React from "react";
import { cn } from "../../helpers";
import {
ECardDirection,
ECardSpacing,
ECardVariant,
getCardStyle,
TCardDirection,
TCardSpacing,
TCardVariant,
} from "./helper";
export interface CardProps {
variant?: TCardVariant;
spacing?: TCardSpacing;
direction?: TCardDirection;
className?: string;
children: React.ReactNode;
}
const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
const {
variant = ECardVariant.WITH_SHADOW,
direction = ECardDirection.COLUMN,
className = "",
spacing = ECardSpacing.LG,
children,
...rest
} = props;
const style = getCardStyle(variant, spacing, direction);
return (
<div ref={ref} className={cn(style, className)} {...rest}>
{children}
</div>
);
});
Card.displayName = "plane-ui-card";
export { Card, ECardVariant, ECardSpacing, ECardDirection };

36
packages/ui/src/card/helper.tsx Normal file
View file

@ -0,0 +1,36 @@
export enum ECardVariant {
WITHOUT_SHADOW = "without-shadow",
WITH_SHADOW = "with-shadow",
}
export enum ECardDirection {
ROW = "row",
COLUMN = "column",
}
export enum ECardSpacing {
SM = "sm",
LG = "lg",
}
export type TCardVariant = ECardVariant.WITHOUT_SHADOW | ECardVariant.WITH_SHADOW;
export type TCardDirection = ECardDirection.ROW | ECardDirection.COLUMN;
export type TCardSpacing = ECardSpacing.SM | ECardSpacing.LG;
export interface ICardProperties {
[key: string]: string;
}
const DEFAULT_STYLE =
"bg-custom-background-100 rounded-lg border-[0.5px] border-custom-border-200 w-full flex flex-col";
export const containerStyle: ICardProperties = {
[ECardVariant.WITHOUT_SHADOW]: "",
[ECardVariant.WITH_SHADOW]: "hover:shadow-custom-shadow-4xl duration-300",
};
export const spacings = {
[ECardSpacing.SM]: "p-4",
[ECardSpacing.LG]: "p-6",
};
export const directions = {
[ECardDirection.ROW]: "flex-row space-x-3",
[ECardDirection.COLUMN]: "flex-col space-y-3",
};
export const getCardStyle = (variant: TCardVariant, spacing: TCardSpacing, direction: TCardDirection) =>
DEFAULT_STYLE + " " + directions[direction] + " " + containerStyle[variant] + " " + spacings[spacing];

1
packages/ui/src/card/index.ts Normal file
View file

@ -0,0 +1 @@
export * from "./card";

36
packages/ui/src/content-wrapper/content-wrapper.tsx Normal file
View file

@ -0,0 +1,36 @@
import * as React from "react";
import { cn } from "../../helpers";
import { Row } from "../row";
import { ERowVariant, TRowVariant } from "../row/helper";
export interface ContentWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
variant?: TRowVariant;
className?: string;
children: React.ReactNode;
}
const DEFAULT_STYLE = "flex flex-col vertical-scrollbar scrollbar-lg h-full w-full overflow-y-auto";
const ContentWrapper = React.forwardRef<HTMLDivElement, ContentWrapperProps>((props, ref) => {
const { variant = ERowVariant.REGULAR, className = "", children, ...rest } = props;
return (
<Row
ref={ref}
variant={variant}
className={cn(
DEFAULT_STYLE,
{
"py-page-y": variant === ERowVariant.REGULAR,
},
className
)}
{...rest}
>
{children}
</Row>
);
});
ContentWrapper.displayName = "plane-ui-wrapper";
export { ContentWrapper };

1
packages/ui/src/content-wrapper/index.ts Normal file
View file

@ -0,0 +1 @@
export * from "./content-wrapper";

42
packages/ui/src/header/header.tsx
View file

@ -1,39 +1,51 @@
import * as React from "react";
import { cn } from "../../helpers";
import { EHeaderVariant, getHeaderStyle, THeaderVariant } from "./helper";
import { ERowVariant, CustomRow } from "../row";
import { ERowVariant, Row } from "../row";
export interface CustomHeaderProps {
export interface HeaderProps {
variant?: THeaderVariant;
setHeight?: boolean;
className?: string;
children: React.ReactNode;
showOnMobile?: boolean;
}
const CustomHeader = (props: CustomHeaderProps) => {
const { variant = EHeaderVariant.PRIMARY, className = "", setHeight = true, children, ...rest } = props;
const Header = (props: HeaderProps) => {
const {
variant = EHeaderVariant.PRIMARY,
className = "",
showOnMobile = true,
setHeight = true,
children,
...rest
} = props;
const style = getHeaderStyle(variant, setHeight);
const style = getHeaderStyle(variant, setHeight, showOnMobile);
return (
<CustomRow
<Row
variant={variant === EHeaderVariant.PRIMARY ? ERowVariant.HUGGING : ERowVariant.REGULAR}
className={cn(style, className)}
{...rest}
>
{children}
</CustomRow>
</Row>
);
};
const LeftItem = (props: CustomHeaderProps) => (
<div className="flex flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">{props.children}</div>
const LeftItem = (props: HeaderProps) => (
<div
className={cn("flex flex-wrap items-center gap-2 overflow-ellipsis whitespace-nowrap max-w-[80%]", props.className)}
>
{props.children}
</div>
);
const RightItem = (props: CustomHeaderProps) => (
<div className="w-full flex items-center justify-end gap-3">{props.children}</div>
const RightItem = (props: HeaderProps) => (
<div className={cn("flex justify-end gap-3 w-auto items-baseline", props.className)}>{props.children}</div>
);
CustomHeader.LeftItem = LeftItem;
CustomHeader.RightItem = RightItem;
CustomHeader.displayName = "plane-ui-header";
Header.LeftItem = LeftItem;
Header.RightItem = RightItem;
Header.displayName = "plane-ui-header";
export { CustomHeader, EHeaderVariant };
export { Header, EHeaderVariant };

9
packages/ui/src/header/helper.tsx
View file

@ -11,15 +11,16 @@ export interface IHeaderProperties {
export const headerStyle: IHeaderProperties = {
[EHeaderVariant.PRIMARY]:
"relative flex w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100",
[EHeaderVariant.SECONDARY]: "block !py-0 overflow-y-hidden border-b border-custom-border-200",
[EHeaderVariant.TERNARY]: "flex justify-between py-2 border-b border-custom-border-200",
[EHeaderVariant.SECONDARY]: "!py-0 overflow-y-hidden border-b border-custom-border-200 justify-between",
[EHeaderVariant.TERNARY]: "flex flex-wrap justify-between py-2 border-b border-custom-border-200 gap-2",
};
export const minHeights: IHeaderProperties = {
[EHeaderVariant.PRIMARY]: "",
[EHeaderVariant.SECONDARY]: "min-h-[52px]",
[EHeaderVariant.TERNARY]: "",
};
export const getHeaderStyle = (variant: THeaderVariant, setMinHeight: boolean) => {
export const getHeaderStyle = (variant: THeaderVariant, setMinHeight: boolean, showOnMobile: boolean) => {
const height = setMinHeight ? minHeights[variant] : "";
return headerStyle[variant] + " " + height;
const display = variant === EHeaderVariant.SECONDARY ? (showOnMobile ? "flex" : "hidden md:flex") : "";
return " " + headerStyle[variant] + " " + height + " " + display;
};

3
packages/ui/src/index.ts
View file

@ -25,3 +25,6 @@ export * from "./popovers";
export * from "./tables";
export * from "./header";
export * from "./row";
export * from "./content-wrapper";
export * from "./card";
export * from "./tag";

8
packages/ui/src/row/row.tsx
View file

@ -2,13 +2,13 @@ import * as React from "react";
import { cn } from "../../helpers";
import { ERowVariant, rowStyle, TRowVariant } from "./helper";
export interface CustomRowProps extends React.HTMLAttributes<HTMLDivElement> {
export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
variant?: TRowVariant;
className?: string;
children: React.ReactNode;
}
const CustomRow = React.forwardRef<HTMLDivElement, CustomRowProps>((props, ref) => {
const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
const { variant = ERowVariant.REGULAR, className = "", children, ...rest } = props;
const style = rowStyle[variant];
@ -20,6 +20,6 @@ const CustomRow = React.forwardRef<HTMLDivElement, CustomRowProps>((props, ref)
);
});
CustomRow.displayName = "plane-ui-row";
Row.displayName = "plane-ui-row";
export { CustomRow, ERowVariant };
export { Row, ERowVariant };

24
packages/ui/src/tag/helper.tsx Normal file
View file

@ -0,0 +1,24 @@
export enum ETagVariant {
OUTLINED = "outlined",
}
export enum ETagSize {
SM = "sm",
LG = "lg",
}
export type TTagVariant = ETagVariant.OUTLINED;
export type TTagSize = ETagSize.SM | ETagSize.LG;
export interface ITagProperties {
[key: string]: string;
}
export const containerStyle: ITagProperties = {
[ETagVariant.OUTLINED]:
"flex items-center rounded-md border border-custom-border-200 text-xs text-custom-text-300 hover:text-custom-text-200 min-h-[36px] my-auto capitalize flex-wrap cursor-pointer gap-1.5",
};
export const sizes = {
[ETagSize.SM]: "p-1.5",
[ETagSize.LG]: "p-6",
};
export const getTagStyle = (variant: TTagVariant, size: TTagSize) => containerStyle[variant] + " " + sizes[size];

1
packages/ui/src/tag/index.ts Normal file
View file

@ -0,0 +1 @@
export * from "./tag";

25
packages/ui/src/tag/tag.tsx Normal file
View file

@ -0,0 +1,25 @@
import * as React from "react";
import { cn } from "../../helpers";
import { ETagSize, ETagVariant, getTagStyle, TTagSize, TTagVariant } from "./helper";
export interface TagProps extends React.ComponentProps<"div"> {
variant?: TTagVariant;
size?: TTagSize;
className?: string;
children: React.ReactNode;
}
const Tag = React.forwardRef<HTMLDivElement, TagProps>((props, ref) => {
const { variant = ETagVariant.OUTLINED, className = "", size = ETagSize.SM, children, ...rest } = props;
const style = getTagStyle(variant, size);
return (
<div ref={ref} className={cn(style, className)} {...rest}>
{children}
</div>
);
});
Tag.displayName = "plane-ui-container";
export { Tag, ETagVariant, ETagSize };