Skip to content

Commit

Permalink
Up to date with main branch
Browse files Browse the repository at this point in the history
  • Loading branch information
chitangchin committed Nov 26, 2024
2 parents 3711317 + 3d7125f commit 099ca99
Show file tree
Hide file tree
Showing 5 changed files with 14 additions and 3 deletions.
5 changes: 5 additions & 0 deletions .changeset/rotten-pears-vanish.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@strapi/design-system': minor
---

Added XS size variant to IconButton component for smaller button options.
2 changes: 1 addition & 1 deletion docs/stories/04-components/IconButton.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const meta: Meta<IconButtonArgs> = {
},
size: {
control: 'select',
options: ['S', 'M', 'L'],
options: ['XS', 'S', 'M', 'L'],
},
variant: {
control: 'select',
Expand Down
2 changes: 1 addition & 1 deletion packages/design-system/src/components/Button/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const Button = forwardRef(
disabled = false,
children,
onClick,
size = BUTTON_SIZES[0],
size = BUTTON_SIZES[1],
loading = false,
fullWidth = false,
...props
Expand Down
2 changes: 1 addition & 1 deletion packages/design-system/src/components/Button/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export const GHOST = 'ghost';

export const LIGHT_VARIANTS = [SUCCESS_LIGHT, DANGER_LIGHT] as const;
export const VARIANTS = [DEFAULT, TERTIARY, SECONDARY, DANGER, SUCCESS, GHOST, ...LIGHT_VARIANTS] as const;
export const BUTTON_SIZES = ['S', 'M', 'L'] as const;
export const BUTTON_SIZES = ['XS', 'S', 'M', 'L'] as const;

export type ButtonVariant = (typeof VARIANTS)[number];
export type ButtonSize = (typeof BUTTON_SIZES)[number];
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,12 @@ const IconButtonWrapper = styled<FlexComponent<'button'>>(Flex)<IconButtonWrappe
${(props) => {
// NOTE! the border adds `1px` on each edge, so the padding accounts for this.
switch (props.$size) {
case 'XS': {
return css`
padding-block: 0.25rem;
padding-inline: 0.25rem;
`;
}
case 'S': {
return css`
padding-block: 0.7rem;
Expand Down

0 comments on commit 099ca99

Please sign in to comment.