diff --git a/packages/ui-instructure/src/DataPermissionLevels/v2/index.tsx b/packages/ui-instructure/src/DataPermissionLevels/v2/index.tsx index b1b625bd3e..6fc29097f9 100644 --- a/packages/ui-instructure/src/DataPermissionLevels/v2/index.tsx +++ b/packages/ui-instructure/src/DataPermissionLevels/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 { DataPermissionLevelsProps } from './props.js' @@ -64,7 +65,10 @@ const DataPermissionLevels = ({ return (
setOpen(true)} aria-haspopup="dialog"> - {triggerText} + + {triggerText} + + & { maxWidth?: string } diff --git a/packages/ui-instructure/src/DataPermissionLevels/v2/styles.ts b/packages/ui-instructure/src/DataPermissionLevels/v2/styles.ts index 40d9e11dbc..7dc52f97d1 100644 --- a/packages/ui-instructure/src/DataPermissionLevels/v2/styles.ts +++ b/packages/ui-instructure/src/DataPermissionLevels/v2/styles.ts @@ -22,8 +22,11 @@ * SOFTWARE. */ -import type { NewComponentTypes } from '@instructure/ui-themes' -import type { DataPermissionLevelsStyle } from './props' +import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes' +import type { + DataPermissionLevelsProps, + DataPermissionLevelsStyle +} from './props' /** * --- @@ -31,15 +34,25 @@ import type { DataPermissionLevelsStyle } 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: 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',