feat: add data-key-toggle-* class name for customization

TexteaInc · Aug 26, 2024 · c1e605a · c1e605a
1 parent 2c85bdb
commit c1e605a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/docs/pages/how-to/styling.mdx b/docs/pages/how-to/styling.mdx
@@ -69,7 +69,12 @@ Different part of the dom structure will have class names like `data-object-star
 
 This is the list of class names. 🧐
 
+- `data-key`
 - `data-key-pair`
+- `data-key-key`
+- `data-key-colon`
+- `data-key-toggle-expanded`
+- `data-key-toggle-collapsed`
 - `data-type-label`
 - `data-object`
 - `data-object-start`

diff --git a/src/components/DataKeyPair.tsx b/src/components/DataKeyPair.tsx
@@ -344,6 +344,7 @@ export const DataKeyPair: FC<DataKeyPairProps> = (props) => {
             ? (inspect
                 ? (
                   <ExpandMoreIcon
+                    className='data-key-toggle-expanded'
                     sx={{
                       fontSize: '.8rem',
                       '&:hover': { cursor: 'pointer' }
@@ -352,6 +353,7 @@ export const DataKeyPair: FC<DataKeyPairProps> = (props) => {
                   )
                 : (
                   <ChevronRightIcon
+                    className='data-key-toggle-collapsed'
                     sx={{
                       fontSize: '.8rem',
                       '&:hover': { cursor: 'pointer' }