,
+ _props: DataPermissionLevelsProps,
+ sharedTokens: SharedTokens
): DataPermissionLevelsStyle => {
return {
dataPermissionLevels: {
label: 'data-permission-levels'
},
+ trigger: {
+ label: 'data-permission-levels__trigger',
+ display: 'inline-flex',
+ alignItems: 'center',
+ gap: sharedTokens?.spacing.general.spaceXs
+ },
body: {
label: 'data-permission-levels__body',
display: 'flex',
diff --git a/packages/ui-instructure/src/NutritionFacts/v2/index.tsx b/packages/ui-instructure/src/NutritionFacts/v2/index.tsx
index 2eba516d87..d41d783d4c 100644
--- a/packages/ui-instructure/src/NutritionFacts/v2/index.tsx
+++ b/packages/ui-instructure/src/NutritionFacts/v2/index.tsx
@@ -30,6 +30,7 @@ import {
} from '@instructure/ui-buttons/latest'
import { Heading } from '@instructure/ui-heading/latest'
import { Text } from '@instructure/ui-text/latest'
+import { InfoInstUIIcon } from '@instructure/ui-icons'
import { useStyleNew } from '@instructure/emotion'
import { NutritionFactsProps } from './props.js'
@@ -63,7 +64,10 @@ const NutritionFacts = ({
return (
setOpen(true)} aria-haspopup="dialog">
- {triggerText}
+
+ {triggerText}
+
+
& {
maxWidth?: string
}
diff --git a/packages/ui-instructure/src/NutritionFacts/v2/styles.ts b/packages/ui-instructure/src/NutritionFacts/v2/styles.ts
index 7b0f0abfd7..048b69c7c4 100644
--- a/packages/ui-instructure/src/NutritionFacts/v2/styles.ts
+++ b/packages/ui-instructure/src/NutritionFacts/v2/styles.ts
@@ -22,8 +22,8 @@
* SOFTWARE.
*/
-import type { NewComponentTypes } from '@instructure/ui-themes'
-import type { NutritionFactsStyle } from './props'
+import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
+import type { NutritionFactsProps, NutritionFactsStyle } from './props'
/**
* ---
@@ -31,12 +31,22 @@ import type { NutritionFactsStyle } from './props'
* ---
* Generates the style object from the theme and provided additional information
* @param componentTheme The theme variable object.
+ * @param _props the props of the component, the style is applied to
+ * @param sharedTokens Shared token object that stores common values for the theme.
* @return The final style object, which will be used in the component
*/
const generateStyle = (
- componentTheme: ReturnType
+ componentTheme: ReturnType,
+ _props: NutritionFactsProps,
+ sharedTokens: SharedTokens
): NutritionFactsStyle => {
return {
+ trigger: {
+ label: 'nutrition-facts__trigger',
+ display: 'inline-flex',
+ alignItems: 'center',
+ gap: sharedTokens?.spacing.general.spaceXs
+ },
segmentCard: {
label: 'nutrition-facts__segment-card',
borderStyle: 'solid',