feat(SubnavigationButton): add appearance (#5527)

* feat(SubnavigationButton): add appearance - closed #5525 * feat: update counter color * chore: styles object
VKCOM · Jul 28, 2023 · 1091c34 · 1091c34
1 parent a599170
commit 1091c34
Show file tree

Hide file tree

Showing 14 changed files with 81 additions and 35 deletions.
diff --git a/packages/vkui/src/components/SubnavigationButton/Readme.md b/packages/vkui/src/components/SubnavigationButton/Readme.md
@@ -7,6 +7,7 @@
 
 ```jsx { "props": { "layout": false, "iframe": false } }
 const SubnavigationButtonExample = () => {
+  const [appearance, setAppearance] = useState('accent');
   const [textLevel, setTextLevel] = useState('2');
   const [sizeY, setSizeY] = useState('compact');
   const [size, setSize] = useState('m');
@@ -29,11 +30,12 @@ const SubnavigationButtonExample = () => {
             width: '100%',
           }}
         >
-          {['primary', 'tertiary', 'outline'].map((mode) => (
+          {['primary', 'outline', 'tertiary'].map((mode) => (
             <Div key={mode}>
               <SubnavigationButton
                 textLevel={textLevel}
                 mode={mode}
+                appearance={appearance}
                 size={size}
                 before={buttonBefore}
                 after={buttonAfter}
@@ -47,6 +49,16 @@ const SubnavigationButtonExample = () => {
         </div>
       </AdaptivityProvider>
       <div style={{ minWidth: 200 }}>
+        <FormItem top="appearance">
+          <Select
+            value={appearance}
+            onChange={(e) => setAppearance(e.target.value)}
+            options={[
+              { label: 'accent', value: 'accent' },
+              { label: 'neutral', value: 'neutral' },
+            ]}
+          />
+        </FormItem>
         <FormItem top="text level">
           <Select
             value={textLevel}

diff --git a/packages/vkui/src/components/SubnavigationButton/SubnavigationButton.e2e-playground.tsx b/packages/vkui/src/components/SubnavigationButton/SubnavigationButton.e2e-playground.tsx
@@ -45,6 +45,7 @@ export const SubnavigationButtonPlayground = (props: ComponentPlaygroundProps) =
           selected: [undefined, true],
           before: [<Icon24Filter key="icon" />],
           mode: ['primary', 'outline', 'tertiary'],
+          appearance: ['accent', 'neutral'],
           after: [
             <Counter key="counter" size="s">
               3

diff --git a/packages/vkui/src/components/SubnavigationButton/SubnavigationButton.module.css b/packages/vkui/src/components/SubnavigationButton/SubnavigationButton.module.css
@@ -109,6 +109,15 @@
   box-shadow: inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha);
 }
 
+/**
+ * appearance
+ */
+
+.SubnavigationButton--appearance-neutral .SubnavigationButton__expandableIcon,
+.SubnavigationButton--appearance-neutral .SubnavigationButton__before {
+  color: var(--vkui--color_icon_primary);
+}
+
 /**
  * selected
  */
@@ -120,14 +129,19 @@
   border: 0;
 }
 
-.SubnavigationButton--selected.SubnavigationButton--mode-tertiary {
+.SubnavigationButton--selected.SubnavigationButton--mode-tertiary,
+.SubnavigationButton--selected.SubnavigationButton--appearance-neutral {
   background-color: var(--vkui--color_transparent--active);
   color: var(--vkui--color_text_primary);
 }
 
-.SubnavigationButton--selected:not(.SubnavigationButton--mode-tertiary)
+.SubnavigationButton--selected.SubnavigationButton--appearance-accent:not(
+    .SubnavigationButton--mode-tertiary
+  )
   .SubnavigationButton__before,
-.SubnavigationButton--selected:not(.SubnavigationButton--mode-tertiary)
+.SubnavigationButton--selected.SubnavigationButton--appearance-accent:not(
+    .SubnavigationButton--mode-tertiary
+  )
   .SubnavigationButton__expandableIcon {
   color: var(--vkui--color_icon_contrast_themed);
 }
@@ -142,11 +156,18 @@
   --vkui_internal--counter_inherit_color: var(--vkui--color_text_contrast_themed);
 }
 
-.SubnavigationButton--selected:not(.SubnavigationButton--mode-tertiary) {
+.SubnavigationButton--selected.SubnavigationButton--appearance-accent:not(
+    .SubnavigationButton--mode-tertiary
+  ) {
   --vkui_internal--counter_inherit_background: var(--vkui--color_background_content);
   --vkui_internal--counter_inherit_color: var(--vkui--color_text_accent_themed);
 }
 
+.SubnavigationButton--selected.SubnavigationButton--appearance-neutral {
+  --vkui_internal--counter_inherit_background: var(--vkui--color_background_content);
+  --vkui_internal--counter_inherit_color: var(--vkui--color_text_primary);
+}
+
 :global(.vkuiInternalSubnavigationBar--mode-fixed) .SubnavigationButton {
   flex: 1;
   min-width: 0;

diff --git a/packages/vkui/src/components/SubnavigationButton/SubnavigationButton.tsx b/packages/vkui/src/components/SubnavigationButton/SubnavigationButton.tsx
@@ -9,13 +9,31 @@ import { Caption } from '../Typography/Caption/Caption';
 import { Subhead } from '../Typography/Subhead/Subhead';
 import styles from './SubnavigationButton.module.css';
 
+const appearanceStyles = {
+  accent: styles['SubnavigationButton--appearance-accent'],
+  neutral: styles['SubnavigationButton--appearance-neutral'],
+};
+
+const modeStyles = {
+  primary: styles['SubnavigationButton--mode-primary'],
+  outline: styles['SubnavigationButton--mode-outline'],
+  tertiary: styles['SubnavigationButton--mode-tertiary'],
+};
+
+const sizeStyles = {
+  s: styles['SubnavigationButton--size-s'],
+  m: styles['SubnavigationButton--size-m'],
+  l: styles['SubnavigationButton--size-l'],
+};
+
 const sizeYClassNames = {
   none: styles['SubnavigationButton--sizeY-none'],
   [SizeType.COMPACT]: styles['SubnavigationButton--sizeY-compact'],
 };
 
 export interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {
   mode?: 'primary' | 'outline' | 'tertiary';
+  appearance?: 'accent' | 'neutral';
   size?: 's' | 'm' | 'l';
   selected?: boolean;
   /**
@@ -56,6 +74,7 @@ const SubnavigationButtonTypography = ({
  */
 export const SubnavigationButton = ({
   mode = 'primary',
+  appearance = 'accent',
   size = 'm',
   selected,
   textLevel = '1',
@@ -75,16 +94,9 @@ export const SubnavigationButton = ({
       focusVisibleMode="outside"
       className={classNames(
         styles['SubnavigationButton'],
-        {
-          s: styles['SubnavigationButton--size-s'],
-          m: styles['SubnavigationButton--size-m'],
-          l: styles['SubnavigationButton--size-l'],
-        }[size],
-        {
-          primary: styles['SubnavigationButton--mode-primary'],
-          outline: styles['SubnavigationButton--mode-outline'],
-          tertiary: styles['SubnavigationButton--mode-tertiary'],
-        }[mode],
+        sizeStyles[size],
+        modeStyles[mode],
+        appearanceStyles[appearance],
         selected && styles['SubnavigationButton--selected'],
         sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],
         className,

diff --git a/...Button/__image_snapshots__/subnavigationbutton-android-chromium-dark-1-snap.png b/...Button/__image_snapshots__/subnavigationbutton-android-chromium-dark-1-snap.png
diff --git a/...utton/__image_snapshots__/subnavigationbutton-android-chromium-light-1-snap.png b/...utton/__image_snapshots__/subnavigationbutton-android-chromium-light-1-snap.png
diff --git a/...gationButton/__image_snapshots__/subnavigationbutton-ios-webkit-dark-1-snap.png b/...gationButton/__image_snapshots__/subnavigationbutton-ios-webkit-dark-1-snap.png
diff --git a/...ationButton/__image_snapshots__/subnavigationbutton-ios-webkit-light-1-snap.png b/...ationButton/__image_snapshots__/subnavigationbutton-ios-webkit-light-1-snap.png
diff --git a/...onButton/__image_snapshots__/subnavigationbutton-vkcom-chromium-dark-1-snap.png b/...onButton/__image_snapshots__/subnavigationbutton-vkcom-chromium-dark-1-snap.png
diff --git a/...nButton/__image_snapshots__/subnavigationbutton-vkcom-chromium-light-1-snap.png b/...nButton/__image_snapshots__/subnavigationbutton-vkcom-chromium-light-1-snap.png
diff --git a/...ionButton/__image_snapshots__/subnavigationbutton-vkcom-firefox-dark-1-snap.png b/...ionButton/__image_snapshots__/subnavigationbutton-vkcom-firefox-dark-1-snap.png
diff --git a/...onButton/__image_snapshots__/subnavigationbutton-vkcom-firefox-light-1-snap.png b/...onButton/__image_snapshots__/subnavigationbutton-vkcom-firefox-light-1-snap.png
diff --git a/...tionButton/__image_snapshots__/subnavigationbutton-vkcom-webkit-dark-1-snap.png b/...tionButton/__image_snapshots__/subnavigationbutton-vkcom-webkit-dark-1-snap.png
diff --git a/...ionButton/__image_snapshots__/subnavigationbutton-vkcom-webkit-light-1-snap.png b/...ionButton/__image_snapshots__/subnavigationbutton-vkcom-webkit-light-1-snap.png