Merge pull request #2741 from SUI-Components/fix-primitive-typography…

…-classname-prop fix(components/primitive/typography): allow for use of className prop
SUI-Components · Jun 4, 2024 · af00f9e · af00f9e
2 parents beb590b + 7a374d3
commit af00f9e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 12 deletions.
diff --git a/components/primitive/typography/src/index.js b/components/primitive/typography/src/index.js
@@ -36,6 +36,7 @@ const PrimitiveTypography = ({
  ...props
 }) => {
  const {...resultingProps} = useTypography({
+ className,
  design,
  variant,
  as,

diff --git a/components/primitive/typography/src/useTypography.js b/components/primitive/typography/src/useTypography.js
@@ -34,19 +34,23 @@ const getClassNames = ({
  isBlurred,
  isLinked
 }) => {
- return cx(BASE_CLASS, [`${BASE_CLASS}-design-${design}`, `${BASE_CLASS}-variant-${variant}`], {
- [`${BASE_CLASS}-linked`]: isLinked,
- [`${BASE_CLASS}-fontSize-${fontSize}`]: fontSize !== undefined,
- [`${BASE_CLASS}-fontFamily-${fontFamily}`]: fontFamily !== undefined,
- [`${BASE_CLASS}-fontWeight-${fontWeight}`]: fontWeight !== undefined,
- [`${BASE_CLASS}-fontStyle-${fontStyle}`]: fontStyle !== undefined,
- [`${BASE_CLASS}-fontStretch-${fontStretch}`]: fontStretch !== undefined,
- [`${BASE_CLASS}-letterSpacing-${letterSpacing}`]: letterSpacing !== undefined,
- [`${BASE_CLASS}-lineHeight-${lineHeight}`]: lineHeight !== undefined,
- [`${BASE_CLASS}-textDecorationLine-${textDecorationLine}`]: textDecorationLine !== undefined,
- [`${BASE_CLASS}-blurred-${isBlurred}`]: isBlurred !== undefined,
+ return cx(
+ BASE_CLASS,
+ [`${BASE_CLASS}-design-${design}`, `${BASE_CLASS}-variant-${variant}`],
+ {
+ [`${BASE_CLASS}-linked`]: isLinked,
+ [`${BASE_CLASS}-fontSize-${fontSize}`]: fontSize !== undefined,
+ [`${BASE_CLASS}-fontFamily-${fontFamily}`]: fontFamily !== undefined,
+ [`${BASE_CLASS}-fontWeight-${fontWeight}`]: fontWeight !== undefined,
+ [`${BASE_CLASS}-fontStyle-${fontStyle}`]: fontStyle !== undefined,
+ [`${BASE_CLASS}-fontStretch-${fontStretch}`]: fontStretch !== undefined,
+ [`${BASE_CLASS}-letterSpacing-${letterSpacing}`]: letterSpacing !== undefined,
+ [`${BASE_CLASS}-lineHeight-${lineHeight}`]: lineHeight !== undefined,
+ [`${BASE_CLASS}-textDecorationLine-${textDecorationLine}`]: textDecorationLine !== undefined,
+ [`${BASE_CLASS}-blurred-${isBlurred}`]: isBlurred !== undefined
+ },
  className
- })
+ )
 }
 
 const useTypography = ({
@@ -87,6 +91,7 @@ const useTypography = ({
  isLinked
  })
  )
+
  return {
  ...props,
  ...{