Skip to content

Commit

Permalink
feat(NcButton): Add size prop to allow setting the button size to `…
Browse files Browse the repository at this point in the history 
…small`, `normal`, `large`

With our new 3 different clickable area sizes we have some places, like the header menu,
where we still want to use "large" buttons. So this gives the ability to set the button
size to either `normal` which is the default, `large` for main actions or `small`.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
  • Loading branch information
@susnux
susnux committed Jul 3, 2024
1 parent bac41a8 commit 126d3b5
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 22 deletions.
89 changes: 67 additions & 22 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,6 +716,21 @@ export default {
</script>
<style lang="scss" scoped>
// Setup different button sizes
.button-vue {
--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);
}
}
.button-vue {
position: relative;
Expand All @@ -709,8 +740,8 @@ export default {
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 +752,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 +803,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 +839,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 +853,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));
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 126d3b5

Please sign in to comment.