diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-dark-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-dark-colorblind-linux.png index 1edb20cbc5a..706caa8285a 100644 Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-dark-colorblind-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-dark-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-dark-tritanopia-linux.png index 1edb20cbc5a..706caa8285a 100644 Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-dark-tritanopia-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-light-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-light-linux.png index 97c5f0ea65a..6956edef44f 100644 Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-light-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-light-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Leading-and-Trailing-Actions-dark-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Leading-and-Trailing-Actions-dark-linux.png index 4dce540aaaa..2b4badaa3cb 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Leading-and-Trailing-Actions-dark-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Leading-and-Trailing-Actions-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Leading-and-Trailing-Actions-light-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Leading-and-Trailing-Actions-light-linux.png index 65c846e5876..208a02bff24 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Leading-and-Trailing-Actions-light-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Leading-and-Trailing-Actions-light-linux.png differ diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-linux.png index d59972c931c..ea31c45f01b 100644 Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-linux.png differ diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-light-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-light-linux.png index 06c7ef2248e..db2d06f6907 100644 Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-light-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-light-linux.png differ diff --git a/generated/components.json b/generated/components.json index cd2307492bd..5b0b4a5f931 100644 --- a/generated/components.json +++ b/generated/components.json @@ -243,6 +243,7 @@ { "name": "direction", "type": "'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'", + "defaultValue": "n", "description": "Sets where the tooltip renders in relation to the target." }, { diff --git a/src/Button/styles.ts b/src/Button/styles.ts index 620850c4419..1371a428779 100644 --- a/src/Button/styles.ts +++ b/src/Button/styles.ts @@ -136,6 +136,12 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme '&:has([data-component="ButtonCounter"])': { color: 'accent.fg', }, + '&:disabled[data-no-visuals]': { + color: 'primer.fg.disabled', + '[data-component=ButtonCounter]': { + color: 'inherit', + }, + }, }, outline: { color: 'btn.outline.text', diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap index 0650867f2a9..58a254a85f8 100644 --- a/src/__tests__/__snapshots__/Button.test.tsx.snap +++ b/src/__tests__/__snapshots__/Button.test.tsx.snap @@ -1627,6 +1627,14 @@ exports[`Button styles invisible button appropriately 1`] = ` color: accent.fg; } +.c0:disabled[data-no-visuals] { + color: primer.fg.disabled; +} + +.c0:disabled[data-no-visuals] [data-component=ButtonCounter] { + color: inherit; +} + @media (forced-colors:active) { .c0:focus { outline: solid 1px transparent; diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap index 085b35d792a..7188ef0de6b 100644 --- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -1469,6 +1469,14 @@ exports[`TextInput renders trailingAction icon button 1`] = ` color: #0969da; } +.c4:disabled[data-no-visuals] { + color: #8c959f; +} + +.c4:disabled[data-no-visuals] [data-component=ButtonCounter] { + color: inherit; +} + .c4[data-size="small"][data-no-visuals="true"] { padding-top: 2px; padding-right: 4px; @@ -2108,6 +2116,14 @@ exports[`TextInput renders trailingAction text button 1`] = ` color: #0969da; } +.c3:disabled[data-no-visuals] { + color: #8c959f; +} + +.c3:disabled[data-no-visuals] [data-component=ButtonCounter] { + color: inherit; +} + .c3[data-no-visuals="true"] { padding-top: 2px; padding-right: 4px; @@ -2502,6 +2518,14 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` color: #0969da; } +.c4:disabled[data-no-visuals] { + color: #8c959f; +} + +.c4:disabled[data-no-visuals] [data-component=ButtonCounter] { + color: inherit; +} + .c4[data-no-visuals="true"] { padding-top: 2px; padding-right: 4px;