Skip to content

Commit

Permalink
fix(button-group): single child + support more kind of components
Browse files Browse the repository at this point in the history
  • Loading branch information
@stafyniaksacha
stafyniaksacha committed Jan 26, 2024
1 parent 3f6522f commit 726714d
Show file tree
Hide file tree
Showing 3 changed files with 178 additions and 29 deletions.
4 changes: 2 additions & 2 deletions src/plugins/components/button-group/button-group.doc.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,10 @@ Button groups act as containers that group buttons together, taking care of spac

### Slot: default

Button groups have a default slot that serves as wrapper for their inner content.
You can use default slot to add buttons or even other input components to the button group.

<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<Story of={ButtonGroupStories.Main} />
<Story of={ButtonGroupStories.InputCombined} />
</div>

<br />
Expand Down
32 changes: 31 additions & 1 deletion src/plugins/components/button-group/button-group.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { html } from 'lit'
import type { ButtonGroupAttrs } from './button-group.types'
import { ButtonGroup } from './button-group.component'
import { Button } from '../button/button.component'
import { Select } from '../select/select.component'
import { Input } from '../input/input.component'

// More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction
const meta = {
Expand Down Expand Up @@ -158,7 +160,7 @@ export const SizeLg: Story = {
`,
})}
${Button({
shape: 'sm',
rounded: 'sm',
size: 'lg',
children: html`
<span>Button 4</span>
Expand All @@ -168,3 +170,31 @@ export const SizeLg: Story = {
},
}
// #endregion

// #region InputCombined
export const InputCombined: Story = {
name: 'Input: Combined',
args: {
children: html`
${Select({
rounded: 'sm',
options: html`
<option value="1">Superman</option>
<option value="2">Batman</option>
<option value="3">Spiderman</option>
<option value="4">Ironman</option>
`,
})}
${Input({
placeholder: 'Name your hero ...',
})}
${Button({
rounded: 'sm',
children: html`
<span>Generate</span>
`,
})}
`,
},
}
// #endregion
171 changes: 145 additions & 26 deletions src/plugins/components/button-group/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,24 +15,58 @@ export default plugin(
'.nui-button-group': {
'@apply flex': {},

'.nui-button, .nui-button-action, .nui-button-icon': {
'@apply !border-e-0': {},
'&:focus': {
'@apply !z-10 relative': {},
// Button
'.nui-button:not(:only-child), .nui-button-action:not(:only-child), .nui-button-icon:not(:only-child)':
{
'@apply !border-e-0': {},
'&:focus': {
'@apply !z-10 relative': {},
},
'&:not(:first-child):not(:last-child)': {
'@apply !rounded-none': {},
},
'&:first-child': {
'@apply !rounded-e-none': {},
},
'&:last-child': {
'@apply !border-e !rounded-s-none': {},
},
},
'&:not(:first-child):not(:last-child)': {
'@apply !rounded-none': {},

// Input
'.nui-input-wrapper:not(:first-child):not(:last-child)': {
'.nui-input': {
'@apply !border-e-0 !rounded-none': {},

'&:focus': {
'@apply !z-10 relative': {},
},
},
'&:first-child': {
'@apply !rounded-e-none': {},
},

'.nui-input-wrapper:first-child:not(:last-child)': {
'.nui-input': {
'@apply !border-e-0 !rounded-e-none': {},

'&:focus': {
'@apply !z-10 relative': {},
},
},
'&:last-child': {
},

'.nui-input-wrapper:last-child:not(:first-child)': {
'.nui-input': {
'@apply !border-e !rounded-s-none': {},

'&:focus': {
'@apply !z-10 relative': {},
},
},
},

'.nui-input-wrapper:not(:first-child):not(:last-child)': {
'.nui-input': {
// InputNumber
'.nui-input-number-wrapper:not(:first-child):not(:last-child)': {
'.nui-input-number': {
'@apply !border-e-0 !rounded-none': {},

'&:focus': {
Expand All @@ -41,18 +75,49 @@ export default plugin(
},
},

'.nui-input-wrapper:first-child': {
'.nui-input': {
'@apply !rounded-e-none': {},
'.nui-input-number-wrapper:first-child:not(:last-child)': {
'.nui-input-number': {
'@apply !border-e-0 !rounded-e-none': {},

'&:focus': {
'@apply !z-10 relative': {},
},
},
},

'.nui-input-wrapper:last-child': {
'.nui-input': {
'.nui-input-number-wrapper:last-child:not(:first-child)': {
'.nui-input-number': {
'@apply !border-e !rounded-s-none': {},

'&:focus': {
'@apply !z-10 relative': {},
},
},
},

// InputFileRegular
'.nui-input-file-regular:not(:first-child):not(:last-child)': {
'.nui-input-file-inner': {
'@apply !border-e-0 !rounded-none': {},

'&:focus': {
'@apply !z-10 relative': {},
},
},
},

'.nui-input-file-regular:first-child:not(:last-child)': {
'.nui-input-file-inner': {
'@apply !border-e-0 !rounded-e-none': {},

'&:focus': {
'@apply !z-10 relative': {},
},
},
},

'.nui-input-file-regular:last-child:not(:first-child)': {
'.nui-input-file-inner': {
'@apply !border-e !rounded-s-none': {},

'&:focus': {
Expand All @@ -61,6 +126,7 @@ export default plugin(
},
},

// Select
'.nui-select-wrapper:not(:first-child):not(:last-child)': {
'.nui-select': {
'@apply !border-e-0 !rounded-none': {},
Expand All @@ -71,18 +137,39 @@ export default plugin(
},
},

'.nui-select-wrapper:first-child': {
'.nui-select-wrapper:first-child:not(:last-child)': {
'.nui-select': {
'@apply !rounded-e-none': {},
'@apply !border-e-0 !rounded-e-none': {},

'&:focus': {
'@apply !z-10 relative': {},
},
},
},

'.nui-select-wrapper:last-child': {
'.nui-select': {
// Autocomplete
'.nui-autocomplete:not(:first-child):not(:last-child)': {
'.nui-autocomplete-input': {
'@apply !border-e-0 !rounded-none': {},

'&:focus': {
'@apply !z-10 relative': {},
},
},
},

'.nui-autocomplete:first-child:not(:last-child)': {
'.nui-autocomplete-input': {
'@apply !border-e-0 !rounded-e-none': {},

'&:focus': {
'@apply !z-10 relative': {},
},
},
},

'.nui-autocomplete:last-child:not(:first-child)': {
'.nui-autocomplete-input': {
'@apply !border-e !rounded-s-none': {},

'&:focus': {
Expand All @@ -91,8 +178,40 @@ export default plugin(
},
},

// Dropdown
'.nui-dropdown:not(:first-child):not(:last-child)': {
'.nui-nui-button': {
'.nui-button': {
'@apply !border-e-0 !rounded-none': {},

'&:focus': {
'@apply !z-10 relative': {},
},
},
},

'.nui-dropdown:first-child:not(:last-child)': {
'.nui-button': {
'@apply !border-e-0 !rounded-e-none': {},

'&:focus': {
'@apply !z-10 relative': {},
},
},
},

'.nui-dropdown:last-child:not(:first-child)': {
'.nui-button': {
'@apply !border-e !rounded-s-none': {},

'&:focus': {
'@apply !z-10 relative': {},
},
},
},

// Listbox
'.nui-listbox:not(:first-child):not(:last-child)': {
'.nui-listbox-button': {
'@apply !border-e-0 !rounded-none': {},

'&:focus': {
Expand All @@ -101,18 +220,18 @@ export default plugin(
},
},

'.nui-dropdown:first-child': {
'.nui-nui-button': {
'@apply !rounded-e-none': {},
'.nui-listbox:first-child:not(:last-child)': {
'.nui-listbox-button': {
'@apply !border-e-0 !rounded-e-none': {},

'&:focus': {
'@apply !z-10 relative': {},
},
},
},

'.nui-dropdown:last-child': {
'.nui-nui-button': {
'.nui-listbox:last-child:not(:first-child)': {
'.nui-listbox-button': {
'@apply !border-e !rounded-s-none': {},

'&:focus': {
Expand Down

0 comments on commit 726714d

Please sign in to comment.