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

refactor(tag): refactor tag with new tokens #93

Merged
merged 4 commits into from
Aug 13, 2020
Merged

refactor(tag): refactor tag with new tokens #93

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c0608d6
fix(Tag): reconstruct tag with new tokens
Aug 13, 2020
fe04751
Merge branch 'master' into fix-tag-token
zzt1224 Aug 13, 2020
43a11b5
fix(fix obsolete test snapshot): fix test snapshot
Aug 13, 2020
84205b7
style(styles): fix design problems
Aug 13, 2020
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
41 changes: 11 additions & 30 deletions packages/components/src/components/tag/Tag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,16 @@
import React, { useContext } from 'react';
import { TagProps, TagTypeKey, TagColor, TagStatusKey, TagStatus } from './interface';
import { TagProps } from './interface';
import { ConfigContext } from '../config-provider';
import { Close } from '@gio-design/icons';
import classnames from 'classnames';

export const isProrupt = (type?: TagTypeKey, closable = false) => type === 'prorupt' || closable;

export const isLarge = (type?: TagTypeKey) => type === 'large';

export const isPredifinedColor = (color?: string) => Object.keys(TagColor).includes(color || '');

export const isPredifinedStatus = (type?: string) => Object.keys(TagStatus).includes(type || '');

export const isToggleClose = (closable = false, persistCloseIcon = false) => closable && !persistCloseIcon;

export const getTypeClass = (prefix = 'tag', type?: TagTypeKey, closable = false) =>
classnames({ [`${prefix}-prorupt`]: isProrupt(type, closable), [`${prefix}-large`]: isLarge(type) });

export const getStatusClass = (prefix = 'tag', status?: TagStatusKey) =>
classnames({ [`${prefix}-status-${status}`]: isPredifinedStatus(status) });

export const getColorClass = (prefix = 'tag', color?: string) =>
classnames({ [`${prefix}-color-${color}`]: isPredifinedColor(color) });

export const getDeleteToggleClass = (prefix = 'tag', isToggleClose = false) =>
classnames({ [`${prefix}-delete-toggle`]: isToggleClose });

export const getDisabledClass = (prefix = 'tag', disabled = false) => classnames({ [`${prefix}-disabled`]: disabled });

const Tag: React.FC<TagProps & React.HTMLAttributes<HTMLSpanElement>> = (props) => {
const {
children,
type,
type = 'normal',
size = 'medium',
status,
color,
closable,
Expand All @@ -49,17 +28,19 @@ const Tag: React.FC<TagProps & React.HTMLAttributes<HTMLSpanElement>> = (props)
<span
className={classnames(
prefix,
getTypeClass(prefix, type, closable),
getStatusClass(prefix, status),
getColorClass(prefix, color),
getDeleteToggleClass(prefix, isToggleClose(closable, persistCloseIcon)),
getDisabledClass(prefix, disabled),
classnames({ [`${prefix}-size-${size}`]: size }),
classnames({ [`${prefix}-type-${type}`]: type }),
classnames({ [`${prefix}-status-${status}`]: status }),
classnames({ [`${prefix}-color-${color}`]: color }),
classnames({ [`${prefix}-closable`]: closable }),
classnames({ [`${prefix}-closable-toggle`]: isToggleClose(closable, persistCloseIcon) }),
classnames({ [`${prefix}-closable-disabled`]: disabled }),
className
)}
{...restProps}
>
{children}
{closable && !disabled ? <Close className={`${prefix}-close`} onClick={onClose} /> : null}
{closable && !disabled ? <Close className={`${prefix}-closable-icon`} onClick={onClose} /> : null}
</span>
);
};
Expand Down
47 changes: 4 additions & 43 deletions packages/components/src/components/tag/__tests__/Tag.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,66 +32,27 @@ describe('<Tag />', () => {
expect(tree.hasClass('test-custom-tag')).toBe(true);
});

it('should have "gio-delete-toggle', () => {
it('should have "gio-tag-closable-toggle', () => {
const tree = shallow(<Tag closable={true} persistCloseIcon={false} />);
tree.simulate('hover');
expect(tree.hasClass('gio-tag-delete-toggle')).toBe(true);
expect(tree.exists('.gio-tag-close')).toBe(true);
expect(tree.hasClass('gio-tag-closable-toggle')).toBe(true);
expect(tree.exists('.gio-tag-closable-icon')).toBe(true);
});

it('should onClose call back', () => {
const onClose = (e) => {
expect(true).toBe(true);
};
const tree = shallow(<Tag closable={true} persistCloseIcon={true} onClose={onClose} />);
tree.find('.gio-tag-close').simulate('click');
tree.find('.gio-tag-closable-icon').simulate('click');
});
});

describe('Tag condition functions', () => {
it('isProrupt', () => {
expect(isProrupt('prorupt', false)).toBe(true);
expect(isProrupt('normal', true)).toBe(true);
});
it('isLarge', () => {
expect(isLarge('large')).toBe(true);
});
it('isPredifinedColor', () => {
expect(isPredifinedColor('beta')).toBe(true);
expect(isPredifinedColor('new')).toBe(true);
expect(isPredifinedColor('asdljalksdj')).toBe(false);
});
it('isPredifinedStatus', () => {
expect(isPredifinedStatus('success')).toBe(true);
expect(isPredifinedStatus('warning')).toBe(true);
expect(isPredifinedStatus('asdljalksdj')).toBe(false);
});
it('isPersistClose', () => {
expect(isToggleClose(true, true)).toBe(false);
expect(isToggleClose(true, false)).toBe(true);
expect(isToggleClose(false, true)).toBe(false);
expect(isToggleClose(false, false)).toBe(false);
});
});

describe('Tag conditional classes functions', () => {
const prefix = 'gio-tag';
it('getTypeClass', () => {
expect(getTypeClass(prefix, 'normal')).toBe('');
expect(getTypeClass(prefix, 'prorupt', true)).toBe('gio-tag-prorupt');
expect(getTypeClass(prefix, 'large', true)).toBe('gio-tag-prorupt gio-tag-large');
});
it('getStatusClass', () => {
expect(getStatusClass(prefix, 'success')).toBe('gio-tag-status-success');
});
it('getColorClass', () => {
expect(getColorClass(prefix, 'beta')).toBe('gio-tag-color-beta');
});
it('getDeleteToggleClass', () => {
expect(getDeleteToggleClass(prefix, true)).toBe('gio-tag-delete-toggle');
expect(getDeleteToggleClass(prefix, false)).toBe('');
});
it('getDisabledClass', () => {
expect(getDisabledClass(prefix, true)).toBe('gio-tag-disabled');
});
});
2 changes: 1 addition & 1 deletion packages/components/src/components/tag/__tests__/__snapshots__/Tag.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@

exports[`<Tag /> renders <Tag /> components 1`] = `
<span
className="gio-tag"
className="gio-tag gio-tag-size-medium gio-tag-type-normal"
/>
`;
34 changes: 4 additions & 30 deletions packages/components/src/components/tag/interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,8 @@
export enum TagType {
'normal',
'prorupt',
'large',
}

export enum TagStatus {
'success',
'warning',
'error',
'offline',
'draft',
}

export enum TagColor {
'beta',
'new',
'grayscale',
'blue',
}

export type TagTypeKey = keyof typeof TagType;

export type TagStatusKey = keyof typeof TagStatus;

export type TagColorKey = keyof typeof TagColor;

export interface TagProps {
type?: TagTypeKey;
status?: TagStatusKey;
color?: TagColorKey | string;
type?: 'normal' | 'prorupt';
status?: 'success' | 'warning' | 'error' | 'offline' | 'draft';
size?: 'small' | 'medium' | 'large';
color?: 'beta' | 'new' | 'grayscale' | 'blue';
closable?: boolean;
disabled?: boolean;
persistCloseIcon?: boolean;
Expand Down
153 changes: 75 additions & 78 deletions packages/components/src/components/tag/style/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,135 +1,132 @@
@import '../../../stylesheet/font.less';
@import '../../../stylesheet/fontSize.less';
@import '../../../stylesheet//radius.less';
@import '../../../stylesheet/theme.less';
@import '../../../stylesheet/textColor.less';
@import '~@gio-design/tokens/dist/variables.less';

@tag-prefix-cls: ~'@{component-prefix}-tag';
@tag-padding: 8px;
@tag-padding: @size-spacing-xs;

@tag-font-size: @default-font-size-2;
@tag-line-height: 20px;

@tag-font-size-prorupt: @default-font-size-3;
@tag-line-height-prorupt: 24px;

@tag-font-size-large: @default-font-size-3;
@tag-line-height-large: 32px;

.@{tag-prefix-cls}{
.@{tag-prefix-cls} {
display: inline-block;
color: @color-text-tag-sign-regular;
background-color: @color-background-tag-sign;
border-radius: @border-radius-medium;
padding-left: @tag-padding;
padding-right: @tag-padding;
font-size: @tag-font-size;
line-height: @tag-line-height;
padding-left: @tag-padding;
color: @color-text-tag-sign-normal;
font-family: @font-family;
font-weight: @weight-font-medium;
background-color: @color-background-tag-sign;
border-radius: @radius-border-small;
cursor: default;

&-status {
&-success {
color: @color-text-tag-sign-inline;
}
&-warning {
color: @color-text-tag-sign-ready;
}
&-error {
color: @color-background-tag-status-error;
}
&-draft {
color:@color-text-tag-sign-draft;
&-size {
&-small {
font-weight: @weight-font-medium;
font-size: @size-font-12;
line-height: 20px;
}
&-offline {
color: @color-text-tag-sign-offline;

&-medium {
font-weight: @weight-font-regular;
font-size: @size-font-14;
line-height: 24px;
}
}

&-prorupt {
font-size: @tag-font-size-prorupt;
line-height: @tag-line-height-prorupt;
font-weight: @weight-font-regular;
&-large {
font-weight: @weight-font-regular;
font-size: @size-font-14;
line-height: 32px;
}
}

&-prorupt&-status {
&-status {
&-success {
color: @default-color-text-inverse;
color: @color-text-tag-sign-inline;
}
&-success.@{tag-prefix-cls}-type-prorupt {
background-color: @color-background-tag-status-success;
}
&-warning {
color: @default-color-text-inverse;
color: @color-text-tag-sign-processing;
}
&-warning.@{tag-prefix-cls}-type-prorupt {
background-color: @color-background-tag-status-warning;
}
&-error {
color: @default-color-text-inverse;
color: @color-background-tag-status-error;
}
&-error.@{tag-prefix-cls}-type-prorupt {
background-color: @color-background-tag-status-error;
}
&-draft {
color: @default-color-text-inverse;
background-color: @color-text-tag-sign-draft;
color: @color-text-tag-sign-draft;
}
&-offline {
color: @default-color-text-inverse;
background-color: @color-text-tag-sign-offline;
color: @color-text-tag-sign-offline;
}
}

&-large {
font-size: @tag-font-size-large;
line-height: @tag-line-height-large;
&-type {
&-prorupt {
color: @color-text-tag-status-button;
}
}

&-color {
&-beta {
color: @color-text-tag-version-beta;
background-color: @color-background-tag-version-beta;
font-weight: @weight-font-medium;
}
&-new {
color: @color-text-tag-version-new;
background-color: @color-background-tag-version-new;
font-weight: @weight-font-medium;
}
&-grayscale {
color: @color-text-tag-version-grayscale;
background-color: @color-background-tag-version-grayscale;
font-weight: @weight-font-medium;
}
&-blue {
color: @color-text-tag-filter-blue;
background-color: @color-background-tag-filter-blue;
font-weight: @weight-font-medium;
color: @color-background-tag-filter-dark-normal;
background-color: @color-background-tag-filter-dark-normal;
}
}

&-delete-toggle & {
&-close {
display: none;
&-closable {
background-color: @color-background-tag-filter-light-normal;
&:hover {
background-color: @color-background-tag-filter-light-hover;
}
&:focus {
background-color: @color-background-tag-filter-light-click;
}
}

&-delete-toggle:hover {
background-color: @color-background-tag-filter-hover;
}
&.@{tag-prefix-cls}-type-prorupt {
background-color: @color-background-tag-filter-dark-normal;
&:hover {
background-color: @color-background-tag-filter-dark-hover;
}
&:focus {
background-color: @color-background-tag-filter-dark-click;
}
}

&-delete-toggle:hover & {
&-close {
display: inline;
&-icon {
margin-bottom: 2px;
margin-left: @tag-padding;
vertical-align: middle;
cursor: pointer;
}
}

&-close {
vertical-align: middle;
margin-left: @tag-padding;
margin-bottom: 2px;
cursor: pointer;
}
&-toggle & {
&-icon {
display: none;
}
}

&-disabled {
color: @color-text-tag-filter-disable!important;
background-color: @color-background-tag-filter-disable!important;
&-toggle:hover & {
&-icon {
display: inline;
}
}

&-disabled {
color: @color-text-tag-filter-disable-l !important;
background-color: @color-background-tag-filter-dark-disable !important;
}
}
}
Loading