fix(coachindicator): address issues with coach indicator rings positi…

…on (#2483) * fix(coachindicator): center rings * refactor(coachindicator): refactor css * docs(coachindicator): regen mods * docs(coachindicator): chromatic group in storybook
adobe · Feb 6, 2024 · 9965188 · 9965188
1 parent 21308ac
commit 9965188
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 22 deletions.
diff --git a/components/coachindicator/index.css b/components/coachindicator/index.css
@@ -16,11 +16,13 @@ governing permissions and limitations under the License.
   --spectrum-coach-indicator-ring-border-size: var(--spectrum-border-width-200);
   --spectrum-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3);
   --spectrum-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3);
+  --spectrum-coach-indicator-inline-size: var(--spectrum-coach-indicator-min-inline-size);
+  --spectrum-coach-indicator-block-size: var(--spectrum-coach-indicator-min-block-size);
   --spectrum-coach-indicator-ring-inline-size: var(--spectrum-coach-indicator-ring-diameter);
   --spectrum-coach-indicator-ring-block-size: var(--spectrum-coach-indicator-ring-diameter);
 
-  --spectrum-coach-indicator-top: calc(var(--spectrum-coach-indicator-ring-diameter) * 0.75);
-  --spectrum-coach-indicator-left: calc(var(--spectrum-coach-indicator-ring-diameter) * 0.75);
+  --spectrum-coach-indicator-top: calc((var(--spectrum-coach-indicator-block-size) / 3) - var(--spectrum-coach-indicator-ring-border-size));
+  --spectrum-coach-indicator-left: calc((var(--spectrum-coach-indicator-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size));
 
   /* animation */
   --spectrum-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000);
@@ -34,11 +36,13 @@ governing permissions and limitations under the License.
   &--quiet {
     --mod-coach-indicator-min-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75);
     --mod-coach-indicator-min-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75);
+    --mod-coach-indicator-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75);
+    --mod-coach-indicator-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75);
     --mod-coach-indicator-ring-inline-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter));
     --mod-coach-indicator-ring-block-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter));
 
-    --mod-coach-indicator-top: calc(var(--spectrum-coach-indicator-quiet-ring-diameter) * 0.75);
-    --mod-coach-indicator-left: calc(var(--spectrum-coach-indicator-quiet-ring-diameter) * 0.75);
+    --mod-coach-indicator-top: calc((var(--mod-coach-indicator-min-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size));
+    --mod-coach-indicator-left: calc((var(--mod-coach-indicator-min-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size));
     --mod-coach-indicator-animation-name: pulse--quiet;
     --mod-coach-indicator-inner-animation-delay-multiple: var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, var(--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple));
   }
@@ -50,6 +54,9 @@ governing permissions and limitations under the License.
 
   min-inline-size: var(--mod-coach-indicator-min-inline-size, var(--spectrum-coach-indicator-min-inline-size));
   min-block-size: var(--mod-coach-indicator-min-block-size, var(--spectrum-coach-indicator-min-block-size));
+
+  inline-size: var(--mod-coach-indicator-inline-size, var(--spectrum-coach-indicator-inline-size));
+  block-size: var(--mod-coach-indicator-block-size, var(--spectrum-coach-indicator-block-size));
 }
 
 .spectrum-CoachIndicator-ring {

diff --git a/components/coachindicator/metadata/coachindicator.yml b/components/coachindicator/metadata/coachindicator.yml
@@ -8,39 +8,39 @@ examples:
   - id: coach-indicator
     name: Standard
     markup: |
-      <div class="spectrum-CoachIndicator" style="display: inline-block;">
+      <div class="spectrum-CoachIndicator">
         <div class="spectrum-CoachIndicator-ring"></div>
         <div class="spectrum-CoachIndicator-ring"></div>
         <div class="spectrum-CoachIndicator-ring"></div>
       </div>
 
-      <div class="spectrum-CoachIndicator spectrum-CoachIndicator--dark" style="display: inline-block;">
+      <div class="spectrum-CoachIndicator spectrum-CoachIndicator--dark">
         <div class="spectrum-CoachIndicator-ring"></div>
         <div class="spectrum-CoachIndicator-ring"></div>
         <div class="spectrum-CoachIndicator-ring"></div>
       </div>
 
-      <div class="spectrum-CoachIndicator spectrum-CoachIndicator--light" style="display: inline-block;">
+      <div class="spectrum-CoachIndicator spectrum-CoachIndicator--light">
         <div class="spectrum-CoachIndicator-ring"></div>
         <div class="spectrum-CoachIndicator-ring"></div>
         <div class="spectrum-CoachIndicator-ring"></div>
       </div>
   - id: coach-indicator-quiet
     name: Quiet
     markup: |
-      <div class="spectrum-CoachIndicator spectrum-CoachIndicator--quiet" style="display: inline-block;">
+      <div class="spectrum-CoachIndicator spectrum-CoachIndicator--quiet">
         <div class="spectrum-CoachIndicator-ring"></div>
         <div class="spectrum-CoachIndicator-ring"></div>
         <div class="spectrum-CoachIndicator-ring"></div>
       </div>
 
-      <div class="spectrum-CoachIndicator spectrum-CoachIndicator--dark spectrum-CoachIndicator--quiet" style="display: inline-block;">
+      <div class="spectrum-CoachIndicator spectrum-CoachIndicator--dark spectrum-CoachIndicator--quiet">
         <div class="spectrum-CoachIndicator-ring"></div>
         <div class="spectrum-CoachIndicator-ring"></div>
         <div class="spectrum-CoachIndicator-ring"></div>
       </div>
 
-      <div class="spectrum-CoachIndicator spectrum-CoachIndicator--light spectrum-CoachIndicator--quiet" style="display: inline-block;">
+      <div class="spectrum-CoachIndicator spectrum-CoachIndicator--light spectrum-CoachIndicator--quiet">
         <div class="spectrum-CoachIndicator-ring"></div>
         <div class="spectrum-CoachIndicator-ring"></div>
         <div class="spectrum-CoachIndicator-ring"></div>

diff --git a/components/coachindicator/metadata/mods.md b/components/coachindicator/metadata/mods.md
@@ -4,7 +4,9 @@
 | `--mod-coach-animation-indicator-ring-duration`                   |
 | `--mod-coach-animation-indicator-ring-outer-delay-multiple`       |
 | `--mod-coach-indicator-animation-name`                            |
+| `--mod-coach-indicator-block-size`                                |
 | `--mod-coach-indicator-gap`                                       |
+| `--mod-coach-indicator-inline-size`                               |
 | `--mod-coach-indicator-inner-animation-delay-multiple`            |
 | `--mod-coach-indicator-left`                                      |
 | `--mod-coach-indicator-min-block-size`                            |

diff --git a/components/coachindicator/stories/coachindicator.stories.js b/components/coachindicator/stories/coachindicator.stories.js
@@ -1,6 +1,9 @@
 import { html } from "lit";
+import isChromatic from "chromatic/isChromatic";
+
 import { Template } from "./template";
 
+
 export default {
 	title: "components/Coach indicator",
 	description:
@@ -18,7 +21,16 @@ export default {
 			},
 			control: "boolean",
 		},
-		variant: { table: { disable: true } },
+		variant: {
+			name: "Variant",
+			type: { name: 'string' },
+			table: {
+				type: { summary: "string" },
+				category: "Component",
+			},
+			options: ["default", "dark", "light"],
+			control: "select"
+		 },
 	},
 	args: {
 		rootClass: "spectrum-CoachIndicator",
@@ -37,10 +49,9 @@ export default {
 	},
 };
 
-const CustomCoachIndicator = (args) => {
+const chromaticGroup = (args) => {
 	return html`
-	<div
-		style="display: flex;">
+		<div>
 			${Template({
 				...args,
 				variant: "default"
@@ -52,17 +63,28 @@ const CustomCoachIndicator = (args) => {
 			${Template({
 				...args,
 				variant: "light"
+				})}
+			${Template({
+				...args,
+				variant: "default",
+				isQuiet: true
 			})}
-		<div>
+			${Template({
+				...args,
+				variant: "dark",
+				isQuiet: true
+			})}
+			${Template({
+				...args,
+				variant: "light",
+				isQuiet: true
+				})}
+		</div>
 	`;
 };
 
 
-export const Default = CustomCoachIndicator.bind({});
-Default.args = {};
-
-export const Quiet = CustomCoachIndicator.bind({});
-Quiet.args = {
-	isQuiet: true
+export const Default = (args) => isChromatic() ? chromaticGroup(args) : Template(args);
+Default.args = {
+	variant: "default"
 };
-