💄 - style: update Paginator to incoorporate new styling

maykinmedia · Apr 15, 2024 · b763943 · b763943
1 parent 09243b7
commit b763943
Show file tree

Hide file tree

Showing 14 changed files with 480 additions and 257 deletions.
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
@@ -12,16 +12,18 @@
   --mykn-button-height: auto;
   --mykn-button-width: auto;
   --mykn-button-offset: 0px;
-  --mykn-button-padding-v: var(--spacing-v);
-  --mykn-button-padding-h: var(--spacing-h);
+
+  --mykn-button-padding-v: 0;
+  --mykn-button-padding-h: 0;
 
   align-items: center;
   appearance: none;
   margin: 0;
-  padding: 0;
+  padding-block: var(--mykn-button-padding-v);
+  padding-inline: var(--mykn-button-padding-h);
   background-color: var(--mykn-button-color-background);
   border: 1px solid var(--mykn-button-color-border);
-  border-radius: var(--border-radius-l);
+  border-radius: var(--border-radius-s);
   box-shadow: 0 calc(var(--mykn-button-offset) * -1)
     var(--mykn-button-color-shadow);
   box-sizing: border-box;
@@ -41,12 +43,9 @@
   width: var(--mykn-button-width);
 
   &[disabled] {
-    --mykn-button-color-background: var(
-      --mykn-button-color-background-mute,
-      #ccc
-    ) !important;
     --mykn-button-offset: 0 !important;
     pointer-events: none;
+    opacity: 0.4;
   }
 
   &--align-start {
@@ -77,29 +76,30 @@
   }
 
   &--pad-h {
-    padding-inline-start: var(--mykn-button-padding-h);
-    padding-inline-end: var(--mykn-button-padding-h);
+    --mykn-button-padding-h: var(--mykn-button-padding-xs, var(--spacing-h));
   }
 
   &--pad-v {
-    padding-block-start: var(--mykn-button-padding-h);
-    padding-block-end: var(--mykn-button-padding-h);
+    --mykn-button-padding-v: var(--mykn-button-padding-xs, var(--spacing-v));
   }
 
   &--size-xs {
     --mykn-button-font-size: var(--typography-font-size-body-xs);
     --mykn-button-line-height: var(--typography-line-height-body-xs);
+    --mykn-button-padding-xs: calc(var(--spacing-h) / 2);
   }
 
   &--square {
     --mykn-button-height: calc(
-      var(--typography-line-height-body-s) + 2 * var(--spacing-v)
+      var(--mykn-button-line-height) + 2 *
+        var(--mykn-button-padding-xs, var(--mykn-button-padding-v)) + 2px
     );
     --mykn-button-width: calc(
-      var(--typography-line-height-body-s) + 2 * var(--spacing-v)
+      var(--mykn-button-line-height) + 2 *
+        var(--mykn-button-padding-xs, var(--mykn-button-padding-v)) + 2px
     );
-    --mykn-button-padding-v: 0;
-    --mykn-button-padding-h: 0;
+    padding-block: 0;
+    padding-inline: 0;
     flex-shrink: 0;
   }
 

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
@@ -12,6 +12,9 @@ type BaseButtonProps = {
   /** Whether the text should be presented bold. */
   bold?: boolean;
 
+  /** Additional class names. */
+  className?: string;
+
   /** Whether the buttons width should be set to 100%. */
   justify?: boolean;
 
@@ -42,24 +45,14 @@ export type ButtonLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &
 
 /**
  * Button component
- * @param active
- * @param align
- * @param bold
- * @param justify
- * @param muted
- * @param pad
- * @param size
- * @param square
- * @param variant
- * @param wrap
- * @constructor
  */
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
       active = false,
       align = "center",
       bold = false,
+      className,
       justify = false,
       muted = false,
       pad = true,
@@ -89,6 +82,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             "mykn-button--square": square,
             "mykn-button--wrap": wrap,
           },
+          className,
         )}
         {...props}
       >
@@ -100,25 +94,15 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 Button.displayName = "Button";
 
 /**
- * Button component
- * @param active
- * @param align
- * @param bold
- * @param justify
- * @param muted
- * @param pad
- * @param size
- * @param square
- * @param variant
- * @param wrap
- * @constructor
+ * Button (link) )component
  */
 export const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
   (
     {
       active = false,
       align = "center",
       bold = false,
+      className,
       justify = false,
       muted = false,
       pad = true,
@@ -133,22 +117,25 @@ export const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
     return (
       <a
         ref={ref as LegacyRef<HTMLAnchorElement>}
-        className={clsx(
-          "mykn-button",
-          `mykn-button--align-${align}`,
-          `mykn-button--size-${size}`,
-          `mykn-button--variant-${variant}`,
-          {
-            "mykn-button--active": active,
-            "mykn-button--bold": bold,
-            "mykn-button--justify": justify,
-            "mykn-button--muted": muted,
-            "mykn-button--pad-h": pad === true || pad === "h",
-            "mykn-button--pad-v": pad === true || pad === "v",
-            "mykn-button--square": square,
-            "mykn-button--wrap": wrap,
-          },
-        )}
+        className={
+          (clsx(
+            "mykn-button",
+            `mykn-button--align-${align}`,
+            `mykn-button--size-${size}`,
+            `mykn-button--variant-${variant}`,
+            {
+              "mykn-button--active": active,
+              "mykn-button--bold": bold,
+              "mykn-button--justify": justify,
+              "mykn-button--muted": muted,
+              "mykn-button--pad-h": pad === true || pad === "h",
+              "mykn-button--pad-v": pad === true || pad === "v",
+              "mykn-button--square": square,
+              "mykn-button--wrap": wrap,
+            },
+          ),
+          className)
+        }
         {...props}
       >
         {props.children}

diff --git a/src/components/data/datagrid/datagrid.tsx b/src/components/data/datagrid/datagrid.tsx
@@ -604,7 +604,7 @@ export const DataGridFooter: React.FC<DataGridFooterProps> = ({
           selectable ? renderableFields.length + 1 : renderableFields.length
         }
       >
-        <Toolbar align="end" pad={true}>
+        <Toolbar pad={true}>
           <Paginator
             count={count}
             loading={loading}

diff --git a/src/components/data/paginator/paginator.scss b/src/components/data/paginator/paginator.scss
@@ -2,37 +2,54 @@
 
 .mykn-paginator {
   display: flex;
-  flex-wrap: wrap;
+  justify-content: space-between;
   gap: var(--spacing-v);
+  position: relative;
+  width: 100%;
 
   &__section {
-    align-items: center;
     display: flex;
+    align-items: center;
     gap: var(--spacing-h);
   }
 
-  &__section .mykn-p:not(:last-child) {
-    margin-block-end: 0;
-  }
-
-  &__section--form .mykn-icon:first-child {
-    color: var(--typography-color-body);
+  &__section--meta {
+    display: flex;
+    gap: var(--spacing-v);
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    position: absolute;
+    transform: translate(-50%, -50%);
+    justify-content: center;
+
+    > .mykn-icon {
+      inset-inline-start: 100%;
+      margin-inline-start: var(--spacing-h);
+      position: absolute;
+    }
   }
 
   @media screen and (max-width: constants.$breakpoint-desktop - 1px) {
-    width: 100%;
+    flex-wrap: wrap;
 
-    &__section--form {
-      display: none;
+    &__section {
+      flex-basis: calc(50% - var(--spacing-v) / 2);
+      white-space: nowrap;
     }
 
-    &__section {
-      width: 100%;
-      justify-content: flex-end;
+    &__section--meta {
+      position: static;
+      text-align: end;
+      transform: none;
+    }
 
-      .mykn-button {
-        justify-content: center !important;
-      }
+    &__section--options {
+      flex-basis: 100%;
+    }
+
+    &__ellipsis,
+    &__button--page {
+      display: none;
     }
   }
 }