Merge 27e886d into 9f5a9ac

primer · Dec 11, 2024 · beddcff · beddcff
2 parents 9f5a9ac + 27e886d
commit beddcff
Show file tree

Hide file tree

Showing 66 changed files with 2,122 additions and 994 deletions.
diff --git a/...ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-colorblind-linux.png b/...ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-colorblind-linux.png
diff --git a/...nts/ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-dimmed-linux.png b/...nts/ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-dimmed-linux.png
diff --git a/...ionList.test.ts-snapshots/ActionList-Inactive-Item-dark-high-contrast-linux.png b/...ionList.test.ts-snapshots/ActionList-Inactive-Item-dark-high-contrast-linux.png
diff --git a/...components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-linux.png b/...components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-linux.png
diff --git a/...ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-tritanopia-linux.png b/...ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-tritanopia-linux.png
diff --git a/...ctionList.test.ts-snapshots/ActionList-Inactive-Item-light-colorblind-linux.png b/...ctionList.test.ts-snapshots/ActionList-Inactive-Item-light-colorblind-linux.png
diff --git a/...onList.test.ts-snapshots/ActionList-Inactive-Item-light-high-contrast-linux.png b/...onList.test.ts-snapshots/ActionList-Inactive-Item-light-high-contrast-linux.png
diff --git a/...omponents/ActionList.test.ts-snapshots/ActionList-Inactive-Item-light-linux.png b/...omponents/ActionList.test.ts-snapshots/ActionList-Inactive-Item-light-linux.png
diff --git a/...ctionList.test.ts-snapshots/ActionList-Inactive-Item-light-tritanopia-linux.png b/...ctionList.test.ts-snapshots/ActionList-Inactive-Item-light-tritanopia-linux.png
diff --git a/...ctionList.test.ts-snapshots/ActionList-Simple-List-dark-high-contrast-linux.png b/...ctionList.test.ts-snapshots/ActionList-Simple-List-dark-high-contrast-linux.png
diff --git a/...tionList.test.ts-snapshots/ActionList-Simple-List-light-high-contrast-linux.png b/...tionList.test.ts-snapshots/ActionList-Simple-List-light-high-contrast-linux.png
diff --git a/...onList.test.ts-snapshots/ActionList-Single-Divider-dark-high-contrast-linux.png b/...onList.test.ts-snapshots/ActionList-Single-Divider-dark-high-contrast-linux.png
diff --git a/...nList.test.ts-snapshots/ActionList-Single-Divider-light-high-contrast-linux.png b/...nList.test.ts-snapshots/ActionList-Single-Divider-light-high-contrast-linux.png
diff --git a/...onList.test.ts-snapshots/Group-Heading-with-Classname-dark-colorblind-linux.png b/...onList.test.ts-snapshots/Group-Heading-with-Classname-dark-colorblind-linux.png
diff --git a/...ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-dimmed-linux.png b/...ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-dimmed-linux.png
diff --git a/...ist.test.ts-snapshots/Group-Heading-with-Classname-dark-high-contrast-linux.png b/...ist.test.ts-snapshots/Group-Heading-with-Classname-dark-high-contrast-linux.png
diff --git a/...onents/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-linux.png b/...onents/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-linux.png
diff --git a/...onList.test.ts-snapshots/Group-Heading-with-Classname-dark-tritanopia-linux.png b/...onList.test.ts-snapshots/Group-Heading-with-Classname-dark-tritanopia-linux.png
diff --git a/...nList.test.ts-snapshots/Group-Heading-with-Classname-light-colorblind-linux.png b/...nList.test.ts-snapshots/Group-Heading-with-Classname-light-colorblind-linux.png
diff --git a/...st.test.ts-snapshots/Group-Heading-with-Classname-light-high-contrast-linux.png b/...st.test.ts-snapshots/Group-Heading-with-Classname-light-high-contrast-linux.png
diff --git a/...nents/ActionList.test.ts-snapshots/Group-Heading-with-Classname-light-linux.png b/...nents/ActionList.test.ts-snapshots/Group-Heading-with-Classname-light-linux.png
diff --git a/...nList.test.ts-snapshots/Group-Heading-with-Classname-light-tritanopia-linux.png b/...nList.test.ts-snapshots/Group-Heading-with-Classname-light-tritanopia-linux.png
diff --git a/...s/ActionList.test.ts-snapshots/Heading-with-Classname-dark-colorblind-linux.png b/...s/ActionList.test.ts-snapshots/Heading-with-Classname-dark-colorblind-linux.png
diff --git a/...nents/ActionList.test.ts-snapshots/Heading-with-Classname-dark-dimmed-linux.png b/...nents/ActionList.test.ts-snapshots/Heading-with-Classname-dark-dimmed-linux.png
diff --git a/...ctionList.test.ts-snapshots/Heading-with-Classname-dark-high-contrast-linux.png b/...ctionList.test.ts-snapshots/Heading-with-Classname-dark-high-contrast-linux.png
diff --git a/...s/components/ActionList.test.ts-snapshots/Heading-with-Classname-dark-linux.png b/...s/components/ActionList.test.ts-snapshots/Heading-with-Classname-dark-linux.png
diff --git a/...s/ActionList.test.ts-snapshots/Heading-with-Classname-dark-tritanopia-linux.png b/...s/ActionList.test.ts-snapshots/Heading-with-Classname-dark-tritanopia-linux.png
diff --git a/.../ActionList.test.ts-snapshots/Heading-with-Classname-light-colorblind-linux.png b/.../ActionList.test.ts-snapshots/Heading-with-Classname-light-colorblind-linux.png
diff --git a/...tionList.test.ts-snapshots/Heading-with-Classname-light-high-contrast-linux.png b/...tionList.test.ts-snapshots/Heading-with-Classname-light-high-contrast-linux.png
diff --git a/.../components/ActionList.test.ts-snapshots/Heading-with-Classname-light-linux.png b/.../components/ActionList.test.ts-snapshots/Heading-with-Classname-light-linux.png
diff --git a/.../ActionList.test.ts-snapshots/Heading-with-Classname-light-tritanopia-linux.png b/.../ActionList.test.ts-snapshots/Heading-with-Classname-light-tritanopia-linux.png
diff --git a/...st.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png b/...st.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png
diff --git a/...Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-dark-high-contrast-linux.png b/...Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-dark-high-contrast-linux.png
diff --git a/...lectPanel-Above-Tall-Body-dark-high-contrast-modern-action-list--true-linux.png b/...lectPanel-Above-Tall-Body-dark-high-contrast-modern-action-list--true-linux.png
diff --git a/...shots/SelectPanel-Default-dark-high-contrast-modern-action-list--true-linux.png b/...shots/SelectPanel-Default-dark-high-contrast-modern-action-list--true-linux.png
diff --git a/...lectPanel-External-Anchor-dark-high-contrast-modern-action-list--true-linux.png b/...lectPanel-External-Anchor-dark-high-contrast-modern-action-list--true-linux.png
diff --git a/...al-with-Overflowing-Items-dark-high-contrast-modern-action-list--true-linux.png b/...al-with-Overflowing-Items-dark-high-contrast-modern-action-list--true-linux.png
diff --git a/...l-with-Underflowing-Items-dark-high-contrast-modern-action-list--true-linux.png b/...l-with-Underflowing-Items-dark-high-contrast-modern-action-list--true-linux.png
diff --git a/...s/SelectPanel-With-Footer-dark-high-contrast-modern-action-list--true-linux.png b/...s/SelectPanel-With-Footer-dark-high-contrast-modern-action-list--true-linux.png
diff --git a/...tPanel-With-Item-Dividers-dark-high-contrast-modern-action-list--true-linux.png b/...tPanel-With-Item-Dividers-dark-high-contrast-modern-action-list--true-linux.png
diff --git a/...nel-With-Label-Internally-dark-high-contrast-modern-action-list--true-linux.png b/...nel-With-Label-Internally-dark-high-contrast-modern-action-list--true-linux.png
diff --git a/...ith-Label-Visually-Hidden-dark-high-contrast-modern-action-list--true-linux.png b/...ith-Label-Visually-Hidden-dark-high-contrast-modern-action-list--true-linux.png
diff --git a/...ceholder-for-Search-Input-dark-high-contrast-modern-action-list--true-linux.png b/...ceholder-for-Search-Input-dark-high-contrast-modern-action-list--true-linux.png
diff --git a/...anel.test.ts-snapshots/drafts-SelectPanel-As-Modal-dark-high-contrast-linux.png b/...anel.test.ts-snapshots/drafts-SelectPanel-As-Modal-dark-high-contrast-linux.png
diff --git a/...Panel.test.ts-snapshots/drafts-SelectPanel-Default-dark-high-contrast-linux.png b/...Panel.test.ts-snapshots/drafts-SelectPanel-Default-dark-high-contrast-linux.png
diff --git a/...st.ts-snapshots/drafts-SelectPanel-External-Anchor-dark-high-contrast-linux.png b/...st.ts-snapshots/drafts-SelectPanel-External-Anchor-dark-high-contrast-linux.png
diff --git a/....test.ts-snapshots/drafts-SelectPanel-With-Warning-dark-high-contrast-linux.png b/....test.ts-snapshots/drafts-SelectPanel-With-Warning-dark-high-contrast-linux.png
diff --git a/packages/postcss-preset-primer/src/mixins/activeIndicatorLine.css b/packages/postcss-preset-primer/src/mixins/activeIndicatorLine.css
@@ -0,0 +1,10 @@
+@define-mixin activeIndicatorLine {
+  position: absolute;
+  top: calc(50% - var(--base-size-12));
+  left: calc(-1 * var(--base-size-8));
+  width: var(--base-size-4);
+  height: var(--base-size-24);
+  content: '';
+  background: var(--bgColor-accent-emphasis);
+  border-radius: var(--borderRadius-medium);
+}
diff --git a/packages/react/src/ActionList/ActionList.dev.stories.tsx b/packages/react/src/ActionList/ActionList.dev.stories.tsx
@@ -7,6 +7,7 @@ import {Group} from './Group'
 import {Divider} from './Divider'
 import {Description} from './Description'
 import Avatar from '../Avatar'
+import {FileDirectoryIcon} from '@primer/octicons-react'
 
 export default {
   title: 'Components/ActionList/Dev',
@@ -144,3 +145,23 @@ export const HeadingCustomClassname = () => (
     </ActionList.Group>
   </ActionList>
 )
+
+export const DescriptionCustomClassname = () => (
+  <ActionList>
+    <ActionList.Item>
+      Label
+      <ActionList.Description className="testCustomClassnameColor">This is a description</ActionList.Description>
+    </ActionList.Item>
+  </ActionList>
+)
+
+export const VisualCustomClassname = () => (
+  <ActionList>
+    <ActionList.Item>
+      Label
+      <ActionList.LeadingVisual className="testCustomClassnameColor">
+        <FileDirectoryIcon />
+      </ActionList.LeadingVisual>
+    </ActionList.Item>
+  </ActionList>
+)