fix: design review

nl-design-system · Oct 11, 2024 · fb587ab · fb587ab
1 parent 9637521
commit fb587ab
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 7 deletions.
diff --git a/packages/components-css/navigation-list/_mixin.scss b/packages/components-css/navigation-list/_mixin.scss
@@ -26,13 +26,15 @@
   min-block-size: var(--rhc-navigation-list-item-min-height, var(--rhc-size-target));
   padding-block: var(--rhc-navigation-list-item-padding-block, var(--rhc-space-100));
   padding-inline: var(--rhc-navigation-list-item-padding-inline, var(--rhc-space-200));
+  position: relative;
   text-decoration: none;
   &:hover {
     background-color: var(--rhc-navigation-list-item-hover-background-color, var(--rhc-color-grijs-50));
   }
 
   &:focus {
     background-color: var(--rhc-navigation-list-item-focus-background-color, var(--rhc-color-lintblauw-50));
+    z-index: 999;
   }
 
   &:active {
@@ -55,7 +57,7 @@
   }
 }
 
-@mixin rhc-navigation-list__item__content {
+@mixin rhc-navigation-list__item-content {
   align-items: center;
   display: grid;
   flex: 1;

diff --git a/packages/components-css/navigation-list/index.scss b/packages/components-css/navigation-list/index.scss
@@ -8,8 +8,8 @@
   @include rhc-navigation-list;
   &__item {
     @include rhc-navigation-list__item;
-    &__content {
-      @include rhc-navigation-list__item__content;
+    &-content {
+      @include rhc-navigation-list__item-content;
     }
     &__label {
       @include rhc-navigation-list__item__label;
@@ -25,8 +25,11 @@
     }
   }
 }
+.rhc-navigation-list--container-small {
+  container-type: inline-size;
+}
 @container (width <= 768px) {
-  .rhc-navigation-list__item__content {
+  .rhc-navigation-list__item-content {
     grid-template-areas:
       "label label label end-icon"
       "content content content end-icon";

diff --git a/packages/components-react/src/NavigationListItem.tsx b/packages/components-react/src/NavigationListItem.tsx
@@ -21,7 +21,7 @@ export const NavigationListItem = forwardRef<HTMLLIElement, NavigationListItemPr
           ) : (
             <Icon className={clsx('rhc-navigation-list__item__start-icon')}>{icon}</Icon>
           )}
-          <span className={clsx('rhc-navigation-list__item__content')}>
+          <span className={clsx('rhc-navigation-list__item-content')}>
             <Heading className={clsx('rhc-navigation-list__item__label')} level={3}>
               {label}
             </Heading>

diff --git a/packages/storybook/src/community/navigation-list.stories.tsx b/packages/storybook/src/community/navigation-list.stories.tsx
@@ -46,7 +46,7 @@ export const Default: Story = {
 };
 export const SmallContainer: Story = {
   render: (args: NavigationListProps) => (
-    <div style={{ width: '380px', containerType: 'inline-size' }}>
+    <div className={'rhc-navigation-list--container-small'} style={{ width: '380px' }}>
       <NavigationList {...args}>
         <NavigationListItem
           description="Uw gegevens, familie en identiteitsbewijs"

diff --git a/proprietary/design-tokens/figma/figma.tokens.json b/proprietary/design-tokens/figma/figma.tokens.json
@@ -4194,7 +4194,7 @@
             "type": "size"
           },
           "padding-block": {
-            "value": "{rhc.space.100}",
+            "value": "{rhc.space.150}",
             "type": "space"
           },
           "padding-inline": {