diff --git a/src/components/FAB/FAB.tsx b/src/components/FAB/FAB.tsx index 70777798ec..35d0862be8 100644 --- a/src/components/FAB/FAB.tsx +++ b/src/components/FAB/FAB.tsx @@ -257,7 +257,7 @@ const FAB = forwardRef( const loadingIndicatorSize = isLargeSize ? 24 : 18; const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium; - const extendedStyle = getExtendedFabStyle({ customSize, theme }); + const extendedStyle = getExtendedFabStyle({ customSize, size, theme }); const textStyle = { color: foregroundColor, ...font, diff --git a/src/components/FAB/utils.ts b/src/components/FAB/utils.ts index e87d24019f..82172af230 100644 --- a/src/components/FAB/utils.ts +++ b/src/components/FAB/utils.ts @@ -410,10 +410,16 @@ const extended = { height: 48, paddingHorizontal: 16, }; - -const v3Extended = { +const v3ExtendedSmallSize = { + height: 40, + paddingHorizontal: 16, +}; +const v3ExtendedMediumSize = { height: 56, - borderRadius: 16, + paddingHorizontal: 16, +}; +const v3ExtendedLargeSize = { + height: 96, paddingHorizontal: 16, }; @@ -424,16 +430,38 @@ const getExtendedFabDimensions = (customSize: number) => ({ export const getExtendedFabStyle = ({ customSize, + size, theme, }: { customSize?: number; + size: 'small' | 'medium' | 'large'; theme: InternalTheme; }) => { if (customSize) return getExtendedFabDimensions(customSize); - const { isV3 } = theme; + const { isV3, roundness } = theme; + + if (isV3) { + switch (size) { + case 'small': + return { + ...v3ExtendedSmallSize, + borderRadius: 3 * roundness, + }; + case 'medium': + return { + ...v3ExtendedMediumSize, + borderRadius: 4 * roundness, + }; + case 'large': + return { + ...v3ExtendedLargeSize, + borderRadius: 7 * roundness, + }; + } + } - return isV3 ? v3Extended : extended; + return extended; }; let cachedContext: CanvasRenderingContext2D | null = null;