cengage · chris-cedrone-cengage · Feb 3, 2025 · Jan 24, 2025 · Jan 24, 2025 · Jan 31, 2025
@@ -0,0 +1,5 @@
+---
+'react-magma-docs': patch
+---
+
+fix: Repointed a few broken links and fixed some styling bugs throughout the examples.
@@ -1025,6 +1025,7 @@ export function Example() {
                               aria-label="Right"
                               icon={<InfoIcon />}
                               isInverse
+                              style={{ marginLeft: magma.spaceScale.spacing03 }}
                               variant={ButtonVariant.link}
                             />
                           </Tooltip>
@@ -1047,6 +1048,7 @@ export function Example() {
                               aria-label="Right"
                               icon={<InfoIcon />}
                               isInverse
+                              style={{ marginLeft: magma.spaceScale.spacing03 }}
                               variant={ButtonVariant.link}
                             />
                           </Tooltip>

@@ -46,7 +46,7 @@ to insure consistency across products.
 
 To use the `GlobalStyles` object, simply import it from `react-magma-dom` and include it in your App.
 
-The `GlobalStyles` component can be nested inside the <Link to="/api/theme">ThemeContext.Provider</Link> to inherit styles from the theme.
+The `GlobalStyles` component can be nested inside the <Link to="/api-intro/styles-and-themes/#using_themes">ThemeContext.Provider</Link> to inherit styles from the theme.
 
 ```jsx noRender startExpanded
 import React from 'react';

@@ -15,7 +15,7 @@ props:
 
 ## Basic Usage
 
-When using multiple buttons, they should be wrapped in a <Link to="/api/button-group">ButtonGroup</Link>.
+When using multiple buttons, they should be wrapped in a <Link to="/api/buttongroup">ButtonGroup</Link>.
 
 When used with icons, the Button component takes a slightly different set of props. For information on how to use this component with icons, please see documentation on <Link to="/api/icon-button">Icon Buttons</Link>.
 
@@ -205,7 +205,7 @@ export function Example() {
             Solid marketing inverse
           </Button>
         </ButtonGroup>
-        <ButtonGroup>
+        <ButtonGroup style={{ margin: magma.spaceScale.spacing03 }}>
           <Button variant={ButtonVariant.link} isInverse>
             Link inverse
           </Button>

@@ -31,7 +31,7 @@ The `DropdownButton` is a button that handles the opening and closing of the men
 
 The `DropdownContent` component contains the content that appears when the button is clicked. That content may contain individual menu items, represented in `DropdownMenuItem` components, or it may contain other markup.
 
-When using multiple dropdowns, they should be wrapped in a <Link to="/api/button-group">ButtonGroup</Link>.
+When using multiple dropdowns, they should be wrapped in a <Link to="/api/buttongroup">ButtonGroup</Link>.
 
 ```tsx
 import React from 'react';

@@ -12,7 +12,7 @@ props:
   <Link to="/api/checkboxes">Checkbox</Link> and{' '}
   <Link to="/api/toggle">Toggle</Link> components. For{' '}
   <Link to="/api/radio">Radio Buttons</Link>, you should use the{' '}
-  <Link to="/api/radio/#labeling_radio%20groups">Radio Group</Link> component.
+  <Link to="/api/radio/#radio_group_props">Radio Group</Link> component.
 </LeadParagraph>
 
 ## Basic Usage

@@ -13,7 +13,7 @@ title: Global Styles
 
 ## Usage
 
-The `GlobalStyles` component can be nested inside the <Link to="/api/theme">ThemeContext.Provider</Link> to inherit styles from the theme.
+The `GlobalStyles` component can be nested inside the <Link to="/api-intro/styles-and-themes/#using_themes">ThemeContext.Provider</Link> to inherit styles from the theme.
 
 ```tsx
 import React from 'react';

@@ -60,6 +60,8 @@ The `Tooltip` component takes a `position` property, that accepts the following
 ```tsx
 import React from 'react';
 import {
+  Flex,
+  FlexBehavior,
   Tooltip,
   EnumTooltipPosition,
   IconButton,
@@ -74,7 +76,7 @@ import {
 
 export function Example() {
   return (
-    <>
+    <Flex behavior={FlexBehavior.container} spacing={2}>
       <Tooltip position={EnumTooltipPosition.right} content="Tooltip right">
         <IconButton
           aria-label="Right"
@@ -106,7 +108,7 @@ export function Example() {
           variant={ButtonVariant.solid}
         />
       </Tooltip>
-    </>
+    </Flex>
   );
 }
 ```

@@ -99,7 +99,7 @@ export function Example() {
 
   return (
     <>
-      <Transition isOpen={isOpen} nudgeLeft>
+      <Transition isOpen={isOpen} nudgeLeft style={{ margin: '0 0 10px 50px' }}>
         <Box />
       </Transition>
       <Button onClick={() => setIsOpen(!isOpen)}>
@@ -559,7 +559,7 @@ export function Example() {
 
 ## Transition Props
 
-**Any other props supplied will be provided to the wrapping [`motion.div`](https://www.framer.com/api/motion/component/) element.**
+**Any other props supplied will be provided to the wrapping [`motion.div`](https://motion.dev/) element.**
 
 <TransitionProps />
 

@@ -15,7 +15,7 @@ order: 1
 
 ## Designing with React Magma
 
-The React Magma team strives to provide detailed usage and style documentation. It's important to become familiar with this guidance when you are designing with our components. Consider starting with the foundations of [color](/design-intro/colors/), [typography](/design-intro/typography/), [spacing](/design-intro/spacing/), and [icons](/design-intro/icons/), and then continue with the components.
+The React Magma team strives to provide detailed usage and style documentation. It's important to become familiar with this guidance when you are designing with our components. Consider starting with the foundations of [color](/design-intro/colors/), [typography](/design-intro/typography/), [spacing](/design-intro/spacing/), and [icons](/design/icon/), and then continue with the components.
 
 We also welcome contributions from people outside the React Magma team. This includes both designers within Cengage as well as outside. Join us over on our [Github](https://github.com/cengage/react-magma) page to start contributing today.
 

@@ -16,9 +16,7 @@ order: 2
 
 ## Icon Resources
 
-React Magma primarily uses the beautiful icons from Material Design. Specifically we use the [rounded variant](https://material.io/resources/icons/?style=round). We also have a group of custom icons when Material doesn't have what we need, but we take great care to design those icons with the same [principles](https://material.io/design/iconography/system-icons.html#design-principles) that Google does.
-
-We do our best to keep up with any updates that happen to Material Design's icons, and that includes updating the [Sketch icon library you can download](https://www.dropbox.com/sh/kt8oaf7am443794/AAArcOLft67q5Fk90wcXSmida?dl=0). If you are a designer at Cengage, and you are a current Abstract user, then you'll find the Sketch libraries there instead.
+React Magma primarily uses the beautiful icons from Material Design. Specifically we use the [rounded variant](https://material.io/resources/icons/?style=round). We also have a group of custom icons when Material doesn't have what we need, but we take great care to design those icons with the same [principles](https://material.io/design/iconography/system-icons.html#design-principles) that Google does. Cengage designers can find these icons built into the Figma component libraries.
 
 ---