From e814c0ee1aec24a30048d1aefb47b38fd45d0692 Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Thu, 24 Aug 2023 15:22:06 -0400 Subject: [PATCH] [Button] Remove connectedDisclosure (#10182) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### WHY are these changes introduced? Fixes https://github.com/Shopify/polaris/issues/10126 ### WHAT is this pull request doing? Removes all code related to connectedDisclosure Updates the split example to use Popover, ActionList, and ButtonGroup --- .changeset/honest-stingrays-act.md | 5 + .../guides/migrating-from-v11-to-v12.md | 3 +- polaris-react/locales/cs.json | 3 +- polaris-react/locales/da.json | 3 +- polaris-react/locales/de.json | 3 +- polaris-react/locales/en.json | 3 +- polaris-react/locales/es.json | 3 +- polaris-react/locales/fi.json | 3 +- polaris-react/locales/fr.json | 3 +- polaris-react/locales/it.json | 3 +- polaris-react/locales/ja.json | 3 +- polaris-react/locales/ko.json | 3 +- polaris-react/locales/nb.json | 3 +- polaris-react/locales/nl.json | 3 +- polaris-react/locales/pl.json | 3 +- polaris-react/locales/pt-BR.json | 3 +- polaris-react/locales/pt-PT.json | 3 +- polaris-react/locales/sv.json | 3 +- polaris-react/locales/th.json | 3 +- polaris-react/locales/tr.json | 3 +- polaris-react/locales/vi.json | 3 +- polaris-react/locales/zh-CN.json | 3 +- polaris-react/locales/zh-TW.json | 3 +- .../SecondaryAction/SecondaryAction.scss | 2 +- .../SecondaryAction/SecondaryAction.tsx | 2 +- .../src/components/Button/Button.scss | 91 +++--------- .../src/components/Button/Button.stories.tsx | 38 +++-- .../src/components/Button/Button.tsx | 85 +---------- .../components/Button/tests/Button.test.tsx | 135 ------------------ .../src/components/Page/Page.stories.tsx | 26 +--- .../PageActions/PageActions.stories.tsx | 23 +-- polaris-react/src/index.ts | 1 - polaris-react/src/types.ts | 11 -- .../pages/examples/button-split.tsx | 36 +++-- ...age-actions-with-custom-primary-action.tsx | 12 +- ...e-actions-with-custom-secondary-action.tsx | 11 +- .../page-with-custom-primary-action.tsx | 12 +- .../page-with-custom-secondary-action.tsx | 14 +- 38 files changed, 113 insertions(+), 457 deletions(-) create mode 100644 .changeset/honest-stingrays-act.md diff --git a/.changeset/honest-stingrays-act.md b/.changeset/honest-stingrays-act.md new file mode 100644 index 00000000000..34588888f54 --- /dev/null +++ b/.changeset/honest-stingrays-act.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': major +--- + +Removed connectedDislosure prop on button diff --git a/documentation/guides/migrating-from-v11-to-v12.md b/documentation/guides/migrating-from-v11-to-v12.md index a6b376c0866..09363e0328c 100644 --- a/documentation/guides/migrating-from-v11-to-v12.md +++ b/documentation/guides/migrating-from-v11-to-v12.md @@ -53,4 +53,5 @@ Secondary, becomes oneThird: `npx @shopify/polaris-migrator react-rename-component --renameFrom="HorizontalGrid" --renameTo="InlineGrid" --renamePropsFrom="HorizontalGridProps" --renamePropsTo="InlineGridProps"` **Button** -// TODO + +- connectedDisclosure: [See the updated split example](https://polaris.shopify.com/components/actions/button) diff --git a/polaris-react/locales/cs.json b/polaris-react/locales/cs.json index de9eb1662a4..a18c2fe67f0 100644 --- a/polaris-react/locales/cs.json +++ b/polaris-react/locales/cs.json @@ -30,8 +30,7 @@ "dismissButton": "Zavřít notifikaci" }, "Button": { - "spinnerAccessibilityLabel": "Načítání", - "connectedDisclosureAccessibilityLabel": "Související akce" + "spinnerAccessibilityLabel": "Načítání" }, "Common": { "checkbox": "zaškrtávací pole", diff --git a/polaris-react/locales/da.json b/polaris-react/locales/da.json index 6ed913a4247..254bcdb76e5 100644 --- a/polaris-react/locales/da.json +++ b/polaris-react/locales/da.json @@ -30,8 +30,7 @@ "dismissButton": "Afvis meddelelse" }, "Button": { - "spinnerAccessibilityLabel": "Indlæser", - "connectedDisclosureAccessibilityLabel": "Relaterede handlinger" + "spinnerAccessibilityLabel": "Indlæser" }, "Common": { "checkbox": "afkrydsningsfelt", diff --git a/polaris-react/locales/de.json b/polaris-react/locales/de.json index 97576fc65e1..abd6e2adbd0 100644 --- a/polaris-react/locales/de.json +++ b/polaris-react/locales/de.json @@ -30,8 +30,7 @@ "dismissButton": "Benachrichtigung verwerfen" }, "Button": { - "spinnerAccessibilityLabel": "Wird geladen", - "connectedDisclosureAccessibilityLabel": "Ähnliche Aktionen" + "spinnerAccessibilityLabel": "Wird geladen" }, "Common": { "checkbox": "Kontrollkästchen", diff --git a/polaris-react/locales/en.json b/polaris-react/locales/en.json index 75e21e7060b..4f519eb11b9 100644 --- a/polaris-react/locales/en.json +++ b/polaris-react/locales/en.json @@ -38,8 +38,7 @@ "dismissButton": "Dismiss notification" }, "Button": { - "spinnerAccessibilityLabel": "Loading", - "connectedDisclosureAccessibilityLabel": "Related actions" + "spinnerAccessibilityLabel": "Loading" }, "Common": { "checkbox": "checkbox", diff --git a/polaris-react/locales/es.json b/polaris-react/locales/es.json index e972c9a8567..425b3b7cfe9 100644 --- a/polaris-react/locales/es.json +++ b/polaris-react/locales/es.json @@ -30,8 +30,7 @@ "dismissButton": "Descartar notificación" }, "Button": { - "spinnerAccessibilityLabel": "Cargando", - "connectedDisclosureAccessibilityLabel": "Acciones relacionadas" + "spinnerAccessibilityLabel": "Cargando" }, "Common": { "checkbox": "casilla de verificación", diff --git a/polaris-react/locales/fi.json b/polaris-react/locales/fi.json index 565800cfad4..c3323afdec5 100644 --- a/polaris-react/locales/fi.json +++ b/polaris-react/locales/fi.json @@ -30,8 +30,7 @@ "dismissButton": "Ohita ilmoitus" }, "Button": { - "spinnerAccessibilityLabel": "Ladataan", - "connectedDisclosureAccessibilityLabel": "Aiheeseen liittyvät toimenpiteet" + "spinnerAccessibilityLabel": "Ladataan" }, "Common": { "checkbox": "valintaruutu", diff --git a/polaris-react/locales/fr.json b/polaris-react/locales/fr.json index 4544bf7e434..e2071fe80b3 100644 --- a/polaris-react/locales/fr.json +++ b/polaris-react/locales/fr.json @@ -30,8 +30,7 @@ "dismissButton": "Rejeter la notification" }, "Button": { - "spinnerAccessibilityLabel": "Chargement en cours", - "connectedDisclosureAccessibilityLabel": "Actions associées" + "spinnerAccessibilityLabel": "Chargement en cours" }, "Common": { "checkbox": "case à cocher", diff --git a/polaris-react/locales/it.json b/polaris-react/locales/it.json index 5055987bd70..60a6a147ab6 100644 --- a/polaris-react/locales/it.json +++ b/polaris-react/locales/it.json @@ -30,8 +30,7 @@ "dismissButton": "Elimina notifica" }, "Button": { - "spinnerAccessibilityLabel": "Caricamento in corso", - "connectedDisclosureAccessibilityLabel": "Azioni correlate" + "spinnerAccessibilityLabel": "Caricamento in corso" }, "Common": { "checkbox": "casella di spunta", diff --git a/polaris-react/locales/ja.json b/polaris-react/locales/ja.json index 94f36897ba3..9d69f2d6e3f 100644 --- a/polaris-react/locales/ja.json +++ b/polaris-react/locales/ja.json @@ -30,8 +30,7 @@ "dismissButton": "通知を閉じる" }, "Button": { - "spinnerAccessibilityLabel": "読み込み中", - "connectedDisclosureAccessibilityLabel": "関連したアクション" + "spinnerAccessibilityLabel": "読み込み中" }, "Common": { "checkbox": "チェックボックス", diff --git a/polaris-react/locales/ko.json b/polaris-react/locales/ko.json index 0f359d35e9f..f91ad2c926a 100644 --- a/polaris-react/locales/ko.json +++ b/polaris-react/locales/ko.json @@ -30,8 +30,7 @@ "dismissButton": "알림 무시" }, "Button": { - "spinnerAccessibilityLabel": "로드 중", - "connectedDisclosureAccessibilityLabel": "관련 작업" + "spinnerAccessibilityLabel": "로드 중" }, "Common": { "checkbox": "확인란", diff --git a/polaris-react/locales/nb.json b/polaris-react/locales/nb.json index 5e34e39ab4e..b7e667a8ebb 100644 --- a/polaris-react/locales/nb.json +++ b/polaris-react/locales/nb.json @@ -30,8 +30,7 @@ "dismissButton": "Avvis varsel" }, "Button": { - "spinnerAccessibilityLabel": "Laster inn", - "connectedDisclosureAccessibilityLabel": "Relaterte handlinger" + "spinnerAccessibilityLabel": "Laster inn" }, "Common": { "checkbox": "avmerkingsboks", diff --git a/polaris-react/locales/nl.json b/polaris-react/locales/nl.json index 147dabe55f3..0314e1a2b7f 100644 --- a/polaris-react/locales/nl.json +++ b/polaris-react/locales/nl.json @@ -30,8 +30,7 @@ "dismissButton": "Melding sluiten" }, "Button": { - "spinnerAccessibilityLabel": "Laden", - "connectedDisclosureAccessibilityLabel": "Gerelateerde acties" + "spinnerAccessibilityLabel": "Laden" }, "Common": { "checkbox": "selectievakje", diff --git a/polaris-react/locales/pl.json b/polaris-react/locales/pl.json index b62aad8ae65..6da3fdac93c 100644 --- a/polaris-react/locales/pl.json +++ b/polaris-react/locales/pl.json @@ -30,8 +30,7 @@ "dismissButton": "Odrzuć powiadomienie" }, "Button": { - "spinnerAccessibilityLabel": "Ładowanie", - "connectedDisclosureAccessibilityLabel": "Powiązane czynności" + "spinnerAccessibilityLabel": "Ładowanie" }, "Common": { "checkbox": "pole wyboru", diff --git a/polaris-react/locales/pt-BR.json b/polaris-react/locales/pt-BR.json index 0fa87854f96..dd330eb9cdf 100644 --- a/polaris-react/locales/pt-BR.json +++ b/polaris-react/locales/pt-BR.json @@ -30,8 +30,7 @@ "dismissButton": "Dispensar notificação" }, "Button": { - "spinnerAccessibilityLabel": "Carregando", - "connectedDisclosureAccessibilityLabel": "Ações relacionadas" + "spinnerAccessibilityLabel": "Carregando" }, "Common": { "checkbox": "caixa de seleção", diff --git a/polaris-react/locales/pt-PT.json b/polaris-react/locales/pt-PT.json index a8f2caf1efb..4d86d7f975b 100644 --- a/polaris-react/locales/pt-PT.json +++ b/polaris-react/locales/pt-PT.json @@ -30,8 +30,7 @@ "dismissButton": "Ignorar notificação" }, "Button": { - "spinnerAccessibilityLabel": "A carregar", - "connectedDisclosureAccessibilityLabel": "Ações relacionadas" + "spinnerAccessibilityLabel": "A carregar" }, "Common": { "checkbox": "caixa de verificação", diff --git a/polaris-react/locales/sv.json b/polaris-react/locales/sv.json index c7344ca6b0f..890a8a273ca 100644 --- a/polaris-react/locales/sv.json +++ b/polaris-react/locales/sv.json @@ -30,8 +30,7 @@ "dismissButton": "Avvisa avisering" }, "Button": { - "spinnerAccessibilityLabel": "Laddar", - "connectedDisclosureAccessibilityLabel": "Relaterade åtgärder" + "spinnerAccessibilityLabel": "Laddar" }, "Common": { "checkbox": "kryssruta", diff --git a/polaris-react/locales/th.json b/polaris-react/locales/th.json index 42110af3276..190dfe45775 100644 --- a/polaris-react/locales/th.json +++ b/polaris-react/locales/th.json @@ -30,8 +30,7 @@ "dismissButton": "ปิดการแจ้งเตือน" }, "Button": { - "spinnerAccessibilityLabel": "กำลังโหลด", - "connectedDisclosureAccessibilityLabel": "การดำเนินการที่เกี่ยวข้อง" + "spinnerAccessibilityLabel": "กำลังโหลด" }, "Common": { "checkbox": "ช่องทำเครื่องหมาย", diff --git a/polaris-react/locales/tr.json b/polaris-react/locales/tr.json index f8298d3f55c..57977da0b9b 100644 --- a/polaris-react/locales/tr.json +++ b/polaris-react/locales/tr.json @@ -30,8 +30,7 @@ "dismissButton": "Bildirimi kapat" }, "Button": { - "spinnerAccessibilityLabel": "Yükleniyor", - "connectedDisclosureAccessibilityLabel": "İlgili işlemler" + "spinnerAccessibilityLabel": "Yükleniyor" }, "Common": { "checkbox": "onay kutusu", diff --git a/polaris-react/locales/vi.json b/polaris-react/locales/vi.json index fc283a0507f..056e4a30a04 100644 --- a/polaris-react/locales/vi.json +++ b/polaris-react/locales/vi.json @@ -30,8 +30,7 @@ "dismissButton": "Bỏ qua thông báo" }, "Button": { - "spinnerAccessibilityLabel": "Đang tải", - "connectedDisclosureAccessibilityLabel": "Thao tác có liên quan" + "spinnerAccessibilityLabel": "Đang tải" }, "Common": { "checkbox": "hộp kiểm", diff --git a/polaris-react/locales/zh-CN.json b/polaris-react/locales/zh-CN.json index 17d5c1034d9..c5828d65bea 100644 --- a/polaris-react/locales/zh-CN.json +++ b/polaris-react/locales/zh-CN.json @@ -30,8 +30,7 @@ "dismissButton": "忽略通知" }, "Button": { - "spinnerAccessibilityLabel": "正在加载", - "connectedDisclosureAccessibilityLabel": "相关操作" + "spinnerAccessibilityLabel": "正在加载" }, "Common": { "checkbox": "复选框", diff --git a/polaris-react/locales/zh-TW.json b/polaris-react/locales/zh-TW.json index 1de5abc5b87..56e89692b91 100644 --- a/polaris-react/locales/zh-TW.json +++ b/polaris-react/locales/zh-TW.json @@ -30,8 +30,7 @@ "dismissButton": "關閉通知" }, "Button": { - "spinnerAccessibilityLabel": "載入中", - "connectedDisclosureAccessibilityLabel": "相關動作" + "spinnerAccessibilityLabel": "載入中" }, "Common": { "checkbox": "核取方塊", diff --git a/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss b/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss index 7b945b9ee6f..4077d6cee43 100644 --- a/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss +++ b/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss @@ -48,7 +48,7 @@ } } - &.destructive { + &.critical { a, button { color: var(--p-color-text-critical) !important; diff --git a/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.tsx b/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.tsx index ed9d35a9b78..c75128925b9 100644 --- a/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.tsx +++ b/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.tsx @@ -47,7 +47,7 @@ export function SecondaryAction({
diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss index 03607c883fc..bb4b29f74b8 100644 --- a/polaris-react/src/components/Button/Button.scss +++ b/polaris-react/src/components/Button/Button.scss @@ -64,28 +64,6 @@ // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include base-button-disabled; } - - &.connectedDisclosure { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - z-index: var(--pc-button-segment); - border-top-right-radius: 0; - border-bottom-right-radius: 0; - - &::before { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - - &::after { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - - &:focus { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - z-index: var(--pc-button-focused); - } - } } .Content { @@ -197,7 +175,7 @@ } .primary, -.destructive, +.critical, .tertiary { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include focus-ring($border-width: 0); @@ -337,7 +315,7 @@ } } - &.destructive, + &.critical, &.success { &::before { left: 0.5px; @@ -345,7 +323,7 @@ top: 0.5px; bottom: 0.5px; border-radius: inherit; - // adjust shine for destructive and success buttons + // adjust shine for critical and success buttons box-shadow: var(--p-shadow-button-primary-experimental); background: none; } @@ -382,7 +360,7 @@ } } - &.destructive { + &.critical { // stylelint-disable -- Button custom properties --pc-button-color: var(--p-color-bg-critical-strong); --pc-button-text: var(--p-color-text-on-color); @@ -440,7 +418,7 @@ } } -.destructive { +.critical { // stylelint-disable -- Button custom properties --pc-button-color: var(--p-color-bg); --pc-button-text: var(--p-color-text-critical); @@ -526,7 +504,7 @@ display: none; } - &.destructive { + &.critical { // stylelint-disable polaris/conventions/polaris/custom-property-allowed-list -- Button custom properties --pc-button-color: transparent; --pc-button-text: var(--p-color-text-critical); @@ -539,8 +517,8 @@ } // stylelint-enable polaris/conventions/polaris/custom-property-allowed-list - // stylelint-disable-next-line selector-max-class -- set destructive styles - &.destructive { + // stylelint-disable-next-line selector-max-class -- set critical styles + &.critical { box-shadow: none; } @@ -566,8 +544,8 @@ } } - // stylelint-disable-next-line selector-max-class -- set destructive styles - &.destructive { + // stylelint-disable-next-line selector-max-class -- set critical styles + &.critical { // stylelint-disable-next-line selector-max-class, selector-max-specificity -- set svg fill path { fill: var(--p-color-text-critical); @@ -717,7 +695,7 @@ } } - &.destructive { + &.critical { color: var(--p-color-text-critical); box-shadow: none; @@ -802,7 +780,7 @@ } } - &.destructive.iconOnly { + &.critical.iconOnly { svg { fill: var(--p-color-icon-critical-strong-experimental); } @@ -991,47 +969,6 @@ } } // stylelint-enable selector-max-specificity, selector-max-class - -.ConnectedDisclosureWrapper { - display: flex; -} - -.ConnectedDisclosure { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - z-index: var(--pc-button-segment); - margin-left: calc(-1 * var(--p-space-05)); - border-bottom-left-radius: 0; - border-top-left-radius: 0; - height: 100%; - - &:focus, - &:active { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - z-index: var(--pc-button-focused); - } - - &.primary, - &.destructive { - margin-left: calc(var(--p-space-05) * -1); - } - - &:active { - .Icon { - transform: translateY(1px); - } - } - - &::before { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - &::after { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } -} - // stylelint-disable selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY [data-buttongroup-segmented='true'] { .Button, @@ -1045,6 +982,7 @@ } > :first-child .Button, + > :first-child .Button::before, > :first-child .Button::after { border-radius: 0; border-top-left-radius: var(--p-border-radius-2); @@ -1052,6 +990,7 @@ } > :last-child .Button, + > :last-child .Button::before, > :last-child .Button::after { border-radius: 0; border-top-right-radius: var(--p-border-radius-2); @@ -1066,11 +1005,13 @@ [data-buttongroup-connected-top='true'] { > :first-child .Button, + > :first-child .Button::before, > :first-child .Button::after { border-top-left-radius: 0; } > :last-child .Button, + > :last-child .Button::before, > :last-child .Button::after { border-top-right-radius: 0; } diff --git a/polaris-react/src/components/Button/Button.stories.tsx b/polaris-react/src/components/Button/Button.stories.tsx index 64a0a29c146..e2cb8082ab4 100644 --- a/polaris-react/src/components/Button/Button.stories.tsx +++ b/polaris-react/src/components/Button/Button.stories.tsx @@ -8,12 +8,15 @@ import { BlockStack, Text, Box, + ActionList, + Popover, } from '@shopify/polaris'; import { PlusMinor, DeleteMinor, CancelSmallMinor, EditMajor, + ChevronDownMinor, } from '@shopify/polaris-icons'; export default { @@ -628,17 +631,34 @@ export function SelectDisclosure() { } export function Split() { + const [active, setActive] = React.useState(false); return (
- + + + +
+ + setActive(true)} + icon={ChevronDownMinor} + accessibilityLabel="Other save actions" + /> + } + autofocusTarget="first-node" + onClose={() => setActive(false)} + > + + +
); } diff --git a/polaris-react/src/components/Button/Button.tsx b/polaris-react/src/components/Button/Button.tsx index 8eebdf079e7..a26043b47a6 100644 --- a/polaris-react/src/components/Button/Button.tsx +++ b/polaris-react/src/components/Button/Button.tsx @@ -1,22 +1,19 @@ -import React, {useCallback, useState} from 'react'; +import React from 'react'; import { SelectMinor, ChevronDownMinor, ChevronUpMinor, } from '@shopify/polaris-icons'; -import type {BaseButton, ConnectedDisclosure, IconSource} from '../../types'; +import type {BaseButton, IconSource} from '../../types'; import {classNames, variationName} from '../../utilities/css'; import {handleMouseUpByBlurring} from '../../utilities/focus'; import type {MouseUpBlurHandler} from '../../utilities/focus'; import {useI18n} from '../../utilities/i18n'; import {Icon} from '../Icon'; import {Spinner} from '../Spinner'; -import {Popover} from '../Popover'; -import {ActionList} from '../ActionList'; import {UnstyledButton} from '../UnstyledButton'; import type {UnstyledButtonProps} from '../UnstyledButton'; -import {useDisableClick} from '../../utilities/use-disable-interaction'; import styles from './Button.scss'; @@ -38,8 +35,6 @@ export interface ButtonProps extends BaseButton { removeUnderline?: boolean; /** Icon to display to the left of the button content */ icon?: React.ReactElement | IconSource; - /** Disclosure button connected right of the button. Toggles a popover action list. */ - connectedDisclosure?: ConnectedDisclosure; /** Indicates whether or not the button is the primary navigation link when rendered inside of an `IndexTable.Row` */ dataPrimaryLink?: boolean; /** Sets the color treatment of the Button. */ @@ -120,7 +115,6 @@ export function Button({ size = DEFAULT_SIZE, textAlign, fullWidth, - connectedDisclosure, dataPrimaryLink, tone, variant, @@ -137,7 +131,7 @@ export function Button({ variant === 'tertiary' && styles.tertiary, variant === 'monochromePlain' && styles.monochrome, variant === 'monochromePlain' && styles.plain, - tone === 'critical' && styles.destructive, + tone === 'critical' && styles.critical, tone === 'success' && styles.success, isDisabled && styles.disabled, loading && styles.loading, @@ -146,7 +140,6 @@ export function Button({ textAlign && styles[variationName('textAlign', textAlign)], fullWidth && styles.fullWidth, icon && children == null && styles.iconOnly, - connectedDisclosure && styles.connectedDisclosure, removeUnderline && styles.removeUnderline, ); @@ -205,69 +198,6 @@ export function Button({ ) : null; - const [disclosureActive, setDisclosureActive] = useState(false); - const toggleDisclosureActive = useCallback(() => { - setDisclosureActive((disclosureActive) => !disclosureActive); - }, []); - - const handleClick = useDisableClick(disabled, toggleDisclosureActive); - - let connectedDisclosureMarkup; - - if (connectedDisclosure) { - const connectedDisclosureClassName = classNames( - styles.Button, - variant === 'primary' && styles.primary, - variant === 'monochromePlain' && styles.monochrome, - variant === 'monochromePlain' && styles.plain, - size && size !== DEFAULT_SIZE && styles[variationName('size', size)], - textAlign && styles[variationName('textAlign', textAlign)], - tone === 'critical' && styles.destructive, - connectedDisclosure.disabled && styles.disabled, - styles.iconOnly, - styles.ConnectedDisclosure, - ); - - const defaultLabel = i18n.translate( - 'Polaris.Button.connectedDisclosureAccessibilityLabel', - ); - - const {disabled, accessibilityLabel: disclosureLabel = defaultLabel} = - connectedDisclosure; - - const connectedDisclosureActivator = ( - - ); - - connectedDisclosureMarkup = ( - - - - ); - } - const commonProps: CommonButtonProps = { id, className, @@ -313,14 +243,7 @@ export function Button({ ); - return connectedDisclosureMarkup ? ( -
- {buttonMarkup} - {connectedDisclosureMarkup} -
- ) : ( - buttonMarkup - ); + return buttonMarkup; } function isIconSource(x: any): x is IconSource { diff --git a/polaris-react/src/components/Button/tests/Button.test.tsx b/polaris-react/src/components/Button/tests/Button.test.tsx index bc7172b2901..ee0f247d466 100644 --- a/polaris-react/src/components/Button/tests/Button.test.tsx +++ b/polaris-react/src/components/Button/tests/Button.test.tsx @@ -7,13 +7,10 @@ import { } from '@shopify/polaris-icons'; import {mountWithApp} from 'tests/utilities'; -import {ActionList} from '../../ActionList'; import {Icon} from '../../Icon'; -import {Popover} from '../../Popover'; import {Spinner} from '../../Spinner'; import {UnstyledButton} from '../../UnstyledButton'; import {Button} from '../Button'; -import en from '../../../../locales/en.json'; import styles from '../Button.scss'; describe(' - } + primaryAction={} >

Credit card information

@@ -133,19 +123,7 @@ export function WithDestructiveSecondaryAction() { export function WithCustomSecondaryAction() { return ( - - Save - - } - > + Save}>

Page content

 ); diff --git a/polaris-react/src/components/PageActions/PageActions.stories.tsx b/polaris-react/src/components/PageActions/PageActions.stories.tsx index e77ad76c235..d84450b9593 100644 --- a/polaris-react/src/components/PageActions/PageActions.stories.tsx +++ b/polaris-react/src/components/PageActions/PageActions.stories.tsx @@ -36,17 +36,7 @@ export function PrimaryActionOnly() { export function WithCustomPrimaryAction() { return ( - Save - - } + primaryAction={} secondaryActions={[ { content: 'Delete', @@ -64,16 +54,7 @@ export function WithCustomSecondaryAction() { primaryAction={{ content: 'Save', }} - secondaryActions={ - - } + secondaryActions={} /> ); } diff --git a/polaris-react/src/index.ts b/polaris-react/src/index.ts index afeed285519..1b26428af4c 100644 --- a/polaris-react/src/index.ts +++ b/polaris-react/src/index.ts @@ -23,7 +23,6 @@ export type { ComplexAction, MenuActionDescriptor, MenuGroupDescriptor, - ConnectedDisclosure, CheckboxHandles, AppliedFilterInterface, FilterInterface, diff --git a/polaris-react/src/types.ts b/polaris-react/src/types.ts index d7d2ac84d5c..c386efedbb5 100644 --- a/polaris-react/src/types.ts +++ b/polaris-react/src/types.ts @@ -258,17 +258,6 @@ export interface MenuGroupDescriptor extends BadgeAction { onClick?(openActions: () => void): void; } -export interface ConnectedDisclosure { - /** Visually hidden label for the connected disclosure button. - * @default 'Related actions' - */ - accessibilityLabel?: string; - /** Whether or not the disclosure is disabled */ - disabled?: boolean; - /** List of actions */ - actions: ActionListItemDescriptor[]; -} - export enum Key { Backspace = 8, Tab = 9, diff --git a/polaris.shopify.com/pages/examples/button-split.tsx b/polaris.shopify.com/pages/examples/button-split.tsx index b7e6033902e..49abfe05da0 100644 --- a/polaris.shopify.com/pages/examples/button-split.tsx +++ b/polaris.shopify.com/pages/examples/button-split.tsx @@ -1,19 +1,35 @@ -import {Button} from '@shopify/polaris'; +import {ActionList, Button, ButtonGroup, Popover} from '@shopify/polaris'; import React from 'react'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; +import {ChevronDownMinor} from '@shopify/polaris-icons'; function ButtonExample() { + const [active, setActive] = React.useState(false); return (
- + + +
+ setActive(true)} + icon={ChevronDownMinor} + accessibilityLabel="Other save actions" + /> + } + autofocusTarget="first-node" + onClose={() => setActive(false)} + > + + +
); } diff --git a/polaris.shopify.com/pages/examples/page-actions-with-custom-primary-action.tsx b/polaris.shopify.com/pages/examples/page-actions-with-custom-primary-action.tsx index a8b080cbacb..0fc9cf2a278 100644 --- a/polaris.shopify.com/pages/examples/page-actions-with-custom-primary-action.tsx +++ b/polaris.shopify.com/pages/examples/page-actions-with-custom-primary-action.tsx @@ -5,17 +5,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; function PageExample() { return ( - Save - - } + primaryAction={} secondaryActions={[ { content: 'Delete', diff --git a/polaris.shopify.com/pages/examples/page-actions-with-custom-secondary-action.tsx b/polaris.shopify.com/pages/examples/page-actions-with-custom-secondary-action.tsx index 626eb5237bf..acbcb286fd0 100644 --- a/polaris.shopify.com/pages/examples/page-actions-with-custom-secondary-action.tsx +++ b/polaris.shopify.com/pages/examples/page-actions-with-custom-secondary-action.tsx @@ -8,16 +8,7 @@ function PageExample() { primaryAction={{ content: 'Save', }} - secondaryActions={ - - } + secondaryActions={} /> ); } diff --git a/polaris.shopify.com/pages/examples/page-with-custom-primary-action.tsx b/polaris.shopify.com/pages/examples/page-with-custom-primary-action.tsx index 3c61b3bab56..ef1816ff8e9 100644 --- a/polaris.shopify.com/pages/examples/page-with-custom-primary-action.tsx +++ b/polaris.shopify.com/pages/examples/page-with-custom-primary-action.tsx @@ -7,17 +7,7 @@ function PageExample() { - Save - - } + primaryAction={} >

Credit card information

diff --git a/polaris.shopify.com/pages/examples/page-with-custom-secondary-action.tsx b/polaris.shopify.com/pages/examples/page-with-custom-secondary-action.tsx index e4b544fd763..2d6bcc796e3 100644 --- a/polaris.shopify.com/pages/examples/page-with-custom-secondary-action.tsx +++ b/polaris.shopify.com/pages/examples/page-with-custom-secondary-action.tsx @@ -4,19 +4,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; function PageExample() { return ( - - Save - - } - > + Save}>

Page content

 );