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

fix(sds): Txt, TextButton 컴포넌트 기본 스타일은 스타일 오버라이드 시 우선순위가 높이 올라오지 않도록 css 처리 #147

Merged
merged 2 commits into from
Aug 25, 2024
Merged

fix(sds): Txt, TextButton 컴포넌트 기본 스타일은 스타일 오버라이드 시 우선순위가 높이 올라오지 않도록 css 처리 #147

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
94bc07b
refactor: css 주는 방식 수정
Doeunnkimm Aug 25, 2024
6221123
fix: textButton에도 적용
Doeunnkimm Aug 25, 2024
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
6 changes: 3 additions & 3 deletions packages/core/sds/src/components/TextButton/TextButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { colors } from '@sds/theme';

import { Icon } from '../Icon';

import { arrowIconCss, textButtonCss } from './styles';
import { arrowIconCss, colorVar, textButtonCss, textDecorationVar } from './styles';
import { TextButtonVariant } from './types';

export interface TextButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
Expand All @@ -19,8 +19,8 @@ export const TextButton = forwardRef<HTMLButtonElement, TextButtonProps>((props,
const isArrowVariant = variant === 'arrow';

const style = {
color,
...(isUnderlineVariant && { textDecoration: 'underline' }),
[colorVar]: color,
[textDecorationVar]: isUnderlineVariant ? 'underline' : 'none',
...styleFromProps,
};

Expand Down
6 changes: 6 additions & 0 deletions packages/core/sds/src/components/TextButton/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
import { css } from '@emotion/react';
import { getCssVar } from '@sambad/css-utils';

export const colorVar = '--sambad-text-button-color';
export const textDecorationVar = '--sambad-text-button-text-decoration';

export const textButtonCss = css({
display: 'inline-flex',
Expand All @@ -7,6 +11,8 @@ export const textButtonCss = css({
cursor: 'pointer',
fontSize: '12px',
lineHeight: '150%',
color: getCssVar(colorVar),
textDecoration: getCssVar(textDecorationVar),

'&:disabled': {
cursor: 'not-allowed',
Expand Down
19 changes: 13 additions & 6 deletions packages/core/sds/src/components/Typography/Txt.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,15 @@ import { ElementType, forwardRef, HTMLAttributes } from 'react';

import { colors } from '@sds/theme';

import { fontSizeByTypography, fontWeightByTypography, fontWeightVariants } from './styles';
import {
colorVar,
fontSizeByTypography,
fontSizeVar,
fontWeightByTypography,
fontWeightVar,
fontWeightVariants,
TxtCss,
} from './styles';
import { FontWeight, Typography } from './types';

/**
Expand Down Expand Up @@ -31,14 +39,13 @@ export const Txt = forwardRef<HTMLSpanElement, TxtProps>((props, ref) => {
const fontSize = fontSizeByTypography[typography];

const style = {
color,
fontWeight,
fontSize,
lineHeight: '150%',
[colorVar]: color,
[fontWeightVar]: fontWeight,
[fontSizeVar]: fontSize,
...styleFromProps,
};

return <Tag ref={ref} style={style} {...restProps} />;
return <Tag ref={ref} css={TxtCss} style={style} {...restProps} />;
});

Txt.displayName = 'Txt';
14 changes: 14 additions & 0 deletions packages/core/sds/src/components/Typography/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
import { css } from '@emotion/react';
import { getCssVar } from '@sambad/css-utils';

import { FontWeight, Typography } from './types';

export const colorVar = '--sambad-typography-color';
export const fontWeightVar = '--sambad-typography-font-weight';
export const fontSizeVar = '--sambad-typography-font-size';

export const fontWeightVariants: Record<FontWeight, number> = {
regular: 400,
medium: 500,
Expand Down Expand Up @@ -40,3 +47,10 @@ export const fontWeightByTypography: Record<Typography, FontWeight> = {
body4: 'regular',
body5: 'regular',
};

export const TxtCss = css({
color: getCssVar(colorVar),
fontWeight: getCssVar(fontWeightVar),
fontSize: getCssVar(fontSizeVar),
lineHeight: '150%',
});
Loading