feat(actions): m3 styles, rename bold -> strong button

framework7io · Oct 5, 2022 · d6a4718 · d6a4718
1 parent e80fbb2
commit d6a4718
Show file tree

Hide file tree

Showing 21 changed files with 140 additions and 94 deletions.
diff --git a/kitchen-sink/core/pages/action-sheet.html b/kitchen-sink/core/pages/action-sheet.html
@@ -60,7 +60,7 @@
         },
         {
           text: 'Button 1',
-          bold: true
+          strong: true
         },
         {
           text: 'Button 2',
@@ -81,7 +81,7 @@
           },
           {
             text: 'Button 1',
-            bold: true
+            strong: true
           },
           {
             text: 'Button 2',

diff --git a/kitchen-sink/core/pages/swipeout.html b/kitchen-sink/core/pages/swipeout.html
@@ -367,7 +367,7 @@
           [
             {
               text: 'Cancel',
-              bold: true,
+              strong: true,
             }
           ]
         ],

diff --git a/kitchen-sink/react/src/pages/action-sheet.jsx b/kitchen-sink/react/src/pages/action-sheet.jsx
@@ -36,7 +36,7 @@ export default () => {
           },
           {
             text: 'Button 1',
-            bold: true,
+            strong: true,
           },
           {
             text: 'Button 2',
@@ -99,7 +99,7 @@ export default () => {
       >
         <ActionsGroup>
           <ActionsLabel>Do something</ActionsLabel>
-          <ActionsButton bold>Button 1</ActionsButton>
+          <ActionsButton strong>Button 1</ActionsButton>
           <ActionsButton>Button 2</ActionsButton>
           <ActionsButton color="red">Cancel</ActionsButton>
         </ActionsGroup>
@@ -109,7 +109,7 @@ export default () => {
       <Actions id="actions-two-groups">
         <ActionsGroup>
           <ActionsLabel>Do something</ActionsLabel>
-          <ActionsButton bold>Button 1</ActionsButton>
+          <ActionsButton strong>Button 1</ActionsButton>
           <ActionsButton>Button 2</ActionsButton>
         </ActionsGroup>
         <ActionsGroup>

diff --git a/kitchen-sink/react/src/pages/swipeout.jsx b/kitchen-sink/react/src/pages/swipeout.jsx
@@ -50,7 +50,7 @@ export default () => {
         [
           {
             text: 'Cancel',
-            bold: true,
+            strong: true,
           },
         ],
       ],

diff --git a/kitchen-sink/svelte/src/pages/action-sheet.svelte b/kitchen-sink/svelte/src/pages/action-sheet.svelte
@@ -29,7 +29,7 @@
           },
           {
             text: 'Button 1',
-            bold: true,
+            strong: true,
           },
           {
             text: 'Button 2',
@@ -66,7 +66,8 @@
         fill
         onClick={() => {
           actionsOneGroupOpened = true;
-        }}>
+        }}
+      >
         One group
       </Button>
       <!--  Two groups, open by "actionsOpen" attribute -->
@@ -78,7 +79,8 @@
         fill
         onClick={() => {
           actionGridOpened = true;
-        }}>
+        }}
+      >
         Action Grid
       </Button>
     </p>
@@ -99,7 +101,7 @@
   <Actions bind:opened={actionsOneGroupOpened}>
     <ActionsGroup>
       <ActionsLabel>Do something</ActionsLabel>
-      <ActionsButton bold>Button 1</ActionsButton>
+      <ActionsButton strong>Button 1</ActionsButton>
       <ActionsButton>Button 2</ActionsButton>
       <ActionsButton color="red">Cancel</ActionsButton>
     </ActionsGroup>
@@ -109,7 +111,7 @@
   <Actions id="actions-two-groups">
     <ActionsGroup>
       <ActionsLabel>Do something</ActionsLabel>
-      <ActionsButton bold>Button 1</ActionsButton>
+      <ActionsButton strong>Button 1</ActionsButton>
       <ActionsButton>Button 2</ActionsButton>
     </ActionsGroup>
     <ActionsGroup>
@@ -125,23 +127,26 @@
           slot="media"
           src="https://cdn.framework7.io/placeholder/people-96x96-1.jpg"
           width="48"
-          style="max-width: 100%" />
+          style="max-width: 100%"
+        />
         <span>Button 1</span>
       </ActionsButton>
       <ActionsButton>
         <img
           slot="media"
           src="https://cdn.framework7.io/placeholder/people-96x96-2.jpg"
           width="48"
-          style="max-width: 100%" />
+          style="max-width: 100%"
+        />
         <span>Button 2</span>
       </ActionsButton>
       <ActionsButton>
         <img
           slot="media"
           src="https://cdn.framework7.io/placeholder/people-96x96-3.jpg"
           width="48"
-          style="max-width: 100%" />
+          style="max-width: 100%"
+        />
         <span>Button 3</span>
       </ActionsButton>
     </ActionsGroup>
@@ -151,23 +156,26 @@
           slot="media"
           src="https://cdn.framework7.io/placeholder/fashion-96x96-4.jpg"
           width="48"
-          style="max-width: 100%" />
+          style="max-width: 100%"
+        />
         <span>Button 4</span>
       </ActionsButton>
       <ActionsButton>
         <img
           slot="media"
           src="https://cdn.framework7.io/placeholder/fashion-96x96-5.jpg"
           width="48"
-          style="max-width: 100%" />
+          style="max-width: 100%"
+        />
         <span>Button 5</span>
       </ActionsButton>
       <ActionsButton>
         <img
           slot="media"
           src="https://cdn.framework7.io/placeholder/fashion-96x96-6.jpg"
           width="48"
-          style="max-width: 100%" />
+          style="max-width: 100%"
+        />
         <span>Button 6</span>
       </ActionsButton>
     </ActionsGroup>

diff --git a/kitchen-sink/svelte/src/pages/swipeout.svelte b/kitchen-sink/svelte/src/pages/swipeout.svelte
@@ -49,7 +49,7 @@
         [
           {
             text: 'Cancel',
-            bold: true,
+            strong: true,
           },
         ],
       ],
@@ -172,7 +172,8 @@
       title="Facebook"
       after="17:14"
       subtitle="New messages from John Doe"
-      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.">
+      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
+    >
       <SwipeoutActions left>
         <SwipeoutButton overswipe color="green" onClick={reply}>Reply</SwipeoutButton>
         <SwipeoutButton color="blue" onClick={forward}>Forward</SwipeoutButton>
@@ -190,7 +191,8 @@
       title="John Doe (via Twitter)"
       after="17:11"
       subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
-      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.">
+      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
+    >
       <SwipeoutActions left>
         <SwipeoutButton overswipe color="green" onClick={reply}>Reply</SwipeoutButton>
         <SwipeoutButton color="blue" onClick={forward}>Forward</SwipeoutButton>
@@ -208,7 +210,8 @@
       title="Facebook"
       after="16:48"
       subtitle="New messages from John Doe"
-      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.">
+      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
+    >
       <SwipeoutActions left>
         <SwipeoutButton overswipe color="green" onClick={reply}>Reply</SwipeoutButton>
         <SwipeoutButton color="blue" onClick={forward}>Forward</SwipeoutButton>
@@ -226,7 +229,8 @@
       title="John Doe (via Twitter)"
       after="15:32"
       subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
-      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.">
+      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
+    >
       <SwipeoutActions left>
         <SwipeoutButton overswipe color="green" onClick={reply}>Reply</SwipeoutButton>
         <SwipeoutButton color="blue" onClick={forward}>Forward</SwipeoutButton>

diff --git a/kitchen-sink/vue/src/pages/action-sheet.vue b/kitchen-sink/vue/src/pages/action-sheet.vue
@@ -32,7 +32,7 @@
     <f7-actions id="actions-one-group">
       <f7-actions-group>
         <f7-actions-label>Do something</f7-actions-label>
-        <f7-actions-button bold>Button 1</f7-actions-button>
+        <f7-actions-button strong>Button 1</f7-actions-button>
         <f7-actions-button>Button 2</f7-actions-button>
         <f7-actions-button color="red">Cancel</f7-actions-button>
       </f7-actions-group>
@@ -42,7 +42,7 @@
     <f7-actions id="actions-two-groups">
       <f7-actions-group>
         <f7-actions-label>Do something</f7-actions-label>
-        <f7-actions-button bold>Button 1</f7-actions-button>
+        <f7-actions-button strong>Button 1</f7-actions-button>
         <f7-actions-button>Button 2</f7-actions-button>
       </f7-actions-group>
       <f7-actions-group>
@@ -165,7 +165,7 @@ export default {
             },
             {
               text: 'Button 1',
-              bold: true,
+              strong: true,
             },
             {
               text: 'Button 2',

diff --git a/kitchen-sink/vue/src/pages/swipeout.vue b/kitchen-sink/vue/src/pages/swipeout.vue
@@ -300,7 +300,7 @@ export default {
           [
             {
               text: 'Cancel',
-              bold: true,
+              strong: true,
             },
           ],
         ],

diff --git a/src/core/components/actions/actions-class.js b/src/core/components/actions/actions-class.js
@@ -272,10 +272,10 @@ class Actions extends Modal {
           <div class="actions-group">
             {group.map((button) => {
               const buttonClasses = [`actions-${button.label ? 'label' : 'button'}`];
-              const { color, bg, bold, disabled, label, text, icon } = button;
+              const { color, bg, strong, disabled, label, text, icon } = button;
               if (color) buttonClasses.push(`color-${color}`);
               if (bg) buttonClasses.push(`bg-color-${bg}`);
-              if (bold) buttonClasses.push('actions-button-bold');
+              if (strong) buttonClasses.push('actions-button-strong');
               if (disabled) buttonClasses.push('disabled');
               if (label) {
                 return <div class={buttonClasses.join(' ')}>{text}</div>;
@@ -306,10 +306,10 @@ class Actions extends Modal {
               <ul>
                 {group.map((button) => {
                   const itemClasses = [];
-                  const { color, bg, bold, disabled, label, text, icon } = button;
+                  const { color, bg, strong, disabled, label, text, icon } = button;
                   if (color) itemClasses.push(`color-${color}`);
                   if (bg) itemClasses.push(`bg-color-${bg}`);
-                  if (bold) itemClasses.push('popover-from-actions-bold');
+                  if (strong) itemClasses.push('popover-from-actions-strong');
                   if (disabled) itemClasses.push('disabled');
                   if (label) {
                     itemClasses.push('popover-from-actions-label');

diff --git a/src/core/components/actions/actions-ios.less b/src/core/components/actions/actions-ios.less
@@ -1,4 +1,46 @@
 .ios {
+  .actions-group {
+    border-radius: var(--f7-actions-border-radius);
+  }
+  .actions-button,
+  .actions-label {
+    background: var(--f7-actions-bg-color);
+    .ios-translucent-modals(var(--f7-actions-bg-color-rgb));
+    &:first-child {
+      border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
+    }
+    &:last-child {
+      .hairline-remove(bottom);
+      border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius);
+    }
+    &:first-child:last-child {
+      border-radius: var(--f7-actions-border-radius);
+    }
+    b,
+    &.actions-button-strong {
+      font-weight: 600;
+    }
+  }
+  .actions-grid {
+    .actions-group {
+      border-radius: 0;
+      background: var(--f7-actions-bg-color);
+      .ios-translucent-modals(var(--f7-actions-bg-color-rgb));
+      &:first-child {
+        border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
+      }
+      &:last-child {
+        border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius);
+      }
+      &:first-child:last-child {
+        border-radius: var(--f7-actions-border-radius);
+      }
+    }
+    .actions-button,
+    .actions-label {
+      border-radius: 0 !important;
+    }
+  }
   .actions-button-media {
     margin-left: 16px;
     + .actions-button-text {

diff --git a/src/core/components/actions/actions-md.less b/src/core/components/actions/actions-md.less
@@ -1,7 +1,19 @@
 .md {
+  .actions-modal {
+    background-color: var(--f7-actions-bg-color);
+    border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
+  }
   .actions-button {
     transition-duration: 300ms;
   }
+  .actions-button,
+  .actions-label {
+    b,
+    &.actions-button-strong {
+      font-weight: 500;
+    }
+  }
+
   .actions-button-media {
     min-width: 40px;
     + .actions-button-text {