razorpay / blade

Design System that powers Razorpay
https://blade.razorpay.com
MIT License
480 stars 122 forks source link

Dropdown values are not truncated #2275

Closed AnkitaBagale closed 4 days ago

AnkitaBagale commented 2 weeks ago
image
  <Dropdown selectionType={selectionType} onOpenChange={handleOnOpenChange}>
      <AutoComplete
        label={label}
        name={name}
        value={values}
        inputValue={searchValue}
        placeholder={placeholder}
        onChange={onChange}
        onInputValueChange={handleInputValueChange}
        filteredValues={filteredValues}
        labelPosition={props.labelPosition}
        isRequired={props.isRequired}
        necessityIndicator={props.isRequired ? 'required' : undefined}
      />
      <DropdownOverlay>
          <ActionList>
            {options.map((option) => {
              return (
                <ActionListItem
                  key={option.value}
                  title={option.title}
                  value={option.value}
                  description={option.description}
                />
              );
            })}
          </ActionList>
        )}
      </DropdownOverlay>
    </Dropdown>
saurabhdaware commented 2 weeks ago

In 10.23.1 we added support for changing the width of overlay when selectinput is used. So you can now pass minWidth, maxWidth, width to DropdownOverlay and adjust the width for your content.

Truncation we thought wouldn't be the right thing here because email ids should always be visible completely, and breaking text into another line will make item height inconsistent.

We'll still see if we can do something here but otherwise you can get unblocked by changing the DropdownOverlay width now

saurabhdaware commented 2 weeks ago

Let me know if this gets you unblocked. If not I'll add this back as P0 and see what else we can do

AnkitaBagale commented 2 weeks ago

hey @saurabhdaware tried it, still not working.

AnkitaBagale commented 5 days ago

@saurabhdaware this issue is still present. single long letter words are not getting truncated.

image