Skip to content

Commit

Permalink
refactor(elements): rename primary & secondary CSS getters in Button
Browse files Browse the repository at this point in the history
  • Loading branch information
ivangabriele committed Sep 9, 2024
1 parent b83dc13 commit 7c75af0
Show file tree
Hide file tree
Showing 3 changed files with 8 additions and 8 deletions.
6 changes: 3 additions & 3 deletions src/elements/Button/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import classnames from 'classnames'
import { useCallback, useMemo, type MouseEvent, type ButtonHTMLAttributes, type FunctionComponent } from 'react'
import styled from 'styled-components'

import { interpolatePrimaryButtonThemedCss, interpolateSecondaryButtonThemedCss } from './utils'
import { getPrimaryButtonCss, getSecondaryButtonCss } from './utils'
import { Accent, Size } from '../../constants'
import { type IconProps } from '../../types/definitions'
import { stopMouseEventPropagation } from '../../utils/stopMouseEventPropagation'
Expand Down Expand Up @@ -127,9 +127,9 @@ const ButtonLabel = styled.span`
white-space: nowrap;
`

const PrimaryButton = styled(BaseButton)(interpolatePrimaryButtonThemedCss)
const PrimaryButton = styled(BaseButton)(getPrimaryButtonCss)

const SecondaryButton = styled(BaseButton)(interpolateSecondaryButtonThemedCss)
const SecondaryButton = styled(BaseButton)(getSecondaryButtonCss)

const TertiaryButton = styled(BaseButton)`
background-color: ${p => p.theme.color.white};
Expand Down
4 changes: 2 additions & 2 deletions src/elements/Button/utils.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { css } from 'styled-components'

export function interpolatePrimaryButtonThemedCss() {
export function getPrimaryButtonCss() {
return css`
background-color: ${p => p.theme.color.charcoal};
border: 1px solid ${p => p.theme.color.charcoal};
Expand Down Expand Up @@ -29,7 +29,7 @@ export function interpolatePrimaryButtonThemedCss() {
`
}

export function interpolateSecondaryButtonThemedCss() {
export function getSecondaryButtonCss() {
return css`
background-color: transparent;
border: 1px solid ${p => p.theme.color.charcoal};
Expand Down
6 changes: 3 additions & 3 deletions src/elements/IconButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import classnames from 'classnames'
import { useMemo, type MouseEvent, type ButtonHTMLAttributes, type FunctionComponent, useCallback } from 'react'
import styled from 'styled-components'

import { interpolatePrimaryButtonThemedCss, interpolateSecondaryButtonThemedCss } from './Button/utils'
import { getPrimaryButtonCss, getSecondaryButtonCss } from './Button/utils'
import { Accent, Size } from '../constants'
import { type IconProps } from '../types/definitions'
import { stopMouseEventPropagation } from '../utils/stopMouseEventPropagation'
Expand Down Expand Up @@ -183,9 +183,9 @@ const BaseButton = styled.button<{
padding: ${p => (p.$isCompact ? 0 : PADDING[p.$size])};
`

const PrimaryButton = styled(BaseButton)(interpolatePrimaryButtonThemedCss)
const PrimaryButton = styled(BaseButton)(getPrimaryButtonCss)

const SecondaryButton = styled(BaseButton)(interpolateSecondaryButtonThemedCss)
const SecondaryButton = styled(BaseButton)(getSecondaryButtonCss)

const TertiaryButton = styled.button`
background-color: transparent;
Expand Down

0 comments on commit 7c75af0

Please sign in to comment.