{
typeof name === 'string' && name.length > 0 ?
@@ -94,17 +77,15 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, playI
null
}
{
- Array.isArray(menuOptions) && menuOptions.length > 0 ?
-
-
-
+ Array.isArray(options) && options.length > 0 ?
+
:
null
}
@@ -126,10 +107,9 @@ MetaItem.propTypes = {
posterShape: PropTypes.oneOf(['poster', 'landscape', 'square']),
playIcon: PropTypes.bool,
progress: PropTypes.number,
- menuOptions: PropTypes.array,
+ options: PropTypes.array,
dataset: PropTypes.objectOf(String),
- onSelect: PropTypes.func,
- menuOptionOnSelect: PropTypes.func
+ optionOnSelect: PropTypes.func
};
module.exports = MetaItem;
diff --git a/src/common/MetaItem/styles.less b/src/common/MetaItem/styles.less
index eb5d750f6..7d2797b51 100644
--- a/src/common/MetaItem/styles.less
+++ b/src/common/MetaItem/styles.less
@@ -41,11 +41,9 @@
color: var(--color-backgrounddarker);
}
- .multiselect-container {
- .multiselect-label-container {
- .icon {
- fill: var(--color-backgrounddarker);
- }
+ .menu-label-container {
+ .icon {
+ fill: var(--color-backgrounddarker);
}
}
}
@@ -162,50 +160,45 @@
}
}
- .multiselect-container {
+
+ .menu-label-container {
flex: none;
width: 2.8rem;
height: 2.8rem;
- overflow: visible;
+ padding: 0.75rem;
+ background-color: transparent;
- .multiselect-label-container {
+ &:hover, &:global(.active) {
+ background-color: var(--color-surface80);
+ }
+
+ .icon {
+ display: block;
width: 100%;
height: 100%;
- padding: 0.75rem;
- background-color: transparent;
+ fill: var(--color-surfacelighter);
+ }
- &:hover, &:global(.active) {
- background-color: var(--color-surface80);
- }
+ .popup-menu-container {
+ width: auto;
+ right: initial;
+ left: 0;
- .icon {
- display: block;
- width: 100%;
- height: 100%;
- fill: var(--color-surfacelighter);
- }
+ .multiselect-menu-container {
+ min-width: 8rem;
+ max-width: 12rem;
- .popup-menu-container {
- width: auto;
- right: initial;
- left: 0;
+ .multiselect-option-container {
+ padding: 0.5rem;
+ background-color: var(--color-surfacelighter);
- .multiselect-menu-container {
- min-width: 8rem;
- max-width: 12rem;
+ &:hover, &:focus {
+ outline: none;
+ background-color: var(--color-surfacelight);
+ }
- .multiselect-option-container {
- padding: 0.5rem;
- background-color: var(--color-surfacelighter);
-
- &:hover, &:focus {
- outline: none;
- background-color: var(--color-surfacelight);
- }
-
- .multiselect-option-label {
- color: var(--color-backgrounddarker);
- }
+ .multiselect-option-label {
+ color: var(--color-backgrounddarker);
}
}
}
diff --git a/storybook/stories/MetaItem/SаmpleMetaItem/SаmpleMetaItem.js b/storybook/stories/MetaItem/SаmpleMetaItem/SаmpleMetaItem.js
index dc3b84ff2..73d7aa16c 100644
--- a/storybook/stories/MetaItem/SаmpleMetaItem/SаmpleMetaItem.js
+++ b/storybook/stories/MetaItem/SаmpleMetaItem/SаmpleMetaItem.js
@@ -28,10 +28,9 @@ storiesOf('MetaItem', module).add('SаmpleMetaItem', () => {
posterShape={'poster'}
playIcon={true}
progress={0.4}
- menuOptions={CONTINUE_WATCHING_MENU}
+ options={CONTINUE_WATCHING_MENU}
dataset={{ id: 'pt1' }}
- onSelect={action('onSelect')}
- menuOptionOnSelect={action('menuOptionOnSelect')}
+ optionOnSelect={action('optionOnSelect')}
data-id={'meta-item-id'}
onClick={domEventHandler}
/>