fix: fixed several minor naming problems and the Tabs mark in AppLayo…

…ut story for secondary navigation
DevoInc · Sep 23, 2024 · 85e5699 · 85e5699
1 parent cd81b03
commit 85e5699
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 35 deletions.
diff --git a/packages/core/src/components/AppLayout/AppLayout.stories.tsx b/packages/core/src/components/AppLayout/AppLayout.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { AppLayout } from './AppLayout';
 import { AppBar } from '../AppBar';
-import { Tabs } from '../Tabs';
+import { Tabs, useTabsAccessibility } from '../Tabs';
 import { Panel } from '../Panel';
 import { Typography } from '../Typography';
 import { TabsCmp } from './__stories__';
@@ -43,31 +43,53 @@ export const Base: Story = {
 
 export const DoubleNavigation: Story = {
   tags: ['isHidden'],
-  render: () => (
-    <AppLayout>
-      <AppLayout.Bar>
-        <AppBar>
-          <AppBar.Heading id="bar-heading">Title</AppBar.Heading>
-          <AppBar.Divider />
-          <AppBar.Navigation id="bar-navigation">
-            <TabsCmp />
-          </AppBar.Navigation>
-        </AppBar>
-      </AppLayout.Bar>
-      <AppLayout.Lead>
-        <Tabs contained>
-          <Tabs.Item size="sm" state={'selected'} label="Subitem 1" />
-          <Tabs.Item size="sm" label="Subitem 2" />
-          <Tabs.Item size="sm" label="Subitem 3" />
-        </Tabs>
-      </AppLayout.Lead>
-      <AppLayout.Content>
-        <Panel height="100%">
-          <Panel.Body>Content</Panel.Body>
-        </Panel>
-      </AppLayout.Content>
-    </AppLayout>
-  ),
+  render: () => {
+    const tabsRef = React.useRef<HTMLDivElement>();
+    const [activeTab, setActiveTab] = React.useState(0);
+    useTabsAccessibility({ activeTab, tabsRef });
+    return (
+      <AppLayout>
+        <AppLayout.Bar>
+          <AppBar>
+            <AppBar.Heading id="bar-heading">Title</AppBar.Heading>
+            <AppBar.Divider />
+            <AppBar.Navigation id="bar-navigation">
+              <TabsCmp />
+            </AppBar.Navigation>
+          </AppBar>
+        </AppLayout.Bar>
+        <AppLayout.Lead>
+          <Tabs contained>
+            <Tabs.List activeTabIndex={activeTab} ref={tabsRef}>
+              <Tabs.Item
+                size="sm"
+                label="Subitem 1"
+                onClick={() => setActiveTab(0)}
+                state={activeTab === 0 ? 'selected' : undefined}
+              />
+              <Tabs.Item
+                size="sm"
+                label="Subitem 2"
+                onClick={() => setActiveTab(0)}
+                state={activeTab === 1 ? 'selected' : undefined}
+              />
+              <Tabs.Item
+                size="sm"
+                label="Subitem 3"
+                onClick={() => setActiveTab(0)}
+                state={activeTab === 2 ? 'selected' : undefined}
+              />
+            </Tabs.List>
+          </Tabs>
+        </AppLayout.Lead>
+        <AppLayout.Content>
+          <Panel height="100%">
+            <Panel.Body>Content</Panel.Body>
+          </Panel>
+        </AppLayout.Content>
+      </AppLayout>
+    );
+  },
 };
 
 export const ContentPadding: Story = {

diff --git a/packages/core/src/components/Avatar/components/AvatarContainer/StyledAvatarBackdrop.ts b/packages/core/src/components/Avatar/components/AvatarContainer/StyledAvatarBackdrop.ts
@@ -43,7 +43,7 @@ export const StyledAvatarBackdrop = styled.span<StyledAvatarBackdropProps>`
 
       *:focus > &,
       *:focus-visible > & {
-        box-shadow: ${theme.alias.elevation.boxShadow.base.focused};
+        box-shadow: ${aliasTokens.elevation.boxShadow.base.focused};
       }
     `;
   }};

diff --git a/packages/core/src/components/Avatar/constants.ts b/packages/core/src/components/Avatar/constants.ts
@@ -10,11 +10,15 @@ export const AVATAR_VARIANT_DEFAULT_VALUE = 'circle';
 export const AVATAR_SIZE_BORDER_MAP: {
   [key in TAvatarSize]?: string;
 } = {
-  xs: '1px',
-  sm: '1px',
-  md: '2px',
-  lg: '3px',
-  xl: '4px',
+  xxxs: '0.1rem',
+  xxs: '0.1rem',
+  xs: '0.1rem',
+  sm: '0.1rem',
+  md: '0.2rem',
+  lg: '0.2rem',
+  xl: '0.3rem',
+  xxl: '0.3rem',
+  xxxl: '0.3rem',
 };
 
 export const AVATAR_SIZE_SQUARE_MAP: {

diff --git a/packages/core/src/styled/mixins/typography/typoColorMixin.ts b/packages/core/src/styled/mixins/typography/typoColorMixin.ts
@@ -45,10 +45,10 @@ export const typoColorMixin = ({
   $colorScheme?: TTypoColorScheme;
   theme: DefaultTheme;
 }) => {
-  const aliasTexColoTokens = tokens.alias.color.text;
+  const aliasTexColorTokens = tokens.alias.color.text;
   const textColorByToken =
-    aliasTexColoTokens?.[$variant]?.[$colorScheme] ||
-    getUiTokenValueByColorScheme(aliasTexColoTokens.feedback, $colorScheme);
+    aliasTexColorTokens?.[$variant]?.[$colorScheme] ||
+    getUiTokenValueByColorScheme(aliasTexColorTokens.feedback, $colorScheme);
   return css`
     color: ${isValidColor($colorScheme) ? $colorScheme : textColorByToken};
   `;