Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[35410] Expansion panel: Remove Sketch and Adobe XD references (en) #865

Open
wants to merge 2 commits into
base: vNext
Choose a base branch
from
Open

[35410] Expansion panel: Remove Sketch and Adobe XD references (en) #865

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a808fb1
[35410] Expansion panel: Remove Sketch and Adobe XD references (en)
sbayreva Dec 16, 2024
7690110
text fix
yradoeva Jan 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions en/components/expansion-panel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Expansion Panel - Design System Component
_description: The Expansion Panel Component provides a summary-details view with built-in functionality to show and hide the details.
_keywords: Design Systems, Design Systems UX, UI kit, Sketch, Ignite UI for Angular, Sketch to Angular, Sketch to Angular, Angular, Angular Design System, Export code from Sketch, Design Kits for Angular, Sketch HTML, Sketch to HTML, Sketch UI kits, Figma, Figma to Angular, Export code from Figma, Figma HTML, Figma to HTML, Figma UI kits
_keywords: Design Systems, Design Systems UX, UI kit, Ignite UI for Angular, Angular, Angular Design System, Design Kits for Angular, Figma, Figma to Angular, Export code from Figma, Figma HTML, Figma to HTML, Figma UI kits
---

# Expansion Panel
Expand All @@ -15,7 +15,7 @@ The Expansion Panel is visually identical to the [Ignite UI for Angular Expansio

## Header State

The Expansion Panel's Header comes in **Active** and Disabled state. You can switch between them using the Disabled boolean operation in Figma, using the Overrides panel in Sketch and from the States section in the right panel of Adobe XD.
The Expansion Panel's Header comes in **Active** and Disabled state. You can switch between them using the Disabled boolean operation in Figma.

<img class="responsive-img" src="../images/expansion_panel_active.png" srcset="../images/[email protected] 2x" />
`Active`
Expand All @@ -25,7 +25,7 @@ The Expansion Panel's Header comes in **Active** and Disabled state. You can swi

## Header Layout

The Expansion Panel's Header Layout consists of Left Expansion Panel Icon, Content including Title and Description, and Right Expansion Panel Icon. In Figma there are Icon and Description properties, which let you modify the layout. By default the Right Expansion Panel Icon is set to ~No Symbol in Sketch and is hidden in Adobe XD. The Left Expansion Panel Icon and the Content are in a smart layout in Sketch and form a Stack in Adobe XD, meaning that if the Icon is hidden, the Content will automatically shift to the left. However, if you do so, remember to make the Right Expansion Panel Icon visible and set the left one to ~No Symbol in Sketch or delete it in Adobe XD.
The Expansion Panel's Header Layout consists of Left Expansion Panel Icon, Content including Title and Description, and Right Expansion Panel Icon. In Figma there are Icon and Description properties, which let you modify the layout.

<img class="responsive-img" src="../images/expansion_panel_header1.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/expansion_panel_header2.png" srcset="../images/[email protected] 2x" />
Expand All @@ -38,7 +38,7 @@ The Expansion Panel's Body contains a text paragraph that is visible only in exp

## Styling

The Expansion Panel comes with options for changing the both the Header's and Body's background colors, as well as text and icon colors.
The Expansion Panel comes with options for changing both the Header's and Body's background colors, as well as text and icon colors.

<img class="responsive-img" src="../images/expansion_panel_styling.png" srcset="../images/[email protected] 2x" />

Expand Down
Loading