diff --git a/.changeset/strange-bananas-obey.md b/.changeset/strange-bananas-obey.md new file mode 100644 index 00000000000..3735026db35 --- /dev/null +++ b/.changeset/strange-bananas-obey.md @@ -0,0 +1,11 @@ +--- +'@shopify/polaris': minor +--- + +Added support for an `EditColumns` button rendered in the `IndexFilters` deprecating the `Tabs`'s `edit-columns` action. + +- `IndexFilters` + - Added support for rendering an Edit Columns button using the `showEditColumnsButton` flag. + - Added the edition `mode` to the `onEditStart(mode)` callback. +- `Tabs` + - Removed the `edit-columns` action type. diff --git a/polaris-react/locales/cs.json b/polaris-react/locales/cs.json index fbe80e16b66..9c5da0e0c77 100644 --- a/polaris-react/locales/cs.json +++ b/polaris-react/locales/cs.json @@ -214,7 +214,6 @@ "rename": "Přejmenovat zobrazení", "duplicate": "Duplikování zobrazení", "edit": "Upravit zobrazení", - "editColumns": "Upravit sloupce", "delete": "Odstranit zobrazení", "copy": "{name} – kopie", "deleteModal": { @@ -391,7 +390,11 @@ "cancel": "Zrušit" } }, - "searchFilterTooltipWithShortcut": "Hledejte a filtrujte (F)" + "searchFilterTooltipWithShortcut": "Hledejte a filtrujte (F)", + "EditColumnsButton": { + "tooltip": "Upravit sloupce", + "accessibilityLabel": "Přizpůsobit pořadí a viditelnost sloupců tabulky" + } }, "ActionList": { "SearchField": { diff --git a/polaris-react/locales/da.json b/polaris-react/locales/da.json index 4f3d39fdfcd..017e6fa3c57 100644 --- a/polaris-react/locales/da.json +++ b/polaris-react/locales/da.json @@ -214,7 +214,6 @@ "rename": "Omdøb visning", "duplicate": "Dupliker visning", "edit": "Rediger visning", - "editColumns": "Rediger kolonner", "delete": "Slet visning", "copy": "Kopi af {name}", "deleteModal": { @@ -389,6 +388,10 @@ "save": "Gem", "cancel": "Annuller" } + }, + "EditColumnsButton": { + "tooltip": "Rediger kolonner", + "accessibilityLabel": "Tilpas rækkefølgen og synligheden af tabelkolonner" } }, "ActionList": { diff --git a/polaris-react/locales/de.json b/polaris-react/locales/de.json index 1066bf858ac..cbd575ea79e 100644 --- a/polaris-react/locales/de.json +++ b/polaris-react/locales/de.json @@ -214,7 +214,6 @@ "rename": "Ansicht umbenennen", "duplicate": "Ansicht duplizieren", "edit": "Ansicht bearbeiten", - "editColumns": "Spalten bearbeiten", "delete": "Ansicht löschen", "copy": "Kopie von {name}", "deleteModal": { @@ -389,6 +388,10 @@ "save": "Speichern", "cancel": "Abbrechen" } + }, + "EditColumnsButton": { + "tooltip": "Spalten bearbeiten", + "accessibilityLabel": "Reihenfolge und Sichtbarkeit der Tabellenspalten anpassen" } }, "ActionList": { diff --git a/polaris-react/locales/en.json b/polaris-react/locales/en.json index 133a633151c..05b6fc13eae 100644 --- a/polaris-react/locales/en.json +++ b/polaris-react/locales/en.json @@ -192,6 +192,10 @@ "za": "Z-A" } }, + "EditColumnsButton": { + "tooltip": "Edit columns", + "accessibilityLabel": "Customize table column order and visibility" + }, "UpdateButtons": { "cancel": "Cancel", "update": "Update", @@ -291,7 +295,6 @@ "rename": "Rename view", "duplicate": "Duplicate view", "edit": "Edit view", - "editColumns": "Edit columns", "delete": "Delete view", "copy": "Copy of {name}", "deleteModal": { diff --git a/polaris-react/locales/es.json b/polaris-react/locales/es.json index f2294fa6368..9a5b11ae52b 100644 --- a/polaris-react/locales/es.json +++ b/polaris-react/locales/es.json @@ -214,7 +214,6 @@ "rename": "Cambiar nombre de vista", "duplicate": "Duplicar vista", "edit": "Editar vista", - "editColumns": "Editar columnas", "delete": "Eliminar vista", "copy": "Copia de {name}", "deleteModal": { @@ -390,6 +389,10 @@ "save": "Guardar", "cancel": "Cancelar" } + }, + "EditColumnsButton": { + "tooltip": "Editar columnas", + "accessibilityLabel": "Personalizar el orden y la visibilidad de las columnas de la tabla" } }, "ActionList": { diff --git a/polaris-react/locales/fi.json b/polaris-react/locales/fi.json index bcdd010fdbb..c26e3c61751 100644 --- a/polaris-react/locales/fi.json +++ b/polaris-react/locales/fi.json @@ -214,7 +214,6 @@ "rename": "Nimeä näkymä uudelleen", "duplicate": "Kopioi näkymä", "edit": "Muokkaa näkymää", - "editColumns": "Muokkaa sarakkeita", "delete": "Poista näkymä", "copy": "Kopio tiedostosta {name}", "deleteModal": { @@ -389,7 +388,11 @@ "cancel": "Peruuta" } }, - "searchFilterTooltipWithShortcut": "Hae ja suodata (F)" + "searchFilterTooltipWithShortcut": "Hae ja suodata (F)", + "EditColumnsButton": { + "tooltip": "Muokkaa sarakkeita", + "accessibilityLabel": "Muokkaa taulukon sarakkeiden järjestystä ja näkyvyyttä" + } }, "ActionList": { "SearchField": { diff --git a/polaris-react/locales/fr.json b/polaris-react/locales/fr.json index 3fb24bdb206..7c8e7ee6c81 100644 --- a/polaris-react/locales/fr.json +++ b/polaris-react/locales/fr.json @@ -214,7 +214,6 @@ "rename": "Renommer la vue", "duplicate": "Dupliquer la vue", "edit": "Modifier la vue", - "editColumns": "Modifier les colonnes", "delete": "Supprimer la vue", "copy": "Copie de {name}", "deleteModal": { @@ -390,6 +389,10 @@ "save": "Enregistrer", "cancel": "Annuler" } + }, + "EditColumnsButton": { + "tooltip": "Modifier les colonnes", + "accessibilityLabel": "Personnaliser l’ordre et la visibilité des colonnes du tableau" } }, "ActionList": { diff --git a/polaris-react/locales/it.json b/polaris-react/locales/it.json index 5d2271b9fa6..b7fb6853b69 100644 --- a/polaris-react/locales/it.json +++ b/polaris-react/locales/it.json @@ -214,7 +214,6 @@ "rename": "Rinomina vista", "duplicate": "Duplica vista", "edit": "Modifica vista", - "editColumns": "Modifica colonne", "delete": "Elimina vista", "copy": "Copia di {name}", "deleteModal": { @@ -390,6 +389,10 @@ "save": "Salva", "cancel": "Annulla" } + }, + "EditColumnsButton": { + "tooltip": "Modifica colonne", + "accessibilityLabel": "Personalizza l'ordine e la visibilità delle colonne della tabella" } }, "ActionList": { diff --git a/polaris-react/locales/ja.json b/polaris-react/locales/ja.json index 49b90ad07a4..7299f1d11f8 100644 --- a/polaris-react/locales/ja.json +++ b/polaris-react/locales/ja.json @@ -214,7 +214,6 @@ "rename": "ビューの名前を変更", "duplicate": "ビューを複製", "edit": "ビューを編集", - "editColumns": "列を編集", "delete": "ビューを削除", "copy": "{name}のコピー", "deleteModal": { @@ -389,6 +388,10 @@ "save": "保存", "cancel": "キャンセル" } + }, + "EditColumnsButton": { + "tooltip": "列を編集", + "accessibilityLabel": "表の列の順序および表示をカスタマイズする" } }, "ActionList": { diff --git a/polaris-react/locales/ko.json b/polaris-react/locales/ko.json index 23912856465..f6f1d817849 100644 --- a/polaris-react/locales/ko.json +++ b/polaris-react/locales/ko.json @@ -214,7 +214,6 @@ "rename": "보기 이름 바꾸기", "duplicate": "보기 복제", "edit": "보기 편집", - "editColumns": "열 편집", "delete": "보기 삭제", "copy": "{name}의 사본", "deleteModal": { @@ -389,6 +388,10 @@ "save": "저장", "cancel": "취소" } + }, + "EditColumnsButton": { + "tooltip": "열 편집", + "accessibilityLabel": "표의 주문 열 및 표시 방법 사용자 지정" } }, "ActionList": { diff --git a/polaris-react/locales/nb.json b/polaris-react/locales/nb.json index 8596d73d578..03908de8c90 100644 --- a/polaris-react/locales/nb.json +++ b/polaris-react/locales/nb.json @@ -214,7 +214,6 @@ "rename": "Gi visning nytt navn", "duplicate": "Dupliser visning", "edit": "Rediger visning", - "editColumns": "Rediger kolonner", "delete": "Slett visning", "copy": "Kopi av {name}", "deleteModal": { @@ -389,6 +388,10 @@ "save": "Lagre", "cancel": "Avbryt" } + }, + "EditColumnsButton": { + "tooltip": "Endre kolonner", + "accessibilityLabel": "Tilpass kolonnerekkefølge og -synlighet i tabellen" } }, "ActionList": { diff --git a/polaris-react/locales/nl.json b/polaris-react/locales/nl.json index 2232bf5af5b..ba933543236 100644 --- a/polaris-react/locales/nl.json +++ b/polaris-react/locales/nl.json @@ -214,7 +214,6 @@ "rename": "Naam van weergave wijzigen", "duplicate": "Weergave dupliceren", "edit": "Weergave bewerken", - "editColumns": "Kolommen bewerken", "delete": "Weergave verwijderen", "copy": "Kopie van {name}", "deleteModal": { @@ -389,6 +388,10 @@ "save": "Opslaan", "cancel": "Annuleren" } + }, + "EditColumnsButton": { + "tooltip": "Kolommen bewerken", + "accessibilityLabel": "Kolomvolgorde en zichtbaarheid van tabel aanpassen" } }, "ActionList": { diff --git a/polaris-react/locales/pl.json b/polaris-react/locales/pl.json index f5b44fb783e..dc6d6098d74 100644 --- a/polaris-react/locales/pl.json +++ b/polaris-react/locales/pl.json @@ -214,7 +214,6 @@ "rename": "Zmień nazwę widoku", "duplicate": "Duplikuj widok", "edit": "Edytuj widok", - "editColumns": "Edytuj kolumny", "delete": "Usuń widok", "copy": "Kopia {name}", "deleteModal": { @@ -391,6 +390,10 @@ "save": "Zapisz", "cancel": "Anuluj" } + }, + "EditColumnsButton": { + "tooltip": "Edytuj kolumny", + "accessibilityLabel": "Dostosuj kolejność i widoczność kolumn tabeli" } }, "ActionList": { diff --git a/polaris-react/locales/pt-BR.json b/polaris-react/locales/pt-BR.json index 2479dcb22d6..0261cdbad43 100644 --- a/polaris-react/locales/pt-BR.json +++ b/polaris-react/locales/pt-BR.json @@ -214,7 +214,6 @@ "rename": "Renomear visualização", "duplicate": "Duplicar visualização", "edit": "Editar visualização", - "editColumns": "Editar colunas", "delete": "Excluir visualização", "copy": "Cópia de {name}", "deleteModal": { @@ -390,6 +389,10 @@ "save": "Salvar", "cancel": "Cancelar" } + }, + "EditColumnsButton": { + "tooltip": "Editar colunas", + "accessibilityLabel": "Personalizar a ordem e a visibilidade das colunas da tabela" } }, "ActionList": { diff --git a/polaris-react/locales/pt-PT.json b/polaris-react/locales/pt-PT.json index 6054a65c21b..fe32c16b993 100644 --- a/polaris-react/locales/pt-PT.json +++ b/polaris-react/locales/pt-PT.json @@ -214,7 +214,6 @@ "rename": "Renomear visualização", "duplicate": "Duplicar visualização", "edit": "Editar visualização", - "editColumns": "Editar colunas", "delete": "Eliminar visualização", "copy": "Cópia de {name}", "deleteModal": { @@ -390,6 +389,10 @@ "save": "Guardar", "cancel": "Cancelar" } + }, + "EditColumnsButton": { + "tooltip": "Editar colunas", + "accessibilityLabel": "Personalizar visibilidade e ordem da coluna da tabela" } }, "ActionList": { diff --git a/polaris-react/locales/sv.json b/polaris-react/locales/sv.json index 31b04d806f4..f347cb985bb 100644 --- a/polaris-react/locales/sv.json +++ b/polaris-react/locales/sv.json @@ -214,7 +214,6 @@ "rename": "Döp om vy", "duplicate": "Duplicera vy", "edit": "Redigera vy", - "editColumns": "Redigera kolumner", "delete": "Radera vy", "copy": "Kopia av {name}", "deleteModal": { @@ -389,6 +388,10 @@ "save": "Spara", "cancel": "Avbryt" } + }, + "EditColumnsButton": { + "tooltip": "Redigera kolumner", + "accessibilityLabel": "Anpassa tabellkolumnernas ordning och synlighet" } }, "ActionList": { diff --git a/polaris-react/locales/th.json b/polaris-react/locales/th.json index e86ec0e8f1f..dace0a6950f 100644 --- a/polaris-react/locales/th.json +++ b/polaris-react/locales/th.json @@ -214,7 +214,6 @@ "rename": "เปลี่ยนชื่อมุมมอง", "duplicate": "ทำซ้ำมุมมอง", "edit": "แก้ไขมุมมอง", - "editColumns": "แก้ไขคอลัมน์", "delete": "ลบมุมมอง", "copy": "สำเนาของ {name}", "deleteModal": { @@ -389,6 +388,10 @@ "save": "บันทึก", "cancel": "ยกเลิก" } + }, + "EditColumnsButton": { + "tooltip": "แก้ไขคอลัมน์", + "accessibilityLabel": "ปรับแต่งลำดับและการแสดงผลคอลัมน์ในตาราง" } }, "ActionList": { diff --git a/polaris-react/locales/tr.json b/polaris-react/locales/tr.json index 4290695aeef..02bc265b773 100644 --- a/polaris-react/locales/tr.json +++ b/polaris-react/locales/tr.json @@ -214,7 +214,6 @@ "rename": "Görünümü yeniden adlandır", "duplicate": "Görünümü çoğalt", "edit": "Görünümü düzenle", - "editColumns": "Sütunları düzenle", "delete": "Görünümü sil", "copy": "{name} kopyası", "deleteModal": { @@ -389,6 +388,10 @@ "save": "Kaydet", "cancel": "İptal" } + }, + "EditColumnsButton": { + "tooltip": "Sütunları düzenleyin", + "accessibilityLabel": "Tablonun sütun sırasını ve görünürlüğünü özelleştirin" } }, "ActionList": { diff --git a/polaris-react/locales/vi.json b/polaris-react/locales/vi.json index 701c8911ac2..283ad465365 100644 --- a/polaris-react/locales/vi.json +++ b/polaris-react/locales/vi.json @@ -214,7 +214,6 @@ "rename": "Đổi tên chế độ xem", "duplicate": "Sao chép chế độ xem", "edit": "Chỉnh sửa chế độ xem", - "editColumns": "Sửa cột", "delete": "Xóa chế độ xem", "copy": "Bản sao của {name}", "deleteModal": { @@ -389,6 +388,10 @@ "save": "Lưu", "cancel": "Hủy" } + }, + "EditColumnsButton": { + "tooltip": "Sửa cột", + "accessibilityLabel": "Tùy chỉnh thứ tự và khả năng hiển thị của cột trong bảng" } }, "ActionList": { diff --git a/polaris-react/locales/zh-CN.json b/polaris-react/locales/zh-CN.json index 4c9a640826c..39be4afc9dd 100644 --- a/polaris-react/locales/zh-CN.json +++ b/polaris-react/locales/zh-CN.json @@ -214,7 +214,6 @@ "rename": "重命名视图", "duplicate": "复制视图", "edit": "编辑视图", - "editColumns": "编辑列", "delete": "删除视图", "copy": "{name} 的副本", "deleteModal": { @@ -389,6 +388,10 @@ "save": "保存", "cancel": "取消" } + }, + "EditColumnsButton": { + "tooltip": "编辑列", + "accessibilityLabel": "自定义表列顺序和可见性" } }, "ActionList": { diff --git a/polaris-react/locales/zh-TW.json b/polaris-react/locales/zh-TW.json index 02b4ad72d08..a119423dd6b 100644 --- a/polaris-react/locales/zh-TW.json +++ b/polaris-react/locales/zh-TW.json @@ -214,7 +214,6 @@ "rename": "重新命名檢視畫面", "duplicate": "複製檢視畫面", "edit": "編輯檢視畫面", - "editColumns": "編輯欄", "delete": "刪除檢視畫面", "copy": "{name}的副本", "deleteModal": { @@ -389,7 +388,11 @@ "cancel": "取消" } }, - "searchFilterTooltipWithShortcut": "搜尋和篩選 (F)" + "searchFilterTooltipWithShortcut": "搜尋和篩選 (F)", + "EditColumnsButton": { + "tooltip": "編輯欄", + "accessibilityLabel": "自訂表格欄順序和能見度" + } }, "ActionList": { "SearchField": { diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx b/polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx index f30b136577e..ba3d0b4b9cb 100644 --- a/polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx +++ b/polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx @@ -403,6 +403,10 @@ export function WithFilteringByDefault() { return ; } +export function WithEditColumsButton() { + return ; +} + export function WithoutKeyboardShortcuts() { return ; } @@ -951,6 +955,7 @@ export function Disabled() { mode={mode} setMode={setMode} disabled + showEditColumnsButton /> diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.tsx b/polaris-react/src/components/IndexFilters/IndexFilters.tsx index 9aaae0fcbbb..73c0d6e45c0 100644 --- a/polaris-react/src/components/IndexFilters/IndexFilters.tsx +++ b/polaris-react/src/components/IndexFilters/IndexFilters.tsx @@ -21,6 +21,7 @@ import { SortButton, SearchFilterButton, UpdateButtons, + EditColumnsButton, } from './components'; import type { IndexFiltersPrimaryAction, @@ -48,6 +49,11 @@ const transitionStyles = { type ExecutedCallback = (name: string) => Promise; +type ActionableIndexFiltersMode = Exclude< + IndexFiltersMode, + IndexFiltersMode.Default +>; + export interface IndexFiltersProps extends Omit< FiltersProps, @@ -71,7 +77,7 @@ export interface IndexFiltersProps /** The cancel action to display */ cancelAction: IndexFiltersCancelAction; /** Optional callback invoked when a merchant begins to edit a view */ - onEditStart?: () => void; + onEditStart?: (mode: ActionableIndexFiltersMode) => void; /** The current mode of the IndexFilters component. Used to determine which view to show */ mode: IndexFiltersMode; /** Callback to set the mode of the IndexFilters component */ @@ -96,6 +102,8 @@ export interface IndexFiltersProps closeOnChildOverlayClick?: boolean; /** Optional override to the default keyboard shortcuts available */ disableKeyboardShortcuts?: boolean; + /** Whether to display the edit columns button with the other default mode filter actions */ + showEditColumnsButton?: boolean; } export function IndexFilters({ @@ -134,6 +142,7 @@ export function IndexFilters({ hideQueryField, closeOnChildOverlayClick, disableKeyboardShortcuts, + showEditColumnsButton, }: IndexFiltersProps) { const i18n = useI18n(); const {mdDown} = useBreakpoints(); @@ -230,10 +239,13 @@ export function IndexFilters({ }; }, [cancelAction, onExecutedCancelAction]); - const beginEdit = useCallback(() => { - setMode(IndexFiltersMode.Filtering); - onEditStart?.(); - }, [onEditStart, setMode]); + const beginEdit = useCallback( + (mode: ActionableIndexFiltersMode) => { + setMode(mode); + onEditStart?.(mode); + }, + [onEditStart, setMode], + ); const updateButtonsMarkup = useMemo( () => ( @@ -270,10 +282,21 @@ export function IndexFilters({ disabled, ]); + function handleClickEditColumnsButon() { + beginEdit(IndexFiltersMode.EditingColumns); + } + + const editColumnsMarkup = showEditColumnsButton ? ( + + ) : null; + const isActionLoading = primaryAction?.loading || cancelAction?.loading; function handleClickFilterButton() { - beginEdit(); + beginEdit(IndexFiltersMode.Filtering); } const searchFilterTooltipLabelId = disableKeyboardShortcuts @@ -310,7 +333,7 @@ export function IndexFilters({ if (mode !== IndexFiltersMode.Default) { return; } - beginEdit(); + beginEdit(IndexFiltersMode.Filtering); } return ( @@ -393,6 +416,7 @@ export function IndexFilters({ }} /> )} + {editColumnsMarkup} {sortMarkup} ) : null} diff --git a/polaris-react/src/components/IndexFilters/components/EditColumnsButton/EditColumnsButton.tsx b/polaris-react/src/components/IndexFilters/components/EditColumnsButton/EditColumnsButton.tsx new file mode 100644 index 00000000000..f531c77a33b --- /dev/null +++ b/polaris-react/src/components/IndexFilters/components/EditColumnsButton/EditColumnsButton.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import {Columns3Minor} from '@shopify/polaris-icons'; + +import {useI18n} from '../../../../utilities/i18n'; +import {Button} from '../../../Button'; +import {Tooltip} from '../../../Tooltip'; +import {Text} from '../../../Text'; + +export interface EditColumnsButtonProps { + onClick: () => void; + disabled?: boolean; +} + +export function EditColumnsButton({onClick, disabled}: EditColumnsButtonProps) { + const i18n = useI18n(); + + const tooltipContent = ( + + {i18n.translate('Polaris.IndexFilters.EditColumnsButton.tooltip')} + + ); + + return ( + +