-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Button): No container button variant (#3823)
* chore(Button): Remove nbsp from layout * feat(Button): Add No Container variant * chore(Stories): Remove redundant text from story * chore(Button): Use consistent palette for (unused) css property * refactor(Button): Organising button styling * chore(Button): Remove hover background from containerless button * chore(Button): Use box-shadow to prevent incorrect border aliasing * chore(Styled): Match tertiary text and border on hover * docs(Button): Remove no container button from default story
- Loading branch information
1 parent
01d7f45
commit a221894
Showing
6 changed files
with
285 additions
and
158 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
packages/react-component-library/src/components/Button/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| export * from './Button' | ||
| export * from './constants' | ||
|
|
||
| export { getButtonStyles } from './partials/StyledButton' | ||
| export { getButtonStyles } from './partials/getButtonStyles' |
146 changes: 2 additions & 144 deletions
146
packages/react-component-library/src/components/Button/partials/StyledButton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
103 changes: 103 additions & 0 deletions
103
packages/react-component-library/src/components/Button/partials/getButtonStyles.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| import { css } from 'styled-components' | ||
| import { spacing } from '@royalnavy/design-tokens' | ||
|
|
||
| import { BUTTON_ICON_POSITION } from '../constants' | ||
| import { ButtonIconPositionType, ButtonVariantType } from '../Button' | ||
| import { ComponentSizeType } from '../../Forms' | ||
| import { SIZE_MAP, STYLES_MAP } from './styles' | ||
|
|
||
| const DEFAULT_HORIZONTAL_PADDING = spacing('7') | ||
|
|
||
| export interface StyledButtonProps { | ||
| $variant: ButtonVariantType | ||
| $size: ComponentSizeType | ||
| $iconPosition?: ButtonIconPositionType | ||
| } | ||
|
|
||
| const commonStyles = css` | ||
| box-sizing: border-box; | ||
| font-weight: 400; | ||
| text-decoration: none; | ||
| cursor: pointer; | ||
| user-select: none; | ||
| transition: all 75ms cubic-bezier(0, 1.19, 0.82, 0.9); | ||
| white-space: nowrap; | ||
| display: inline-flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| ` | ||
|
|
||
| export function getButtonStyles({ | ||
| $size, | ||
| $variant, | ||
| $iconPosition = BUTTON_ICON_POSITION.RIGHT, | ||
| }: StyledButtonProps) { | ||
| const styles = STYLES_MAP[$variant] | ||
| const sizes = SIZE_MAP[$size] | ||
| return css` | ||
| ${commonStyles}; | ||
| font-size: ${sizes.fontSize}; | ||
| height: ${sizes.height}; | ||
| flex-direction: ${$iconPosition === BUTTON_ICON_POSITION.LEFT | ||
| ? 'row-reverse' | ||
| : 'row'}; | ||
| border-radius: ${sizes.borderRadius}; | ||
| padding: 0 ${styles.horizontalPadding ?? DEFAULT_HORIZONTAL_PADDING}; | ||
| color: ${styles.default.color}; | ||
| background-color: ${styles.default.backgroundColor}; | ||
| border: 0; | ||
| outline: 0; | ||
| box-shadow: ${styles.default.boxShadow}; | ||
| text-decoration: ${styles.default.textDecoration}; | ||
| &:hover { | ||
| color: ${styles.hover?.color ?? styles.default.color}; | ||
| background-color: ${styles.hover?.backgroundColor ?? | ||
| styles.default.backgroundColor}; | ||
| box-shadow: ${styles.hover?.boxShadow ?? styles.default.boxShadow}; | ||
| text-decoration: ${styles.hover?.textDecoration ?? | ||
| styles.default.textDecoration}; | ||
| } | ||
| &:focus { | ||
| color: ${styles.focus?.color ?? styles.default.color}; | ||
| background-color: ${styles.focus?.backgroundColor ?? | ||
| styles.default.backgroundColor}; | ||
| outline: 0; | ||
| box-shadow: ${styles.focus?.boxShadow ?? styles.default.boxShadow}; | ||
| text-decoration: ${styles.focus?.textDecoration ?? | ||
| styles.default.textDecoration}; | ||
| } | ||
| &:active { | ||
| color: ${styles.active?.color ?? styles.default.color}; | ||
| background-color: ${styles.active?.backgroundColor ?? | ||
| styles.default.backgroundColor}; | ||
| box-shadow: ${styles.active?.boxShadow ?? styles.default.boxShadow}; | ||
| } | ||
| &:disabled { | ||
| &, | ||
| &:hover, | ||
| &:active, | ||
| &:focus { | ||
| color: ${styles.disabled.color}; | ||
| background-color: ${styles.disabled.backgroundColor}; | ||
| text-decoration: ${styles.disabled.textDecoration}; | ||
| box-shadow: none; | ||
| cursor: not-allowed; | ||
| text-decoration: none; | ||
| } | ||
| } | ||
| ` | ||
| } |
Oops, something went wrong.