PatAlcala9/ocbo-esign
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added custom width for combobox

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-11-05 10:39:57 +08:00
parent 7c826b7590
commit 1327e686a8
2 changed files with 5 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/Combobox/Combobox.sass
View file

@ -1,7 +1,6 @@
.combobox__control .combobox__control
display: inline-flex display: inline-flex
justify-content: space-between justify-content: space-between
width: 500px
border-radius: 6px border-radius: 6px
font-size: 16px font-size: 16px
line-height: 1 line-height: 1
@ -34,7 +33,7 @@
width: 40rem width: 40rem
&::placeholder &::placeholder
color: #517aa2d2 color: #a3bfd9d2
.combobox__trigger .combobox__trigger
appearance: none appearance: none
@ -71,14 +70,13 @@
user-select: none user-select: none
.combobox__content .combobox__content
background-color: #0d131ae0 background-color: #0d131af4
backdrop-filter: blur(8px) backdrop-filter: blur(8px)
border-radius: 6px border-radius: 6px
border: 1px solid hsl(240 6% 90%) border: 1px solid hsl(240 6% 90%)
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
transform-origin: var(--kb-combobox-content-transform-origin) transform-origin: var(--kb-combobox-content-transform-origin)
animation: contentHide 250ms ease-in forwards animation: contentHide 250ms ease-in forwards
color: red
&[data-expanded] &[data-expanded]
animation: contentShow 250ms ease-out animation: contentShow 250ms ease-out
@ -113,7 +111,7 @@
&[data-highlighted] &[data-highlighted]
outline: none outline: none
background-color: hsl(200 98% 39%) background-color: #37506df4
color: white color: white
.combobox__section .combobox__section

3
src/components/Combobox/Combobox.tsx
View file

@ -8,6 +8,7 @@ interface Props {
placeholder: string placeholder: string
value: string value: string
onChange: (value: string | null) => void onChange: (value: string | null) => void
width?: string
} }
export default (props: Props) => { export default (props: Props) => {
@ -28,7 +29,7 @@ export default (props: Props) => {
</Combobox.Item> </Combobox.Item>
)} )}
> >
<Combobox.Control class="combobox__control" aria-label="Assessors"> <Combobox.Control class="combobox__control" aria-label="Assessors" style={`width: ${props.width || '500px'}`}>
<Combobox.Input class="combobox__input" /> <Combobox.Input class="combobox__input" />
<Combobox.Trigger class="combobox__trigger"> <Combobox.Trigger class="combobox__trigger">
<Combobox.Icon class="combobox__icon"> <Combobox.Icon class="combobox__icon">