Migrate to twenty-ui - input/button (#7994)

This PR was created by [GitStart](https://gitstart.com/) to address the requirements from this ticket: [TWNTY-7529](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7529). --- ### Description - Migrated all button components to `twenty-ui` \ \ `Button`\ `ButtonGroup`\ `ColorPickerButton`\ `FloatingButton`\ `FloatingButtonGroup`\ `FloatingIconButton`\ `FloatingIconButtonGroup`\ `IconButton`\ `IconButtonGroup`\ `LightButton`\ `LightIconButton`\ `LightIconButtonGroup`\ `MainButton`\ \ Fixes twentyhq/private-issues#89 Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com> Co-authored-by: Charles Bochet <charles@twenty.com>
2024-10-24 13:20:02 +02:00
parent 60e44ccf73
commit 0a28c15747
152 changed files with 450 additions and 505 deletions
@@ -0,0 +1,102 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { IconComponent } from '@ui/display';
+import { MouseEvent } from 'react';
+
+export type LightButtonAccent = 'secondary' | 'tertiary';
+
+export type LightButtonProps = {
+  className?: string;
+  Icon?: IconComponent;
+  title?: string;
+  accent?: LightButtonAccent;
+  active?: boolean;
+  disabled?: boolean;
+  focus?: boolean;
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+};
+
+const StyledButton = styled.button<
+  Pick<LightButtonProps, 'accent' | 'active' | 'focus'>
+>`
+  align-items: center;
+  background: transparent;
+  border: ${({ theme, focus }) =>
+    focus ? `1px solid ${theme.color.blue}` : 'none'};
+
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  box-shadow: ${({ theme, focus }) =>
+    focus ? `0 0 0 3px  ${theme.color.blue10}` : 'none'};
+  color: ${({ theme, accent, active, disabled, focus }) => {
+    switch (accent) {
+      case 'secondary':
+        return active || focus
+          ? theme.color.blue
+          : !disabled
+            ? theme.font.color.secondary
+            : theme.font.color.extraLight;
+      case 'tertiary':
+        return active || focus
+          ? theme.color.blue
+          : !disabled
+            ? theme.font.color.tertiary
+            : theme.font.color.extraLight;
+    }
+  }};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  display: flex;
+  flex-direction: row;
+
+  font-family: ${({ theme }) => theme.font.family};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  gap: ${({ theme }) => theme.spacing(1)};
+  height: 24px;
+  padding: ${({ theme }) => {
+    return `0 ${theme.spacing(2)}`;
+  }};
+
+  transition: background 0.1s ease;
+
+  white-space: nowrap;
+
+  &:hover {
+    background: ${({ theme, disabled }) =>
+      !disabled ? theme.background.transparent.light : 'transparent'};
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:active {
+    background: ${({ theme, disabled }) =>
+      !disabled ? theme.background.transparent.medium : 'transparent'};
+  }
+`;
+
+export const LightButton = ({
+  className,
+  Icon,
+  title,
+  active = false,
+  accent = 'secondary',
+  disabled = false,
+  focus = false,
+  onClick,
+}: LightButtonProps) => {
+  const theme = useTheme();
+
+  return (
+    <StyledButton
+      onClick={onClick}
+      disabled={disabled}
+      focus={focus && !disabled}
+      accent={accent}
+      className={className}
+      active={active}
+    >
+      {!!Icon && <Icon size={theme.icon.size.md} />}
+      {title}
+    </StyledButton>
+  );
+};