Skip to content

Commit 0655861

Browse files
committed
docs: remove double InstUISettingsProvider wrappers
1 parent f5258e5 commit 0655861

2 files changed

Lines changed: 110 additions & 95 deletions

File tree

docs/theming/new-theme-overrides.md

Lines changed: 79 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -685,32 +685,31 @@ const Example = () => {
685685
</Flex.Item>
686686
</Flex>
687687
<hr style={{width:'100%', margin:'2rem 0 1rem'}}/>
688-
<InstUISettingsProvider theme={themes[themeName]}>
689-
<InstUISettingsProvider
690-
themeOverride={{
691-
semantics: {
692-
color: {
693-
institutional: { brandPrimary, brandFontColorDark }
694-
}
688+
<InstUISettingsProvider
689+
theme={themes[themeName]}
690+
themeOverride={{
691+
semantics: {
692+
color: {
693+
institutional: { brandPrimary, brandFontColorDark }
695694
}
696-
}}
697-
>
698-
<Tabs>
699-
<Tabs.Panel id="tabA" renderTitle="Tab A" isSelected={true}></Tabs.Panel>
700-
<Tabs.Panel id="tabB" renderTitle="Tab B"></Tabs.Panel>
701-
<Tabs.Panel id="tabC" renderTitle="Tab C"></Tabs.Panel>
702-
</Tabs>
703-
<Flex gap="medium" margin="medium 0 0 0">
704-
<Flex.Item>
705-
<Badge count={42} countUntil={100} margin="0 medium 0 0">
706-
<Button color="secondary">Notifications</Button>
707-
</Badge>
708-
</Flex.Item>
709-
<Flex.Item shouldGrow>
710-
<Text>Default body text — uses brandFontColorDark.</Text>
711-
</Flex.Item>
712-
</Flex>
713-
</InstUISettingsProvider>
695+
}
696+
}}
697+
>
698+
<Tabs>
699+
<Tabs.Panel id="tabA" renderTitle="Tab A" isSelected={true}></Tabs.Panel>
700+
<Tabs.Panel id="tabB" renderTitle="Tab B"></Tabs.Panel>
701+
<Tabs.Panel id="tabC" renderTitle="Tab C"></Tabs.Panel>
702+
</Tabs>
703+
<Flex gap="medium" margin="medium 0 0 0">
704+
<Flex.Item>
705+
<Badge count={42} countUntil={100} margin="0 medium 0 0">
706+
<Button color="secondary">Notifications</Button>
707+
</Badge>
708+
</Flex.Item>
709+
<Flex.Item shouldGrow>
710+
<Text>Default body text — uses brandFontColorDark.</Text>
711+
</Flex.Item>
712+
</Flex>
714713
</InstUISettingsProvider>
715714
</div>
716715
)
@@ -771,18 +770,17 @@ const Example = () => {
771770
</Flex.Item>
772771
</Flex>
773772
<hr style={{width:'100%', margin:'2rem 0 1rem'}}/>
774-
<InstUISettingsProvider theme={themes[themeName]}>
775-
<InstUISettingsProvider
776-
themeOverride={{
777-
semantics: {
778-
color: {
779-
institutional: { brandButtonPrimaryBgd, brandButtonPrimaryText }
780-
}
773+
<InstUISettingsProvider
774+
theme={themes[themeName]}
775+
themeOverride={{
776+
semantics: {
777+
color: {
778+
institutional: { brandButtonPrimaryBgd, brandButtonPrimaryText }
781779
}
782-
}}
783-
>
784-
<Button color="primary">I'm a 'primary' color button</Button>
785-
</InstUISettingsProvider>
780+
}
781+
}}
782+
>
783+
<Button color="primary">I'm a 'primary' color button</Button>
786784
</InstUISettingsProvider>
787785
</div>
788786
)
@@ -834,30 +832,29 @@ const Example = () => {
834832
</Flex.Item>
835833
</Flex>
836834
<hr style={{width:'100%', margin:'2rem 0 1rem'}}/>
837-
<InstUISettingsProvider theme={themes[themeName]}>
838-
<InstUISettingsProvider
839-
themeOverride={{
840-
semantics: {
841-
color: {
842-
institutional: { linkColor }
843-
}
835+
<InstUISettingsProvider
836+
theme={themes[themeName]}
837+
themeOverride={{
838+
semantics: {
839+
color: {
840+
institutional: { linkColor }
844841
}
845-
}}
846-
>
847-
<Flex gap="small">
848-
<Flex.Item size="50%">
849-
<Link href="https://instructure.github.io/instructure-ui/">normal link</Link>
850-
</Flex.Item>
851-
<Flex.Item size="50%">
852-
<Billboard
853-
margin="small"
854-
message="Billboard with link"
855-
href="http://instructure.com"
856-
hero={(size) => <IconGradebookLine size={size} />}
857-
/>
858-
</Flex.Item>
859-
</Flex>
860-
</InstUISettingsProvider>
842+
}
843+
}}
844+
>
845+
<Flex gap="small">
846+
<Flex.Item size="50%">
847+
<Link href="https://instructure.github.io/instructure-ui/">normal link</Link>
848+
</Flex.Item>
849+
<Flex.Item size="50%">
850+
<Billboard
851+
margin="small"
852+
message="Billboard with link"
853+
href="http://instructure.com"
854+
hero={(size) => <IconGradebookLine size={size} />}
855+
/>
856+
</Flex.Item>
857+
</Flex>
861858
</InstUISettingsProvider>
862859
</div>
863860
)
@@ -912,34 +909,33 @@ const Example = () => {
912909
</Flex.Item>
913910
</Flex>
914911
<hr style={{width:'100%', margin:'2rem 0 1rem'}}/>
915-
<InstUISettingsProvider theme={themes[themeName]}>
916-
<InstUISettingsProvider
917-
themeOverride={{
918-
semantics: {
919-
color: {
920-
institutional: {
921-
brandGlobalNavBgd,
922-
globalNavLinkHover,
923-
brandGlobalNavMenuItemTextColor,
924-
brandGlobalNavMenuItemTextColorActive
925-
}
912+
<InstUISettingsProvider
913+
theme={themes[themeName]}
914+
themeOverride={{
915+
semantics: {
916+
color: {
917+
institutional: {
918+
brandGlobalNavBgd,
919+
globalNavLinkHover,
920+
brandGlobalNavMenuItemTextColor,
921+
brandGlobalNavMenuItemTextColorActive
926922
}
927923
}
924+
}
925+
}}
926+
>
927+
<SideNavBar
928+
label="Main navigation"
929+
toggleLabel={{
930+
expandedLabel: 'Minimize SideNavBar',
931+
minimizedLabel: 'Expand SideNavBar'
928932
}}
929933
>
930-
<SideNavBar
931-
label="Main navigation"
932-
toggleLabel={{
933-
expandedLabel: 'Minimize SideNavBar',
934-
minimizedLabel: 'Expand SideNavBar'
935-
}}
936-
>
937-
<SideNavBar.Item icon={<IconUserLine />} label="Home" href="#" />
938-
<SideNavBar.Item icon={<IconAdminLine />} label="Admin" href="#" />
939-
<SideNavBar.Item selected icon={<IconDashboardLine />} label="Dashboard" href="#" />
940-
<SideNavBar.Item icon={<IconInboxLine />} label="Inbox" href="#" />
941-
</SideNavBar>
942-
</InstUISettingsProvider>
934+
<SideNavBar.Item icon={<IconUserLine />} label="Home" href="#" />
935+
<SideNavBar.Item icon={<IconAdminLine />} label="Admin" href="#" />
936+
<SideNavBar.Item selected icon={<IconDashboardLine />} label="Dashboard" href="#" />
937+
<SideNavBar.Item icon={<IconInboxLine />} label="Inbox" href="#" />
938+
</SideNavBar>
943939
</InstUISettingsProvider>
944940
</div>
945941
)

pnpm-lock.yaml

Lines changed: 31 additions & 12 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)