feat(custom-button): update docs

core-ds · Nov 20, 2024 · 3507c12 · 3507c12
1 parent ff93991
commit 3507c12
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 3 deletions.
diff --git a/packages/custom-button/src/Component.test.tsx b/packages/custom-button/src/Component.test.tsx
@@ -111,6 +111,11 @@ describe('CustomButton', () => {
                 expect(container.firstElementChild).toHaveClass('disableType_static-inverted');
             });
         });
+
+        it('should have custom className', () => {
+            const { container } = render(<CustomButton className='customClass' />);
+            expect(container.firstElementChild).toHaveClass('customClass');
+        });
     });
 
     it('should unmount without errors', () => {

diff --git a/packages/custom-button/src/Component.tsx b/packages/custom-button/src/Component.tsx
@@ -71,9 +71,6 @@ export const CustomButton = React.forwardRef<
             styles[contentColor],
             styles[stateType],
             styles[`disableType_${disableType}`],
-            {
-                // [styles.customLoading]: loading,
-            },
         );
 
         return (

diff --git a/packages/custom-button/src/docs/description.mdx b/packages/custom-button/src/docs/description.mdx
@@ -246,3 +246,35 @@ render(() => {
     );
 });
 ```
+
+## Кастомный цвет контента
+
+Для установки цвета контента можно использовать пропс `contentColor` который принимает четыре значения. Но также цвет можно переопределить через класс с помощью пропса `className`
+
+```jsx live
+render(() => {
+    return (
+        <React.Fragment>
+            <style>{'.customClass[type=button] * { color: #EB58BF }'}</style>
+
+            <Space size={16} direction='horizontal'>
+                <CustomButton
+                    hint='Hint'
+                    block={isMobile()}
+                    backgroundColor={'var(--color-light-base-bg-secondary-inverted)'}
+                >
+                    Label
+                </CustomButton>
+                <CustomButton
+                    hint='Hint'
+                    block={isMobile()}
+                    backgroundColor={'var(--color-light-base-bg-secondary-inverted)'}
+                    className={'customClass'}
+                >
+                    Label
+                </CustomButton>
+            </Space>
+        </React.Fragment>
+    );
+});
+```