Skip to content

Commit

Permalink
Merge pull request #5767 from nextcloud-libraries/feat/button-size
Browse files Browse the repository at this point in the history 
feat(NcButton): Add `size` prop to allow setting the button size to `small`, `normal`, `large`
  • Loading branch information
@susnux
susnux authored Jul 3, 2024
2 parents cf6bf25 + 23efe16 commit 196685c
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 23 deletions.
90 changes: 67 additions & 23 deletions src/components/NcButton/NcButton.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@ It can be used with one or multiple actions.
<NcCheckboxRadioSwitch :checked.sync="style" value="icon" name="style" type="radio">Icon only</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch :checked.sync="style" value="icontext" name="style" type="radio">Icon and text</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch :checked.sync="disabled" type="checkbox">Disabled</NcCheckboxRadioSwitch>
<!--<NcCheckboxRadioSwitch :checked.sync="readonly" type="checkbox">Read-only</NcCheckboxRadioSwitch>-->
<NcCheckboxRadioSwitch :checked.sync="size" value="small" name="size" type="radio">Small</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch :checked.sync="size" value="normal" name="size" type="radio">Normal (default)</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch :checked.sync="size" value="large" name="size" type="radio">Large</NcCheckboxRadioSwitch>
</div>

<h5>Standard buttons</h5>
Expand All @@ -34,7 +36,7 @@ It can be used with one or multiple actions.
<NcButton
aria-label="Example text"
:disabled="disabled"
:readonly="readonly"
:size="size"
type="tertiary-no-background">
<template v-if="style.indexOf('icon') !== -1" #icon>
<Video
Expand All @@ -45,7 +47,7 @@ It can be used with one or multiple actions.
<NcButton
aria-label="Example text"
:disabled="disabled"
:readonly="readonly"
:size="size"
type="tertiary">
<template v-if="style.indexOf('icon') !== -1" #icon>
<Video
Expand All @@ -56,7 +58,7 @@ It can be used with one or multiple actions.
<NcButton
aria-label="Example text"
:disabled="disabled"
:readonly="readonly">
:size="size">
<template v-if="style.indexOf('icon') !== -1" #icon>
<Video
:size="20" />
Expand All @@ -66,7 +68,7 @@ It can be used with one or multiple actions.
<NcButton
aria-label="Example text"
:disabled="disabled"
:readonly="readonly"
:size="size"
type="primary">
<template v-if="style.indexOf('icon') !== -1" #icon>
<Video
Expand All @@ -80,7 +82,7 @@ It can be used with one or multiple actions.
<h5>Wide button</h5>
<NcButton
:disabled="disabled"
:readonly="readonly"
:size="size"
:wide="true"
text="Example text">
<template #icon>
Expand All @@ -99,7 +101,7 @@ It can be used with one or multiple actions.
<p> - </p>
<NcButton
:disabled="disabled"
:readonly="readonly"
:size="size"
type="success">
<template #icon>
<Video
Expand All @@ -109,7 +111,7 @@ It can be used with one or multiple actions.
</NcButton>
<NcButton
:disabled="disabled"
:readonly="readonly"
:size="size"
type="warning">
<template #icon>
<Video
Expand All @@ -119,7 +121,7 @@ It can be used with one or multiple actions.
</NcButton>
<NcButton
:disabled="disabled"
:readonly="readonly"
:size="size"
type="error">
<template #icon>
<Video
Expand All @@ -143,7 +145,7 @@ export default {
return {
toggled: false,
disabled: false,
readonly: false,
size: 'normal',
style: 'icontext',
}
}
Expand All @@ -157,6 +159,7 @@ export default {
.grid {
display: grid;
gap: 12px;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: repeat(auto-fill, auto);
position: relative;
Expand Down Expand Up @@ -449,6 +452,18 @@ export default {
default: false,
},
/**
* Specify the button size
* Accepted values: `'small'`, `'normal'` (default), `'large'`
*/
size: {
type: String,
default: 'normal',
validator(value) {
return ['small', 'normal', 'large'].includes(value)
},
},
/**
* Specifies the button type
* Accepted values: primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success. If left empty,
Expand All @@ -457,7 +472,7 @@ export default {
type: {
type: String,
validator(value) {
return ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'].indexOf(value) !== -1
return ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'].includes(value)
},
default: 'secondary',
},
Expand Down Expand Up @@ -618,6 +633,7 @@ export default {
{
class: [
'button-vue',
`button-vue--size-${this.size}`,
{
'button-vue--icon-only': hasIcon && !hasText,
'button-vue--text-only': hasText && !hasIcon,
Expand Down Expand Up @@ -700,17 +716,31 @@ export default {
</script>
<style lang="scss" scoped>
.button-vue {
// Setup different button sizes
--button-size: var(--default-clickable-area);
--button-radius: var(--border-radius-element, calc(var(--button-size) / 2));
--button-padding: clamp(var(--default-grid-baseline), var(--button-radius), calc(var(--default-grid-baseline) * 4));
&--size-small {
--button-size: var(--clickable-area-small, 24px);
--button-radius: var(--border-radius); // make the border radius even smaller for small buttons
}
&--size-large {
--button-size: var(--clickable-area-large, 48px);
}
// General styles
position: relative;
width: fit-content;
overflow: hidden;
border: 0;
padding: 0;
font-size: var(--default-font-size);
font-weight: bold;
min-height: var(--default-clickable-area);
min-width: var(--default-clickable-area);
min-height: var(--button-size);
min-width: var(--button-size);
display: flex;
align-items: center;
justify-content: center;
Expand All @@ -721,7 +751,7 @@ export default {
span {
cursor: pointer;
}
border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));
border-radius: var(--button-radius);
transition-property: color, border-color, background-color;
transition-duration: 0.1s;
transition-timing-function: linear;
Expand Down Expand Up @@ -772,18 +802,29 @@ export default {
}
&--reverse#{&}--icon-and-text {
padding-inline: calc(var(--default-grid-baseline) * 4) var(--default-grid-baseline);
padding-inline: var(--button-padding) var(--default-grid-baseline);
}
&__icon {
height: var(--default-clickable-area);
width: var(--default-clickable-area);
min-height: var(--default-clickable-area);
min-width: var(--default-clickable-area);
height: var(--button-size);
width: var(--button-size);
min-height: var(--button-size);
min-width: var(--button-size);
display: flex;
justify-content: center;
align-items: center;
}
// For small buttons we need to adjust the icon size
&--size-small &__icon {
:deep(> *) {
max-height: 16px;
max-width: 16px;
}
:deep(svg) {
height: 16px;
width: 16px;
}
}
&__text {
font-weight: bold;
Expand All @@ -797,12 +838,12 @@ export default {
// Icon-only button
&--icon-only {
line-height: 1;
width: var(--default-clickable-area) !important;
width: var(--button-size) !important;
}
// Text-only button
&--text-only {
padding: 0 12px;
padding: 0 var(--button-padding);
& .button-vue__text {
margin-left: 4px;
margin-right: 4px;
Expand All @@ -811,8 +852,11 @@ export default {
// Icon and text button
&--icon-and-text {
// icon and text means the icon adds "visual" padding thus we need to adjust the text padding
--button-padding: min(calc(var(--default-grid-baseline) + var(--button-radius)), calc(var(--default-grid-baseline) * 4));
// Adjust padding as the icon already got some padding we need to reduce the padding on the icon side and only add larger padding to the text side
padding-block: 0;
padding-inline: var(--default-grid-baseline) calc(var(--default-grid-baseline) * 4);
padding-inline: var(--default-grid-baseline) var(--button-padding);
}
// Wide button spans the whole width of the container
Expand Down
3 changes: 3 additions & 0 deletions src/components/NcHeaderMenu/NcHeaderMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ export default {
display: flex;
justify-content: right;
background-color: var(--color-primary);
height: var(--header-height, 50px);
padding-right: 12px;
}
</style>
```
Expand All @@ -64,6 +66,7 @@ export default {
:aria-describedby="description ? descriptionId : null"
:aria-controls="`header-menu-${id}`"
:aria-expanded="opened.toString()"
size="large"
@click.prevent="toggleMenu">
<template #icon>
<!-- @slot Icon trigger slot. Make sure the svg path
Expand Down

0 comments on commit 196685c

Please sign in to comment.