add cell highlighting aligment and no wrap

mucsi96 · Aug 25, 2024 · 80de8b6 · 80de8b6
1 parent 8e43b9f
commit 80de8b6
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 22 deletions.
diff --git a/src/Table/Table.css b/src/Table/Table.css
@@ -47,18 +47,22 @@ table[bt] {
     }
   }
 
-  th[right-align],
-  td[right-align] {
+  td[bt-highlighted] {
+    color: var(--bt-strong-text-color);
+  }
+
+  th[bt-right-align],
+  td[bt-right-align] {
     text-align: right;
   }
 
-  th[center-align],
-  td[center-align] {
+  th[bt-center-align],
+  td[bt-center-align] {
     text-align: center;
   }
 
-  th[no-wrap],
-  td[no-wrap] {
+  th[bt-no-wrap],
+  td[bt-no-wrap] {
     white-space: nowrap;
   }
 }
diff --git a/src/Table/Table.stories.ts b/src/Table/Table.stories.ts
@@ -20,24 +20,24 @@ export const Default: Story = {
       </thead>
       <tbody>
         <tr>
-          <td>Chris</td>
+          <td bt-no-wrap bt-right-align bt-highlighted>Chris</td>
           <td>HTML tables</td>
-          <td>22</td>
+          <td bt-center-align>22</td>
         </tr>
         <tr>
-          <td>Dennis</td>
+          <td bt-no-wrap bt-right-align bt-highlighted>Dennis</td>
           <td>Web accessibility</td>
-          <td>45</td>
+          <td bt-center-align>45</td>
         </tr>
         <tr>
-          <td>Sarah</td>
+          <td bt-no-wrap bt-right-align bt-highlighted>Sarah</td>
           <td>JavaScript frameworks</td>
-          <td>29</td>
+          <td bt-center-align>29</td>
         </tr>
         <tr>
-          <td>Karen</td>
+          <td bt-no-wrap bt-right-align bt-highlighted>Karen</td>
           <td>Web performance</td>
-          <td>36</td>
+          <td bt-center-align>36</td>
         </tr>
       </tbody>
     </table>`,
@@ -57,27 +57,27 @@ export const WithSelection: Story = {
       <tbody>
         <tr>
           <td bt-row-selector></td>
-          <td>Chris</td>
+          <td bt-no-wrap bt-right-align bt-highlighted>Chris</td>
           <td>HTML tables</td>
-          <td>22</td>
+          <td bt-center-align>22</td>
         </tr>
         <tr aria-selected="true">
           <td bt-row-selector></td>
-          <td>Dennis</td>
+          <td bt-no-wrap bt-right-align bt-highlighted>Dennis</td>
           <td>Web accessibility</td>
-          <td>45</td>
+          <td bt-center-align>45</td>
         </tr>
         <tr>
           <td bt-row-selector></td>
-          <td>Sarah</td>
+          <td bt-no-wrap bt-right-align bt-highlighted>Sarah</td>
           <td>JavaScript frameworks</td>
-          <td>29</td>
+          <td bt-center-align>29</td>
         </tr>
         <tr>
           <td bt-row-selector></td>
-          <td>Karen</td>
+          <td bt-no-wrap bt-right-align bt-highlighted>Karen</td>
           <td>Web performance</td>
-          <td>36</td>
+          <td bt-center-align>36</td>
         </tr>
       </tbody>
     </table>`,