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.

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

[35412] Grids: Remove Sketch and Adobe XD references #877

Open
wants to merge 27 commits into
base: vNext
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
dd2fea7
[35412] Grids: Remove Sketch and Adobe XD references
yradoeva Jan 3, 2025
d4d45bd
removed Adobe XD image
yradoeva Jan 3, 2025
8d62629
updated all images for Grid page
yradoeva Jan 6, 2025
3d98f8c
added images for grid cell types
yradoeva Jan 6, 2025
447b522
Grid Toolbar - removed Sketch & Adobe XD references; updated images
yradoeva Jan 6, 2025
8b6e372
Grid Export - removed Sketch & Adobe XD keywords
yradoeva Jan 6, 2025
ec76fa7
Grid Group By - removed Sketch & Adobe XD references
yradoeva Jan 6, 2025
9163f60
Grid Column Pinning - removed Sketch & Adobe XD references, updated t…
yradoeva Jan 6, 2025
981ae5b
Grid Column Hiding - removed Sketch & Adobe XD references; updated img
yradoeva Jan 6, 2025
742cfae
Grid Column Moving - removed Sketch & Adobe XD references
yradoeva Jan 6, 2025
6aa0f7d
Grid Column Resizing - removed Sketch & Adobe XD references, updated …
yradoeva Jan 6, 2025
97a4f40
Column Pinning - text fix
yradoeva Jan 6, 2025
41c2440
Column Resizing - image fix
yradoeva Jan 6, 2025
13d0630
Column Hiding - image fix
yradoeva Jan 6, 2025
b07e3da
Grid Sorting - removed Sketch & Adobe XD references; updated image
yradoeva Jan 7, 2025
bba289f
Grid Row Filter - removed Sketch & Adobe XD references; updated the i…
yradoeva Jan 7, 2025
79b6bb2
Grid Excel Style Filter - removed Sketch & Adobe XD references
yradoeva Jan 7, 2025
0f3b3e2
Grid Advanced Filter - removed Sketch & Adobe XD references
yradoeva Jan 7, 2025
07929b0
Grid Excel Style Filter - text fix
yradoeva Jan 7, 2025
a3c820f
Grid Row Selection - removed Sketch & Adobe XD references; update images
yradoeva Jan 7, 2025
c859587
Grid Excel Style Filter - delete outdated info
yradoeva Jan 7, 2025
2903e92
Grid Editing - removed Sketch & Adobe XD references
yradoeva Jan 7, 2025
d418c61
Grid Sizes - updated the keywords; changed the images
yradoeva Jan 7, 2025
8134b76
Grid Paging - removed Sketch from the keywords
yradoeva Jan 8, 2025
b4fb590
Grid Summaries - removed Sketch and Adobe XD references
yradoeva Jan 8, 2025
40c8365
Skeleton Grid - removed Sketch keywords; updated all images
yradoeva Jan 8, 2025
7bb957b
Grid - image fix
yradoeva Jan 8, 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
4 changes: 2 additions & 2 deletions en/components/grid-column-hiding.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Grid Column Hiding - Grid Feature
_description: The Grid Column Hiding is a mechanism to hide and show columns of the Grid.
_keywords: Design Systems, Design Systems UX, UI kit, Figma, Figma to Angular, Export code from Figma, Figma to HTML, Figma UI kits, Sketch, Ignite UI for Angular, Sketch to Angular, Angular, Angular Design System, Export code from Sketch, Design Kits for Angular, Sketch HTML, Sketch to HTML, Sketch UI kits, Adobe XD, Adobe XD to Angular, Export code from Adobe XD, Adobe XD to HTML, Adobe XD UI kits
_keywords: Design Systems, Design Systems UX, UI kit, Figma, Ignite UI for Angular, Figma to Angular, Angular, Angular Design System, Export code from Figma, Design Kits for Angular, Figma HTML, Figma to HTML, Figma UI kits
---

# Grid Column Hiding
Expand All @@ -14,7 +14,7 @@ Use the Grid Column Hiding to hide certain columns from the Grid. The easiest wa

## Toolbar and Header Cell

The Grid Column Hiding can be achieved by adding a Toolbar with a Column Hiding action that enables the feature for the whole grid. However, in order to mark certain columns as hidable, you need to configure the `Column Hiding` override on the Grid Header Cell for the respective column in Sketch and set it to Hidden. In Adobe XD, the `Column Hiding` layer uses the `Component States` paradigm to let you easily switch between states. The default value is **Visible**. This feature has been deprecated in Figma and if you are using AppBuilder to generate your design, you should apply it directly there after the code generation.
The Grid Column Hiding can be achieved by adding a Toolbar with a Column Hiding action that enables the feature for the whole grid. The Column Hiding as a header cell feature has been deprecated in Figma and if you are using AppBuilder to generate your design, you should apply it directly there after the code generation.

## Additional Resources

Expand Down
6 changes: 3 additions & 3 deletions en/components/grid-column-moving.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Grid Column Moving - Grid Feature
_description: The Grid Column Moving is a mechanism to rearrange the columns of the Grid.
_keywords: Design Systems, Design Systems UX, UI kit, Figma, Figma to Angular, Export code from Figma, Figma to HTML, Figma UI kits, Sketch, Ignite UI for Angular, Sketch to Angular, Angular, Angular Design System, Export code from Sketch, Design Kits for Angular, Sketch HTML, Sketch to HTML, Sketch UI kits, Adobe XD, Adobe XD to Angular, Export code from Adobe XD, Adobe XD to HTML, Adobe XD UI kits
_keywords: Design Systems, Design Systems UX, UI kit, Figma, Ignite UI for Angular, Figma to Angular, Angular, Angular Design System, Export code from Figma, Design Kits for Angular, Figma HTML, Figma to HTML, Figma UI kits
---

# Grid Column Moving
Expand All @@ -14,11 +14,11 @@ Use the Grid Column Moving to indicate that the columns of the Grid are movable

## Header Cell

In order to indicate that a column is movable, configure the `Column Moving` override of the Grid Header Cell for the column in Sketch by changing the default value from **Not Movable** to **Movable**. In Adobe XD, the `Column Moving` layer uses the `Component States` paradigm to let you easily switch between states. This is what marks the column as movable as far as code generation is concerned. This feature has been deprecated in Figma and if you are using AppBuilder to generate your design, you should apply it directly there after the code generation.
The Grid Column Moving as a header cell feature has been deprecated in Figma and if you are using AppBuilder to generate your design, you should apply it directly there after the code generation.

## Column Moving Feature

The Grid has a `Column Moving` symbol/component under `Features` that represents the ghost Header Cell shown for the dragged column. It comes with presets for numeric and text columns. Adding this symbol/component has only a visual effect on your design to make it more realistic, if you want to switch the Column Moving feature, configure the Header Cells accordingly.
The Grid has a `Column Moving` component under `Features` that represents the ghost Header Cell shown for the dragged column. It comes with presets for numeric and text columns. Adding this component has only a visual effect on your design to make it look more realistic.

## Additional Resources

Expand Down
8 changes: 4 additions & 4 deletions en/components/grid-column-pinning.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Grid Column Pinning - Grid Feature
_description: The Grid Column Pinning is a mechanism to pin selected columns of a scrollable Grid.
_keywords: Design Systems, Design Systems UX, UI kit, Figma, Figma to Angular, Export code from Figma, Figma to HTML, Figma UI kits, Sketch, Ignite UI for Angular, Sketch to Angular, Angular, Angular Design System, Export code from Sketch, Design Kits for Angular, Sketch HTML, Sketch to HTML, Sketch UI kits, Adobe XD, Adobe XD to Angular, Export code from Adobe XD, Adobe XD to HTML, Adobe XD UI kits
_keywords: Design Systems, Design Systems UX, UI kit, Figma, Ignite UI for Angular, Figma to Angular, Angular, Angular Design System, Export code from Figma, Design Kits for Angular, Figma HTML, Figma to HTML, Figma UI kits
---

# Grid Column Pinning
Expand All @@ -14,19 +14,19 @@ Use the Grid Column Pinning as a mechanism to fix the first few columns of a scr

## Header Cell Feature

To indicate a column as pinnable, use the `Column Pinning` override of the Grid Header Cell for that column in Sketch and change the default value from **Not Pinned** to **Pinned**. In Adobe XD, the `Column Pinning` layer uses the `Component States` paradigm to let you easily switch between states. This is what marks the column as pinnable as far as code generation is concerned. This feature has been deprecated in Figma and if you are using AppBuilder to generate your design, you should apply it directly there after the code generation.
The Grid Column Pinning as a header cell feature has been deprecated in Figma and if you are using AppBuilder to generate your design, you should apply it directly there after the code generation.

The Built-In Column Pinning can be used through the Grid's toolbar which by default contains a button (combined with a combo dropdown) that lets you configure the pin state of the columns for the whole grid.

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

## Custom Column Pinning

It is also possible to add a custom pinning action in the Grid Header Cell. In Sketch this can be achieved by using either the `Feature Left` or `Feature Right` overrides and setting it to `Icon Template`. This way an icon will appear to indicate the column is pinned and you can change its state from pin to unpin icon from Icon override. In Figma the method is identical, you need to go to the Header Cell layer, select either the `Feature Left` or `Feature Right` layer and change its `Type` property from `None` to `Icon Template`. Of course, you would probably also want to rearrange the column order so that the pinned ones come first when looking left to right.
It is also possible to add a custom pinning action in the Grid Header Cell. In Figma you need to go to the Header Cell layer, select either the `Feature Left` or `Feature Right` and change its `Type` property from `None` to `Icon Template`. Of course, you would probably also want to rearrange the column order so that the pinned ones come first when looking left to right.

## Cell Right Border

The right-most pinned column should have its `Right Border` override to indicate `Pinned Line` both for the Header and all Body Cells of the column. This is shown on the image below for all cells of the second column since "Status" is pinned.
The right-most pinned column should have its `Right Border` set to `Pinned` both for the Header and all Body Cells of the column. This is shown on the image below for all cells of the second column since "Status" is pinned.

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

Expand Down
6 changes: 3 additions & 3 deletions en/components/grid-column-resizing.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Grid Column Resizing - Grid Feature
_description: The Grid Column Resizing is a mechanism to adjust the width of the columns of the Grid.
_keywords: Design Systems, Design Systems UX, UI kit, Figma, Figma to Angular, Export code from Figma, Figma to HTML, Figma UI kits, Sketch, Ignite UI for Angular, Sketch to Angular, Angular, Angular Design System, Export code from Sketch, Design Kits for Angular, Sketch HTML, Sketch to HTML, Sketch UI kits, Adobe XD, Adobe XD to Angular, Export code from Adobe XD, Adobe XD to HTML, Adobe XD UI kits
_keywords: Design Systems, Design Systems UX, UI kit, Figma, Ignite UI for Angular, Figma to Angular, Angular, Angular Design System, Export code from Figma, Design Kits for Angular, Figma HTML, Figma to HTML, Figma UI kits
---

# Grid Column Resizing
Expand All @@ -14,11 +14,11 @@ Use the Grid Column Resizing to indicate that the columns of the Grid are resiza

## Header Cell

To indicate that a column is resizable, configure the `Column Resizing` override of the Grid Header Cell for the column in Sketch by changing the default value from **Not Resizable** to **Resizable**. In Adobe XD, the `Column Resizing` layer uses the `Component States` paradigm to let you easily switch between states. This is what marks the column as resizable as far as code generation is concerned. This feature has been deprecated in Figma and if you are using AppBuilder to generate your design, you should apply it directly there after the code generation.
The Grid Column Resizing as a header cell feature has been deprecated in Figma and if you are using AppBuilder to generate your design, you should apply it directly there after the code generation.

## Column Resizing Indicator Feature

The Grid has a `Column Resizing Indicator` symbol/component under `Features` that represents a highlight border of the whole column where resizing occurs. Adding this symbol/component has only a visual effect on your design to make it more realistic, if you want to switch the Column Resizing feature, configure the Header Cells accordingly.
The Grid has a `Column Resizing Indicator` component in the `Base Components` that represents a highlight border of the whole column where resizing occurs. Adding this component has only a visual effect on your design to make it look more realistic.

## Additional Resources

Expand Down
16 changes: 8 additions & 8 deletions en/components/grid-excel-style-filter.md
Original file line number Diff line number Diff line change
@@ -1,37 +1,37 @@
---
title: Grid Excel Style Filter - Grid Feature
_description: The Grid Excel Style Filter provides an overlay for column manipulations such as sorting, filtering, column moving, hiding, and pinning.
_keywords: Design Systems, Design Systems UX, UI kit, Figma, Figma to Angular, Export code from Figma, Figma to HTML, Figma UI kits, Sketch, Ignite UI for Angular, Sketch to Angular, Angular, Angular Design System, Export code from Sketch, Design Kits for Angular, Sketch HTML, Sketch to HTML, Sketch UI kits, Adobe XD, Adobe XD to Angular, Export code from Adobe XD, Adobe XD to HTML, Adobe XD UI kits
_description: The Grid Excel Style Filter provides an overlay for column manipulations such as sorting, filtering, column selection, moving, hiding, and pinning.
_keywords: Design Systems, Design Systems UX, UI kit, Figma, Ignite UI for Angular, Figma to Angular, Angular, Angular Design System, Export code from Figma, Design Kits for Angular, Figma HTML, Figma to HTML, Figma UI kits
---

# Grid Excel Style Filter

Use the Grid Excel Style Filter to let the user specify a set of Grid features on the column: filtering by unique value or multiple conditions, sorting, column moving, hiding, and pinning. Only one column at a time may show the Excel Style Filter, and its Header Filter State must be set to active (see Header Cell below). The Grid Excel Style Filter is visually identical to the dialog used for the [Ignite UI for Angular Grid Excel Style Filtering Feature](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/excel_style_filtering.html)
Use the Grid Excel Style Filter to let the user specify a set of Grid features on the column: filtering by unique value or multiple conditions, sorting, column selection, moving, hiding, and pinning. Only one column at a time may show the Excel Style Filter, and its Header Cell must have `Feature Left` or `Feature Right` set to `Filtering Active` (see Header Cell below). The Grid Excel Style Filter is visually identical to the dialog used for the [Ignite UI for Angular Grid Excel Style Filtering Feature](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/excel_style_filtering.html)

## Grid Excel Style Filter Demo

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

## Header Cell

In order to indicate that a column has an active Excel Style Filter in Sketch (the overlay for it is visible) you first need to set the `Feature Left` or `Feature Right` override to `Filtering` and then configure the next override in the panel `Filter State` to `Filtering/Active`. Furthermore, if you want to indicate that a column has Excel Style Filtering enabled you can use either the `Filtering/Inactive` state indicating that no filtering conditions are applied on this column, or the `Filtering/Filtered` state indicating that filtering conditions have been applied and the overlay for the column has been closed. In Figma to use the Excel Style Filtering you need to open the Grid Header Cell layer, select either the `Feature Left` or `Feature Right` component and change the `Type` property to `Filtering Inactive`, `Filtering Active` or `Filtering Filtered`. In Adobe XD you have to take a slightly different path by unhiding either the `Feature Left` or the `Feature Right` group and then leaving just the `Filtering` layer inside it, which should also be unhidden if necessary. Then via the available `Component States`, you will be able to switch the state to `Filtered`.
In Figma to use the Excel Style Filtering you need to open the Grid Header Cell layer, select either the `Feature Left` or `Feature Right` component and change the `Type` property to `Filtering Inactive`, `Filtering Active` or `Filtering Filtered`.

## Excel Style Filter Feature

The Grid has three `Excel Style Filter` symbols under `Features` in Sketch, one for each Display Density, that represent the overlay shown for the affected column. In Figma and Adobe XD, there is just one `Excel Style Filter`, and via the `Size` property in Figma and `Component States` in Adobe XD you can easily switch between the three sizes available. Adding the Excel Style Filter has only a visual effect on your design to make it more realistic, if you want to turn the Excel Style Filter feature on, configure the Header Cells accordingly.
In Figma, there is an `Excel Style Filter` component, and via the `Size` property you can easily switch between the three sizes available. Adding the Excel Style Filter has only a visual effect on your design to make it look more realistic, if you want to turn the Excel Style Filter feature on, configure the Header Cells accordingly.

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

> [!Note]
> Make sure to pick a Size variant for the Excel Style Filter overlay that matches the Grid Size since it is the one that is inherited by all features of the Grid.
> Make sure to pick a Size variant for the Excel Style Filter that matches the Grid Size since it is the one that is inherited by all features of the Grid.

### Overlay Customization
yradoeva marked this conversation as resolved.
Show resolved Hide resolved

The Excel Style Filter overlay lets you configure the Column name to reflect the column that triggered it as well as the list of unique values at the bottom with their on/off state and item Text. The other features are not configurable.

### Sorting, Moving, Hiding and Pinning
### Sorting, Selection, Moving, Hiding and Pinning

The Excel Style Filter interface provides additional functionality besides filtering such as Sorting, Column Moving, Column Hiding, and Column Pinning that are not configurable. If any of them is enabled on the column via the Header Cell (see how to enable them in their respective topic) the user interface elements for the feature will be shown in the Excel Style Filter interface according to the Grid Size that is being applied.
The Excel Style Filter interface provides additional functionality besides filtering such as Sorting, Column Selection, Column Moving, Column Hiding, and Column Pinning that are not configurable. If any of them is enabled on the column via the Header Cell (see how to enable them in their respective topic) the user interface elements for the feature will be shown in the Excel Style Filter interface according to the Grid Size that is being applied.
yradoeva marked this conversation as resolved.
Show resolved Hide resolved

## Additional Resources

Expand Down
2 changes: 1 addition & 1 deletion en/components/grid-export.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Grid Export - Grid Feature
_description: The Grid Export provides the means to export the Grid to Excel or CSV.
_keywords: Design Systems, Design Systems UX, UI kit, Figma, Figma to Angular, Export code from Figma, Figma to HTML, Figma UI kits, Sketch, Ignite UI for Angular, Sketch to Angular, Angular, Angular Design System, Export code from Sketch, Design Kits for Angular, Sketch HTML, Sketch to HTML, Sketch UI kits
_keywords: Design Systems, Design Systems UX, UI kit, Figma, Ignite UI for Angular, Figma to Angular, Angular, Angular Design System, Export code from Figma, Design Kits for Angular, Figma HTML, Figma to HTML, Figma UI kits
---

# Grid Export
Expand Down
Loading
Loading