diff --git a/change/@fluentui-react-accordion-2027cb6e-b587-45be-9ba9-6c95eafa7acd.json b/change/@fluentui-react-accordion-2027cb6e-b587-45be-9ba9-6c95eafa7acd.json new file mode 100644 index 00000000000000..6e289f0f6839c1 --- /dev/null +++ b/change/@fluentui-react-accordion-2027cb6e-b587-45be-9ba9-6c95eafa7acd.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: added cursor style in AccordionHeader for AccordionItem disabled state", + "packageName": "@fluentui/react-accordion", + "email": "kakrookaran@gmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts b/packages/react-components/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts index e6a4109cc864c3..eb9238de31ad88 100644 --- a/packages/react-components/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts +++ b/packages/react-components/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts @@ -72,6 +72,9 @@ const useStyles = makeStyles({ buttonExpandIconEnd: { paddingRight: tokens.spacingHorizontalMNudge, }, + buttonDisabled: { + cursor: 'not-allowed', + }, expandIcon: { height: '100%', display: 'flex', @@ -122,6 +125,7 @@ export const useAccordionHeaderStyles_unstable = (state: AccordionHeaderState) = state.size === 'small' && styles.buttonSmall, state.size === 'large' && styles.buttonLarge, state.size === 'extra-large' && styles.buttonExtraLarge, + state.disabled && styles.buttonDisabled, state.button.className, );