feat(toast-plate): add action button theming, fix addons align (#514)

* feat(toast-plate): add action button theming, fix addons align * feat(button): correct line-height
core-ds · Feb 17, 2021 · 20a7c67 · 20a7c67
1 parent f09bda2
commit 20a7c67
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 7 deletions.
diff --git a/packages/button/src/Component.stories.mdx b/packages/button/src/Component.stories.mdx
@@ -314,7 +314,7 @@ import { Button } from '@alfalab/core-components-button';
             </Col>
             <Col>
                 <Button view="ghost">
-                    Кнопка с переносом текста
+                    Кнопка с переносом текста
                 </Button>
             </Col>
         </Row>

diff --git a/packages/button/src/index.module.css b/packages/button/src/index.module.css
@@ -56,7 +56,7 @@
     align-items: center;
     margin: 0;
     padding: 0 var(--gap-xl);
-    line-height: 1.2;
+    line-height: 20px;
     font-weight: 500;
     font-family: var(--font-family);
     text-align: center;
@@ -132,6 +132,7 @@ a.loading {
     min-height: 72px;
     padding: 0 var(--gap-2xl);
     font-size: 18px;
+    line-height: 24px;
 
     &.iconOnly {
         min-width: 72px;

diff --git a/packages/themes/src/mixins/toast-plate/click.css b/packages/themes/src/mixins/toast-plate/click.css
@@ -3,4 +3,7 @@
 @define-mixin toast-plate-click {
     --toast-plate-title-font-weight: 400;
     --toast-plate-bg-color: var(--color-light-bg-secondary-inverted);
+    --toast-plate-action-align: flex-start;
+    --toast-plate-action-padding: 0;
+    --toast-plate-action-divider-display: none;
 }
diff --git a/packages/toast-plate/src/component.tsx b/packages/toast-plate/src/component.tsx
@@ -151,7 +151,7 @@ export const ToastPlate = forwardRef<HTMLDivElement, ToastPlateProps>(
 
                     {actionButton && (
                         <div
-                            className={cn(styles.actionsSection, {
+                            className={cn(styles.actionSection, {
                                 [styles.hasCloser]: hasCloser,
                             })}
                         >

diff --git a/packages/toast-plate/src/index.module.css b/packages/toast-plate/src/index.module.css
@@ -6,6 +6,9 @@
     --toast-plate-color: var(--color-light-text-primary-inverted);
     --toast-plate-border-radius: 8px;
     --toast-plate-title-font-weight: 700;
+    --toast-plate-action-align: center;
+    --toast-plate-action-padding: 0 var(--gap-2xl) 0 var(--gap-xs);
+    --toast-plate-action-divider-display: block;
 }
 
 .component {
@@ -29,7 +32,6 @@
 
 .mainContentWrap {
     display: flex;
-    align-items: flex-start;
 }
 
 .block {
@@ -46,10 +48,12 @@
     }
 }
 
-.actionsSection {
+.actionSection {
     display: flex;
+    align-items: var(--toast-plate-action-align);
     flex-shrink: 0;
-    margin-top: 3px;
+    margin: 2px 0;
+    padding: var(--toast-plate-action-padding);
 
     &.hasCloser {
         margin-right: var(--gap-xs);
@@ -58,8 +62,8 @@
 
 .leftAddons {
     display: flex;
+    align-items: flex-start;
     flex-shrink: 0;
-    padding-top: 2px;
     padding-right: var(--gap-s);
 }
 
@@ -76,8 +80,11 @@
 }
 
 .closeButton {
+    display: flex;
+    align-items: flex-start;
     position: absolute;
     top: var(--gap-s);
+    bottom: var(--gap-s);
     right: var(--gap-s);
     padding: var(--gap-2xs);
     transition: opacity 0.2s ease-out;
@@ -91,3 +98,18 @@
         opacity: 0.5;
     }
 }
+
+.actionSection + .closeButton {
+    align-items: var(--toast-plate-action-align);
+
+    &:before {
+        display: var(--toast-plate-action-divider-display);
+        position: absolute;
+        right: 44px;
+        top: 0;
+        bottom: 0;
+        width: 1px;
+        background-color: var(--color-light-bg-tertiary-inverted);
+        content: '';
+    }
+}