Skip to content

Commit

Permalink
fix(listbox): set default title attributes to item text (#5102)
Browse files Browse the repository at this point in the history
  • Loading branch information
@emyarod @asudoh
emyarod authored and asudoh committed Jan 20, 2020
1 parent c01d1f1 commit 6202406
Show file tree
Hide file tree
Showing 7 changed files with 33 additions and 10 deletions.
10 changes: 5 additions & 5 deletions packages/components/src/components/dropdown/dropdown.hbs
View file
Expand Up @@ -20,7 +20,7 @@
</button>
<ul class="{{@root.prefix}}--dropdown-list" id="{{default.idSuffix}}-menu" role="menu" tabindex="0" id="{{default.idSuffix}}-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="{{default.idSuffix}}-label">
{{#each items as |item index|}}
<li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item">
<li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item" title="{{label}}">
<a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="{{#if index}}false{{else}}true{{/if}}" id="{{../default.idSuffix}}-item{{@index}}">{{label}}</a>
</li>
{{/each}}
Expand All @@ -45,7 +45,7 @@
</button>
<ul class="{{@root.prefix}}--dropdown-list" role="menu" tabindex="0" id="{{helper.idSuffix}}-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="{{helper.idSuffix}}-label">
{{#each items as |item index|}}
<li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item">
<li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item" title="{{label}}">
<a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="{{#if index}}false{{else}}true{{/if}}" id="{{../helper.idSuffix}}-item{{@index}}">{{label}}</a>
</li>
{{/each}}
Expand Down Expand Up @@ -74,7 +74,7 @@
<!-- Note: remove `tabindex` from disabled dropdown lists -->
<ul class="{{@root.prefix}}--dropdown-list" id="{{disabled.idSuffix}}-menu" role="menu" id="{{disabled.idSuffix}}-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="{{disabled.idSuffix}}-label">
{{#each items as |item index|}}
<li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item">
<li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item" title="{{label}}">
<a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="{{#if index}}false{{else}}true{{/if}}" id="{{../disabled.idSuffix}}-item{{@index}}">{{label}}</a>
</li>
{{/each}}
Expand Down Expand Up @@ -103,7 +103,7 @@
</button>
<ul class="{{@root.prefix}}--dropdown-list" id="{{invalid.idSuffix}}-menu" role="menu" tabindex="0" id="{{invalid.idSuffix}}-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="{{invalid.idSuffix}}-label">
{{#each items as |item index|}}
<li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item">
<li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item" title="{{label}}">
<a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="{{#if index}}false{{else}}true{{/if}}" id="{{../invalid.idSuffix}}-item{{@index}}">{{label}}</a>
</li>
{{/each}}
Expand Down Expand Up @@ -138,7 +138,7 @@
</button>
<ul class="{{@root.prefix}}--dropdown-list" id="{{default.idSuffix}}-menu" role="menu" tabindex="0" id="{{default.idSuffix}}-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="{{default.idSuffix}}-label">
{{#each items as |item index|}}
<li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item">
<li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item" title="{{label}}">
<a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="{{#if index}}false{{else}}true{{/if}}" id="{{../default.idSuffix}}-item{{@index}}">{{label}}</a>
{{ carbon-icon 'Checkmark16' class=(add @root.prefix '--list-box__menu-item__selected-icon') aria-hidden="true" }}
</li>
Expand Down
1 change: 1 addition & 0 deletions packages/react/src/components/ComboBox/ComboBox.js
View file
Expand Up @@ -401,6 +401,7 @@ export default class ComboBox extends React.Component {
(selectedItem && selectedItem.id === item.id) ||
false
}
title={itemToElement ? item.text : itemToString(item)}
{...itemProps}>
{itemToElement ? (
<ItemToElement key={itemProps.id} {...item} />
Expand Down
25 changes: 20 additions & 5 deletions packages/react/src/components/Dropdown/Dropdown-story.js
View file
Expand Up @@ -30,9 +30,19 @@ const items = [
id: 'option-4',
text: 'Option 4',
},
{
id: 'option-5',
text:
'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae, aliquam. Blanditiis quia nemo enim voluptatibus quos ducimus porro molestiae nesciunt error cumque quaerat, tempore vero unde eum aperiam eligendi repellendus.',
},
];

const stringItems = ['Option 1', 'Option 2', 'Option 3'];
const stringItems = [
'Option 1',
'Option 2',
'Option 3',
'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae, aliquam. Blanditiis quia nemo enim voluptatibus quos ducimus porro molestiae nesciunt error cumque quaerat, tempore vero unde eum aperiam eligendi repellendus.',
];

const types = {
'Default (default)': 'default',
Expand Down Expand Up @@ -63,11 +73,16 @@ const props = () => ({
});

const itemToElement = item => {
const itemAsArray = item.text.split(' ');
const [first, ...rest] = item.text.split(' ');
return (
<div>
<span>{itemAsArray[0]}</span>
<span style={{ color: 'blue' }}> {itemAsArray[1]}</span>
<div
style={{
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
}}>
<span>{first}</span>
<span style={{ color: 'blue' }}> {rest.join(' ')}</span>
</div>
);
};
Expand Down
1 change: 1 addition & 0 deletions packages/react/src/components/Dropdown/Dropdown.js
View file
Expand Up @@ -300,6 +300,7 @@ export default class Dropdown extends React.Component {
isHighlighted={
highlightedIndex === index || selectedItem === item
}
title={itemToElement ? item.text : itemToString(item)}
{...itemProps}>
{itemToElement ? (
<ItemToElement key={itemProps.id} {...item} />
Expand Down
4 changes: 4 additions & 0 deletions packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
View file
Expand Up @@ -689,13 +689,15 @@ exports[`Dropdown should render with strings as items 1`] = `
onClick={[Function]}
onMouseDown={[Function]}
onMouseMove={[Function]}
title="zar"
>
<div
className="bx--list-box__menu-item"
id="downshift-3-item-0"
onClick={[Function]}
onMouseDown={[Function]}
onMouseMove={[Function]}
title="zar"
>
<div
className="bx--list-box__menu-item__option"
Expand All @@ -712,13 +714,15 @@ exports[`Dropdown should render with strings as items 1`] = `
onClick={[Function]}
onMouseDown={[Function]}
onMouseMove={[Function]}
title="doz"
>
<div
className="bx--list-box__menu-item"
id="downshift-3-item-1"
onClick={[Function]}
onMouseDown={[Function]}
onMouseMove={[Function]}
title="doz"
>
<div
className="bx--list-box__menu-item__option"
Expand Down
1 change: 1 addition & 0 deletions packages/react/src/components/MultiSelect/FilterableMultiSelect.js
View file
Expand Up @@ -435,6 +435,7 @@ export default class FilterableMultiSelect extends React.Component {
key={itemProps.id}
isActive={isChecked}
isHighlighted={highlightedIndex === index}
title={itemText}
{...itemProps}>
<Checkbox
id={itemProps.id}
Expand Down
1 change: 1 addition & 0 deletions packages/react/src/components/MultiSelect/MultiSelect.js
View file
Expand Up @@ -379,6 +379,7 @@ export default class MultiSelect extends React.Component {
key={itemProps.id}
isActive={isChecked}
isHighlighted={highlightedIndex === index}
title={itemText}
{...itemProps}>
<Checkbox
id={`${itemProps.id}__checkbox`}
Expand Down

0 comments on commit 6202406

Please sign in to comment.