fix(fuselage): OptionInput margins and alignment (#1161)

RocketChat · Sep 12, 2023 · 8782385 · 8782385
1 parent 385170c
commit 8782385
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 9 deletions.
diff --git a/packages/fuselage/src/components/Menu/V2/Menu.stories.tsx b/packages/fuselage/src/components/Menu/V2/Menu.stories.tsx
@@ -120,7 +120,6 @@ export const MenuDisplayExample: ComponentStory<typeof Menu> = (args) => {
           <MenuItemContent>Extended</MenuItemContent>
           <MenuItemInput>
             <RadioButton
-              mi={16}
               onChange={() => setDisplay('extended')}
               checked={display === 'extended'}
             />
@@ -131,7 +130,6 @@ export const MenuDisplayExample: ComponentStory<typeof Menu> = (args) => {
           <MenuItemContent>Medium</MenuItemContent>
           <MenuItemInput>
             <RadioButton
-              mi={16}
               onChange={() => setDisplay('medium')}
               checked={display === 'medium'}
             />
@@ -142,7 +140,6 @@ export const MenuDisplayExample: ComponentStory<typeof Menu> = (args) => {
           <MenuItemContent>Condensed</MenuItemContent>
           <MenuItemInput>
             <RadioButton
-              mi={16}
               onChange={() => setDisplay('condensed')}
               checked={display === 'condensed'}
             />
@@ -166,7 +163,6 @@ export const MenuDisplayExample: ComponentStory<typeof Menu> = (args) => {
           <MenuItemContent>Activities</MenuItemContent>
           <MenuItemInput>
             <RadioButton
-              mi={16}
               onChange={() => setSortBy('activity')}
               checked={sortBy === 'activity'}
             />
@@ -177,7 +173,6 @@ export const MenuDisplayExample: ComponentStory<typeof Menu> = (args) => {
           <MenuItemContent>Name</MenuItemContent>
           <MenuItemInput>
             <RadioButton
-              mi={16}
               onChange={() => setSortBy('alphabetical')}
               checked={sortBy === 'alphabetical'}
             />
@@ -190,7 +185,6 @@ export const MenuDisplayExample: ComponentStory<typeof Menu> = (args) => {
           <MenuItemContent>Unread</MenuItemContent>
           <MenuItemInput>
             <CheckBox
-              mi={16}
               checked={groupByUnread}
               onChange={() => setGroupByUnread(!groupByUnread)}
             />
@@ -201,7 +195,6 @@ export const MenuDisplayExample: ComponentStory<typeof Menu> = (args) => {
           <MenuItemContent>Favorites</MenuItemContent>
           <MenuItemInput>
             <CheckBox
-              mi={16}
               checked={groupByFav}
               onChange={() => setGroupByFav(!groupByFav)}
             />
@@ -212,7 +205,6 @@ export const MenuDisplayExample: ComponentStory<typeof Menu> = (args) => {
           <MenuItemContent>Types</MenuItemContent>
           <MenuItemInput>
             <CheckBox
-              mi={16}
               checked={groupByTypes}
               onChange={() => setGroupByTypes(!groupByTypes)}
             />

diff --git a/packages/fuselage/src/components/Option/Option.styles.scss b/packages/fuselage/src/components/Option/Option.styles.scss
@@ -104,11 +104,12 @@ $variants: (
   &__input {
     display: flex;
 
-    justify-content: center;
+    justify-content: flex-end;
     align-items: center;
 
     min-width: lengths.size(20);
     min-height: lengths.size(20);
+    margin-inline-start: lengths.margin(16);
     margin-inline-end: lengths.margin(-12);
   }