Skip to content

Commit bc28fc3

Browse files
committed
feat(Item): shape concept
1 parent b4c587c commit bc28fc3

File tree

8 files changed

+200
-104
lines changed

8 files changed

+200
-104
lines changed

.changeset/add-item-shape-prop.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@cube-dev/ui-kit": patch
3+
---
4+
5+
Add `shape` prop to Item component with three values: `card`, `button` (default), and `sharp` to control border radius styling.
6+

.changeset/selfish-tomatoes-eat.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@cube-dev/ui-kit": minor
3+
---
4+
5+
Rename `type` prop in ListBox to `shape`.

src/components/content/Item/Item.docs.mdx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,9 @@ The `mods` property accepts the following modifiers:
6767
| with-description-block | `boolean` | Applied when description placement is "block" |
6868
| checkbox | `boolean` | Applied when using checkbox icon (icon="checkbox") |
6969
| selected | `boolean` | Applied when isSelected is true |
70+
| shape-card | `boolean` | Applied when shape is "card" |
71+
| shape-button | `boolean` | Applied when shape is "button" |
72+
| shape-sharp | `boolean` | Applied when shape is "sharp" |
7073

7174
## Variants
7275

@@ -96,6 +99,12 @@ The `mods` property accepts the following modifiers:
9699
- `xlarge` - Extra large size for emphasized items
97100
- `inline` - Inline size that adapts to content
98101

102+
### Shapes
103+
104+
- `card` - Card shape with larger border radius (`1cr`)
105+
- `button` - Button shape with default border radius (default)
106+
- `sharp` - Sharp corners with no border radius (`0`)
107+
99108
## Examples
100109

101110
### Basic Usage
@@ -144,6 +153,10 @@ The `mods` property accepts the following modifiers:
144153
</Item>
145154
```
146155

156+
### With Different Shapes
157+
158+
<Story of={ItemStories.DifferentShapes} />
159+
147160
### With Actions
148161

149162
Item supports inline actions that appear on the right side. Use the `Item.Action` compound component for consistent styling:

src/components/content/Item/Item.stories.tsx

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,14 @@ export default {
7373
defaultValue: { summary: 'medium' },
7474
},
7575
},
76+
shape: {
77+
options: ['card', 'button', 'sharp'],
78+
control: { type: 'radio' },
79+
description: 'Shape of the item border radius',
80+
table: {
81+
defaultValue: { summary: 'button' },
82+
},
83+
},
7684
},
7785
};
7886

@@ -1990,3 +1998,84 @@ DynamicAutoTooltip.parameters = {
19901998
},
19911999
},
19922000
};
2001+
2002+
export const DifferentShapes: StoryFn<CubeItemProps> = (args) => (
2003+
<Space gap="2x" flow="column" placeItems="start">
2004+
<Title level={5}>Card Shape</Title>
2005+
<Item
2006+
{...args}
2007+
styles={DEFAULT_STYLES}
2008+
type="outline"
2009+
shape="card"
2010+
icon={<IconUser />}
2011+
>
2012+
Card shape with larger border radius
2013+
</Item>
2014+
2015+
<Title level={5}>Button Shape (Default)</Title>
2016+
<Item
2017+
{...args}
2018+
styles={DEFAULT_STYLES}
2019+
type="outline"
2020+
shape="button"
2021+
icon={<IconUser />}
2022+
>
2023+
Button shape with default border radius
2024+
</Item>
2025+
2026+
<Title level={5}>Sharp Shape</Title>
2027+
<Item
2028+
{...args}
2029+
styles={DEFAULT_STYLES}
2030+
type="outline"
2031+
shape="sharp"
2032+
icon={<IconUser />}
2033+
>
2034+
Sharp shape with no border radius
2035+
</Item>
2036+
2037+
<Title level={5}>All Shapes Comparison</Title>
2038+
<Space gap="1x" flow="column" placeItems="start">
2039+
<Item
2040+
{...args}
2041+
styles={DEFAULT_STYLES}
2042+
type="outline"
2043+
shape="card"
2044+
icon={<IconCoin />}
2045+
>
2046+
Card shape
2047+
</Item>
2048+
<Item
2049+
{...args}
2050+
styles={DEFAULT_STYLES}
2051+
type="outline"
2052+
shape="button"
2053+
icon={<IconCoin />}
2054+
>
2055+
Button shape
2056+
</Item>
2057+
<Item
2058+
{...args}
2059+
styles={DEFAULT_STYLES}
2060+
type="outline"
2061+
shape="sharp"
2062+
icon={<IconCoin />}
2063+
>
2064+
Sharp shape
2065+
</Item>
2066+
</Space>
2067+
</Space>
2068+
);
2069+
2070+
DifferentShapes.args = {
2071+
width: '300px',
2072+
};
2073+
2074+
DifferentShapes.parameters = {
2075+
docs: {
2076+
description: {
2077+
story:
2078+
'Demonstrates the three shape variants: `card` (larger border radius), `button` (default border radius), and `sharp` (no border radius). Use card for card-like interfaces, button for interactive elements, and sharp for minimal or technical interfaces.',
2079+
},
2080+
},
2081+
};

src/components/content/Item/Item.tsx

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,14 @@ export interface CubeItemProps extends BaseProps, ContainerStyleProps {
145145
* When true, adds button modifier to the component styling.
146146
*/
147147
isButton?: boolean;
148+
/**
149+
* Shape of the item's border radius.
150+
* - `card` - Card shape with larger border radius (`1cr`)
151+
* - `button` - Button shape with default border radius (default)
152+
* - `sharp` - Sharp corners with no border radius (`0`)
153+
* @default "button"
154+
*/
155+
shape?: 'card' | 'button' | 'sharp';
148156
/**
149157
* @private
150158
* Default tooltip placement for the item.
@@ -230,7 +238,9 @@ const ItemElement = tasty({
230238
margin: 0,
231239
radius: {
232240
'': true,
233-
card: '1cr',
241+
'shape-card': '1cr',
242+
'shape-button': true,
243+
'shape-sharp': '0',
234244
},
235245
height: {
236246
'': 'min $size',
@@ -692,6 +702,7 @@ const Item = <T extends HTMLElement = HTMLDivElement>(
692702
isCard = false,
693703
actions,
694704
isButton = false,
705+
shape = 'button',
695706
defaultTooltipPlacement = 'top',
696707
...rest
697708
} = props;
@@ -785,6 +796,7 @@ const Item = <T extends HTMLElement = HTMLDivElement>(
785796
loading: isLoading,
786797
card: isCard === true,
787798
button: isButton === true,
799+
[`shape-${shape}`]: true,
788800
...mods,
789801
};
790802
}, [
@@ -799,6 +811,7 @@ const Item = <T extends HTMLElement = HTMLDivElement>(
799811
isLoading,
800812
isCard,
801813
isButton,
814+
shape,
802815
actions,
803816
mods,
804817
]);
@@ -850,6 +863,7 @@ const Item = <T extends HTMLElement = HTMLDivElement>(
850863
data-size={typeof size === 'number' ? undefined : size}
851864
data-type={type}
852865
data-theme={theme}
866+
data-shape={shape}
853867
aria-disabled={finalIsDisabled}
854868
aria-selected={isSelected}
855869
mods={mods}
@@ -914,6 +928,7 @@ const Item = <T extends HTMLElement = HTMLDivElement>(
914928
actions,
915929
size,
916930
style,
931+
shape,
917932
],
918933
);
919934

src/components/fields/ListBox/ListBox.docs.mdx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ The `mods` property accepts the following modifiers you can override:
128128

129129
### Visual Styling
130130

131-
**type** (`'card' | 'plain' | 'popover'`, default: `'card'`)
131+
**shape** (`'card' | 'plain' | 'popover'`, default: `'card'`)
132132
- Controls the visual styling of the ListBox container
133133
- `card`: Standard card styling with border and margin (default)
134134
- `plain`: No border, no margin, no radius - suitable for embedded use
@@ -525,25 +525,25 @@ const [selectedKey, setSelectedKey] = useState('apple');
525525
</ListBox>
526526
```
527527

528-
### Visual Type Variants
528+
### Visual Shape Variants
529529

530-
<Story of={ListBoxStories.TypeVariants} />
530+
<Story of={ListBoxStories.DifferentShapes} />
531531

532532
```jsx
533-
{/* Card type (default) - with border and margin */}
534-
<ListBox type="card" label="Select a fruit" selectionMode="single">
533+
{/* Card shape (default) - with border and margin */}
534+
<ListBox shape="card" label="Select a fruit" selectionMode="single">
535535
<ListBox.Item key="apple">Apple</ListBox.Item>
536536
<ListBox.Item key="banana">Banana</ListBox.Item>
537537
</ListBox>
538538

539-
{/* Plain type - no border, no margin, no radius */}
540-
<ListBox type="plain" label="Select a fruit" selectionMode="single">
539+
{/* Plain shape - no border, no margin, no radius */}
540+
<ListBox shape="plain" label="Select a fruit" selectionMode="single">
541541
<ListBox.Item key="apple">Apple</ListBox.Item>
542542
<ListBox.Item key="banana">Banana</ListBox.Item>
543543
</ListBox>
544544

545-
{/* Popover type - no border, but keeps margin and radius */}
546-
<ListBox type="popover" label="Select a fruit" selectionMode="single">
545+
{/* Popover shape - no border, but keeps margin and radius */}
546+
<ListBox shape="popover" label="Select a fruit" selectionMode="single">
547547
<ListBox.Item key="apple">Apple</ListBox.Item>
548548
<ListBox.Item key="banana">Banana</ListBox.Item>
549549
</ListBox>

0 commit comments

Comments
 (0)