picocss/pico

button group

cara-tm opened this issue · 4 comments

cara-tm commented

Please search for duplicate or closed issues first.

No issue, just a suggestion

<!-- Group -->
<label for="flex-group-1">
	<input type="text" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1" id="flex-group-1">
	<button type="button" id="button-addon1">Button</button>
</label>


label[for*="flex-group"]{display:flex}
label[for*="flex-group"] > input{margin-left:calc(var(--border-width) * 5)}
input[type="text"] + [type="button"]{top:calc(var(--form-element-spacing-vertical) - (var(--border-width) * 10))}

Button Group

lucaslarroche commented

Hi @cara-tm,
There is a PR in progress for a button group: #164
See my comment, I suggest using role="group".

cara-tm commented

Hi. Cool.
Maybe it needs some adjustments:

[role="group"]{display:inline-flex}
[role="group"] > button{border-radius:0}
[role="group"] > button:first-child{border-radius:var(--border-radius) 0 0 var(--border-radius)}
[role="group"] > button:last-child{border-radius:0 var(--border-radius) var(--border-radius) 0}
gigamaster commented

Hi,

Some quick-fixes that need further testing :

  • white-space:nowrap; ( inline-block wasn't enough, maybe because of some other module)
  • a[role="button]
  • :only-child ( required for dynamic options i.e. groups permissions)
[role="group"]{display:inline-flex;white-space:nowrap;}
[role="group"] > button, [role="group"] > a[role="button"] {border-radius:0}
[role="group"] > button:first-child, 
[role="group"] > a[role="button"]:first-child {border-radius:var(--border-radius) 0 0 var(--border-radius)}
[role="group"] > button:last-child, 
[role="group"] > a[role="button"]:last-child {border-radius:0 var(--border-radius) var(--border-radius) 0}
[role="group"] > button:only-child, 
[role="group"] > a[role="button"]:only-child{border-radius:var(--border-radius)}```
maztch commented

Just as suggestion, this will work with multiple buttons and button + input or input + button:

[role="group"]{display:inline-flex;white-space:nowrap;}
[role="group"] > * {border-radius:0}
[role="group"] > *:first-child {border-radius:var(--border-radius) 0 0 var(--border-radius)}
[role="group"] > *:last-child {border-radius:0 var(--border-radius) var(--border-radius) 0}
[role="group"] > *:only-child{border-radius:var(--border-radius)}

And optional, for input + button

[role="group"] input + button{width:auto}
  • 👍2