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

[BD-46] fix: fixed border-radius of buttons with sizes lg and sm #2786

Merged
merged 4 commits into from
Dec 21, 2023
Merged

[BD-46] fix: fixed border-radius of buttons with sizes lg and sm #2786

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
0736a6b
fix: fixed border-radius of buttons with sizes lg and sm
PKulkoRaccoonGang Nov 7, 2023
8b24cd8
refactor: refactoring README file
PKulkoRaccoonGang Nov 7, 2023
a921ad8
refactor: refactoring after review
PKulkoRaccoonGang Nov 7, 2023
647393e
refactor: changed button focus stroke color
PKulkoRaccoonGang Dec 20, 2023
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
2 changes: 1 addition & 1 deletion scss/core/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,7 @@ $element-color-levels: map-merge(
"border": 200,
"icon": 300,
"active-border": 300,
"focus": 300,
"focus": 500,
"graphic": 300,
"default": 500,
"light-text": 500,
Expand Down
226 changes: 141 additions & 85 deletions src/Button/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi

return (
<Stack gap={2} direction={ isExtraSmall ? "vertical" : "horizontal" }>
<Button variant="brand" className="mb-2 mb-sm-0">Brand</Button>
<Button variant="outline-brand" className="mb-2 mb-sm-0">Outline Brand</Button>
<Button variant="primary" className="mb-2 mb-sm-0">Primary</Button>
<Button variant="outline-primary" className="mb-2 mb-sm-0">Outline Primary</Button>
<Button variant="tertiary" className="mb-2 mb-sm-0">Tertiary</Button>
Comment on lines -25 to -29
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: its great to remove utility classes like this as sometimes consumers tend to leave the className props in when they copy/paste components from the docs site... lol.

<Button variant="brand">Brand</Button>
<Button variant="outline-brand">Outline Brand</Button>
<Button variant="primary">Primary</Button>
<Button variant="outline-primary">Outline Primary</Button>
<Button variant="tertiary">Tertiary</Button>
</Stack>
)}
```
Expand All @@ -43,11 +43,11 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi
gap={2}
direction={ isExtraSmall ? "vertical" : "horizontal" }
>
<Button variant="inverse-brand" className="mb-2 mb-sm-0">Brand</Button>
<Button variant="inverse-outline-brand" className="mb-2 mb-sm-0">Outline Brand</Button>
<Button variant="inverse-primary" className="mb-2 mb-sm-0">Primary</Button>
<Button variant="inverse-outline-primary" className="mb-2 mb-sm-0">Outline Primary</Button>
<Button variant="inverse-tertiary" className="mb-2 mb-sm-0">Tertiary</Button>
<Button variant="inverse-brand">Brand</Button>
<Button variant="inverse-outline-brand">Outline Brand</Button>
<Button variant="inverse-primary">Primary</Button>
<Button variant="inverse-outline-primary">Outline Primary</Button>
<Button variant="inverse-tertiary">Tertiary</Button>
</Stack>
)}
```
Expand All @@ -65,20 +65,20 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi
gap={2}
direction={ isExtraSmall ? "vertical" : "horizontal" }
>
<Button variant="success" className="mb-2 mb-sm-0">Success</Button>
<Button variant="danger" className="mb-2 mb-sm-0">Danger</Button>
<Button variant="outline-success" className="mb-2 mb-sm-0">Success</Button>
<Button variant="outline-danger" className="mb-2 mb-sm-0">Danger</Button>
<Button variant="success">Success</Button>
<Button variant="danger">Danger</Button>
<Button variant="outline-success">Success</Button>
<Button variant="outline-danger">Danger</Button>
</Stack>
<Stack
gap={2}
direction={ isExtraSmall ? "vertical" : "horizontal" }
>
<Button variant="link" className="mb-2 mb-sm-0">Link</Button>
<Button variant="light" className="mb-2 mb-sm-0">Light</Button>
<Button variant="dark" className="mb-2 mb-sm-0">Dark</Button>
<Button variant="outline-light" className="mb-2 mb-sm-0">Light</Button>
<Button variant="outline-dark" className="mb-2 mb-sm-0">Dark</Button>
<Button variant="link">Link</Button>
<Button variant="light">Light</Button>
<Button variant="dark">Dark</Button>
<Button variant="outline-light">Light</Button>
<Button variant="outline-dark">Dark</Button>
</Stack>
</>
)}
Expand All @@ -92,48 +92,53 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi

return (
<>
<Stack
className="mb-2"
gap={2}
direction={ isExtraSmall ? "vertical" : "horizontal" }
>
<Button variant="primary" size="lg" className="mb-2 mb-sm-0">
Large button
</Button>
<Button variant="outline-primary" size="lg" className="mb-2 mb-sm-0">
Large button
</Button>
</Stack>
<Stack
className="mb-2"
gap={2}
direction={ isExtraSmall ? "vertical" : "horizontal" }
>
<Button variant="primary" size="sm" className="mb-2 mb-sm-0">
Small button
</Button>
<Button variant="outline-primary" size="sm" className="mb-2 mb-sm-0">
Small button
</Button>
</Stack>
<Button variant="link" size="inline" className="mb-2 mb-sm-0">Inline button</Button>
<Button variant="link" size="inline" className="mb-2 mb-sm-0">Inline button</Button>
<Stack
className="mb-2"
gap={2}
direction={ isExtraSmall ? "vertical" : "horizontal" }
>
<Button variant="primary" size="lg">
Large button
</Button>
<Button variant="outline-primary" size="lg">
Large button
</Button>
</Stack>
<Stack
className="mb-2"
gap={2}
direction={ isExtraSmall ? "vertical" : "horizontal" }
>
<Button variant="primary" size="sm">
Small button
</Button>
<Button variant="outline-primary" size="sm">
Small button
</Button>
</Stack>
<Stack
className="mb-2"
gap={2}
direction={ isExtraSmall ? "vertical" : "horizontal" }
>
<Button variant="link" size="inline">Inline button</Button>
<Button variant="link" size="inline">Inline button</Button>
</Stack>
</>
)}
)
}
```

### When to use the inline size

Use inline size buttons for when a button sits with a line of text.

```jsx live
<>
<p>
<span className="mr-1">2 items selected.</span>
<Button variant="link" size="inline" className="mr-1">Select all</Button>
<Button variant="link" size="inline">Clear</Button>
</p>
</>
<p>
<span className="mr-1">2 items selected.</span>
<Button variant="link" size="inline" className="mr-1">Select all</Button>
<Button variant="link" size="inline">Clear</Button>
</p>
```

## Block Buttons
Expand All @@ -152,21 +157,41 @@ Use inline size buttons for when a button sits with a line of text.
### Disabled

```jsx live
<>
<Button variant="primary" disabled>Primary disabled</Button>
<Button variant="secondary" disabled>Secondary disabled</Button>
<Button as="a" href="https://edx.org" disabled>Link disabled</Button>
</>
() => {
const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

return (
<Stack
className="mb-2"
gap={2}
direction={ isExtraSmall ? "vertical" : "horizontal" }
>
<Button variant="primary" disabled>Primary disabled</Button>
<Button variant="secondary" disabled>Secondary disabled</Button>
<Button as="a" href="https://edx.org" disabled>Link disabled</Button>
</Stack>
)
}
```

### With empty href
For link to be `disabled`, it must have href defined with some value.

```jsx live
<>
<Button as='a' disabled>No href</Button>
<Button as='a' href='' disabled>Empty string href</Button>
</>
() => {
const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

return (
<Stack
className="mb-2"
gap={2}
direction={ isExtraSmall ? "vertical" : "horizontal" }
>
<Button as="a" disabled>No href</Button>
<Button as="a" href="" disabled>Empty string href</Button>
</Stack>
)
}
```

### With Icons before or after
Expand All @@ -181,23 +206,24 @@ For link to be `disabled`, it must have href defined with some value.
gap={2}
direction={ isExtraSmall ? "vertical" : "horizontal" }
>
<Button variant="brand" iconBefore={ArrowBack} className="mb-2 mb-sm-0">
<Button variant="brand" iconBefore={ArrowBack}>
Brand
</Button>
<Button variant="outline-brand" iconAfter={ArrowDropDown} className="mb-2 mb-sm-0">
<Button variant="outline-brand" iconAfter={ArrowDropDown}>
Outline Brand
</Button>
<Button variant="primary" iconBefore={Remove} iconAfter={Add} className="mb-2 mb-sm-0">
<Button variant="primary" iconBefore={Remove} iconAfter={Add}>
Primary
</Button>
<Button variant="outline-primary" iconBefore={Highlight} className="mb-2 mb-sm-0">
<Button variant="outline-primary" iconBefore={Highlight}>
Outline Primary
</Button>
<Button variant="tertiary" iconAfter={Add} className="mb-2 mb-sm-0">
<Button variant="tertiary" iconAfter={Add}>
Tertiary
</Button>
</Stack>
)}
)
}
```

## Stateful buttons
Expand All @@ -219,33 +245,63 @@ user-friendly experience.
### (Deprecated) color variants

```jsx live
<div>
<Button.Deprecated className="btn-primary">Primary</Button.Deprecated>
<Button.Deprecated className="btn-success">Success</Button.Deprecated>
<Button.Deprecated className="btn-danger">Danger</Button.Deprecated>
<Button.Deprecated className="btn-light">Light</Button.Deprecated>
<Button.Deprecated className="btn-dark">Dark</Button.Deprecated>
</div>
() => {
const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.large.maxWidth });

return (
<Stack
className="mb-2"
gap={2}
direction={ isExtraSmall ? "vertical" : "horizontal" }
>
<Button.Deprecated className="btn-primary">Primary</Button.Deprecated>
<Button.Deprecated className="btn-success">Success</Button.Deprecated>
<Button.Deprecated className="btn-danger">Danger</Button.Deprecated>
<Button.Deprecated className="btn-light">Light</Button.Deprecated>
<Button.Deprecated className="btn-dark">Dark</Button.Deprecated>
</Stack>
)
}
```

### (Deprecated) outline variants

```jsx live
<div>
<Button.Deprecated className="btn-outline-primary">Primary</Button.Deprecated>
<Button.Deprecated className="btn-outline-success">Success</Button.Deprecated>
<Button.Deprecated className="btn-outline-danger">Danger</Button.Deprecated>
</div>
() => {
const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

return (
<Stack
className="mb-2"
gap={2}
direction={ isExtraSmall ? "vertical" : "horizontal" }
>
<Button.Deprecated className="btn-outline-primary">Primary</Button.Deprecated>
<Button.Deprecated className="btn-outline-success">Success</Button.Deprecated>
<Button.Deprecated className="btn-outline-danger">Danger</Button.Deprecated>
</Stack>
)
}
```

### (Deprecated) inverse variants

```jsx live
<div className="bg-gray-700 p-3">
<Button.Deprecated className="btn-inverse-primary">Primary</Button.Deprecated>
<Button.Deprecated className="btn-inverse-success">Success</Button.Deprecated>
<Button.Deprecated className="btn-inverse-danger">Danger</Button.Deprecated>
</div>
() => {
const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

return (
<Stack
className="mb-2 p-3 bg-gray-700"
gap={2}
direction={ isExtraSmall ? "vertical" : "horizontal" }
>
<Button.Deprecated className="btn-inverse-primary">Primary</Button.Deprecated>
<Button.Deprecated className="btn-inverse-success">Success</Button.Deprecated>
<Button.Deprecated className="btn-inverse-danger">Danger</Button.Deprecated>
</Stack>
)
}
```

### (Deprecated) link variant
Expand Down
4 changes: 3 additions & 1 deletion src/Button/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ $btn-border-width: $input-btn-border-width !default;
$btn-font-weight: $font-weight-normal !default;
$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
$btn-focus-width: 2px !default;
$btn-focus-gap: 1px !default;
$btn-focus-gap: $btn-focus-width !default;
$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
$btn-disabled-opacity: .65 !default;
$btn-active-box-shadow: none;
Expand Down Expand Up @@ -48,3 +48,5 @@ $btn-focus-border-gap: $btn-focus-width + $btn-focus-gap !default;
$btn-focus-distance-to-border: $btn-focus-border-gap + $btn-border-width !default;

$btn-focus-border-radius: calc(#{$btn-border-radius} + #{$btn-focus-border-gap}) !default;
$btn-focus-border-radius-lg: $btn-focus-border-radius !default;
$btn-focus-border-radius-sm: $btn-border-radius !default;
4 changes: 2 additions & 2 deletions src/Button/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,11 +150,11 @@
}

&.btn-lg::before {
border-radius: $btn-focus-border-radius;
border-radius: $btn-focus-border-radius-lg;
}

&.btn-sm::before {
border-radius: $btn-focus-border-radius;
border-radius: $btn-focus-border-radius-sm;
}

&:active,
Expand Down