GMT-1740: promote deep-import types to public API

.nx/version-plans/version-plan-1787753476414.md

@@ -0,0 +1,6 @@
+---
+gamut-icons: minor
+gamut: minor
+---
+
+Promote deep-import-only paths to public exports (GMT-1740): InteractiveSelectors, buttonProps, Tip/shared/types, Form/types, PopoverContainer/types, Markdown override factories, and IconStyleProps. The Menu/elements (MenuList\*) and IconOptionComponent renames are moved to a separate PR for independent review.

packages/gamut-icons/src/types.ts

@@ -1 +1 @@
-export type { GamutIconProps } from './props';
+export type { GamutIconProps, IconStyleProps } from './props';

packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap

@@ -11,6 +11,7 @@ exports[`Gamut Exported Keys 1`] = `
   "BodyPortal",
   "Box",
   "Breadcrumbs",
+  "buttonProps",
   "Card",
   "Checkbox",
   "Coachmark",
@@ -26,7 +27,11 @@ exports[`Gamut Exported Keys 1`] = `
   "ConnectedSelect",
   "ConnectedTextArea",
   "ContentContainer",
+  "createCodeBlockOverride",
+  "createInputOverride",
   "createPromise",
+  "createTagOverride",
+  "createVideoOverride",
   "CTAButton",
   "DataList",
   "DataTable",
@@ -63,6 +68,7 @@ exports[`Gamut Exported Keys 1`] = `
   "iFrameWrapper",
   "InfoTip",
   "Input",
+  "InteractiveSelectors",
   "isClickableCrumb",
   "LayoutGrid",
   "List",
@@ -93,6 +99,7 @@ exports[`Gamut Exported Keys 1`] = `
   "SkipToContent",
   "SkipToContentTarget",
   "Spinner",
+  "standardOverrides",
   "StrokeButton",
   "SubmitButton",
   "submitSuccessStatus",
@@ -108,6 +115,9 @@ exports[`Gamut Exported Keys 1`] = `
   "Text",
   "TextArea",
   "TextButton",
+  "tipAlignmentArray",
+  "tipBaseAlignmentArray",
+  "tipDefaultProps",
   "Toast",
   "Toaster",
   "Toggle",

packages/gamut/src/Anchor/index.tsx

@@ -11,7 +11,7 @@ import {
 
 import {
   ButtonBase,
-  ButtonSelectors,
+  InteractiveSelectors,
   narrowButtonBaseRef,
 } from '../ButtonBase/ButtonBase';
 import { AppendedIconProps, appendIconToContent } from '../helpers';
@@ -23,7 +23,7 @@ export interface AnchorProps
 }
 
 const outlineFocusVisible = {
-  [ButtonSelectors.OUTLINE]: {
+  [InteractiveSelectors.OUTLINE]: {
     content: "''",
     position: 'absolute',
     inset: -4,
@@ -34,13 +34,13 @@ const outlineFocusVisible = {
     zIndex: 0,
   },
 
-  [ButtonSelectors.OUTLINE_FOCUS_VISIBLE]: {
+  [InteractiveSelectors.OUTLINE_FOCUS_VISIBLE]: {
     opacity: 1,
   },
 } as const;
 
 const underlineFocusVisible = {
-  [ButtonSelectors.FOCUS_VISIBLE]: {
+  [InteractiveSelectors.FOCUS_VISIBLE]: {
     outline: 'currentColor solid 2px',
     borderRadius: 'sm',
     outlineOffset: '1.5px',
@@ -59,11 +59,11 @@ const anchorVariants = variant({
     position: 'relative',
     color: 'primary',
     whiteSpace: 'nowrap',
-    [ButtonSelectors.HOVER]: {
+    [InteractiveSelectors.HOVER]: {
       textDecoration: 'none',
       cursor: 'pointer',
     },
-    [ButtonSelectors.DISABLED]: {
+    [InteractiveSelectors.DISABLED]: {
       cursor: 'not-allowed',
       textDecoration: 'none',
       color: 'text-disabled',
@@ -75,10 +75,10 @@ const anchorVariants = variant({
       fontWeight: 'bold',
       WebkitFontSmoothing: 'antialiased',
       MozOsxFontSmoothing: 'grayscale',
-      [ButtonSelectors.HOVER]: {
+      [InteractiveSelectors.HOVER]: {
         textDecoration: 'underline',
       },
-      [ButtonSelectors.FOCUS_VISIBLE]: {
+      [InteractiveSelectors.FOCUS_VISIBLE]: {
         WebkitFontSmoothing: 'antialiased',
         MozOsxFontSmoothing: 'grayscale',
         outline: 'none',
@@ -94,10 +94,10 @@ const anchorVariants = variant({
     interface: {
       color: 'text',
       whiteSpace: 'initial',
-      [ButtonSelectors.HOVER]: {
+      [InteractiveSelectors.HOVER]: {
         color: 'primary',
       },
-      [ButtonSelectors.FOCUS_VISIBLE]: {
+      [InteractiveSelectors.FOCUS_VISIBLE]: {
         color: 'primary',
         outline: 'none',
       },

packages/gamut/src/Button/index.ts

@@ -1,4 +1,5 @@
 export type { ButtonProps } from './shared';
+export { buttonProps } from './shared';
 export * from './CTAButton';
 export * from './FillButton';
 export * from './IconButton';

packages/gamut/src/Button/shared/styles.ts

@@ -8,7 +8,7 @@ import {
 import { CSSObject, ThemeProps, variance } from '@codecademy/variance';
 import styled from '@emotion/styled';
 
-import { ButtonBase, ButtonSelectors } from '../../ButtonBase/ButtonBase';
+import { ButtonBase, InteractiveSelectors } from '../../ButtonBase/ButtonBase';
 import { ButtonBaseProps } from './types';
 
 export const config = styledOptions<'button', 'size'>(['size']);
@@ -55,11 +55,11 @@ export const buttonStyles = system.css({
     'fast',
     'ease-in'
   ),
-  [ButtonSelectors.DISABLED]: {
+  [InteractiveSelectors.DISABLED]: {
     cursor: 'not-allowed',
     userSelect: 'none',
   },
-  [ButtonSelectors.OUTLINE]: {
+  [InteractiveSelectors.OUTLINE]: {
     content: '""',
     transition: transitionConcat(['opacity'], 'fast'),
     position: 'absolute',
@@ -69,7 +69,7 @@ export const buttonStyles = system.css({
     opacity: 0,
     zIndex: 0,
   },
-  [ButtonSelectors.OUTLINE_FOCUS_VISIBLE]: {
+  [InteractiveSelectors.OUTLINE_FOCUS_VISIBLE]: {
     opacity: 1,
   },
 });

packages/gamut/src/Button/shared/variants.ts

@@ -1,6 +1,6 @@
 import { theme, transitionConcat, variant } from '@codecademy/gamut-styles';
 
-import { ButtonSelectors } from '../../ButtonBase/ButtonBase';
+import { InteractiveSelectors } from '../../ButtonBase/ButtonBase';
 import { buttonVariants, templateVariants } from './styles';
 
 const hoverBackgroundTransition = transitionConcat(
@@ -14,18 +14,18 @@ export const fillButtonVariants = templateVariants(
   (variant) => ({
     bg: variant,
     color: 'background',
-    [ButtonSelectors.OUTLINE]: { borderColor: variant },
-    [ButtonSelectors.HOVER]: {
+    [InteractiveSelectors.OUTLINE]: { borderColor: variant },
+    [InteractiveSelectors.HOVER]: {
       bg: `${variant}-hover`,
       color: 'background',
       transition: hoverBackgroundTransition,
     },
-    [ButtonSelectors.ACTIVE]: {
+    [InteractiveSelectors.ACTIVE]: {
       borderColor: 'border-primary',
       bg: variant,
       color: 'background',
     },
-    [ButtonSelectors.DISABLED]: {
+    [InteractiveSelectors.DISABLED]: {
       color: 'text-disabled',
       bg: 'background-disabled',
     },
@@ -37,21 +37,21 @@ export const textButtonVariants = templateVariants(
   (variant) => ({
     borderColor: 'transparent',
     color: variant === 'interface' ? 'text' : variant,
-    [ButtonSelectors.HOVER]: {
+    [InteractiveSelectors.HOVER]: {
       color: variant,
       bg: 'background-hover',
       transition: hoverBackgroundTransition,
     },
-    [ButtonSelectors.FOCUS_VISIBLE]: {
+    [InteractiveSelectors.FOCUS_VISIBLE]: {
       color: variant,
     },
-    [ButtonSelectors.OUTLINE]: {
+    [InteractiveSelectors.OUTLINE]: {
       borderColor: variant,
     },
-    [ButtonSelectors.ACTIVE]: {
+    [InteractiveSelectors.ACTIVE]: {
       color: 'text',
     },
-    [ButtonSelectors.DISABLED]: {
+    [InteractiveSelectors.DISABLED]: {
       color: 'text-disabled',
       bg: 'transparent',
     },
@@ -64,18 +64,18 @@ export const strokeButtonVariants = templateVariants(
     borderColor: variant,
     bg: 'transparent',
     color: variant,
-    [ButtonSelectors.HOVER]: {
+    [InteractiveSelectors.HOVER]: {
       bg: 'background-hover',
       transition: hoverBackgroundTransition,
     },
-    [ButtonSelectors.OUTLINE]: {
+    [InteractiveSelectors.OUTLINE]: {
       borderColor: variant,
     },
-    [ButtonSelectors.ACTIVE]: {
+    [InteractiveSelectors.ACTIVE]: {
       bg: variant,
       color: 'background',
     },
-    [ButtonSelectors.DISABLED]: {
+    [InteractiveSelectors.DISABLED]: {
       borderColor: 'background-disabled',
       color: 'text-disabled',
       bg: 'transparent',
@@ -92,21 +92,21 @@ export const ctaButtonVariants = templateVariants(['primary'], (variant) => ({
   py: 12,
   px: 24,
   bg: variant,
-  [ButtonSelectors.OUTLINE]: {
+  [InteractiveSelectors.OUTLINE]: {
     borderColor: variant,
     bottom: -9,
     left: -9,
   },
-  [ButtonSelectors.HOVER]: {
+  [InteractiveSelectors.HOVER]: {
     bg: `${variant}-hover`,
     transition: hoverBackgroundTransition,
     boxShadow: `-8px 8px 0 0 ${theme.colors.text}`,
   },
-  [ButtonSelectors.ACTIVE]: {
+  [InteractiveSelectors.ACTIVE]: {
     boxShadow: 'none',
     bg: 'secondary',
   },
-  [ButtonSelectors.DISABLED]: {
+  [InteractiveSelectors.DISABLED]: {
     boxShadow: 'none',
     color: 'text-disabled',
     bg: 'background-disabled',

packages/gamut/src/ButtonBase/ButtonBase.tsx

@@ -12,7 +12,7 @@ export type ButtonBaseElementProps = HTMLProps<
   ref?: ButtonBaseRef;
 };
 
-export enum ButtonSelectors {
+export enum InteractiveSelectors {
   HOVER = '&:hover',
   ACTIVE = '&:active',
   FOCUS = '&:focus',
@@ -69,6 +69,16 @@ export function narrowButtonBaseRef<T extends ButtonBaseElements>(
   return ref as Ref<T>;
 }
 
+/**
+ * An unstyled `button`/`a` element with the browser default styles reset and
+ * the correct disabled/accessibility behavior for either tag, chosen
+ * automatically based on whether `href` is passed.
+ *
+ * Not exported from the root barrel on purpose — it's a foundation other
+ * button components (`CTAButton`, `FillButton`, `IconButton`, `StrokeButton`,
+ * `TextButton`, `Anchor`) build on, not a public API surface. Only
+ * `InteractiveSelectors` is promoted from this module; see GMT-1740.
+ */
 export const ButtonBase = forwardRef<
   HTMLButtonElement | HTMLAnchorElement,
   ButtonBaseProps

packages/gamut/src/Form/SelectDropdown/index.tsx

@@ -1,6 +1,2 @@
-export type {
-  OptionStrict,
-  ExtendedOption,
-  SelectDropdownGroup,
-} from './types/options';
+export * from './types';
 export * from './SelectDropdown';

packages/gamut/src/Form/SelectDropdown/types/index.ts

@@ -1,23 +1,23 @@
-export {
+export type {
   OptionStrict,
   IconOption,
   ExtendedOption,
   SelectDropdownGroup,
   SelectDropdownOptions,
 } from './options';
 
-export {
+export type {
   SingleSelectDropdownProps,
   MultiSelectDropdownProps,
   SelectDropdownProps,
   BaseOnChangeProps,
   TypedReactSelectProps,
 } from './component-props';
 
-export {
+export type {
   SelectDropdownContextValueTypes,
   SizedIndicatorProps,
   CustomSelectComponentProps,
 } from './internal';
 
-export { ControlState, OptionState, SelectDropdownSizes } from './styles';
+export type { ControlState, OptionState, SelectDropdownSizes } from './styles';

packages/gamut/src/Form/index.tsx

@@ -12,3 +12,4 @@ export * from './inputs/TextArea';
 export * from './inputs/Radio';
 export * from './inputs/RadioGroup';
 export * from './inputs/types';
+export * from './types';

packages/gamut/src/Form/types.ts

@@ -2,7 +2,7 @@ export type FormValues<T> = {
   [key in keyof T]?: T[key];
 };
 
-export { CheckboxPaddingProps } from './inputs/Checkbox';
+export type { CheckboxPaddingProps } from './inputs/Checkbox';
 
 export interface BaseInputProps {
   label?: string;

packages/gamut/src/Markdown/index.tsx

@@ -196,3 +196,10 @@ export type {
   MarkdownOverrideSetting,
   MarkdownOverrideSettings,
 } from './libs/overrides';
+export {
+  createCodeBlockOverride,
+  createInputOverride,
+  createTagOverride,
+  createVideoOverride,
+  standardOverrides,
+} from './libs/overrides';