feat: Button component revamp

frontend/src/Editor/Box.jsx

@@ -164,7 +164,7 @@ export const Box = memo(
  const backgroundColor = yellow ? 'yellow' : '';
  const currentState = useCurrentState();
  const { events } = useAppInfo();
- const shouldAddBoxShadowAndVisibility = ['TextInput', 'PasswordInput', 'NumberInput', 'Text'];
+ const shouldAddBoxShadowAndVisibility = ['TextInput', 'PasswordInput', 'NumberInput', 'Text', 'Button'];
 
  const componentMeta = useMemo(() => {
  return componentTypes.find((comp) => component.component === comp.component);

frontend/src/Editor/CodeBuilder/Elements/Color.jsx

@@ -4,7 +4,34 @@ import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Popover from 'react-bootstrap/Popover';
 import classNames from 'classnames';
 
-export const Color = ({ value, onChange, pickerStyle = {}, cyLabel, asBoxShadowPopover = true, meta }) => {
+export const Color = ({ value, onChange, pickerStyle = {}, cyLabel, asBoxShadowPopover = true, meta, component }) => {
+ // This function is written only to handle diff colors W.R.T button types
+ const computeColor = () => {
+ if (component?.component?.definition?.styles?.type?.value == 'primary') return value;
+ else {
+ if (meta?.displayName == 'Background') {
+ value = value == '#4368E3' ? '#FFFFFF' : value;
+ return value;
+ }
+ if (meta?.displayName == 'Text color') {
+ value = value == '#FFFFFF' ? '#1B1F24' : value;
+ return value;
+ }
+ if (meta?.displayName == 'Icon color') {
+ value = value == '#FFFFFF' ? '#CCD1D5' : value;
+ return value;
+ }
+ if (meta?.displayName == 'Border color') {
+ value = value == '#4368E3' ? '#CCD1D5' : value;
+ return value;
+ }
+ if (meta?.displayName == 'Loader color') {
+ return value;
+ }
+ }
+ };
+ value = component.component.component == 'Button' ? computeColor() : value;
+
  const [showPicker, setShowPicker] = useState(false);
  const darkMode = localStorage.getItem('darkMode') === 'true';
  const colorPickerPosition = meta?.colorPickerPosition ?? '';
@@ -15,7 +42,6 @@ export const Color = ({ value, onChange, pickerStyle = {}, cyLabel, asBoxShadowP
  bottom: '0px',
  left: '0px',
  };
-
  const outerStyles = {
  width: '142px',
  height: '32px',

frontend/src/Editor/Components/Button.jsx

@@ -1,15 +1,31 @@
 import React, { useEffect, useState } from 'react';
 import cx from 'classnames';
 const tinycolor = require('tinycolor2');
+import * as Icons from '@tabler/icons-react';
 
 export const Button = function Button(props) {
  const { height, properties, styles, fireEvent, id, dataCy, setExposedVariable, setExposedVariables } = props;
- const { backgroundColor, textColor, borderRadius, loaderColor, disabledState, borderColor, boxShadow } = styles;
+ const {
+ backgroundColor,
+ textColor,
+ borderRadius,
+ loaderColor,
+ borderColor,
+ boxShadow,
+ iconColor,
+ direction,
+ type,
+ iconVisibility,
+ } = styles;
 
+ const { loadingState, disabledState } = properties;
  const [label, setLabel] = useState(properties.text);
- const [disable, setDisable] = useState(disabledState);
- const [visibility, setVisibility] = useState(styles.visibility);
- const [loading, setLoading] = useState(properties.loadingState);
+ const [disable, setDisable] = useState(disabledState || loadingState);
+ const [visibility, setVisibility] = useState(properties.visibility);
+ const [loading, setLoading] = useState(loadingState);
+ const iconName = styles.icon; // Replace with the name of the icon you want
+ // eslint-disable-next-line import/namespace
+ const IconElement = Icons[iconName] == undefined ? Icons['IconHome2'] : Icons[iconName];
 
  useEffect(() => {
  setLabel(properties.text);
@@ -23,26 +39,48 @@ export const Button = function Button(props) {
  }, [disabledState]);
 
  useEffect(() => {
- visibility !== styles.visibility && setVisibility(styles.visibility);
+ visibility !== properties.visibility && setVisibility(properties.visibility);
  // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [styles.visibility]);
+ }, [properties.visibility]);
 
  useEffect(() => {
  loading !== properties.loadingState && setLoading(properties.loadingState);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [properties.loadingState]);
 
+ const computedIconColor =
+ '#FFFFFF' === iconColor ? (type === 'primary' ? iconColor : 'var(--icons-strong)') : iconColor;
+
+ const computedBorderColor =
+ borderColor === '#4368E3' ? (type === 'primary' ? '#4368E3' : 'var(--borders-strong)') : borderColor;
+
+ const computedTextColor =
+ '#FFFFFF' === textColor ? (type === 'primary' ? 'var(--text-on-solid)' : 'var(--text-primary)') : textColor;
+
+ const computedBgColor =
+ '#4368E3' === backgroundColor
+ ? type === 'primary'
+ ? 'var(--primary-brand)'
+ : 'transparent'
+ : type === 'primary'
+ ? backgroundColor
+ : 'transparent';
+
  const computedStyles = {
- backgroundColor,
- color: textColor,
+ backgroundColor: computedBgColor,
+ color: computedTextColor,
  width: '100%',
  borderRadius: `${borderRadius}px`,
  height,
  display: visibility ? '' : 'none',
- '--tblr-btn-color-darker': tinycolor(backgroundColor).darken(8).toString(),
- '--loader-color': tinycolor(loaderColor ?? '#fff').toString(),
- borderColor: borderColor,
- boxShadow: boxShadow,
+ '--tblr-btn-color-darker': tinycolor(computedBgColor).darken(8).toString(),
+ '--tblr-btn-color-clicked': tinycolor(computedBgColor).darken(15).toString(),
+ '--loader-color': tinycolor(loaderColor ?? 'var(--icons-on-solid)').toString(),
+ borderColor: computedBorderColor,
+ boxShadow: type == 'primary' && boxShadow,
+ padding: '0px 12px',
+ cursor: 'pointer',
+ opacity: disable && '50%',
  };
 
  useEffect(() => {
@@ -70,26 +108,72 @@ export const Button = function Button(props) {
  setExposedVariables(exposedVariables);
 
  // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [disable, setLabel, setDisable, setVisibility, setLoading]);
+ }, [disable]);
+
+ useEffect(() => {
+ setExposedVariable('setLoading', async function (loading) {
+ setLoading(loading);
+ setExposedVariable('isLoading', loading);
+ });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [loadingState]);
+
+ useEffect(() => {
+ setExposedVariable('setVisibility', async function (state) {
+ setVisibility(state);
+ setExposedVariable('isVisible', state);
+ });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [properties.visibility]);
+
+ useEffect(() => {
+ setExposedVariable('setDisable', async function (disable) {
+ setDisable(disable);
+ setExposedVariable('isDisabled', disable);
+ });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [disabledState]);
+
+ useEffect(() => {
+ setExposedVariable('isLoading', loading);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [loading]);
+
+ useEffect(() => {
+ setExposedVariable('isVisible', visibility);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [visibility]);
+
+ useEffect(() => {
+ setExposedVariable('isDisabled', disable);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [disable]);
 
- const hasCustomBackground = backgroundColor?.charAt() === '#';
+ const hasCustomBackground = computedBgColor?.charAt() === '#';
  if (hasCustomBackground) {
- computedStyles['--tblr-btn-color-darker'] = tinycolor(backgroundColor).darken(8).toString();
+ computedStyles['--tblr-btn-color-darker'] = tinycolor(computedBgColor).darken(8).toString();
+ computedStyles['--tblr-btn-color-clicked'] = tinycolor(computedBgColor).darken(15).toString();
  }
-
  const handleClick = () => {
  const event1 = new CustomEvent('submitForm', { detail: { buttonComponentId: id } });
  document.dispatchEvent(event1);
  fireEvent('onClick');
  };
-
- return (
- <div className="widget-button">
+ const renderButton = () => (
+ <div
+ className={`widget-button d-flex align-items-center`}
+ style={{
+ position: 'relative',
+ height,
+ }}
+ >
  <button
- disabled={disable}
- className={cx('jet-button btn btn-primary p-1 overflow-hidden', {
+ disabled={disable || loading}
+ className={cx('overflow-hidden', {
  'btn-loading': loading,
  'btn-custom': hasCustomBackground,
+ 'jet-button ': type == 'primary',
+ 'jet-outline-button ': type == 'outline',
  })}
  style={computedStyles}
  onClick={handleClick}
@@ -99,8 +183,49 @@ export const Button = function Button(props) {
  data-cy={dataCy}
  type="default"
  >
- {label}
+ <div
+ style={{
+ height: '100%',
+ width: '100%',
+ display: 'flex',
+ alignItems: 'center',
+ flexDirection: direction == 'right' ? 'row-reverse' : 'row',
+ justifyContent: 'center',
+ gap: '6px',
+ }}
+ >
+ <div
+ style={{
+ overflow: 'hidden',
+ }}
+ >
+ <span style={{ maxWidth: ' 100%', minWidth: '0' }}>
+ <p
+ className="tj-text-sm"
+ style={{ fontWeight: '500', margin: '0px', padding: '0px', color: computedTextColor }}
+ >
+ {label}
+ </p>
+ </span>
+ </div>
+ {iconVisibility && (
+ <div className="d-flex">
+ {!props.isResizing && !loading && (
+ <IconElement
+ style={{
+ width: '16px',
+ height: '16px',
+ color: computedIconColor,
+ }}
+ stroke={1.5}
+ />
+ )}
+ </div>
+ )}
+ </div>
  </button>
  </div>
  );
+
+ return <>{renderButton()}</>;
 };

frontend/src/Editor/Inspector/Components/DefaultComponent.jsx

@@ -7,12 +7,13 @@ import i18next from 'i18next';
 import { resolveReferences } from '@/_helpers/utils';
 import { AllComponents } from '@/Editor/Box';
 
-const SHOW_ADDITIONAL_ACTIONS = ['Text', 'TextInput', 'NumberInput', 'PasswordInput'];
+const SHOW_ADDITIONAL_ACTIONS = ['Text', 'TextInput', 'NumberInput', 'PasswordInput', 'Button'];
 const PROPERTIES_VS_ACCORDION_TITLE = {
  Text: 'Data',
  TextInput: 'Data',
  PasswordInput: 'Data',
  NumberInput: 'Data',
+ Button: 'Data',
 };
 
 export const DefaultComponent = ({ componentMeta, darkMode, ...restProps }) => {
@@ -86,7 +87,7 @@ export const baseComponentProperties = (
  'Additional Actions': Object.keys(AllComponents).filter(
  (component) => !SHOW_ADDITIONAL_ACTIONS.includes(component)
  ),
- General: ['Modal', 'TextInput', 'PasswordInput', 'NumberInput', 'Text', 'Table'],
+ General: ['Modal', 'TextInput', 'PasswordInput', 'NumberInput', 'Text', 'Table', 'Button'],
  Layout: [],
  };
  if (component.component.component === 'Listview') {

frontend/src/Editor/Inspector/Inspector.jsx

@@ -53,7 +53,7 @@ const INSPECTOR_HEADER_OPTIONS = [
  },
 ];
 
-const NEW_REVAMPED_COMPONENTS = ['Text', 'TextInput', 'PasswordInput', 'NumberInput', 'Table'];
+const NEW_REVAMPED_COMPONENTS = ['Text', 'TextInput', 'PasswordInput', 'NumberInput', 'Table', 'Button'];
 
 export const Inspector = ({
  componentDefinitionChanged,

frontend/src/Editor/Inspector/Utils.js

@@ -44,6 +44,7 @@ export function renderCustomStyles(
  componentConfig.component == 'TextInput' ||
  componentConfig.component == 'NumberInput' ||
  componentConfig.component == 'PasswordInput' ||
+ componentConfig.component == 'Button' ||
  componentConfig.component == 'Table'
  ) {
  const paramTypeConfig = componentMeta[paramType] || {};

frontend/src/Editor/LeftSidebar/SidebarInspector.jsx

@@ -136,11 +136,37 @@ export const LeftSidebarInspector = ({
  iconName: 'disable',
  jsx: () => <Icon name={'warning'} height={16} width={16} fill="#DB4324" />,
  className: 'component-icon',
+ tooltipMessage: 'This function will be deprecated soon, You can use setDisable as an alternative',
+ isInfoIcon: true,
+ });
+ }
+
+ if (componentExposedVariables.visibility) {
+ icons.push({
+ iconName: 'visibility',
+ jsx: () => <Icon name={'warning'} height={16} width={16} fill="#DB4324" />,
+ className: 'component-icon',
  tooltipMessage: 'This function will be deprecated soon, You can use setVisibility as an alternative',
  isInfoIcon: true,
  });
  }
 
+ return icons;
+ }
+
+ if (!_.isEmpty(component) && component.component === 'Button') {
+ const icons = [];
+
+ if (componentExposedVariables.disable) {
+ icons.push({
+ iconName: 'disable',
+ jsx: () => <Icon name={'warning'} height={16} width={16} fill="#DB4324" />,
+ className: 'component-icon',
+ tooltipMessage: 'This function will be deprecated soon, You can use setDisable as an alternative',
+ isInfoIcon: true,
+ });
+ }
+
  if (componentExposedVariables.visibility) {
  icons.push({
  iconName: 'visibility',
@@ -151,6 +177,16 @@ export const LeftSidebarInspector = ({
  });
  }
 
+ if (componentExposedVariables.loading) {
+ icons.push({
+ iconName: 'loading',
+ jsx: () => <Icon name={'warning'} height={16} width={16} fill="#DB4324" />,
+ className: 'component-icon',
+ tooltipMessage: 'This function will be deprecated soon, You can use setLoading as an alternative',
+ isInfoIcon: true,
+ });
+ }
+
  return icons;
  }