fix(toggletip): open prop

ariellalgilmore · Jan 11, 2024 · 8213fd4 · 8213fd4
1 parent ac4c361
commit 8213fd4
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 69 deletions.
diff --git a/packages/carbon-web-components/src/components/combo-box/combo-box.stories.ts b/packages/carbon-web-components/src/components/combo-box/combo-box.stories.ts
@@ -65,17 +65,18 @@ const defaultArgs = {
   titleText: 'This is an example title',
   value: '',
   warn: false,
-  warnText: 'please notice the warning',  
-}
+  warnText: 'please notice the warning',
+};
 
 const controls = {
   disabled: {
     control: 'boolean',
     description: `Specify if the dropdown should be disabled, or not.`,
   },
   direction: {
-    control: 'select', options: directionOptions,
-    description: `Dropdown direction`
+    control: 'select',
+    options: directionOptions,
+    description: `Dropdown direction`,
   },
   hideLabel: {
     control: 'boolean',
@@ -102,8 +103,9 @@ const controls = {
     description: `Specify if the dropdown should be read only, or not.`,
   },
   size: {
-    control: 'select', options: sizes,
-    description: `Dropdown size.`
+    control: 'select',
+    options: sizes,
+    description: `Dropdown size.`,
   },
   titleText: {
     control: 'text',
@@ -136,7 +138,7 @@ export const Default = {
         `
       )}
     </cds-combo-box>
-  `
+  `,
 };
 
 export const WithLayer = {
@@ -159,7 +161,7 @@ export const WithLayer = {
         </cds-combo-box>
       </div>
     </sb-template-layers>
-  `
+  `,
 };
 
 export const Playground = {
@@ -204,8 +206,8 @@ export const Playground = {
         `
       )}
     </cds-combo-box>
-  `
-}
+  `,
+};
 
 const meta = {
   title: 'Components/Combo box',

diff --git a/packages/carbon-web-components/src/components/dropdown/dropdown.stories.ts b/packages/carbon-web-components/src/components/dropdown/dropdown.stories.ts
@@ -73,17 +73,18 @@ const defaultArgs = {
   type: null,
   value: '',
   warn: false,
-  warnText: 'please notice the warning',  
-}
+  warnText: 'please notice the warning',
+};
 
 const controls = {
   disabled: {
     control: 'boolean',
     description: `Specify if the dropdown should be disabled, or not.`,
   },
   direction: {
-    control: 'select', options: directionOptions,
-    description: `Dropdown direction.`
+    control: 'select',
+    options: directionOptions,
+    description: `Dropdown direction.`,
   },
   hideLabel: {
     control: 'boolean',
@@ -114,16 +115,18 @@ const controls = {
     description: `Specify if the dropdown should be read only, or not.`,
   },
   size: {
-    control: 'select', options: sizes,
-    description: `Dropdown size.`
+    control: 'select',
+    options: sizes,
+    description: `Dropdown size.`,
   },
   titleText: {
     control: 'text',
     description: `Text that will be read by a screen reader when visiting this control.`,
   },
   type: {
-    control: 'select', options: types,
-    description: `Dropdown size.`
+    control: 'select',
+    options: types,
+    description: `Dropdown size.`,
   },
   value: {
     control: 'text',
@@ -153,7 +156,7 @@ export const Default = {
         `
       )}
     </cds-dropdown>
-  `
+  `,
 };
 
 export const Inline = {
@@ -170,7 +173,7 @@ export const Inline = {
         `
       )}
     </cds-dropdown>
-  `
+  `,
 };
 
 export const InlineWithLayer = {
@@ -193,7 +196,7 @@ export const InlineWithLayer = {
         </cds-dropdown>
       </div>
     </sb-template-layers>
-  `
+  `,
 };
 
 export const WithLayer = {
@@ -216,7 +219,7 @@ export const WithLayer = {
         </cds-dropdown>
       </div>
     </sb-template-layers>
-  `
+  `,
 };
 
 export const Playground = {
@@ -239,32 +242,32 @@ export const Playground = {
     warn,
     warnText,
   }) =>
-   html`
-    <cds-dropdown
-      ?open=${open}
-      ?disabled="${disabled}"
-      ?hide-label=${hideLabel}
-      helper-text=${ifDefined(helperText)}
-      ?invalid=${invalid}
-      ?read-only=${readOnly}
-      invalid-text=${invalidText}
-      direction="${direction}"
-      title-text=${ifDefined(titleText)}
-      size="${ifDefined(size)}"
-      type="${ifDefined(type)}"
-      value=${ifDefined(value)}
-      label=${ifDefined(label)}
-      ?warn=${warn}
-      warn-text=${warnText}>
-      ${items.map(
-        (elem) => html`
-          <cds-dropdown-item ?disabled=${elem.disabled} value="${elem.value}"
-            >${elem.text}</cds-dropdown-item
-          >
-        `
-      )}
-    </cds-dropdown>
-  `
+    html`
+      <cds-dropdown
+        ?open=${open}
+        ?disabled="${disabled}"
+        ?hide-label=${hideLabel}
+        helper-text=${ifDefined(helperText)}
+        ?invalid=${invalid}
+        ?read-only=${readOnly}
+        invalid-text=${invalidText}
+        direction="${direction}"
+        title-text=${ifDefined(titleText)}
+        size="${ifDefined(size)}"
+        type="${ifDefined(type)}"
+        value=${ifDefined(value)}
+        label=${ifDefined(label)}
+        ?warn=${warn}
+        warn-text=${warnText}>
+        ${items.map(
+          (elem) => html`
+            <cds-dropdown-item ?disabled=${elem.disabled} value="${elem.value}"
+              >${elem.text}</cds-dropdown-item
+            >
+          `
+        )}
+      </cds-dropdown>
+    `,
 };
 
 export const Skeleton = {
@@ -273,8 +276,8 @@ export const Skeleton = {
       skip: true,
     },
   },
-  render: () => html` <cds-dropdown-skeleton></cds-dropdown-skeleton> `
-}
+  render: () => html` <cds-dropdown-skeleton></cds-dropdown-skeleton> `,
+};
 
 const meta = {
   title: 'Components/Dropdown',

diff --git a/packages/carbon-web-components/src/components/layer/layer.stories.ts b/packages/carbon-web-components/src/components/layer/layer.stories.ts
@@ -20,15 +20,16 @@ const levels = {
 };
 
 const defaultArgs = {
-  level: '0'
-}
+  level: '0',
+};
 
 const controls = {
   level: {
-    control: 'radio', options: levels,
-    description: `Specify the layer level.`
+    control: 'radio',
+    options: levels,
+    description: `Specify the layer level.`,
   },
-}
+};
 
 export const Default = {
   render: () => html`
@@ -44,7 +45,7 @@ export const Default = {
     <style>
       ${styles}
     </style>
-  `
+  `,
 };
 
 export const CustomLevel = {
@@ -56,7 +57,7 @@ export const CustomLevel = {
     <style>
       ${styles}
     </style>
-  `
+  `,
 };
 
 export const UseLayer = {
@@ -70,17 +71,17 @@ export const UseLayer = {
     });
 
     return html`
-    <cds-layer>
-      <div class="example-layer-test-component use-layer"></div>
       <cds-layer>
         <div class="example-layer-test-component use-layer"></div>
+        <cds-layer>
+          <div class="example-layer-test-component use-layer"></div>
+        </cds-layer>
       </cds-layer>
-    </cds-layer>
-    <style>
-      ${styles}
-    </style>
-  `
-  }
+      <style>
+        ${styles}
+      </style>
+    `;
+  },
 };
 
 export const Playground = {
@@ -91,7 +92,7 @@ export const Playground = {
       skip: true,
     },
   },
-  render: ({level}) => html`
+  render: ({ level }) => html`
     <cds-layer level="${level}">
       <div class="example-layer-test-component">Test component</div>
     </cds-layer>

diff --git a/packages/carbon-web-components/src/components/toggle-tip/toggletip.stories.ts b/packages/carbon-web-components/src/components/toggle-tip/toggletip.stories.ts
@@ -30,7 +30,7 @@ const tooltipAlignments = {
 
 const defaultArgs = {
   alignment: 'bottom',
-  open: false,
+  open: true,
 };
 
 const controls = {
@@ -64,7 +64,7 @@ export const Default = {
       <br />
       <div style="display: flex; align-items: center">
         <cds-toggletip alignment="bottom" open>
-          Toggletip label -- using <code>defaultOpen</code> prop
+          Toggletip label -- using <code>open</code> prop
 
           <p slot="body-text">
             Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
@@ -83,7 +83,7 @@ export const Playground = {
   args: defaultArgs,
   render: ({ alignment, open }) => html`
     <cds-toggletip alignment="${alignment}" ?open="${open}">
-      Toggletip label
+      Toggletip label -- using <code>open</code> prop
 
       <p slot="body-text">
         Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do