Customization works

microsoft · Nov 8, 2023 · a6c5798 · a6c5798
1 parent e71d0fc
commit a6c5798
Showing 1 changed file with 25 additions and 0 deletions.
diff --git a/apps/fluent-tester/src/TestComponents/TabList/TabListTest.tsx b/apps/fluent-tester/src/TestComponents/TabList/TabListTest.tsx
@@ -87,6 +87,21 @@ const SubmitInput: React.FunctionComponent<SubmitInputProps> = ({ label, onSubmi
   );
 };
 
+const tabStates = [
+  'small',
+  'medium',
+  'large',
+  'vertical',
+  'hovered',
+  'disabled',
+  'selected',
+  'focused',
+  'pressed',
+  'transparent',
+  'subtle',
+  'hasIcon',
+];
+
 const CustomizableTabList: React.FunctionComponent = () => {
   const styles = getStyles(useFluentTheme());
   const [tablistProps, setTablistProps] = React.useState<TabListProps>({
@@ -136,8 +151,18 @@ const CustomizableTabList: React.FunctionComponent = () => {
         const newTokens = prev[tabKey];
         if (value === '') {
           delete newTokens[tokenName];
+          for (const state of tabStates) {
+            if (newTokens[state][tokenName]) delete newTokens[state][tokenName];
+          }
         } else {
           newTokens[tokenName] = value;
+          for (const state of tabStates) {
+            if (newTokens[state]) {
+              newTokens[state][tokenName] = value;
+            } else {
+              newTokens[state] = { [tokenName]: value };
+            }
+          }
         }
         return { ...prev, [tabKey]: newTokens };
       });