fix(playlist): change filters color and style

jwplayer · Jun 18, 2021 · 83fa7ac · 83fa7ac
1 parent abe95c2
commit 83fa7ac
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 10 deletions.
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -16,10 +16,12 @@ type Props = {
   startIcon?: JSX.Element;
   variant?: Variant;
   onClick?: () => void;
+  tabIndex?: number;
   to?: string;
-};
+  role?: string;
+} & React.AriaAttributes;
 
-const Button: React.FC<Props & React.AriaAttributes> = ({
+const Button: React.FC<Props> = ({
   label,
   color = 'default',
   startIcon,

diff --git a/src/components/Dropdown/Dropdown.module.scss b/src/components/Dropdown/Dropdown.module.scss
@@ -10,8 +10,7 @@ $select-focus: theme.$primary-color;
   position: relative;
   display: grid;
   align-items: center;
-  min-width: 10ch;
-  max-width: 20ch;
+  width: 140px;
   margin-left: 24px;
   font-size: 1.25rem;
   line-height: 1.1;
@@ -37,8 +36,9 @@ $select-focus: theme.$primary-color;
     z-index: 1;
     width: 100%;
     margin: 0;
-    padding: 9px;
-    color: var(--highlight-color, white);
+    padding: 9px 24px 9px 9px;
+    text-overflow: ellipsis;
+    color: variables.$white;
     font-family: inherit;
     font-weight: 700;
     font-size: 1rem;

diff --git a/src/components/Filter/Filter.module.scss b/src/components/Filter/Filter.module.scss
@@ -6,7 +6,6 @@
   display: flex;
   align-items: center;
   margin-left: 16px;
-  padding-top: 8px;
 
   > button {
     margin: 0 4px;

diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx
@@ -1,11 +1,11 @@
 import React, { Fragment, FC } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import Dropdown from '../Dropdown/Dropdown';
 import Button from '../Button/Button';
 import useBreakpoint, { Breakpoint } from '../../hooks/useBreakpoint';
 
 import styles from './Filter.module.scss';
-import { useTranslation } from 'react-i18next';
 
 type Props = {
   name: string;
@@ -30,16 +30,23 @@ const Filter: FC<Props> = ({ name, value, defaultLabel, options, setValue, value
   return (
     <Fragment>
       {showFilterRow ? (
-        <div className={styles.filterRow}>
+        <div className={styles.filterRow} role="listbox">
           {options.map((option) => (
             <Button
               label={`${valuePrefix}${option}`}
               onClick={() => setValue(option)}
               key={option}
               active={value === option}
+              role="option"
             />
           ))}
-          <Button label={defaultLabel} onClick={() => setValue('')} active={value === ''} key={defaultLabel} />
+          <Button
+            label={defaultLabel}
+            onClick={() => setValue('')}
+            active={value === ''}
+            key={defaultLabel}
+            role="option"
+          />
         </div>
       ) : (
         <Dropdown

diff --git a/src/components/Filter/__snapshots__/Filter.test.tsx.snap b/src/components/Filter/__snapshots__/Filter.test.tsx.snap
@@ -4,30 +4,35 @@ exports[`<Filter> renders Filter 1`] = `
 <div>
   <div
     class="filterRow"
+    role="listbox"
   >
     <button
       class="button default outlined"
+      role="option"
     >
       <span>
         x
       </span>
     </button>
     <button
       class="button default outlined"
+      role="option"
     >
       <span>
         y
       </span>
     </button>
     <button
       class="button default outlined"
+      role="option"
     >
       <span>
         z
       </span>
     </button>
     <button
       class="button default outlined"
+      role="option"
     >
       <span>
         bb