Skip to content

Commit

Permalink
fix: fixed border-radius of buttons with sizes lg and sm (openedx#2786)
Browse files Browse the repository at this point in the history 
* fix: fixed border-radius of buttons with sizes lg and sm

* refactor: refactoring README file

* refactor: refactoring after review

* refactor: changed button focus stroke color
  • Loading branch information
@PKulkoRaccoonGang
PKulkoRaccoonGang authored and Kyrylo Hudym-Levkovych committed Jan 2, 2024
1 parent 3e2b3c7 commit 47ab8bd
Show file tree
Hide file tree
Showing 4 changed files with 147 additions and 89 deletions.
2 changes: 1 addition & 1 deletion scss/core/_variables.scss
View file
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
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>
<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
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
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

0 comments on commit 47ab8bd

Please sign in to comment.