feat(SimpleList): apply tokens (#9953)

patternfly · Jan 22, 2024 · e75ff01 · e75ff01
1 parent 0dfe65d
commit e75ff01
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 4 deletions.
diff --git a/packages/react-core/src/components/SimpleList/SimpleListItem.tsx b/packages/react-core/src/components/SimpleList/SimpleListItem.tsx
@@ -77,6 +77,7 @@ class SimpleListItem extends React.Component<SimpleListItemProps> {
                 className={css(
                   styles.simpleListItemLink,
                   isCurrentItem && styles.modifiers.current,
+                  !isButton && styles.modifiers.link,
                   componentClassName
                 )}
                 onClick={(evt: React.MouseEvent) => {

diff --git a/packages/react-core/src/components/SimpleList/examples/SimpleList.md b/packages/react-core/src/components/SimpleList/examples/SimpleList.md
@@ -10,15 +10,23 @@ propComponents: ['SimpleList', 'SimpleListGroup', 'SimpleListItem']
 ### Simple list
 
 ```ts file="SimpleListBasic.tsx"
+
+```
+
+### Simple list with links
+
+```ts file="SimpleListLinks.tsx"
+
 ```
 
 ### Grouped list
 
 ```ts file="SimpleListGrouped.tsx"
+
 ```
 
 ### Uncontrolled simple list
 
 ```ts file="SimpleListUncontrolled.tsx"
-```
 
+```
diff --git a/packages/react-core/src/components/SimpleList/examples/SimpleListBasic.tsx b/packages/react-core/src/components/SimpleList/examples/SimpleListBasic.tsx
@@ -6,9 +6,7 @@ export const SimpleListBasic: React.FunctionComponent = () => {
     <SimpleListItem key="item1" isActive>
       List item 1
     </SimpleListItem>,
-    <SimpleListItem key="item2" component="a" href="#">
-      List item 2
-    </SimpleListItem>,
+    <SimpleListItem key="item2">List item 2</SimpleListItem>,
     <SimpleListItem key="item3">List item 3</SimpleListItem>
   ];
 

diff --git a/packages/react-core/src/components/SimpleList/examples/SimpleListLinks.tsx b/packages/react-core/src/components/SimpleList/examples/SimpleListLinks.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { SimpleList, SimpleListItem } from '@patternfly/react-core';
+
+export const SimpleListLinks: React.FunctionComponent = () => {
+  const items = [
+    <SimpleListItem key="item1" component="a" href="#" isActive>
+      List item 1
+    </SimpleListItem>,
+    <SimpleListItem key="item2" component="a" href="#">
+      List item 2
+    </SimpleListItem>,
+    <SimpleListItem key="item3" component="a" href="#">
+      List item 3
+    </SimpleListItem>
+  ];
+
+  return <SimpleList aria-label="Simple List Links Example">{items}</SimpleList>;
+};