Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: props: normalize label, classnames, button alignment and iconprops #97

Merged
merged 5 commits into from
May 3, 2022
Merged

feat: props: normalize label, classnames, button alignment and iconprops #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4c0bf72
fix: button: fixes button height and min width in flex layouts
dkilgore-eightfold May 2, 2022
9b69648
feat: props: normalize label, classnames, button alignment and iconprops
dkilgore-eightfold May 2, 2022
2061039
Merge branch 'main' into dkilgore-eightfold/normalize-classnames-icon…
dkilgore-eightfold May 2, 2022
835545d
Merge commit '12a4cfcaa94772973246e02ba08d66e604ae72bd' into dkilgore…
dkilgore-eightfold May 3, 2022
4cb5cbe
fix: match score: updates references and classname prop
dkilgore-eightfold May 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
628 changes: 467 additions & 161 deletions src/__snapshots__/storybook.test.js.snap
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions src/components/Badge/Badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
import React, { FC } from 'react';
import { BadgeProps } from './Badge.types';
import { classNames } from '../../shared/utilities';
import { mergeClasses } from '../../shared/utilities';

import styles from './badge.module.scss';

export const Badge: FC<BadgeProps> = ({
active,
className,
classNames,
style,
children,
disruptive,
}) => {
const badgeClasses: string = classNames([
const badgeClasses: string = mergeClasses([
styles.badge,
'header6',
{ [styles.disruptive]: disruptive },
className,
classNames,
{ [styles.active]: active },
]);
return (
Expand Down
4 changes: 2 additions & 2 deletions src/components/Badge/Badge.types.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ export interface BadgeProps {
*/
disruptive?: boolean;
/**
* Custom badge className
* Custom badge classNames
*/
className?: string;
classNames?: string;
/**
* Custom badge style
*/
Expand Down
44 changes: 26 additions & 18 deletions src/components/Button/BaseButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { FC, Ref } from 'react';
import {
ButtonIconAlign,
ButtonShape,
ButtonSize,
ButtonTextAlign,
Expand All @@ -8,27 +9,27 @@ import {
InternalButtonProps,
SplitButton,
} from './';
import { Icon, IconName, IconSize } from '../Icon';
import { Icon, IconSize } from '../Icon';
import { Breakpoints, useMatchMedia } from '../../hooks/useMatchMedia';
import { classNames } from '../../shared/utilities';
import { mergeClasses } from '../../shared/utilities';

import styles from './button.module.scss';

export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
(
{
alignIcon = ButtonIconAlign.Left,
alignText = ButtonTextAlign.Center,
allowDisabledFocus = false,
ariaLabel,
buttonWidth = ButtonWidth.fitContent,
checked = false,
className,
classNames,
disabled = false,
disruptive = false,
dropShadow = false,
htmlType,
icon,
iconColor,
iconProps,
id,
onClick,
onContextMenu,
Expand All @@ -51,11 +52,11 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
const smallScreenActive: boolean = useMatchMedia(Breakpoints.Small);
const xSmallScreenActive: boolean = useMatchMedia(Breakpoints.XSmall);

const iconExists: boolean = !!icon;
const iconExists: boolean = !!iconProps;
const textExists: boolean = !!text;

const buttonBaseSharedClassNames: string = classNames([
className,
const buttonBaseSharedClassNames: string = mergeClasses([
classNames,
{
[styles.buttonPadding3]:
size === ButtonSize.Flex && largeScreenActive,
Expand All @@ -80,16 +81,24 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
{ [styles.dark]: theme === ButtonTheme.dark },
]);

const buttonBaseClassNames: string = classNames([
const buttonBaseClassNames: string = mergeClasses([
buttonBaseSharedClassNames,
{ [styles.buttonStretch]: buttonWidth === ButtonWidth.fill },
{ [styles.splitLeft]: split },
{ [styles.left]: alignText === ButtonTextAlign.Left },
{ [styles.right]: alignText === ButtonTextAlign.Right },
{
[styles.iconLeft]:
iconExists && alignIcon === ButtonIconAlign.Left,
},
{
[styles.iconRight]:
iconExists && alignIcon === ButtonIconAlign.Right,
},
{ [styles.disabled]: allowDisabledFocus || disabled },
]);

const buttonTextClassNames: string = classNames([
const buttonTextClassNames: string = mergeClasses([
{ [styles.button3]: size === ButtonSize.Flex && largeScreenActive },
{
[styles.button2]:
Expand Down Expand Up @@ -126,11 +135,10 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
return iconSize;
};

const getButtonIcon = (icon: IconName): JSX.Element => (
const getButtonIcon = (): JSX.Element => (
<Icon
className={styles.icon}
color={iconColor}
path={icon}
{...iconProps}
classNames={styles.icon}
size={getButtonIconSize()}
/>
);
Expand Down Expand Up @@ -161,10 +169,10 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
style={style}
type={htmlType}
>
{iconExists && !textExists && getButtonIcon(icon)}
{iconExists && !textExists && getButtonIcon()}
{iconExists && textExists && (
<span>
{getButtonIcon(icon)}
{getButtonIcon()}
{getButtonText(buttonTextClassNames, text)}
</span>
)}
Expand All @@ -173,10 +181,10 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
{split && (
<SplitButton
{...splitButtonProps}
className={
classNames={
buttonBaseSharedClassNames +
' ' +
splitButtonProps?.className
splitButtonProps?.classNames
}
checked={splitButtonChecked}
disruptive={disruptive}
Expand Down
68 changes: 49 additions & 19 deletions src/components/Button/Button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { FC } from 'react';
import {
ButtonIconAlign,
ButtonShape,
ButtonSize,
ButtonTextAlign,
Expand Down Expand Up @@ -29,7 +30,7 @@ export const Primary = () => (
<p>Default Flex</p>
<PrimaryButton
ariaLabel="Primary Button"
icon={IconName.mdiCardsHeart}
iconProps={{ path: IconName.mdiCardsHeart }}
onClick={_alertClicked}
text="Primary Button"
/>
Expand All @@ -40,7 +41,7 @@ export const Primary = () => (
<PrimaryButton
ariaLabel="Primary Button"
buttonWidth={ButtonWidth.fill}
icon={IconName.mdiCardsHeart}
iconProps={{ path: IconName.mdiCardsHeart }}
onClick={_alertClicked}
text="Primary Button"
/>
Expand Down Expand Up @@ -68,16 +69,27 @@ export const Primary = () => (
<p>Icon only</p>
<PrimaryButton
ariaLabel="Primary Button"
icon={IconName.mdiCardsHeart}
iconProps={{ path: IconName.mdiCardsHeart }}
onClick={_alertClicked}
size={ButtonSize.Large}
/>
<br />
<br />
<p>Text + Icon</p>
<p>Text + Left Icon</p>
<PrimaryButton
ariaLabel="Primary Button"
iconProps={{ path: IconName.mdiCardsHeart }}
onClick={_alertClicked}
size={ButtonSize.Large}
text="Primary Button"
/>
<br />
<br />
<p>Text + Right Icon</p>
<PrimaryButton
alignIcon={ButtonIconAlign.Right}
ariaLabel="Primary Button"
icon={IconName.mdiCardsHeart}
iconProps={{ path: IconName.mdiCardsHeart }}
onClick={_alertClicked}
size={ButtonSize.Large}
text="Primary Button"
Expand Down Expand Up @@ -120,7 +132,7 @@ export const Secondary = () => (
<p>Icon only</p>
<SecondaryButton
ariaLabel="Secondary Button"
icon={IconName.mdiCardsHeart}
iconProps={{ path: IconName.mdiCardsHeart }}
onClick={_alertClicked}
size={ButtonSize.Large}
/>
Expand All @@ -129,7 +141,7 @@ export const Secondary = () => (
<p>Text + Icon</p>
<SecondaryButton
ariaLabel="Secondary Button"
icon={IconName.mdiCardsHeart}
iconProps={{ path: IconName.mdiCardsHeart }}
onClick={_alertClicked}
size={ButtonSize.Large}
text="Secondary Button"
Expand Down Expand Up @@ -173,7 +185,7 @@ export const Default = () => (
<p>Icon only</p>
<DefaultButton
ariaLabel="Default Button"
icon={IconName.mdiCardsHeart}
iconProps={{ path: IconName.mdiCardsHeart }}
onClick={_alertClicked}
size={ButtonSize.Large}
/>
Expand All @@ -182,7 +194,7 @@ export const Default = () => (
<p>Text + Icon</p>
<DefaultButton
ariaLabel="Default Button"
icon={IconName.mdiCardsHeart}
iconProps={{ path: IconName.mdiCardsHeart }}
onClick={_alertClicked}
size={ButtonSize.Large}
text="Default Button"
Expand Down Expand Up @@ -226,7 +238,7 @@ export const Neutral = () => (
<p>Icon only</p>
<NeutralButton
ariaLabel="Neutral Button"
icon={IconName.mdiCardsHeart}
iconProps={{ path: IconName.mdiCardsHeart }}
onClick={_alertClicked}
size={ButtonSize.Large}
/>
Expand All @@ -235,7 +247,7 @@ export const Neutral = () => (
<p>Text + Icon</p>
<NeutralButton
ariaLabel="Neutral Button"
icon={IconName.mdiCardsHeart}
iconProps={{ path: IconName.mdiCardsHeart }}
onClick={_alertClicked}
size={ButtonSize.Large}
text="Neutral Button"
Expand Down Expand Up @@ -302,7 +314,11 @@ export const Toggle: FC<ExampleProps> = ({ checked }) => {
<PrimaryButton
ariaLabel="Primary Button"
checked={skill1Added || checked}
icon={skill1Added ? IconName.mdiMinus : IconName.mdiPlus}
iconProps={{
path: skill1Added
? IconName.mdiMinus
: IconName.mdiPlus,
}}
onClick={set1Added}
size={ButtonSize.Medium}
text="Primary Button"
Expand All @@ -313,7 +329,11 @@ export const Toggle: FC<ExampleProps> = ({ checked }) => {
<SecondaryButton
ariaLabel="Secondary Button"
checked={skill2Added || checked}
icon={skill2Added ? IconName.mdiMinus : IconName.mdiPlus}
iconProps={{
path: skill2Added
? IconName.mdiMinus
: IconName.mdiPlus,
}}
onClick={set2Added}
size={ButtonSize.Medium}
text="Secondary Button"
Expand All @@ -324,7 +344,11 @@ export const Toggle: FC<ExampleProps> = ({ checked }) => {
<DefaultButton
ariaLabel="Default Button"
checked={skill3Added || checked}
icon={skill3Added ? IconName.mdiMinus : IconName.mdiPlus}
iconProps={{
path: skill3Added
? IconName.mdiMinus
: IconName.mdiPlus,
}}
onClick={set3Added}
size={ButtonSize.Medium}
text="Default Button"
Expand All @@ -335,7 +359,11 @@ export const Toggle: FC<ExampleProps> = ({ checked }) => {
<NeutralButton
ariaLabel="Neutral Button"
checked={skill4Added || checked}
icon={skill4Added ? IconName.mdiMinus : IconName.mdiPlus}
iconProps={{
path: skill4Added
? IconName.mdiMinus
: IconName.mdiPlus,
}}
onClick={set4Added}
size={ButtonSize.Medium}
text="Neutral Button"
Expand All @@ -361,10 +389,12 @@ export const TwoState: FC<ExampleProps> = ({ checked }) => {
ariaLabel="Two State Button"
checked={isToggled || checked}
counter={8}
iconOne={IconName.mdiCardsHeart}
iconTwo={
isToggled ? IconName.mdiChevronUp : IconName.mdiChevronDown
}
iconOneProps={{ path: IconName.mdiCardsHeart }}
iconTwoProps={{
path: isToggled
? IconName.mdiChevronUp
: IconName.mdiChevronDown,
}}
onClick={setToggled}
text="Two State Button"
toggle
Expand Down
Loading