Skip to content

Commit

Permalink
Merge branch 'EightfoldAI:main' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
szhang-eightfold authored Aug 25, 2022
2 parents ecd3b0c + ba20e6b commit f1473dd
Show file tree
Hide file tree
Showing 33 changed files with 711 additions and 34 deletions.
43 changes: 43 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,49 @@

All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

### [2.7.1](https://github.com/EightfoldAI/octuple/compare/v2.7.0...v2.7.1) (2022-08-25)

### Bug Fixes

- inputs: text input color ([#328](https://github.com/EightfoldAI/octuple/issues/328)) ([263fb73](https://github.com/EightfoldAI/octuple/commits/263fb73fcd7e257c0da183c66ba94f84f5e44a49))
- menu: update menu min width and reduce font weight of menu item ([#327](https://github.com/EightfoldAI/octuple/issues/327)) ([565ac23](https://github.com/EightfoldAI/octuple/commits/565ac2341477736c48468377ac9677aec1ed9fb1))
- table: increase border radius ([#329](https://github.com/EightfoldAI/octuple/issues/329)) ([93a2ea1](https://github.com/EightfoldAI/octuple/commits/93a2ea104b7ac28e9c0b1b0af8977327034f6840))

## [2.7.0](https://github.com/EightfoldAI/octuple/compare/v2.6.2...v2.7.0) (2022-08-25)

### Features

- add loading state in button and tabs ([#326](https://github.com/EightfoldAI/octuple/issues/326)) ([954e6f6](https://github.com/EightfoldAI/octuple/commits/954e6f61e42a6838d4218907d95ebead419b16af))

### [2.6.2](https://github.com/EightfoldAI/octuple/compare/v2.6.1...v2.6.2) (2022-08-24)

### Bug Fixes

- system ui button transparency fix ([#325](https://github.com/EightfoldAI/octuple/issues/325)) ([232665d](https://github.com/EightfoldAI/octuple/commits/232665d60604d73fe5fd3688a42f706ecbf6efae))

### [2.6.1](https://github.com/EightfoldAI/octuple/compare/v2.6.0...v2.6.1) (2022-08-24)

### Bug Fixes

- exporting header ([#324](https://github.com/EightfoldAI/octuple/issues/324)) ([c166a71](https://github.com/EightfoldAI/octuple/commits/c166a71fba677ae4cc8868f272b46ce487670d88))

## [2.6.0](https://github.com/EightfoldAI/octuple/compare/v2.5.2...v2.6.0) (2022-08-24)

### Features

- panel custom header ([#318](https://github.com/EightfoldAI/octuple/issues/318)) ([6e80dad](https://github.com/EightfoldAI/octuple/commits/6e80dade501df9a48178551e618e7050b6f35827))

### Bug Fixes

- select: fixes pills layout and removes redundant options change ([#323](https://github.com/EightfoldAI/octuple/issues/323)) ([503f0d8](https://github.com/EightfoldAI/octuple/commits/503f0d8d68f8c9429210930d1f027b4850aa3b4f))
- update page as currentPage prop value updates ([#322](https://github.com/EightfoldAI/octuple/issues/322)) ([b5c6b8e](https://github.com/EightfoldAI/octuple/commits/b5c6b8e3e6c257f6cb1c917b35ad133f3da2c095))

### [2.5.3](https://github.com/EightfoldAI/octuple/compare/v2.5.2...v2.5.3) (2022-08-23)

### Bug Fixes

- select: fixes pills layout and removes redundant options change ([#323](https://github.com/EightfoldAI/octuple/issues/323)) ([503f0d8](https://github.com/EightfoldAI/octuple/commits/503f0d8d68f8c9429210930d1f027b4850aa3b4f))

### [2.5.2](https://github.com/EightfoldAI/octuple/compare/v2.5.1...v2.5.2) (2022-08-22)

### Features
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@eightfold.ai/octuple",
"version": "2.5.2",
"version": "2.7.1",
"license": "MIT",
"main": "lib/octuple.js",
"types": "lib/octuple.d.ts",
Expand Down
36 changes: 33 additions & 3 deletions src/components/Button/BaseButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { Icon, IconSize } from '../Icon';
import { Badge } from '../Badge';
import { Breakpoints, useMatchMedia } from '../../hooks/useMatchMedia';
import { mergeClasses } from '../../shared/utilities';
import { Loader, LoaderSize } from '../Loader';

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

Expand Down Expand Up @@ -46,6 +47,7 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
theme,
toggle,
type,
loading = false,
...rest
},
ref: Ref<HTMLButtonElement>
Expand Down Expand Up @@ -105,6 +107,7 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
iconExists && alignIcon === ButtonIconAlign.Right,
},
{ [styles.disabled]: allowDisabledFocus || disabled },
{ [styles.loading]: loading },
]);

const buttonTextClassNames: string = mergeClasses([
Expand Down Expand Up @@ -155,6 +158,32 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
return iconSize;
};

const getLoaderSize = (): LoaderSize => {
let loaderSize: LoaderSize;
if (size === ButtonSize.Flex && largeScreenActive) {
loaderSize = LoaderSize.Small;
} else if (
size === ButtonSize.Flex &&
(mediumScreenActive || smallScreenActive)
) {
loaderSize = LoaderSize.Medium;
} else if (size === ButtonSize.Flex && xSmallScreenActive) {
loaderSize = LoaderSize.Large;
} else if (size === ButtonSize.Large) {
loaderSize = LoaderSize.Large;
} else if (size === ButtonSize.Medium) {
loaderSize = LoaderSize.Medium;
} else if (size === ButtonSize.Small) {
loaderSize = LoaderSize.Small;
}
return loaderSize;
};

const getButtonLoader = (): JSX.Element =>
loading && (
<Loader classNames={styles.loader} size={getLoaderSize()} />
);

const getButtonIcon = (): JSX.Element => (
<Icon
{...iconProps}
Expand All @@ -181,19 +210,19 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
ref={ref}
{...rest}
aria-checked={toggle ? !!checked : undefined}
aria-disabled={disabled}
aria-disabled={disabled || loading}
aria-label={ariaLabel}
aria-pressed={toggle ? !!checked : undefined}
defaultChecked={checked}
disabled={!allowDisabledFocus && disabled}
disabled={(!allowDisabledFocus && disabled) || loading}
className={buttonBaseClassNames}
id={id}
onClick={!allowDisabledFocus ? onClick : null}
style={style}
type={htmlType}
>
{iconExists && !textExists && getButtonIcon()}
{counterExists && !textExists && (
{counterExists && !textExists && !loading && (
<Badge classNames={badgeClassNames}>{counter}</Badge>
)}
{iconExists && textExists && (
Expand All @@ -204,6 +233,7 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
)}
{!iconExists &&
getButtonContent(buttonTextClassNames, text)}
{getButtonLoader()}
</button>
{split && (
<SplitButton
Expand Down
1 change: 1 addition & 0 deletions src/components/Button/Button.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,7 @@ const buttonArgs: Object = {
theme: ButtonTheme.light,
toggle: false,
counter: 0,
loading: false,
};

Primary.args = {
Expand Down
4 changes: 4 additions & 0 deletions src/components/Button/Button.types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -212,4 +212,8 @@ export interface ButtonProps extends NativeButtonProps {
* @default false
*/
transparent?: boolean;
/**
* If the button is in loading state
*/
loading?: boolean;
}
24 changes: 24 additions & 0 deletions src/components/Button/button.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
min-width: max-content;
transition: all $motion-duration-extra-fast $motion-easing-easeinout 0s;
white-space: nowrap;
position: relative;

span:not(.column):not(.counter) {
align-items: center;
Expand Down Expand Up @@ -161,6 +162,11 @@
cursor: not-allowed;
}

&.loading {
opacity: 1;
pointer-events: none;
}

&:hover {
.counter {
background-color: var(--button-counter-hover-background-color);
Expand All @@ -178,6 +184,20 @@
&:focus-visible {
outline: none;
}

.loader {
position: absolute;
background: inherit;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: $corner-radius-xl;
left: 0;
top: 0;
animation: fadeIn $motion-duration-normal $motion-easing-easein forwards;
}
}

.button-text-large {
Expand Down Expand Up @@ -349,6 +369,10 @@
--color: var(--grey-color-60);
color: var(--color);

&.transparent {
background: transparent;
}

&:not(.transparent) {
background-color: var(--bg);
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Dropdown/dropdown.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
border-radius: $corner-radius-xl;
font-family: $octuple-font-family;
transition: all $motion-duration-fast $motion-easing-easeout;
min-width: 280px;
min-width: 200px;
opacity: 0;
white-space: normal;
z-index: $z-index-400;
Expand Down
1 change: 1 addition & 0 deletions src/components/Icon/mdi.ts
Original file line number Diff line number Diff line change
Expand Up @@ -296,6 +296,7 @@ export enum IconName {
mdiMinusBoxMultipleOutline = 'M18 11H10V9H18M20 4V16H8V4H20M20 2H8C6.9 2 6 2.9 6 4V16C6 17.11 6.9 18 8 18H20C21.11 18 22 17.11 22 16V4C22 2.9 21.11 2 20 2M4 6H2V20C2 21.11 2.9 22 4 22H18V20H4V6Z',
mdiMinusBoxOutline = 'M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M17,11V13H7V11H17Z',
mdiMinusThick = 'M20 14H4V10H20V14Z',
mdiNoodles = 'M22 3L10 4.41V6H22V7H10V12H22C22 13.81 21.43 15.46 20.32 16.95S17.77 19.53 16 20.25V22H8V20.25C6.24 19.53 4.79 18.43 3.68 16.95S2 13.81 2 12H5V4L22 2V3M6 4.88V6H7V4.78L6 4.88M6 7V12H7V7H6M9 12V7H8V12H9M9 6V4.55L8 4.64V6H9Z',
mdiNote = 'M14,10V4.5L19.5,10M5,3C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V9L15,3H5Z',
mdiNoteOutline = 'M14,10H19.5L14,4.5V10M5,3H15L21,9V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3M5,5V19H19V12H12V5H5Z',
mdiOfficeBuilding = 'M5,3V21H11V17.5H13V21H19V3H5M7,5H9V7H7V5M11,5H13V7H11V5M15,5H17V7H15V5M7,9H9V11H7V9M11,9H13V11H11V9M15,9H17V11H15V9M7,13H9V15H7V13M11,13H13V15H11V13M15,13H17V15H15V13M7,17H9V19H7V17M15,17H17V19H15V17Z',
Expand Down
11 changes: 2 additions & 9 deletions src/components/Inputs/input.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
border: 1px solid var(--border-color);
border-radius: $corner-radius-m;
box-sizing: border-box;
color: var(--grey-color-60);
color: var(--text-primary-color);
font-family: $octuple-font-family;
font-size: $text-font-size-3;
line-height: $text-line-height-1;
Expand Down Expand Up @@ -111,10 +111,6 @@
}
}

&:hover {
color: var(--text-primary-color);
}

&:active ~ .icon-button {
background-color: transparent;
border-color: transparent;
Expand Down Expand Up @@ -279,7 +275,6 @@

&:active {
border-color: var(--grey-color-60);
color: var(--text-primary-color);

&.underline {
border-color: transparent;
Expand All @@ -295,7 +290,6 @@
}

&:focus {
color: var(--text-primary-color);
border-color: $focus-visible-shadow-color;
transition: border-color $motion-duration-extra-fast
$motion-easing-easeinout;
Expand Down Expand Up @@ -873,7 +867,7 @@
border: 1px solid var(--border-color);
border-radius: $corner-radius-m;
box-sizing: border-box;
color: var(--grey-color-60);
color: var(--text-primary-color);
font-family: $octuple-font-family;
font-size: $text-font-size-3;
line-height: $text-line-height-4;
Expand All @@ -895,7 +889,6 @@
}

&:focus {
color: var(--text-primary-color);
border-color: $focus-visible-shadow-color;
transition: border-color $motion-duration-extra-fast
$motion-easing-easeinout;
Expand Down
40 changes: 40 additions & 0 deletions src/components/Loader/Loader.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React from 'react';
import { Stories } from '@storybook/addon-docs';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Loader, LoaderSize } from './';

export default {
title: 'Loader',
parameters: {
docs: {
page: (): JSX.Element => (
<main>
<article>
<section>
<h1>Loader</h1>
</section>
<section>
<Stories includePrimary title="" />
</section>
</article>
</main>
),
},
},
argTypes: {
size: {
options: [LoaderSize.Large, LoaderSize.Medium, LoaderSize.Small],
control: { type: 'select' },
},
},
} as ComponentMeta<typeof Loader>;

const Loader_Story: ComponentStory<typeof Loader> = (args) => (
<Loader {...args} />
);

export const Default = Loader_Story.bind({});

Default.args = {
classNames: 'my-loader-class',
};
30 changes: 30 additions & 0 deletions src/components/Loader/Loader.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React, { FC } from 'react';
import { LoaderProps, LoaderSize } from './Loader.types';
import { mergeClasses } from '../../shared/utilities';

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

export const Loader: FC<LoaderProps> = ({
size = LoaderSize.Small,
classNames,
...rest
}) => {
const dotClasses = mergeClasses([
styles.dot,
{
[styles.small]: size === LoaderSize.Small,
[styles.medium]: size === LoaderSize.Medium,
[styles.large]: size === LoaderSize.Large,
},
]);
return (
<div
className={mergeClasses([styles.loaderContainer, classNames])}
{...rest}
>
<div className={dotClasses} />
<div className={dotClasses} />
<div className={dotClasses} />
</div>
);
};
11 changes: 11 additions & 0 deletions src/components/Loader/Loader.types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { OcBaseProps } from '../OcBase';

export enum LoaderSize {
Large = 'large',
Medium = 'medium',
Small = 'small',
}

export interface LoaderProps extends OcBaseProps<HTMLDivElement> {
size?: LoaderSize;
}
2 changes: 2 additions & 0 deletions src/components/Loader/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export * from './Loader';
export * from './Loader.types';
Loading

0 comments on commit f1473dd

Please sign in to comment.