From 84d01cca2e96f3ee23fce6957798930c301d4d7c Mon Sep 17 00:00:00 2001 From: Airike Jaska <95303654+airikej@users.noreply.github.com> Date: Thu, 12 Feb 2026 13:59:40 +0200 Subject: [PATCH 1/2] feat(button-group): add size prop, add small example, fix examples on storybook #14 --- .../button-group/button-group.module.scss | 25 +++++++++- .../button-group/button-group.stories.tsx | 50 +++++++++++++++++-- .../buttons/button-group/button-group.tsx | 17 ++++++- 3 files changed, 85 insertions(+), 7 deletions(-) diff --git a/src/tedi/components/buttons/button-group/button-group.module.scss b/src/tedi/components/buttons/button-group/button-group.module.scss index fe4ab8aee..f3b783c6c 100644 --- a/src/tedi/components/buttons/button-group/button-group.module.scss +++ b/src/tedi/components/buttons/button-group/button-group.module.scss @@ -11,8 +11,6 @@ align-items: center; justify-content: center; height: auto; - min-height: 2.5rem; - padding: calc(var(--button-md-padding-y) - 1px) var(--button-md-padding-x); text-align: center; cursor: pointer; border-radius: 0; @@ -38,6 +36,17 @@ @include breakpoints.media-breakpoint-down(md) { flex: 1; } + + &.tedi-button-group__item--size-default { + min-height: var(--button-md-height); + padding: calc(var(--button-md-padding-y) - 1px) var(--button-md-padding-x); + } + + &.tedi-button-group__item--size-small { + min-height: var(--button-sm-height); + padding: calc(var(--button-sm-padding-y) - 1px) var(--button-sm-padding-x); + font-size: var(--button-text-size-sm); + } } } @@ -65,6 +74,12 @@ background-color: var(--button-group-primary-selected-background); border-color: var(--button-group-primary-selected-border); } + + &:focus-visible:not(:disabled, .tedi-button-group__item--active) { + color: var(--button-group-primary-inactive-text); + background-color: var(--button-group-primary-inactive-background); + border: 1px solid var(--button-group-primary-inactive-border); + } } } @@ -93,6 +108,12 @@ outline: 2px solid var(--button-group-secondary-selected-border); outline-offset: -2px; } + + &:focus-visible:not(:disabled, .tedi-button-group__item--active) { + color: var(--button-group-secondary-inactive-text); + background-color: var(--button-group-secondary-inactive-background); + border: 1px solid var(--button-group-secondary-inactive-border); + } } } diff --git a/src/tedi/components/buttons/button-group/button-group.stories.tsx b/src/tedi/components/buttons/button-group/button-group.stories.tsx index d3b692e0d..14adb9282 100644 --- a/src/tedi/components/buttons/button-group/button-group.stories.tsx +++ b/src/tedi/components/buttons/button-group/button-group.stories.tsx @@ -1,6 +1,7 @@ import { Meta, StoryFn, StoryObj } from '@storybook/react'; import { useState } from 'react'; +import { Text } from '../../base/typography/text/text'; import { Col, Row } from '../../layout/grid'; import { VerticalSpacing } from '../../layout/vertical-spacing'; import { Button } from '../button/button'; @@ -24,7 +25,8 @@ const meta: Meta = { export default meta; type Story = StoryObj; -const buttonStates = ['Default', 'Hover', 'Active', 'Disabled']; +const buttonStates = ['Default', 'Hover', 'Active', 'Focus', 'Disabled']; +const sizeArray: ButtonGroupProps['size'][] = ['default', 'small']; const Template: StoryFn = (args) => ( @@ -36,6 +38,40 @@ const Template: StoryFn = (args) => ( ); +interface TemplateMultipleProps extends ButtonGroupProps { + array: Type[]; + property: keyof ButtonGroupProps; +} + +const TemplateSizes: StoryFn = (args) => { + const { array, property, ...buttonGroupProps } = args; + + return ( +
+ {array.map((value, key) => { + return ( + + + {value ? value.charAt(0).toUpperCase() + value.slice(1) : ''} + + + + + + + + + + + + ); + })} +
+ ); +}; + const TemplateTypes: StoryFn = (args) => { return ( @@ -73,6 +109,14 @@ export const Default: Story = { }, }; +export const Sizes: StoryObj = { + render: TemplateSizes, + args: { + property: 'size', + array: sizeArray, + }, +}; + export const Types: StoryObj = { render: TemplateTypes, }; @@ -130,7 +174,7 @@ export const Primary: StoryObj<{ states: string[] }> = { pseudo: { hover: ['#Hover-primary'], active: ['#Active-primary'], - focus: ['#Focus-primary'], + focusVisible: ['#Focus-primary'], }, }, }; @@ -144,7 +188,7 @@ export const Secondary: StoryObj<{ states: string[] }> = { pseudo: { hover: ['#Hover-secondary'], active: ['#Active-secondary'], - focus: ['#Focus-secondary'], + focusVisible: ['#Focus-secondary'], }, }, }; diff --git a/src/tedi/components/buttons/button-group/button-group.tsx b/src/tedi/components/buttons/button-group/button-group.tsx index b2e0ecbaa..f830c304c 100644 --- a/src/tedi/components/buttons/button-group/button-group.tsx +++ b/src/tedi/components/buttons/button-group/button-group.tsx @@ -36,10 +36,22 @@ export type ButtonGroupProps = { * Additional custom CSS classes to apply to the ButtonGroup container */ className?: string; + /** + * Size of the buttons in ButtonGroup + */ + size?: 'default' | 'small'; }; export const ButtonGroup = (props: ButtonGroupProps): JSX.Element => { - const { children, className, type = 'primary', onSelectionChange, stretch = false, ariaLabel } = props; + const { + children, + className, + type = 'primary', + onSelectionChange, + stretch = false, + ariaLabel, + size = 'default', + } = props; return (
{ className: cn(styles['tedi-button-group__item'], { [styles['tedi-button-group__item--active']]: child.props.isActive, [styles['tedi-button-group__item--disabled']]: child.props.disabled, + [styles[`tedi-button-group__item--size-${size}`]]: size, }), - noStyle: true, + size: size, onClick: () => { if (!child.props.disabled) { child.props.onClick?.(); From 68cfbb37d66f8e783775076d082969f516354b1e Mon Sep 17 00:00:00 2001 From: Airike Jaska <95303654+airikej@users.noreply.github.com> Date: Thu, 19 Feb 2026 07:08:05 +0200 Subject: [PATCH 2/2] fix(button-group): improve css readablity #14 --- .../components/buttons/button-group/button-group.module.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/tedi/components/buttons/button-group/button-group.module.scss b/src/tedi/components/buttons/button-group/button-group.module.scss index f3b783c6c..61910972d 100644 --- a/src/tedi/components/buttons/button-group/button-group.module.scss +++ b/src/tedi/components/buttons/button-group/button-group.module.scss @@ -37,12 +37,12 @@ flex: 1; } - &.tedi-button-group__item--size-default { + &--size-default { min-height: var(--button-md-height); padding: calc(var(--button-md-padding-y) - 1px) var(--button-md-padding-x); } - &.tedi-button-group__item--size-small { + &--size-small { min-height: var(--button-sm-height); padding: calc(var(--button-sm-padding-y) - 1px) var(--button-sm-padding-x); font-size: var(--button-text-size-sm);