const to = getComponentOverviewUrl(component.key, component.qualifier);
return (
- <li
- className={this.props.selected ? 'active' : undefined}
- key={component.key}
- ref={node => this.props.innerRef(component.key, node)}
- role="option"
- aria-selected={this.props.selected}>
- <Link data-key={component.key} onClick={this.props.onClose} onFocus={this.doSelect} to={to}>
+ <li key={component.key} ref={node => this.props.innerRef(component.key, node)}>
+ <Link
+ className={this.props.selected ? 'hover' : undefined}
+ data-key={component.key}
+ onClick={this.props.onClose}
+ onFocus={this.doSelect}
+ to={to}>
<div className="navbar-search-item-link little-padded-top" onMouseEnter={this.doSelect}>
<div className="display-flex-center">
<span className="navbar-search-item-icons little-spacer-right">
const more = props.more[qualifier];
renderedComponents.push(
- <ul className="menu" key={`header-${qualifier}`} role="group">
+ <ul className="menu" key={`header-${qualifier}`}>
<li className="menu-header" role="presentation">
{translate('qualifiers', qualifier)}
</li>
exports[`renders favorite 1`] = `
<li
- aria-selected={false}
key="foo"
- role="option"
>
<ForwardRef(Link)
data-key="foo"
exports[`renders match 1`] = `
<li
- aria-selected={false}
key="foo"
- role="option"
>
<ForwardRef(Link)
data-key="foo"
exports[`renders recently browsed 1`] = `
<li
- aria-selected={false}
key="foo"
- role="option"
>
<ForwardRef(Link)
data-key="foo"
exports[`renders selected 1`] = `
<li
- aria-selected={false}
key="foo"
- role="option"
>
<ForwardRef(Link)
data-key="foo"
exports[`renders selected 2`] = `
<li
- aria-selected={true}
- className="active"
key="foo"
- role="option"
>
<ForwardRef(Link)
+ className="hover"
data-key="foo"
onClick={[MockFunction]}
onFocus={[Function]}
<ul
className="menu"
key="header-TRK"
- role="group"
>
<li
className="menu-header"
<ul
className="menu"
key="header-FIL"
- role="group"
>
<li
className="menu-header"
<ul
className="menu"
key="header-TRK"
- role="group"
>
<li
className="menu-header"
border-top: 1px solid var(--barBorderColor);
}
-.menu:focus {
- outline: none;
-}
-
.menu.is-container {
padding: 5px;
}
white-space: nowrap;
}
-.menu > li > a {
- color: var(--baseFontColor);
- border-bottom: none;
+.menu > li > a,
+.menu > li > button {
+ color: var(--neutral800);
+ border-width: 0 0 0 2px;
+ border-style: solid;
+ border-color: transparent;
transition: none;
}
.menu > li > button {
- color: var(--baseFontColor);
text-align: left;
width: 100%;
}
-.menu > li > a.rich-item {
- display: flex;
- align-items: center;
- border: 1px solid var(--gray80);
- border-radius: 4px;
- margin: 4px 10px;
- padding: 2px 8px;
- white-space: normal;
-}
-
-.menu .divider {
- height: 1px;
- margin: 6px 0;
- overflow: hidden;
- background-color: var(--barBorderColor);
-}
-
.menu > li > a.disabled {
color: var(--disableGrayText) !important;
cursor: not-allowed !important;
}
.menu > li > a:hover,
-.menu > li > a:focus,
-.menu > li > button:hover,
-.menu > li > button:focus {
- text-decoration: none;
- color: var(--baseFontColor);
- background-color: var(--barBackgroundColor);
+.menu > li > a.hover,
+.menu > li > button:hover {
+ background-color: var(--neutral50);
+ border-left-color: var(--blacka60);
}
-.menu > .active > a,
-.menu > li > .active,
-.menu > .active > a:hover,
-.menu > li > .active:hover,
-.menu > .active > a:focus,
-.menu > li > .active:focus {
- color: var(--baseFontColor);
- text-decoration: none;
- outline: 0;
- background-color: var(--barBackgroundColor);
+.menu > li > a.active,
+.menu > li > button.active {
+ background-color: var(--info50);
+ border-left-color: var(--info500);
+}
+
+.menu > li > a.active:hover,
+.menu > li > a.active.hover,
+.menu > li > button.active:hover {
+ background-color: var(--info100);
}
-.menu .menu-vertically-limited,
.menu.menu-vertically-limited {
max-height: 300px;
overflow-y: auto;
}
+.menu .divider {
+ height: 1px;
+ margin: 6px 0;
+ overflow: hidden;
+ background-color: var(--barBorderColor);
+}
+
.menu-vertically-limited.with-top-separator {
border-top: 1px solid #e6e6e6;
}
primary400: '#297BAE',
info50: '#ECF6FE',
+ info100: '#D9EDF7',
info500: '#0271B9',
info400: '#4B9FD5',
error500: '#D02F3A',
error500a20: 'rgba(208, 47, 58, 0.20)',
+ neutral50: '#F3F3F3',
neutral200: '#CCCCCC',
neutral600: '#666666',
neutral800: '#333333',
white: '#FFFFFF',
black: '#000000',
- blacka87: 'rgba(0, 0, 0, 0.87)',
- blacka38: 'rgba(0, 0, 0, 0.38)'
+ blacka38: 'rgba(0, 0, 0, 0.38)',
+ blacka60: 'rgba(0, 0, 0, 0.60)',
+ blacka87: 'rgba(0, 0, 0, 0.87)'
},
sizes: {
interface State {
active: string;
+ selected: string;
}
export default class SelectList extends React.PureComponent<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
- active: props.currentItem
+ active: props.currentItem,
+ selected: props.currentItem
};
}
prevProps.currentItem !== this.props.currentItem &&
!this.props.items.includes(this.state.active)
) {
- this.setState({ active: this.props.currentItem });
+ this.setState({ active: this.props.currentItem, selected: this.props.currentItem });
}
}
} else if (event.key === KeyboardKeys.Enter) {
event.preventDefault();
event.stopImmediatePropagation();
- if (this.state.active != null) {
- this.handleSelect(this.state.active);
+ if (this.state.selected != null) {
+ this.handleSelect(this.state.selected);
}
}
};
this.props.onSelect(item);
};
- handleHover = (item: string) => {
- this.setState({ active: item });
+ handleHover = (selected: string) => {
+ this.setState({ selected });
};
selectNextElement = (state: State, props: Props) => {
- const idx = props.items.indexOf(state.active);
+ const idx = props.items.indexOf(state.selected);
if (idx < 0) {
- return { active: props.items[0] };
+ return { selected: props.items[0] };
}
- return { active: props.items[(idx + 1) % props.items.length] };
+ return { selected: props.items[(idx + 1) % props.items.length] };
};
selectPreviousElement = (state: State, props: Props) => {
- const idx = props.items.indexOf(state.active);
+ const idx = props.items.indexOf(state.selected);
if (idx <= 0) {
- return { active: props.items[props.items.length - 1] };
+ return { selected: props.items[props.items.length - 1] };
}
- return { active: props.items[idx - 1] };
+ return { selected: props.items[idx - 1] };
};
renderChild = (child: any) => {
}
return React.cloneElement(child, {
active: this.state.active,
+ selected: this.state.selected,
onHover: this.handleHover,
onSelect: this.handleSelect
});
this.props.items.map(item => (
<SelectListItem
active={this.state.active}
+ selected={this.state.selected}
item={item}
key={item}
onHover={this.handleHover}
item: string;
onHover?: (item: string) => void;
onSelect?: (item: string) => void;
+ selected?: string;
title?: React.ReactNode;
}
<li>
<a
className={classNames(
- { active: this.props.active === this.props.item },
+ {
+ active: this.props.active === this.props.item,
+ hover: this.props.selected === this.props.item
+ },
this.props.className
)}
href="#"
</SelectListItem>
));
const list = shallowRender({ items, onSelect }, children);
- expect(list.state().active).toBe('seconditem');
+ expect(list.state().selected).toBe('seconditem');
keydown({ key: KeyboardKeys.DownArrow });
- expect(list.state().active).toBe('third');
+ expect(list.state().selected).toBe('third');
keydown({ key: KeyboardKeys.DownArrow });
- expect(list.state().active).toBe('item');
+ expect(list.state().selected).toBe('item');
keydown({ key: KeyboardKeys.UpArrow });
- expect(list.state().active).toBe('third');
+ expect(list.state().selected).toBe('third');
keydown({ key: KeyboardKeys.UpArrow });
- expect(list.state().active).toBe('seconditem');
+ expect(list.state().selected).toBe('seconditem');
keydown({ key: KeyboardKeys.Enter });
expect(onSelect).toBeCalledWith('seconditem');
list.instance().componentWillUnmount!();
key=".$item"
onHover={[Function]}
onSelect={[Function]}
+ selected="seconditem"
>
<i
className="myicon"
key=".$seconditem"
onHover={[Function]}
onSelect={[Function]}
+ selected="seconditem"
>
<i
className="myicon"
key=".$third"
onHover={[Function]}
onSelect={[Function]}
+ selected="seconditem"
>
<i
className="myicon"
key="item"
onHover={[Function]}
onSelect={[Function]}
+ selected="seconditem"
/>
<SelectListItem
active="seconditem"
key="seconditem"
onHover={[Function]}
onSelect={[Function]}
+ selected="seconditem"
/>
<SelectListItem
active="seconditem"
key="third"
onHover={[Function]}
onSelect={[Function]}
+ selected="seconditem"
/>
</ul>
`;
position: 'absolute',
color: '#666'
}),
- option: (_provided, state) => ({
- display: 'block',
- lineHeight: '20px',
- padding: props?.large ? '4px 8px' : '0 8px',
- boxSizing: 'border-box',
- color: state.isDisabled ? colors.disableGrayText : colors.baseFontColor,
- backgroundColor: state.isFocused ? colors.barBackgroundColor : colors.white,
- fontSize: `${sizes.smallFontSize}`,
- cursor: state.isDisabled ? 'default' : 'pointer',
- whiteSpace: 'nowrap',
- overflow: 'hidden',
- textOverflow: 'ellipsis'
- }),
+ option: (_provided, state) => {
+ let borderLeftColor = 'transparent';
+ let backgroundColor = colors.white;
+
+ if (state.isFocused && state.isSelected) {
+ borderLeftColor = colors.info500;
+ backgroundColor = colors.info100;
+ } else if (state.isFocused) {
+ borderLeftColor = colors.blacka60;
+ backgroundColor = colors.neutral50;
+ } else if (state.isSelected) {
+ borderLeftColor = colors.info500;
+ backgroundColor = colors.info50;
+ }
+
+ return {
+ display: 'block',
+ lineHeight: '20px',
+ padding: props?.large ? '4px 8px' : '0 8px',
+ boxSizing: 'border-box',
+ color: state.isDisabled ? colors.disableGrayText : colors.neutral800,
+ backgroundColor,
+ borderLeft: '2px solid transparent',
+ borderLeftColor,
+ fontSize: `${sizes.smallFontSize}`,
+ cursor: state.isDisabled ? 'default' : 'pointer',
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis'
+ };
+ },
input: () => ({
display: 'flex',
alignItems: 'center'
margin-top: -16px;
margin-left: 8px;
padding: var(--gridSize);
- border: 1px solid var(--barBorderColor);
+ border: 1px solid var(--neutral200);
border-radius: 3px;
box-sizing: border-box;
background-color: #ffffff;
projects / sonarqube.git / commitdiff