revert readme lint changes, expanded prop in stories and demo

Esri · Feb 19, 2025 · 041a083 · 041a083
1 parent d797570
commit 041a083
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 50 deletions.
diff --git a/packages/calcite-components/src/components/list/list.stories.ts b/packages/calcite-components/src/components/list/list.stories.ts
@@ -4004,71 +4004,71 @@ export const stretchSlottedContent = (): string => html`
 export const nestedItems = (): string => html`
   <calcite-list display-mode="nested" ${listAttributes()}>
     <calcite-list-item
-      open
+      expanded
       label="Level 1 item 1"
       description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
     ></calcite-list-item>
     <calcite-list-item
-      open
+      expanded
       label="Level 1 item 2"
       description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
     >
       <calcite-list-item
-        open
+        expanded
         label="Level 2 item 1"
         description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
       >
         <calcite-list-item
-          open
+          expanded
           label="Level 3 item 1"
           description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
         ></calcite-list-item>
         <calcite-list-item
-          open
+          expanded
           label="Level 3 item 2"
           description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
         >
           <calcite-list-item
-            open
+            expanded
             label="Level 4 item 1"
             description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
           >
             <calcite-list-item
-              open
+              expanded
               label="Level 5 item 1"
               description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
             ></calcite-list-item>
           </calcite-list-item>
           <calcite-list-item
-            open
+            expanded
             label="Level 4 item 2"
             description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
           ></calcite-list-item>
           <calcite-list-item
-            open
+            expanded
             label="Level 4 item 3"
             description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
           ></calcite-list-item>
         </calcite-list-item>
         <calcite-list-item
-          open
+          expanded
           label="Level 3 item 3"
           description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
         ></calcite-list-item>
       </calcite-list-item>
       <calcite-list-item
-        open
+        expanded
         label="Level 2 item 2"
         description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
       ></calcite-list-item>
       <calcite-list-item
-        open
+        expanded
         label="Level 2 item 3"
         description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
       ></calcite-list-item>
     </calcite-list-item>
     <calcite-list-item
-      open
+      expanded
       label="Level 1 item 3"
       description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
     ></calcite-list-item>
@@ -4083,42 +4083,40 @@ export const groupedItems = (): string => html`
   <calcite-list display-mode="nested" ${listAttributes()}>
     <calcite-list-item-group heading="Nested">
       <calcite-list-item
-        open
         expanded
         label="Cras iaculis ultricies nulla."
         description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
       >
         <calcite-list-item
-          open
           expanded
           label="Ut aliquam sollicitudin leo."
           description="Aliquam tincidunt mauris eu risus."
         >
           <calcite-list-item
-            open
+            expanded
             label="Vestibulum commodo felis quis tortor."
             description="Vestibulum auctor dapibus neque."
           ></calcite-list-item></calcite-list-item
       ></calcite-list-item>
     </calcite-list-item-group>
     <calcite-list-item-group heading="Digits">
       <calcite-list-item
-        open
+        expanded
         label="One"
         description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
       ></calcite-list-item>
-      <calcite-list-item open label="Two" description="Aliquam tincidunt mauris eu risus."></calcite-list-item>
+      <calcite-list-item expanded label="Two" description="Aliquam tincidunt mauris eu risus."></calcite-list-item>
       <calcite-list-item label="Three" description="Vestibulum auctor dapibus neque."></calcite-list-item>
     </calcite-list-item-group>
     <calcite-list-item-group heading="Letters">
       <calcite-list-item
-        open
+        expanded
         label="A"
         description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
       ></calcite-list-item>
-      <calcite-list-item open label="B" description="Aliquam tincidunt mauris eu risus."></calcite-list-item>
+      <calcite-list-item expanded label="B" description="Aliquam tincidunt mauris eu risus."></calcite-list-item>
       <calcite-list-item
-        open
+        expanded
         label="C"
         description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
       ></calcite-list-item>
@@ -4185,10 +4183,10 @@ export const contentBottomSlots = (): string =>
 
 export const contentBottomSlotsNested = (): string =>
   html`<calcite-list display-mode="nested" ${listAttributes()}>
-    <calcite-list-item label="Princess Bubblegum" description="Ruler of The Candy Kingdom" open>
+    <calcite-list-item label="Princess Bubblegum" description="Ruler of The Candy Kingdom" expanded>
       <span slot="content-bottom">Some value or something and a <b>thing</b>.</span>
       <calcite-list display-mode="nested"
-        ><calcite-list-item label="Princess Bubblegum" description="Ruler of The Candy Kingdom" open>
+        ><calcite-list-item label="Princess Bubblegum" description="Ruler of The Candy Kingdom" expanded>
           <span slot="content-bottom">Some value or something and a <b>thing</b>.</span
           ><calcite-list display-mode="nested"
             ><calcite-list-item label="Princess Bubblegum" description="Ruler of The Candy Kingdom">
@@ -4503,7 +4501,7 @@ export const filteredChildListItems_TestOnly = (): string =>
             </calcite-dropdown-group>
           </calcite-dropdown>
         </calcite-list-item>
-        <calcite-list-item label="Rivers" value="rivers" open>
+        <calcite-list-item label="Rivers" value="rivers" expanded>
           <calcite-list-item label="Estuaries" value="estuaries">
             <calcite-dropdown slot="actions-end" overlay-positioning="fixed" placement="bottom-end" scale="s">
               <calcite-action
@@ -4593,7 +4591,7 @@ export const filteredChildListItems_TestOnly = (): string =>
             </calcite-dropdown-group>
           </calcite-dropdown>
         </calcite-list-item>
-        <calcite-list-item label="Rivers" value="rivers" open>
+        <calcite-list-item label="Rivers" value="rivers" expanded>
           <calcite-list-item label="Estuaries" value="estuaries">
             <calcite-dropdown slot="actions-end" overlay-positioning="fixed" placement="bottom-end" scale="s">
               <calcite-action
@@ -4781,11 +4779,11 @@ export const sortableList_TestOnly = (): string =>
 
 export const sortableNestedList_TestOnly = (): string =>
   html`<calcite-list display-mode="nested" drag-enabled group="nested" label="List 1" selection-mode="multiple">
-    <calcite-list-item open label="Hi! 1" description="hello world">
+    <calcite-list-item expanded label="Hi! 1" description="hello world">
       <calcite-list display-mode="nested" drag-enabled label="List 2" group="nested" selection-mode="multiple">
-        <calcite-list-item open label="Hi! 2" description="hello world">
+        <calcite-list-item expanded label="Hi! 2" description="hello world">
           <calcite-list display-mode="nested" drag-enabled label="List 3" group="nested" selection-mode="multiple">
-            <calcite-list-item open label="Hi! 3" description="hello world">
+            <calcite-list-item expanded label="Hi! 3" description="hello world">
               <calcite-list
                 display-mode="nested"
                 drag-enabled
@@ -4794,23 +4792,23 @@ export const sortableNestedList_TestOnly = (): string =>
                 selection-mode="multiple"
               ></calcite-list>
             </calcite-list-item>
-            <calcite-list-item open label="Hi! 4" description="hello world"></calcite-list-item>
+            <calcite-list-item expanded label="Hi! 4" description="hello world"></calcite-list-item>
           </calcite-list>
         </calcite-list-item>
-        <calcite-list-item open label="Hi! 5" description="hello world"></calcite-list-item>
+        <calcite-list-item expanded label="Hi! 5" description="hello world"></calcite-list-item>
       </calcite-list>
     </calcite-list-item>
-    <calcite-list-item open label="Hi! 6" description="hello world"></calcite-list-item>
-    <calcite-list-item open label="Hi! 7" description="hello world"></calcite-list-item>
+    <calcite-list-item expanded label="Hi! 6" description="hello world"></calcite-list-item>
+    <calcite-list-item expanded label="Hi! 7" description="hello world"></calcite-list-item>
   </calcite-list>`;
 
-export const emptyOpenLists_TestOnly = (): string =>
+export const emptyExpandedLists_TestOnly = (): string =>
   html`<calcite-list display-mode="nested" drag-enabled group="nested" label="List 1" selection-mode="multiple">
-    <calcite-list-item open label="Hi! 1" description="hello world">
+    <calcite-list-item expanded label="Hi! 1" description="hello world">
       <calcite-list display-mode="nested" drag-enabled label="List 2" group="nested" selection-mode="multiple">
-        <calcite-list-item open label="Hi! 2" description="hello world">
+        <calcite-list-item expanded label="Hi! 2" description="hello world">
           <calcite-list display-mode="nested" drag-enabled label="List 3" group="nested" selection-mode="multiple">
-            <calcite-list-item open label="Hi! 3" description="hello world">
+            <calcite-list-item expanded label="Hi! 3" description="hello world">
               <calcite-action-menu overlay-positioning="fixed" slot="actions-end">
                 <calcite-action text-enabled text="Edit" icon="pencil"></calcite-action>
                 <calcite-action text-enabled text="Delete" icon="trash"></calcite-action>
@@ -4826,7 +4824,7 @@ export const emptyOpenLists_TestOnly = (): string =>
                 selection-mode="multiple"
               ></calcite-list>
             </calcite-list-item>
-            <calcite-list-item open label="Hi! 4" description="hello world">
+            <calcite-list-item expanded label="Hi! 4" description="hello world">
               <calcite-list
                 display-mode="nested"
                 drag-enabled
@@ -4837,7 +4835,7 @@ export const emptyOpenLists_TestOnly = (): string =>
             </calcite-list-item>
           </calcite-list>
         </calcite-list-item>
-        <calcite-list-item open label="Hi! 5" description="hello world">
+        <calcite-list-item expanded label="Hi! 5" description="hello world">
           <calcite-list
             display-mode="nested"
             drag-enabled
@@ -4848,7 +4846,7 @@ export const emptyOpenLists_TestOnly = (): string =>
         </calcite-list-item>
       </calcite-list>
     </calcite-list-item>
-    <calcite-list-item open label="Hi! 6" description="hello world">
+    <calcite-list-item expanded label="Hi! 6" description="hello world">
       <calcite-list
         display-mode="nested"
         drag-enabled
@@ -4857,7 +4855,7 @@ export const emptyOpenLists_TestOnly = (): string =>
         selection-mode="multiple"
       ></calcite-list>
     </calcite-list-item>
-    <calcite-list-item open label="Hi! 7" description="hello world">
+    <calcite-list-item expanded label="Hi! 7" description="hello world">
       <calcite-list
         display-mode="nested"
         drag-enabled
@@ -4869,7 +4867,7 @@ export const emptyOpenLists_TestOnly = (): string =>
 
 export const listWithEmptyChildList_TestOnly = (): string =>
   html`<calcite-list display-mode="nested" drag-enabled label="List 1" group="nested" selection-mode="single">
-    <calcite-list-item open label="Hi! 4" description="hello world">
+    <calcite-list-item expanded label="Hi! 4" description="hello world">
       <calcite-list
         display-mode="nested"
         drag-enabled
@@ -4934,7 +4932,7 @@ export const filteredListItemsNoResults_TestOnly = (): string =>
 
 export const nestingLists_TestOnly = (): string => html`<h4>Nesting List Items</h4>
   <calcite-list display-mode="nested">
-    <calcite-list-item label="List Item" open>
+    <calcite-list-item label="List Item" expanded>
       <calcite-list-item label="List Item"></calcite-list-item>
       <calcite-list-item label="List Item"></calcite-list-item>
       <calcite-list-item label="List Item"></calcite-list-item>
@@ -4943,7 +4941,7 @@ export const nestingLists_TestOnly = (): string => html`<h4>Nesting List Items</
   </br>
   <h4>Nesting Lists</h4>
   <calcite-list display-mode="nested">
-    <calcite-list-item label="List Item" open>
+    <calcite-list-item label="List Item" expanded>
       <calcite-list display-mode="nested">
         <calcite-list-item label="List Item"></calcite-list-item>
         <calcite-list-item label="List Item"></calcite-list-item>
@@ -5018,9 +5016,9 @@ export const closedItems_TestOnly = (): string =>
 
 export const dragEnabledNestedLists = (): string =>
   html`<calcite-list display-mode="nested" id="root" drag-enabled label="List 1" group="my-list">
-    <calcite-list-item open label="Depth 1" description="Item 1">
+    <calcite-list-item expanded label="Depth 1" description="Item 1">
       <calcite-list display-mode="nested" group="my-list">
-        <calcite-list-item open label="Depth 2" description="Item 2">
+        <calcite-list-item expanded label="Depth 2" description="Item 2">
           <calcite-list display-mode="nested" drag-enabled label="List 2" group="my-list">
             <calcite-list-item label="Depth 3" description="Item 3">
               <calcite-list display-mode="nested" drag-enabled label="List 3" group="my-list"></calcite-list>
@@ -5038,10 +5036,10 @@ export const dragEnabledNestedLists = (): string =>
 export const dragEnabledNestedListsIndirectChildren = (): string =>
   html`<calcite-list display-mode="nested" id="root" drag-enabled label="List 1" group="my-list">
     <div>
-      <calcite-list-item open label="Depth 1" description="Item 1">
+      <calcite-list-item expanded label="Depth 1" description="Item 1">
         <calcite-list display-mode="nested" group="my-list">
           <div>
-            <calcite-list-item open label="Depth 2" description="Item 2">
+            <calcite-list-item expanded label="Depth 2" description="Item 2">
               <calcite-list display-mode="nested" drag-enabled label="List 2" group="my-list">
                 <div>
                   <calcite-list-item label="Depth 3" description="Item 3">

diff --git a/packages/calcite-components/src/demos/list.html b/packages/calcite-components/src/demos/list.html
@@ -5334,7 +5334,7 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
                   </calcite-dropdown-group>
                 </calcite-dropdown>
               </calcite-list-item>
-              <calcite-list-item label="Rivers" value="rivers" open>
+              <calcite-list-item label="Rivers" value="rivers" expanded>
                 <calcite-list display-mode="nested">
                   <calcite-list-item label="Estuaries" value="estuaries">
                     <calcite-dropdown slot="actions-end" overlay-positioning="fixed" placement="bottom-end" scale="s">
@@ -5450,9 +5450,9 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
 
         <div class="child">
           <calcite-list display-mode="nested" drag-enabled group="nested" label="List 1" selection-mode="multiple">
-            <calcite-list-item open label="Hi! 1" description="hello world">
+            <calcite-list-item expanded label="Hi! 1" description="hello world">
               <calcite-list display-mode="nested" label="List 2" drag-enabled group="nested" selection-mode="multiple">
-                <calcite-list-item open label="Hi! 2" description="hello world">
+                <calcite-list-item expanded label="Hi! 2" description="hello world">
                   <calcite-list
                     display-mode="nested"
                     label="List 3"