Skip to content

Commit

Permalink
fix(styles): restyle Shellbar search to match latest UXC design [ci v…
Browse files Browse the repository at this point in the history 
…isual]
  • Loading branch information
@InnaAtanasova
InnaAtanasova committed Jan 28, 2025
1 parent de54849 commit c87132c
Show file tree
Hide file tree
Showing 9 changed files with 719 additions and 229 deletions.
380 changes: 156 additions & 224 deletions packages/styles/src/shellbar.scss
View file

Large diffs are not rendered by default.

48 changes: 48 additions & 0 deletions packages/styles/src/theming/common/shellbar/_sap_fiori.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,4 +49,52 @@
--fdShellbar_Branding_Hover_Border_Color: transparent;
--fdShellbar_Branding_Active_Border_Color: transparent;
--fdShellbar_Button_Outline_Color: var(--sapContent_ContrastFocusColor);

// Search Field
--fdShellbar_SearchField_Background_Color_Hover: transparent;
--fdShellbar_SearchField_Background_Color_Active: transparent;

// Search Field Input
--fdShellbar_SearchField_Input_Background_Hover: var(--sapShell_Hover_Background);
--fdShellbar_SearchField_Input_Background_Active: var(--sapShellColor);
--fdShellbar_SearchField_Input_Background_Focus: var(--sapShellColor);
--fdShellbar_SearchField_Input_Border: var(--sapField_BorderWidth) solid var(--sapShell_InteractiveBorderColor);
--fdShellbar_SearchField_Input_Border_Hover: var(--sapField_BorderWidth) solid var(--sapShell_InteractiveBorderColor);
--fdShellbar_SearchField_Input_Border_Active: var(--sapField_BorderWidth) solid var(--sapShell_InteractiveBorderColor);
--fdShellbar_SearchField_Input_Border_Radius: var(--sapField_BorderCornerRadius);
--fdShellbar_SearchField_Input_Placeholder_TextColor: var(--sapShell_InteractiveTextColor);
--fdShellbar_SearchField_Input_Text_Color: var(--sapShell_TextColor);
--fdShellbar_SearchField_Input_Outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapShell_TextColor);
--fdShellbar_SearchField_Input_Outline_Offset: -0.1875rem;

// Search Field Addon
--fdShellbar_SearchField_Addon_Margin_Inline: 0.25rem 0;

// Search Field Button
--fdShellbar_SearchField_Button_Width: 2.25rem;
--fdShellbar_SearchField_Button_Height: 2.25rem;
--fdShellbar_SearchField_Button_Border_Radius: var(--sapField_BorderCornerRadius);
--fdShellbar_SearchField_Button_Focus_Inset: 0.0625rem;

// Search Field Submit Button
--fdShellbar_SearchField_Submit_Button_Color: var(--sapButton_Emphasized_TextColor);
--fdShellbar_SearchField_Submit_Button_Background_Color: var(--sapShell_Active_Background);
--fdShellbar_SearchField_Submit_Button_Background_Color_Hover: var(--sapShell_Hover_Background);
--fdShellbar_SearchField_Submit_Button_Border_Color: var(--sapShell_Active_Background);
--fdShellbar_SearchField_Submit_Button_Border_Color_Hover: var(--sapShell_Hover_Background);

// Search Field Category
--fdShell_Search_Field_Category_Divider_Display: none;
--fdShell_Search_Field_Category_Margin_End: 0.25rem;

// Search Field Category Dropdown
--fdShell_Search_Dropdown_Height: 2.25rem;
--fdShell_Search_Dropdown_Border_Radius: var(--sapField_BorderCornerRadius);
--fdShell_Search_Dropdown_Button_Radius: var(--sapField_BorderCornerRadius);
--fdShell_Search_Dropdown_Box_Shadow_Hover: var(--sapField_Hover_Shadow);
--fdShell_Search_Dropdown_Active_Background: transparent;
--fdShell_Search_Dropdown_Hover_Background: transparent;

// Search Category
--fdShell_Search_Category_Border: var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapShell_InteractiveBorderColor);
}
25 changes: 25 additions & 0 deletions packages/styles/src/theming/common/shellbar/_sap_fiori_hc.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,16 @@
@import "./sap_fiori";

:root {
// Search Field Input
--fdShellbar_SearchField_Input_Border_Radius: 0;
--fdShellbar_SearchField_Input_Outline_Offset: -0.25rem;

// Search Field Button
--fdShellbar_SearchField_Button_Border_Radius: var(--sapButton_BorderCornerRadius);
--fdShellbar_SearchField_Submit_Button_Border_Color: var(--sapButton_Lite_BorderColor);
--fdShellbar_SearchField_Submit_Button_Border_Color_Hover: var(--sapButton_Lite_BorderColor);

// Search Field Submit Button
--fdShellbar_Button_Hover_Border_Color: var(--sapButton_Lite_BorderColor);
--fdShellbar_Button_Active_Border_Color: var(--sapButton_Lite_Active_BorderColor);
--fdShellbar_Button_Outline_Color: var(--sapContent_FocusColor);
Expand All @@ -11,4 +21,19 @@
--fdShellbar_Search_Active_Button_Background: transparent;
--fdShellbar_Search_Separator_Display: none;
--fdShellbar_Input_Placeholder_Style: normal;

// Search Field Category
--fdShell_Search_Field_Category_Divider_Display: none;
--fdShell_Search_Field_Category_Margin_End: 0.25rem;

// Search Field Category Dropdown
--fdShell_Search_Dropdown_Height: 2.25rem;
--fdShell_Search_Dropdown_Border_Radius: 0;
--fdShell_Search_Dropdown_Button_Radius: 0;
--fdShell_Search_Dropdown_Box_Shadow_Hover: -0.0625rem 0 0 0 var(--sapContent_ShadowColor);
--fdShell_Search_Dropdown_Active_Background: transparent;
--fdShell_Search_Dropdown_Hover_Background: transparent;

// Search Category
--fdShell_Search_Category_Border: var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapShell_InteractiveBorderColor);
}
52 changes: 52 additions & 0 deletions packages/styles/src/theming/common/shellbar/_sap_horizon.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,4 +51,56 @@
--fdShellbar_Branding_Hover_Border_Color: var(--sapButton_Lite_Hover_BorderColor);
--fdShellbar_Branding_Active_Border_Color: var(--sapButton_Lite_Active_BorderColor);
--fdShellbar_Button_Outline_Color: var(--sapContent_FocusColor);

// Search Field
--fdShellbar_SearchField_Shadow: var(--sapField_Shadow);
--fdShellbar_SearchField_Border_Radius: 1.125rem;
--fdShellbar_SearchField_Background_Color_Hover: var(--sapShell_Hover_Background);
--fdShellbar_SearchField_Background_Color_Active: var(--sapShell_Active_Background);

// Search Field Input
--fdShellbar_SearchField_Input_Border: none;
--fdShellbar_SearchField_Input_Border_Hover: none;
--fdShellbar_SearchField_Input_Border_Active: none;
--fdShellbar_SearchField_Input_Background_Regular: transparent;
--fdShellbar_SearchField_Input_Background_Hover: transparent;
--fdShellbar_SearchField_Input_Background_Active: transparent;
--fdShellbar_SearchField_Input_Background_Focus: transparent;
--fdShellbar_SearchField_Input_Outline: none;
--fdShellbar_SearchField_Input_Border_Radius: 0;
--fdShellbar_SearchField_Input_Outline_Offset: 0;
--fdShellbar_SearchField_Input_Padding_Inline: 0.875rem 0.25rem;
--fdShellbar_SearchField_Input_Text_Color: var(--sapField_TextColor);
--fdShellbar_SearchField_Input_Placeholder_TextColor: var(--sapField_PlaceholderTextColor);

// Search Field Addon
--fdShellbar_SearchField_Addon_Margin_Inline: 0 0.25rem;

// Search Field Button
--fdShellbar_SearchField_Button_Width: 1.75rem;
--fdShellbar_SearchField_Button_Height: 1.625rem;
--fdShellbar_SearchField_Button_Border_Radius: 1.063rem;
--fdShellbar_SearchField_Button_Focus_Inset: -0.0625rem;

// Search Field Submit Button
--fdShellbar_SearchField_Submit_Button_Color: var(--sapButton_Emphasized_TextColor);
--fdShellbar_SearchField_Submit_Button_Background_Color: var(--sapButton_Emphasized_Background);
--fdShellbar_SearchField_Submit_Button_Background_Color_Hover: var(--sapButton_Emphasized_Hover_Background);
--fdShellbar_SearchField_Submit_Button_Border_Color: var(--sapButton_Emphasized_BorderColor);
--fdShellbar_SearchField_Submit_Button_Border_Color_Hover: var(--sapButton_Emphasized_Hover_BorderColor);

// Search Field Category
--fdShell_Search_Field_Category_Divider_Display: block;
--fdShell_Search_Field_Category_Margin_End: 0;

// Search Field Category Dropdown
--fdShell_Search_Dropdown_Height: 1.75rem;
--fdShell_Search_Dropdown_Border_Radius: 1.125rem;
--fdShell_Search_Dropdown_Button_Radius: 1.125rem;
--fdShell_Search_Dropdown_Box_Shadow_Hover: var(--sapField_Hover_Shadow);
--fdShell_Search_Dropdown_Active_Background: var(--sapShell_Active_Background);
--fdShell_Search_Dropdown_Hover_Background: var(--sapShell_Hover_Background);

// Search Category
--fdShell_Search_Category_Border: var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);
}
45 changes: 45 additions & 0 deletions packages/styles/src/theming/common/shellbar/_sap_horizon_hc.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,49 @@
--fdShellbar_Button_Left_Border: solid 0.0625rem var(--fdShellbar_Search_Active_Button_Color);
--fdShellbar_Helper_Bottom_Shadow: none;
--fdShellbar_Hover_Helper_Bottom_Shadow: none;

// Search Field
--fdShellbar_SearchField_Border_Radius: 0;
--fdShellbar_SearchField_Shadow: var(--sapField_Shadow);
--fdShellbar_SearchField_Background_Color_Hover: transparent;

// Search Field Input
--fdShellbar_SearchField_Input_Border: var(--sapElement_BorderWidth) solid var(--sapShell_InteractiveBorderColor);
--fdShellbar_SearchField_Input_Border_Hover: var(--sapElement_BorderWidth) solid var(--sapShell_InteractiveBorderColor);
--fdShellbar_SearchField_Input_Border_Active: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapShell_InteractiveBorderColor);
--fdShellbar_SearchField_Input_Background_Regular: var(--sapShell_InteractiveBackground);
--fdShellbar_SearchField_Input_Background_Hover: var(--sapShell_Hover_Background);
--fdShellbar_SearchField_Input_Background_Active: var(--sapShell_Active_Background);
--fdShellbar_SearchField_Input_Background_Focus: var(--sapShell_Active_Background);
--fdShellbar_SearchField_Input_Padding_Inline: 0.8125rem 0.25rem;
--fdShellbar_SearchField_Input_Border_Radius: 0;
--fdShellbar_SearchField_Input_Outline: none;
--fdShellbar_SearchField_Input_Outline_Offset: 0;

// Search Field Addon
--fdShellbar_SearchField_Addon_Margin_Inline: 0.25rem 0;

// Search Field Button
--fdShellbar_SearchField_Button_Width: 2.25rem;
--fdShellbar_SearchField_Button_Height: 2.25rem;
--fdShellbar_SearchField_Button_Border_Radius: var(--sapButton_BorderCornerRadius);
--fdShellbar_SearchField_Button_Focus_Inset: 0.0625rem;

// Search Field Submit Button
--fdShellbar_SearchField_Submit_Button_Background_Color: var(--sapShell_Active_Background);
--fdShell_Search_Field_Category_Margin_End: 0.25rem;

// Search Field Category
--fdShell_Search_Field_Category_Divider_Display: none;

// Search Field Category Dropdown
--fdShell_Search_Dropdown_Height: 2.25rem;
--fdShell_Search_Dropdown_Border_Radius: 0;
--fdShell_Search_Dropdown_Button_Radius: 0;
--fdShell_Search_Dropdown_Box_Shadow_Hover: -0.0625rem 0 0 0 var(--sapContent_ShadowColor);
--fdShell_Search_Dropdown_Active_Background: transparent;
--fdShell_Search_Dropdown_Hover_Background: transparent;

// Search Category
--fdShell_Search_Category_Border: var(--sapElement_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);
}
4 changes: 3 additions & 1 deletion packages/styles/src/theming/sap_fiori_3_light_dark.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,9 @@
--fdShellbar_Input_Placeholder_Color: var(--sapShell_InteractiveTextColor);
--fdShellbar_Input_Border_Radius: var(--sapField_BorderCornerRadius);
--fdShellbar_Input_Hover_Border_Color: var(--sapShell_InteractiveBorderColor);
--fdShellbar_Input_Addon_Dimension: 2.25rem;
--fdShellbar_Input_Addon_Width: 2.25rem;
--fdShellbar_Input_Addon_Height: 2.25rem;
--fdShellbar_Input_Addon_Margin_Inline: 0 0.25rem;
--fdShellbar_Input_Addon_Border_Width: 0;

/** Message Page */
Expand Down
3 changes: 1 addition & 2 deletions packages/styles/stories/Components/shellbar/optional-items.example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,8 +188,7 @@
<input
aria-label="search-input"
type="text"
onfocus="addClass('JKHhjk7234k22', 'is-focus')"
onblur="removeClass('JKHhjk7234k22', 'is-focus')"

class="fd-input fd-input-group__input fd-shellbar__search-field-input"
id="F4GcX348b1"
placeholder="Search everything"
Expand Down
Loading

0 comments on commit c87132c

Please sign in to comment.