← all fixtures

tsx-kong-insomnia-classname-strings-changed

TSX View before/after files on GitHub Upstream commit Kong-insomnia@2f4e3a8 packages/insomnia/src/ui/components/encoding-picker.tsx

Before

…lines 1–70 unchanged (70 lines)
71 <Button className="flex items-center bg-transparent transition-all">
72 <Icon icon="caret-down" />
73 </Button>
74 </Group>
75 <Popover className="flex flex-col overflow-y-hidden">
76 <ListBox
77 className="max-h-80 select-none overflow-y-auto rounded-md border border-solid border-(--hl-sm) bg-(--color-bg) py-1 text-sm shadow-lg focus:outline-hidden"
78 items={BUILT_IN_ENCODINGS}
79 aria-label="Encoding List"
80 autoFocus
81 >
82 {item => (
83 <ListBoxItem
84 aria-label={item.label}
85 textValue={item.label}
86 className="flex h-(--line-height-xs) w-full items-center gap-2 whitespace-nowrap rounded-sm bg-transparent px-(--padding-md) text-(--color-font) transition-colors hover:bg-(--hl-sm) focus:bg-(--hl-xs) focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed aria-disabled:opacity-30 aria-selected:font-bold data-focused:bg-(--hl-xs)"
87 >
88 {({ isSelected }) => (
89 <>
90 <span>{item.label}</span>
91 {isSelected && <Icon icon="check" className="ml-1 justify-self-end text-(--color-success)" />}
92 </>
…lines 93–101 unchanged (9 lines)

After

…lines 1–70 unchanged (70 lines)
71 <Button className="flex items-center bg-transparent transition-all">
72 <Icon icon="caret-down" />
73 </Button>
74 </Group>
75 <Popover className="flex flex-col overflow-y-hidden">
76 <ListBox
77 className="max-h-80 overflow-y-auto rounded-md border border-solid border-(--hl-sm) bg-(--color-bg) py-1 text-sm shadow-lg select-none focus:outline-hidden"
78 items={BUILT_IN_ENCODINGS}
79 aria-label="Encoding List"
80 autoFocus
81 >
82 {item => (
83 <ListBoxItem
84 aria-label={item.label}
85 textValue={item.label}
86 className="flex h-(--line-height-xs) w-full items-center gap-2 rounded-sm bg-transparent px-(--padding-md) whitespace-nowrap text-(--color-font) transition-colors hover:bg-(--hl-sm) focus:bg-(--hl-xs) focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed aria-disabled:opacity-30 aria-selected:font-bold data-focused:bg-(--hl-xs)"
87 >
88 {({ isSelected }) => (
89 <>
90 <span>{item.label}</span>
91 {isSelected && <Icon icon="check" className="ml-1 justify-self-end text-(--color-success)" />}
92 </>
…lines 93–101 unchanged (9 lines)

Before

program
import_statement (+32 nodes collapsed)
import_statement
import "import"
import_clause
named_imports
{ "{"
import_specifier
identifier "fuzzyMatch"
} "}"
from "from"
string
' "'"
string_fragment "../../common/misc"
' "'"
; ";"
import_statement
import "import"
import_clause
named_imports
{ "{"
import_specifier
identifier "Icon"
} "}"
from "from"
string
' "'"
string_fragment "./icon"
' "'"
; ";"
lexical_declaration (+788 nodes collapsed)
export_statement
export "export"
lexical_declaration
const "const"
variable_declarator
identifier "EncodingPicker"
= "="
arrow_function
formal_parameters (+39 nodes collapsed)
=> "=>"
statement_block
{ "{"
return_statement
return "return"
parenthesized_expression
( "("
jsx_element
jsx_opening_element (+171 nodes collapsed)
jsx_element (+54 nodes collapsed)
jsx_element
jsx_opening_element
< "<"
identifier "Popover"
jsx_attribute
property_identifier "className"
= "="
string
" "\""
string_fragment "flex flex-col overflow-y-hidden"
" "\""
> ">"
jsx_element
jsx_opening_element
< "<"
identifier "ListBox"
jsx_attribute
property_identifier "className"
= "="
string
" "\""
string_fragment "max-h-80 select-none overflow-y-auto rounded-md border borde"...
" "\""
jsx_attribute
property_identifier "items"
= "="
jsx_expression
{ "{"
identifier "BUILT_IN_ENCODINGS"
} "}"
jsx_attribute
property_identifier "aria-label"
= "="
string
" "\""
string_fragment "Encoding List"
" "\""
jsx_attribute
property_identifier "autoFocus"
> ">"
jsx_expression
{ "{"
arrow_function
identifier "item"
=> "=>"
parenthesized_expression
( "("
jsx_element
jsx_opening_element
< "<"
identifier "ListBoxItem"
jsx_attribute
property_identifier "aria-label"
= "="
jsx_expression
{ "{"
member_expression
identifier "item"
. "."
property_identifier "label"
} "}"
jsx_attribute
property_identifier "textValue"
= "="
jsx_expression
{ "{"
member_expression
identifier "item"
. "."
property_identifier "label"
} "}"
jsx_attribute
property_identifier "className"
= "="
string
" "\""
string_fragment "flex h-(--line-height-xs) w-full items-center gap-2 whitespa"...
" "\""
> ">"
jsx_expression (+63 nodes collapsed)
jsx_closing_element
</ "</"
identifier "ListBoxItem"
> ">"
) ")"
} "}"
jsx_closing_element
</ "</"
identifier "ListBox"
> ">"
jsx_closing_element
</ "</"
identifier "Popover"
> ">"
jsx_closing_element
</ "</"
identifier "ComboBox"
> ">"
) ")"
; ";"
} "}"
; ";"

After

program
import_statement (+32 nodes collapsed)
import_statement
import "import"
import_clause
named_imports
{ "{"
import_specifier
identifier "fuzzyMatch"
} "}"
from "from"
string
' "'"
string_fragment "../../common/misc"
' "'"
; ";"
import_statement
import "import"
import_clause
named_imports
{ "{"
import_specifier
identifier "Icon"
} "}"
from "from"
string
' "'"
string_fragment "./icon"
' "'"
; ";"
lexical_declaration (+788 nodes collapsed)
export_statement
export "export"
lexical_declaration
const "const"
variable_declarator
identifier "EncodingPicker"
= "="
arrow_function
formal_parameters (+39 nodes collapsed)
=> "=>"
statement_block
{ "{"
return_statement
return "return"
parenthesized_expression
( "("
jsx_element
jsx_opening_element (+171 nodes collapsed)
jsx_element (+54 nodes collapsed)
jsx_element
jsx_opening_element
< "<"
identifier "Popover"
jsx_attribute
property_identifier "className"
= "="
string
" "\""
string_fragment "flex flex-col overflow-y-hidden"
" "\""
> ">"
jsx_element
jsx_opening_element
< "<"
identifier "ListBox"
jsx_attribute
property_identifier "className"
= "="
string
" "\""
string_fragment "max-h-80 overflow-y-auto rounded-md border border-solid bord"...
" "\""
jsx_attribute
property_identifier "items"
= "="
jsx_expression
{ "{"
identifier "BUILT_IN_ENCODINGS"
} "}"
jsx_attribute
property_identifier "aria-label"
= "="
string
" "\""
string_fragment "Encoding List"
" "\""
jsx_attribute
property_identifier "autoFocus"
> ">"
jsx_expression
{ "{"
arrow_function
identifier "item"
=> "=>"
parenthesized_expression
( "("
jsx_element
jsx_opening_element
< "<"
identifier "ListBoxItem"
jsx_attribute
property_identifier "aria-label"
= "="
jsx_expression
{ "{"
member_expression
identifier "item"
. "."
property_identifier "label"
} "}"
jsx_attribute
property_identifier "textValue"
= "="
jsx_expression
{ "{"
member_expression
identifier "item"
. "."
property_identifier "label"
} "}"
jsx_attribute
property_identifier "className"
= "="
string
" "\""
string_fragment "flex h-(--line-height-xs) w-full items-center gap-2 rounded-"...
" "\""
> ">"
jsx_expression (+63 nodes collapsed)
jsx_closing_element
</ "</"
identifier "ListBoxItem"
> ">"
) ")"
} "}"
jsx_closing_element
</ "</"
identifier "ListBox"
> ">"
jsx_closing_element
</ "</"
identifier "Popover"
> ">"
jsx_closing_element
</ "</"
identifier "ComboBox"
> ">"
) ")"
; ";"
} "}"
; ";"