Build and lint

Author: Mitch-At-Work

packages/react-components/semantic-style-hooks-preview/library/package.json

@@ -26,6 +26,8 @@
   "dependencies": {
     "@fluentui/react-button": "^9.4.6",
     "@fluentui/semantic-tokens": "^0.0.1",
+    "@fluentui/react-icons": "^2.0.245",
+    "@fluentui/react-provider": "^9.22.7",
     "@fluentui/react-tabster": "^9.24.6",
     "@fluentui/react-theme": "^9.1.24",
     "@fluentui/react-utilities": "^9.19.0",

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticButtonStyles.styles.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticCompoundButtonStyles.styles.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import * as semanticTokens from '@fluentui/semantic-tokens';
 import { mergeClasses, makeStyles } from '@griffel/react';
 import { useSemanticButtonStyles } from './useSemanticButtonStyles.styles';
@@ -340,7 +342,7 @@ export const useSemanticCompoundButtonStyles = (_state: unknown): CompoundButton
   const contentContainerStyles = useContentContainerStyles();
   const secondaryContentStyles = useSecondaryContentStyles();
 
-  const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;
+  const { appearance, disabled, disabledFocusable, iconOnly, size } = state;
 
   useSemanticButtonStyles(state);
 
@@ -373,7 +375,6 @@ export const useSemanticCompoundButtonStyles = (_state: unknown): CompoundButton
   );
 
   if (state.icon) {
-    console.log('iconPosition', iconPosition);
     state.icon.className = mergeClasses(
       state.icon.className,
       compoundButtonClassNames.icon,

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticMenuButtonStyles.styles.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
 import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
 import * as semanticTokens from '@fluentui/semantic-tokens';

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticSplitButtonStyles.styles.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import * as semanticTokens from '@fluentui/semantic-tokens';

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticToggleButtonStyles.styles.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';

packages/react-components/semantic-style-hooks-preview/library/src/testing/isConformant.ts

@@ -4,7 +4,7 @@ import griffelTests from '@fluentui/react-conformance-griffel';
 
 export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
-) {
+): void {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
     tsConfig: { configName: 'tsconfig.spec.json' },
     componentPath: require.main?.filename.replace('.test', ''),

packages/semantic-tokens/etc/semantic-tokens.api.md

@@ -335,7 +335,7 @@ export const groupButtonNeutralStrokePressed = "var(--smtc-group-button-neutral-
 export const groupButtonNeutralStrokePressedSelected = "var(--smtc-group-button-neutral-stroke-pressed-selected, var(--colorNeutralStroke1Pressed))";
 
 // @public (undocumented)
-export const groupButtonNeutralStrokeSelected = "var(--smtc-group-button-neutral-stroke-selected, var(--colorNeutralStroke1))";
+export const groupButtonNeutralStrokeSelected = "var(--smtc-group-button-neutral-stroke-selected, var(--colorNeutralStroke1Selected))";
 
 // @public (undocumented)
 export const groupButtonNeutralTextForeground = "var(--smtc-group-button-neutral-text-foreground, var(--colorNeutralForeground1))";