Skip to content

Commit

Permalink
Merge branch 'task/BubblesDS-5' into epic/MainLibrary-0
Browse files Browse the repository at this point in the history
  • Loading branch information
fermarinsanchez committed Nov 15, 2023
2 parents 5ca4b1e + 54cba0d commit e75bbcf
Show file tree
Hide file tree
Showing 18 changed files with 7,497 additions and 7,179 deletions.
8 changes: 2 additions & 6 deletions merged_tokens.json
Original file line number Diff line number Diff line change
Expand Up @@ -6663,10 +6663,6 @@
},
"$themes": [],
"$metadata": {
"tokenSetOrder": [
"core",
"global",
"component"
]
"tokenSetOrder": ["core", "global", "component"]
}
}
}
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"release:dev": "yarn changeset version && yarn changeset publish --tag dev"
},
"dependencies": {
"@babel/eslint-parser": "^7.22.15",
"@changesets/cli": "^2.26.0",
"react": "^17.0.1",
"react-dom": "^17.0.1"
Expand All @@ -58,6 +59,7 @@
"madge": "^5.0.1",
"npm-run-all": "^4.1.5",
"prettier": "^3.0.3",
"prettier-eslint": "^15.0.1",
"tsc-silent": "^1.2.2",
"typescript": "^4.7.3",
"webpack": "5",
Expand Down
4 changes: 2 additions & 2 deletions packages/components/babel.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ module.exports = {
'dev-expression',
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-syntax-import-meta',
'@babel/plugin-proposal-class-properties',
// '@babel/plugin-proposal-export-namespace-from',
// '@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-export-namespace-from',
'@babel/plugin-proposal-export-default-from',
],
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import PropTypes from 'prop-types';

export const ACTION_BUTTON_SIZES = ['sm', 'md'];
// export const ACTION_BUTTON_COLORS = ['primary', 'negative', 'phatic'];
export const ACTION_BUTTON_COLORS = ['primary'];

export const ACTION_BUTTON_DEFAULT_PROPS = {
color: ACTION_BUTTON_COLORS[0],
size: ACTION_BUTTON_SIZES[1],
label: '',
rounded: false,
useAria: true,
active: false,
};
export const ACTION_BUTTON_PROP_TYPES = {
/** Controls the size */
size: PropTypes.oneOf(ACTION_BUTTON_SIZES),
/** Control the color */
color: PropTypes.oneOf(ACTION_BUTTON_COLORS),
/** Control the tooltip of the button */
tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
/** Controls if ActionButton uses aria role */
useAria: PropTypes.bool,
/** Aria label for ActionButton */
ariaLabel: PropTypes.string,
/** Controls the visual state of the Button */
active: PropTypes.bool,
};
47 changes: 15 additions & 32 deletions packages/components/src/form/ActionButton/ActionButton.js
Original file line number Diff line number Diff line change
@@ -1,38 +1,18 @@
/* eslint-disable react/prop-types */
import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';
import { isNil, isString } from 'lodash';
import { Button as MantineButton } from '@mantine/core';
import { ActionButtonStyles } from './ActionButton.styles';
import { Tooltip } from '../../overlay';
import { Tooltip } from '../../overlay/Tooltip';
import {
ACTION_BUTTON_SIZES,
ACTION_BUTTON_COLORS,
ACTION_BUTTON_DEFAULT_PROPS,
ACTION_BUTTON_PROP_TYPES,
} from './ActionButton.constants';

export const ACTION_BUTTON_SIZES = ['sm', 'md'];
export const ACTION_BUTTON_COLORS = ['primary', 'negative', 'phatic'];

export const ACTION_BUTTON_DEFAULT_PROPS = {
color: ACTION_BUTTON_COLORS[0],
size: ACTION_BUTTON_SIZES[1],
label: '',
rounded: false,
useAria: true,
active: false,
};
export const ACTION_BUTTON_PROP_TYPES = {
/** Controls the size */
size: PropTypes.oneOf(ACTION_BUTTON_SIZES),
/** Control the color */
color: PropTypes.oneOf(ACTION_BUTTON_COLORS),
/** Control the tooltip of the button */
tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
/** Controls if ActionButton uses aria role */
useAria: PropTypes.bool,
/** Aria label for ActionButton */
ariaLabel: PropTypes.string,
/** Controls the visual state of the Button */
active: PropTypes.bool,
};

const TooltipComponent = ({ children, tooltip, useAria }) => {
return isString(tooltip) && tooltip !== '' ? (
const TooltipComponent = ({ children, tooltip, useAria }) =>
isString(tooltip) && tooltip !== '' ? (
<Tooltip
position="bottom"
label={tooltip}
Expand All @@ -45,9 +25,8 @@ const TooltipComponent = ({ children, tooltip, useAria }) => {
) : (
<>{children}</>
);
};

export const ActionButton = forwardRef(
const ActionButton = forwardRef(
(
{
as,
Expand Down Expand Up @@ -120,3 +99,7 @@ export const ActionButton = forwardRef(

ActionButton.defaultProps = ACTION_BUTTON_DEFAULT_PROPS;
ActionButton.propTypes = ACTION_BUTTON_PROP_TYPES;
ActionButton.displayName = 'ActionButton';

export { ActionButton };
export default ActionButton;
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React from 'react';
import { ChevronRightIcon, ExpandDiagonalIcon } from '@bubbles-ui/icons/outline';
import { ActionButton } from './ActionButton';
import {
ActionButton,
ACTION_BUTTON_SIZES,
ACTION_BUTTON_COLORS,
ACTION_BUTTON_DEFAULT_PROPS,
} from './ActionButton';
} from './ActionButton.constants';
import mdx from './ActionButton.mdx';

export default {
Expand All @@ -26,12 +26,12 @@ export default {
},
};

const Template = ({ test_showLeftIcon, test_showRightIcon, ...props }) => {
const Template = ({ testShowLeftIcon, testShowRightIcon, ...props }) => {
return (
<ActionButton
{...props}
rightIcon={test_showRightIcon ? <ChevronRightIcon /> : null}
icon={test_showLeftIcon ? <ExpandDiagonalIcon /> : null}
rightIcon={testShowRightIcon ? <ChevronRightIcon /> : null}
icon={testShowLeftIcon ? <ExpandDiagonalIcon /> : null}
{...props}
/>
);
Expand All @@ -42,6 +42,6 @@ export const Playground = Template.bind({});
Playground.args = {
...ACTION_BUTTON_DEFAULT_PROPS,
tooltip: 'Expand',
test_showLeftIcon: true,
test_showRightIcon: false,
testShowLeftIcon: true,
testShowRightIcon: false,
};
73 changes: 17 additions & 56 deletions packages/components/src/form/ActionButton/ActionButton.styles.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/* eslint-disable import/prefer-default-export */
import { createStyles } from '@mantine/styles';
import { pxToRem, getPaddings, getFontExpressive } from './../../theme.mixins';
import { pxToRem, getFocusDefaultBorder } from '../../theme.mixins';

// These are really the styles when it is hovered, but they are applied when `active` prop is `true`
const getActiveStyles = (theme, color) => {
Expand All @@ -9,71 +10,31 @@ const getActiveStyles = (theme, color) => {
borderColor: theme.border.color.primary.hover,
color: `${theme.content.color.primary.hover} !important`,
},
negative: {
backgroundColor: theme.background.color.primary['hover--reverse'],
borderColor: theme.border.color.primary['hover--reverse'],
color: theme.content.color.primary['hover--reverse'],
},
phatic: {
backgroundColor: theme.background.color.phatic.hover,
borderColor: theme.border.color.phatic.hover,
color: theme.content.color.phatic.hover,
},
};
return activeStyles[color];
};
const getSizes = (size, padding) => {
return {
height: 'unset',
padding: padding[size],
};
};
const getSizes = (size, padding) => ({
height: 'unset',
padding: padding[size],
});

const getVariant = (color, theme) => {
const buttonActionTheme = theme.other.buttonAction;
const variants = {
primary: {
backgroundColor: theme.background.color.primary.default,
borderColor: theme.border.color.primary.default,
color: theme.content.color.primary.default,
backgroundColor: buttonActionTheme.background.color.primary.default,
border: 'none',
color: buttonActionTheme.content.color.primary.default,
'&:hover': {
backgroundColor: theme.background.color.primary.hover,
borderColor: theme.border.color.primary.hover,
color: theme.content.color.primary.hover,
backgroundColor: buttonActionTheme.background.color.primary.hover,
},
'&:active': {
backgroundColor: theme.background.color.primary.down,
borderColor: theme.border.color.primary.down,
color: theme.content.color.primary.down,
},
},
negative: {
backgroundColor: theme.background.color.primary.default,
borderColor: theme.border.color.primary.default,
color: theme.content.color.primary['default--reverse'],
'&:hover': {
backgroundColor: theme.background.color.primary['hover--reverse'],
borderColor: theme.border.color.primary['hover--reverse'],
color: theme.content.color.primary['hover--reverse'],
backgroundColor: buttonActionTheme.background.color.primary.pressed,
},
'&:active': {
backgroundColor: theme.background.color.primary['down--reverse'],
borderColor: theme.border.color.primary['down--reverse'],
color: `${theme.content.color.primary['down--reverse']}`,
},
},
phatic: {
backgroundColor: theme.background.color.phatic.default,
borderColor: theme.border.color.phatic.default,
color: theme.content.color.phatic.default,
'&:hover': {
backgroundColor: theme.background.color.phatic.hover,
borderColor: theme.border.color.phatic.hover,
color: theme.content.color.phatic.hover,
},
'&:active': {
backgroundColor: theme.background.color.phatic.down,
borderColor: theme.border.color.phatic.down,
color: theme.content.color.phatic.down,
'&:focus-visible': {
backgroundColor: buttonActionTheme.background.color.primary.hover,
...getFocusDefaultBorder(theme),
outline: 'none',
},
},
};
Expand All @@ -93,7 +54,7 @@ export const ActionButtonStyles = createStyles(
borderRadius: actionButtonTheme.border.radius[radius],
...actionButtonTheme.content.typo,
...getSizes(size || 'md', actionButtonTheme.spacing.padding),
...getVariant(color, actionButtonTheme),
...getVariant(color, theme),
...isActive,
},
inner: { gap: iconOnly ? 0 : actionButtonTheme.spacing.gap },
Expand Down
52 changes: 52 additions & 0 deletions packages/components/src/form/Button/Button.constants.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import PropTypes from 'prop-types';

export const BUTTON_SIZES = ['sm', 'md'];
// export const BUTTON_VARIANTS = ['filled', 'outline', 'link', 'light'];
export const BUTTON_VARIANTS = ['filled', 'outline', 'link'];
// export const BUTTON_COLORS = ['primary', 'secondary', 'terciary', 'phatic'];
export const BUTTON_COLORS = ['primary'];
// export const BUTTON_TEXT_ALIGN = ['left', 'center', 'right', 'appart'];
export const BUTTON_TEXT_ALIGN = ['center'];
export const BUTTON_DEFAULT_PROPS = {
color: BUTTON_COLORS[0],
size: BUTTON_SIZES[1],
variant: BUTTON_VARIANTS[0],
rounded: false,
loading: false,
fullWidth: false,
disabled: false,
textAlign: BUTTON_TEXT_ALIGN[0],
useAria: true,
isSelected: false,
};

export const BUTTON_PROP_TYPES = {
/** Controls the button size. */
size: PropTypes.string, // PropTypes.oneOf(BUTTON_SIZES),
/** Controls the button colors. */
color: PropTypes.oneOf(BUTTON_COLORS),
/** Controls the button variants. */
variant: PropTypes.oneOf(BUTTON_VARIANTS),
/** Controls the space and position between elements inside the button */
textAlign: PropTypes.oneOf(BUTTON_TEXT_ALIGN),
/** Controls the border radius */
rounded: PropTypes.bool,
/** Controls if is loading */
loading: PropTypes.bool,
/** Adds icon before button label */
leftIcon: PropTypes.node,
/** Adds icon after button label, */
rightIcon: PropTypes.node,
/** Sets button width to 100% of parent element */
fullWidth: PropTypes.bool,
/** Controls if the button is compact */
compact: PropTypes.bool,
/** Controls the disabled state */
disabled: PropTypes.bool,
/** Controls if Button uses aria role */
useAria: PropTypes.bool,
/** Aria label for button */
ariaLabel: PropTypes.string,
/** Controls if Button is selected */
isSelected: PropTypes.bool,
};
Loading

0 comments on commit e75bbcf

Please sign in to comment.