Merge remote-tracking branch 'origin/revert-5559-kendallg/progress-ba…

…r' into fix_select_panel2_anchoring

.changeset/angry-ties-push.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Update BaseStyles to no longer pass system props when feature flag is enabled

packages/react/.storybook/preview.jsx

@@ -62,8 +62,8 @@ const preview = {
                     ['*', 'Playground', /Playground$/, 'Features', 'Examples'],
                   ],
                 ],
-              ]
-            ]
+              ],
+            ],
           ],
           'Behaviors',
           'Hooks',
@@ -82,8 +82,8 @@ const preview = {
                     ['*', 'Playground', /Playground$/, 'Features', 'Examples'],
                   ],
                 ],
-              ]
-            ]
+              ],
+            ],
           ],
           [
             'Private',
@@ -100,8 +100,8 @@ const preview = {
                     ['*', 'Playground', /Playground$/, 'Features', 'Examples'],
                   ],
                 ],
-              ]
-            ]
+              ],
+            ],
           ],
           '*',
         ]
@@ -257,14 +257,6 @@ export const globalTypes = {
 }
 
 export const decorators = [
-  (Story, context) => {
-    const {featureFlags} = context.globals
-    return (
-      <FeatureFlags flags={featureFlags}>
-        <Story {...context} />
-      </FeatureFlags>
-    )
-  },
   (Story, context) => {
     const {colorScheme} = context.globals
 
@@ -318,6 +310,14 @@ export const decorators = [
       </Profiler>
     )
   },
+  (Story, context) => {
+    const {featureFlags} = context.globals
+    return (
+      <FeatureFlags flags={featureFlags}>
+        <Story {...context} />
+      </FeatureFlags>
+    )
+  },
 ]
 
 export default preview

packages/react/src/BaseStyles.module.css

@@ -17,6 +17,26 @@ table {
   border-collapse: collapse;
 }
 
+[data-color-mode='light'] input {
+  color-scheme: light;
+}
+
+[data-color-mode='dark'] input {
+  color-scheme: dark;
+}
+
+@media (prefers-color-scheme: light) {
+  [data-color-mode='auto'][data-light-theme*='light'] {
+    color-scheme: light;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-color-mode='auto'][data-dark-theme*='dark'] {
+    color-scheme: dark;
+  }
+}
+
 [role='button']:focus:not(:focus-visible):not(.focus-visible),
 [role='tabpanel'][tabindex='0']:focus:not(:focus-visible):not(.focus-visible),
 button:focus:not(:focus-visible):not(.focus-visible),
@@ -34,6 +54,12 @@ details-dialog:focus:not(:focus-visible):not(.focus-visible) {
 /* -------------------------------------------------------------------------- */
 
 .BaseStyles {
+  font-family: var(--BaseStyles-fontFamily, var(--fontStack-system));
+  /* stylelint-disable-next-line primer/typography */
+  line-height: var(--BaseStyles-lineHeight, 1.5);
+  /* stylelint-disable-next-line primer/colors */
+  color: var(--BaseStyles-fgColor, var(--fgColor-default));
+
   /* Global styles for light mode */
   &:has([data-color-mode='light']) {
     input & {

packages/react/src/BaseStyles.tsx

@@ -53,21 +53,17 @@ export type BaseStylesProps = PropsWithChildren & {
   SxProp
 
 function BaseStyles(props: BaseStylesProps) {
-  const {
-    children,
-    color = 'var(--fgColor-default)',
-    fontFamily = 'normal',
-    lineHeight = 'default',
-    className,
-    as: Component = 'div',
-    ...rest
-  } = props
-
+  const {children, color, fontFamily, lineHeight, className, as: Component = 'div', style, ...rest} = props
   const {colorScheme, dayScheme, nightScheme} = useTheme()
   const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
 
   if (enabled) {
     const newClassName = clsx(classes.BaseStyles, className)
+    const baseStyles = {
+      ['--BaseStyles-fgColor']: color,
+      ['--BaseStyles-fontFamily']: fontFamily,
+      ['--BaseStyles-lineHeight']: lineHeight,
+    }
 
     // If props includes TYPOGRAPHY or COMMON props, pass them to the Box component
     if (includesSystemProps(props)) {
@@ -77,9 +73,6 @@ function BaseStyles(props: BaseStylesProps) {
         <Box
           as={Component}
           className={newClassName}
-          color={color}
-          fontFamily={fontFamily}
-          lineHeight={lineHeight}
           data-portal-root
           /**
            * We need to map valid primer/react color modes onto valid color modes for primer/primitives
@@ -89,7 +82,11 @@ function BaseStyles(props: BaseStylesProps) {
           data-color-mode={colorScheme?.includes('dark') ? 'dark' : 'light'}
           data-light-theme={dayScheme}
           data-dark-theme={nightScheme}
-          style={systemProps}
+          style={{
+            ...systemProps,
+            ...baseStyles,
+            ...style,
+          }}
           {...rest}
         >
           {children}
@@ -100,9 +97,6 @@ function BaseStyles(props: BaseStylesProps) {
     return (
       <Component
         className={newClassName}
-        color={color}
-        fontFamily={fontFamily}
-        lineHeight={lineHeight}
         data-portal-root
         /**
          * We need to map valid primer/react color modes onto valid color modes for primer/primitives
@@ -112,6 +106,10 @@ function BaseStyles(props: BaseStylesProps) {
         data-color-mode={colorScheme?.includes('dark') ? 'dark' : 'light'}
         data-light-theme={dayScheme}
         data-dark-theme={nightScheme}
+        style={{
+          ...baseStyles,
+          ...style,
+        }}
         {...rest}
       >
         {children}
@@ -122,9 +120,9 @@ function BaseStyles(props: BaseStylesProps) {
   return (
     <StyledDiv
       className={className}
-      color={color}
-      fontFamily={fontFamily}
-      lineHeight={lineHeight}
+      color={color ?? 'var(--fgColor-default)'}
+      fontFamily={fontFamily ?? 'normal'}
+      lineHeight={lineHeight ?? 'default'}
       data-portal-root
       /**
        * We need to map valid primer/react color modes onto valid color modes for primer/primitives
@@ -134,6 +132,7 @@ function BaseStyles(props: BaseStylesProps) {
       data-color-mode={colorScheme?.includes('dark') ? 'dark' : 'light'}
       data-light-theme={dayScheme}
       data-dark-theme={nightScheme}
+      style={style}
       {...rest}
     >
       <GlobalStyle colorScheme={colorScheme?.includes('dark') ? 'dark' : 'light'} />

packages/react/src/FeatureFlags/FeatureFlags.tsx

@@ -1,16 +1,16 @@
-import React, {useMemo} from 'react'
+import React, {useContext, useMemo} from 'react'
 import {FeatureFlagContext} from './FeatureFlagContext'
 import {FeatureFlagScope, type FeatureFlags} from './FeatureFlagScope'
-import {DefaultFeatureFlags} from './DefaultFeatureFlags'
 
 export type FeatureFlagsProps = React.PropsWithChildren<{
   flags: FeatureFlags
 }>
 
 export function FeatureFlags({children, flags}: FeatureFlagsProps) {
+  const parentFeatureFlags = useContext(FeatureFlagContext)
   const value = useMemo(() => {
-    const scope = FeatureFlagScope.merge(DefaultFeatureFlags, FeatureFlagScope.create(flags))
+    const scope = FeatureFlagScope.merge(parentFeatureFlags, FeatureFlagScope.create(flags))
     return scope
-  }, [flags])
+  }, [parentFeatureFlags, flags])
   return <FeatureFlagContext.Provider value={value}>{children}</FeatureFlagContext.Provider>
 }

packages/react/src/ProgressBar/ProgressBar.features.stories.tsx

@@ -19,10 +19,10 @@ export const Inline = () => <ProgressBar inline progress="66" sx={{width: '100px
 export const Color = () => <ProgressBar progress="66" bg="done.emphasis" aria-label="Upload test.png" />
 
 export const MultipleItems = () => (
-  <ProgressBar>
-    <ProgressBar.Item progress={33} aria-label="Photo Usage" sx={{bg: 'accent.emphasis'}} />
-    <ProgressBar.Item progress={23} aria-label="Application Usage" bg={'danger.emphasis'} />
-    <ProgressBar.Item progress={14} aria-label="Music Usage" bg={'severe.emphasis'} />
+  <ProgressBar aria-valuenow={70} aria-label="Upload test.png">
+    <ProgressBar.Item progress={33} sx={{bg: 'accent.emphasis'}} />
+    <ProgressBar.Item progress={23} bg={'danger.emphasis'} />
+    <ProgressBar.Item progress={14} bg={'severe.emphasis'} />
   </ProgressBar>
 )
 

packages/react/src/ProgressBar/ProgressBar.figma.tsx

@@ -38,6 +38,6 @@ figma.connect(
         gray: 'neutral.epmhasis',
       }),
     },
-    example: ({color}) => <ProgressBarItem aria-label="Uploading image.png" bg={color} />,
+    example: ({color}) => <ProgressBarItem bg={color} />,
   },
 )

packages/react/src/ProgressBar/ProgressBar.stories.tsx

@@ -1,7 +1,6 @@
 import React, {useEffect} from 'react'
 import type {Meta} from '@storybook/react'
-import {ProgressBar} from '..'
-import type {ProgressBarProps} from './ProgressBar'
+import {ProgressBar, type ProgressBarProps} from '..'
 
 const sectionColorsDefault = [
   'success.emphasis',
@@ -32,9 +31,9 @@ export const Playground = ({sections, ...args}: ProgressBarProps & {sections: nu
     return <ProgressBar {...args} sx={args.inline ? {width: '100px'} : {}} aria-label="Upload test.png" />
   } else {
     return (
-      <ProgressBar>
+      <ProgressBar aria-label="Upload test.png">
         {[...Array(sections).keys()].map(i => (
-          <ProgressBar.Item key={i} progress={100 / sections} bg={sectionColors[i]} aria-label="Upload test.png" />
+          <ProgressBar.Item key={i} progress={100 / sections} bg={sectionColors[i]} />
         ))}
       </ProgressBar>
     )

packages/react/src/ProgressBar/ProgressBar.tsx

@@ -73,6 +73,7 @@ const ProgressContainer = toggleStyledComponent(
 )
 
 export type ProgressBarItems = React.HTMLAttributes<HTMLSpanElement> & {
+  'aria-label'?: string
   className?: string
 } & ProgressProp &
   SxProp
@@ -82,7 +83,6 @@ export const Item = forwardRef<HTMLSpanElement, ProgressBarItems>(
     {
       progress,
       'aria-label': ariaLabel,
-      'aria-hidden': ariaHidden,
       'aria-valuenow': ariaValueNow,
       'aria-valuetext': ariaValueText,
       className,
@@ -110,24 +110,6 @@ export const Item = forwardRef<HTMLSpanElement, ProgressBarItems>(
     styles[progressBarWidth] = progress ? `${progress}%` : '0%'
     styles[progressBarBg] = (bgType && `var(--bgColor-${bgType[0]}-${bgType[1]})`) || 'var(--bgColor-success-emphasis)'
 
-    if (__DEV__) {
-      /**
-       * The Linter yells because it thinks this conditionally calls an effect,
-       * but since this is a compile-time flag and not a runtime conditional
-       * this is safe, and ensures the entire effect is kept out of prod builds
-       * shaving precious bytes from the output, and avoiding mounting a noop effect
-       */
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      React.useEffect(() => {
-        if (!ariaHidden && !ariaLabel) {
-          // eslint-disable-next-line no-console
-          console.warn(
-            'This component should include an aria-label or should be aria-hidden if surrounding text can be used to perceive the progress.',
-          )
-        }
-      }, [ariaHidden, ariaLabel])
-    }
-
     return (
       <ProgressItem
         className={clsx(className, {[classes.ProgressBarItem]: enabled})}
@@ -162,7 +144,6 @@ export const ProgressBar = forwardRef<HTMLSpanElement, ProgressBarProps>(
       'aria-label': ariaLabel,
       'aria-valuenow': ariaValueNow,
       'aria-valuetext': ariaValueText,
-      'aria-hidden': ariaHidden,
       className,
       ...rest
     }: ProgressBarProps,
@@ -194,10 +175,9 @@ export const ProgressBar = forwardRef<HTMLSpanElement, ProgressBarProps>(
           <Item
             data-animated={animated}
             progress={progress}
-            aria-label={ariaHidden ? undefined : ariaLabel}
+            aria-label={ariaLabel}
             aria-valuenow={ariaValueNow}
             aria-valuetext={ariaValueText}
-            aria-hidden={ariaHidden}
             bg={bg}
           />
         )}