diff --git a/stencil-workspace/src/components/modus-button/modus-button.vars.scss b/stencil-workspace/src/components/modus-button/modus-button.vars.scss index aa2683d47..a93d10075 100644 --- a/stencil-workspace/src/components/modus-button/modus-button.vars.scss +++ b/stencil-workspace/src/components/modus-button/modus-button.vars.scss @@ -1,9 +1,9 @@ // Default theme colors $btn-theme-colors: ( - 'primary': #0063a3, + 'primary': $col_blue, 'secondary': #6a6e79, - 'tertiary': #cbcdd6, - 'danger': #da212c, + 'tertiary': $col_gray_1, + 'danger': $col_red, ); $btn-hover-colors: ( 'primary': #0082d6, @@ -20,7 +20,7 @@ $btn-active-colors: ( // Default Outline $btn-outline-theme-colors: ( - 'primary': #0063a3, + 'primary': $col_blue, 'secondary': $col_trimble_gray, ); $btn-outline-hover: ( @@ -46,7 +46,7 @@ $btn-outline-active: ( // Default Borderless $modus-btn-borderless-bg: var(--modus-btn-text-primary-bg, transparent) !default; -$modus-btn-borderless-color: var(--modus-btn-text-primary-color, #0063a3) !default; +$modus-btn-borderless-color: var(--modus-btn-text-primary-color, $col_blue) !default; $modus-btn-borderless-secondary-color: var(--modus-btn-borderless-secondary-color, #000) !default; // Hover @@ -88,35 +88,44 @@ $modus-btn-disabled-border-color: var(--modus-btn-disabled-border-color) !defaul // Default Icon-only $btn-icon-only-theme-colors: ( - 'primary': #0063a3, + 'primary': $col_blue, 'secondary': $col_trimble_gray, 'tertiary': $col_gray_6, + 'danger': $col_red, ); $btn-icon-only-hover: ( + 'primary': ( + 'bg': #dcedf9, + 'color': $col_blue_light, + ), 'secondary': ( - 'bg': #e0e1e9, + 'bg': $col_gray_0, 'color': $col_gray_6, ), 'tertiary': ( - 'bg': #e0e1e9, + 'bg': $col_gray_0, 'color': $col_trimble_gray, ), - 'primary': ( - 'bg': #dcedf9, - 'color': #217cbb, + 'danger': ( + 'bg': $col_gray_0, + 'color': $col_red, ), ); $btn-icon-only-active: ( - 'tertiary': ( - 'bg': #cbcdd6, - 'color': $col_trimble_gray, + 'primary': ( + 'bg': rgba(0, 99, 163, 0.18), + 'color': #004f83, ), 'secondary': ( - 'bg': #cbcdd6, + 'bg': $col_gray_1, 'color': $col_trimble_gray, ), - 'primary': ( - 'bg': rgba(0, 99, 163, 0.18), - 'color': #004f83, + 'tertiary': ( + 'bg': $col_gray_1, + 'color': $col_trimble_gray, + ), + 'danger': ( + 'bg': $col_gray_1, + 'color': $col_red, ), ); diff --git a/stencil-workspace/src/components/modus-icons/readme.md b/stencil-workspace/src/components/modus-icons/readme.md index 501b73d6b..0dc0989ba 100644 --- a/stencil-workspace/src/components/modus-icons/readme.md +++ b/stencil-workspace/src/components/modus-icons/readme.md @@ -7,11 +7,11 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------- | --------- | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `color` | `color` | (optional) The color of the Icon | `string` | `undefined` | -| `name` | `name` | The name of the icon | `"window" \| "address" \| "code" \| "link" \| "map" \| "menu" \| "search" \| "table" \| "video" \| "filter" \| "image" \| "polygon" \| "frame" \| "more_vertical" \| "accessibility" \| "accessibility_circle" \| "add" \| "add_bold" \| "add_circle" \| "add_heavy" \| "advanced_instructions" \| "alarm_add" \| "alarm_off" \| "alarm_on" \| "alert" \| "alert_outlined" \| "align_bottom" \| "align_center_horiz" \| "align_center_vert" \| "align_left" \| "align_right" \| "align_top" \| "angle90" \| "antenna" \| "apps" \| "arc" \| "arrow_back" \| "arrow_down" \| "arrow_down_circle" \| "arrow_expand_diagonal_left" \| "arrow_expand_diagonal_right" \| "arrow_left" \| "arrow_left_circle" \| "arrow_next" \| "arrow_right" \| "arrow_right_circle" \| "arrow_up" \| "arrow_up_circle" \| "artificial_intelligence" \| "backup_restore_cloud" \| "backup_restore_file" \| "barcode" \| "bar_graph" \| "bar_graph_line" \| "bar_graph_square" \| "battery0_horizontal" \| "battery0_vertical" \| "battery25_horizontal" \| "battery25_vertical" \| "battery50_horizontal" \| "battery50_vertical" \| "battery75_horizontal" \| "battery75_vertical" \| "battery_charging_horizontal" \| "battery_charging_vertical" \| "battery_full_horizontal" \| "battery_full_vertical" \| "between" \| "bolt" \| "bookings" \| "bookings_open" \| "box_select" \| "briefcase" \| "brightness" \| "brush" \| "bug" \| "bug_report" \| "building_corporate" \| "buildings" \| "calculate" \| "calculator" \| "calculator_symbols" \| "calendar" \| "calendar_add" \| "calendar_and_key" \| "calendar_blank" \| "calendar_booking" \| "calendar_cancel" \| "calendar_check" \| "calendar_clock" \| "calendar_event" \| "calendar_loading_unloading" \| "calendar_loading_unloading_date" \| "calendar_plus" \| "calendar_rebook" \| "calendar_reserve" \| "calendar_show" \| "calendar_time_slot" \| "calendar_week" \| "camera" \| "camera_disabled" \| "cancel_circle" \| "cancel_square" \| "cancel_square_outlined" \| "caret_down" \| "caret_down_bold" \| "caret_left" \| "caret_left_bold" \| "caret_right" \| "caret_right_bold" \| "caret_up" \| "caret_up_bold" \| "cell_merge" \| "cell_properties" \| "cell_split" \| "certificate" \| "chat" \| "check" \| "check_bold" \| "check_circle" \| "check_circle_outlined" \| "check_heavy" \| "chevron_double_down" \| "chevron_double_left" \| "chevron_double_right" \| "chevron_double_up" \| "chevron_left" \| "chevron_left_bold" \| "chevron_right" \| "chevron_right_bold" \| "circle_notch" \| "circle_outline" \| "clipboard" \| "clipboard_actions" \| "clipboard_check" \| "clipboard_empty" \| "clipboard_planning" \| "clock" \| "clock_add" \| "clock_locked" \| "close" \| "close_bold" \| "close_heavy" \| "cloud" \| "cloud_connected" \| "cloud_disconnected" \| "cloud_download" \| "cloud_upload" \| "collapse" \| "collapse_bold" \| "color_picker" \| "column_copy" \| "column_cut" \| "column_delete" \| "column_insert_after" \| "column_insert_before" \| "column_paste_after" \| "column_paste_before" \| "column_properties" \| "columns" \| "combine" \| "comment" \| "compare_arrows" \| "compass" \| "component" \| "contacts" \| "contrast" \| "copy_content" \| "credit_card" \| "crop" \| "cube" \| "cursor" \| "cursor_add" \| "cursor_remove" \| "dashboard" \| "day_mostly_cloudy" \| "day_partly_cloudy" \| "delete" \| "delivery_truck" \| "delivery_truck_allocate" \| "delivery_truck_motion" \| "download" \| "download_line" \| "download_xls" \| "drag_corner" \| "drag_horizontal" \| "drag_indicator" \| "drag_vertical" \| "drivers" \| "drizzle" \| "drone" \| "earnings_statement" \| "email" \| "envelope" \| "eraser" \| "exclamation_mark" \| "expand" \| "expand_bold" \| "expand_less" \| "expand_less_bold" \| "expand_less_circle" \| "expand_more" \| "expand_more_bold" \| "expand_more_circle" \| "export" \| "factory" \| "fast_forward" \| "fast_rewind" \| "file" \| "file_bar_graph" \| "file_check_in" \| "file_check_out" \| "file_cloud" \| "file_copy" \| "file_edit" \| "file_merge" \| "file_missing" \| "file_new" \| "file_secure" \| "file_table" \| "file_type_bmpf" \| "file_type_csv" \| "file_type_cur" \| "file_type_doc" \| "file_type_ico" \| "file_type_key" \| "file_type_log" \| "file_type_numbers" \| "file_type_pdf" \| "file_type_rfi" \| "file_type_rfq" \| "file_type_rtf" \| "file_type_text" \| "file_type_tif" \| "file_type_tmp" \| "file_type_xls" \| "filter_list" \| "filter_off" \| "flag" \| "flag_finish" \| "floorplan" \| "flowchart" \| "fog" \| "folder_closed" \| "folder_locked" \| "folder_new" \| "folder_open" \| "folder_personal" \| "folder_project" \| "folder_public" \| "folder_share" \| "folder_unlocked" \| "footprints" \| "freight_market" \| "freight_matching" \| "freight_trolley" \| "full_screen" \| "gantt_chart" \| "gavel" \| "gears" \| "greater_than_equal_to" \| "group_items" \| "hail" \| "hail_heavy" \| "hail_light" \| "hammer" \| "hand" \| "hard_hat" \| "headset" \| "heart" \| "helicopter" \| "help" \| "help_outlined" \| "history" \| "home" \| "hourglass" \| "ice" \| "image_scene" \| "in_cab_device" \| "in_field_device" \| "info" \| "info_outlined" \| "info_token" \| "inspect" \| "invoice" \| "item_begins_with" \| "item_contains" \| "item_does_not_contain" \| "item_does_not_equal" \| "item_ends_with" \| "item_equals" \| "key" \| "keyboard" \| "keyboard_keys" \| "labs" \| "language" \| "launch" \| "launch_bold" \| "layer" \| "learn" \| "less_than_equal_to" \| "lightbulb_off" \| "lightbulb_on" \| "lightning" \| "line_diagonal" \| "line_graph" \| "link_broken" \| "link_off" \| "list_bulleted" \| "list_numbered" \| "location" \| "location_point" \| "lock" \| "lock_open" \| "magic_wand" \| "manage_accounts" \| "manage_people" \| "map2d" \| "map_marker" \| "map_markers" \| "map_poi" \| "master_data" \| "megaphone" \| "menu_circle" \| "mic" \| "mix" \| "monetarization" \| "moon" \| "more_circle" \| "more_horizontal" \| "mouse" \| "move" \| "move_last_down" \| "move_last_left" \| "move_last_right" \| "move_last_up" \| "night_mostly_cloudy" \| "night_partly_cloudy" \| "notifications" \| "notifications_off" \| "not_synced_bold" \| "object_mirror" \| "object_outline" \| "object_rotate" \| "offers" \| "overcast" \| "package" \| "package_delivered" \| "package_delivery" \| "package_missing" \| "package_pickup" \| "package_sent" \| "paint_bucket" \| "palette" \| "pan" \| "paperclip" \| "password" \| "pause_circle" \| "payment_instant" \| "pen" \| "pencil" \| "people_add" \| "people_couple" \| "people_group" \| "person" \| "person_account" \| "person_add" \| "person_clock" \| "person_edit" \| "person_remove" \| "phone" \| "phone_call" \| "phone_hang_up" \| "phone_mobile" \| "pin" \| "pin_add" \| "pin_straight" \| "pin_straight_cancel" \| "play_circle" \| "point_marker_tool" \| "polygon_area_tool" \| "polygon_concave" \| "polygon_cone" \| "polygon_drag_rectangle" \| "polygon_line_tool" \| "polygon_merge" \| "polygon_select" \| "printer" \| "pulse" \| "qr_code" \| "question" \| "quick_login" \| "rain" \| "raindrop" \| "rain_heavy" \| "rain_icy" \| "redo" \| "redo_bold" \| "refresh" \| "refresh_bold" \| "remove" \| "remove_bold" \| "remove_circle" \| "remove_heavy" \| "reply" \| "row_add" \| "row_copy" \| "row_cut" \| "row_delete" \| "row_highlighted" \| "row_insert_after" \| "row_insert_before" \| "row_paste_after" \| "row_paste_before" \| "row_properties" \| "rows_show_less" \| "rows_show_more" \| "rss_feed" \| "ruler" \| "satellite" \| "save_as" \| "save_disk" \| "scan_barcode" \| "schema" \| "scissors" \| "screen" \| "screenshot" \| "server" \| "server_round" \| "settings" \| "share" \| "shield" \| "shopping_cart" \| "shopping_cart_minus" \| "shopping_cart_plus" \| "shortcut" \| "shovel" \| "signal" \| "sign_in" \| "sign_out" \| "smiley_dissatisfied" \| "smiley_dissatisfied_outlined" \| "smiley_neutral" \| "smiley_neutral_outlined" \| "smiley_satisfied" \| "smiley_satisfied_outlined" \| "smiley_somewhat_dissatisfied" \| "smiley_somewhat_dissatisfied_outlined" \| "smiley_somewhat_satisfied" \| "smiley_somewhat_satisfied_outlined" \| "snowflake" \| "snowflakes" \| "snow_heavy" \| "snow_light" \| "snow_particle" \| "sort" \| "sort_alpha_down" \| "sort_alpha_up" \| "sort_arrow_down" \| "sort_arrow_up" \| "sort_down" \| "sort_up" \| "star" \| "star_half" \| "star_locked" \| "star_northern" \| "star_outlined" \| "stars" \| "stop_circle" \| "street_measurement" \| "submit_expense" \| "sun" \| "swap" \| "switch_account" \| "switch_left" \| "switch_right" \| "sync" \| "sync_bold" \| "sync_off" \| "tablet" \| "text_align_left" \| "text_align_right" \| "text_bold" \| "text_centered" \| "text_grow" \| "text_input" \| "text_input_long" \| "text_input_short" \| "text_italic" \| "text_marker" \| "text_shrink" \| "text_strikethrough" \| "text_truncated" \| "text_underlined" \| "thermometer_cold" \| "thermometer_hot" \| "thumbs_down" \| "thumbs_up" \| "thunderstorm_heavy" \| "thunderstorm_light" \| "ticket" \| "ticket_plane" \| "time_off_work" \| "timer" \| "timer_countdown" \| "timesheet" \| "timesheet_approve" \| "time_slot_not_reserved" \| "time_slot_reserved" \| "toggle_center" \| "toggle_left_panel" \| "toggle_off" \| "toggle_on" \| "toggle_right_panel" \| "traffic_cone" \| "tree_structure" \| "triangle_down" \| "triangle_left" \| "triangle_right" \| "triangle_up" \| "trimble_logo" \| "tune" \| "tune_circle" \| "uncombine" \| "undo" \| "undo_bold" \| "unfold_less" \| "unfold_more" \| "unsorted_arrows" \| "update" \| "upload" \| "upload_xls" \| "user_account" \| "user_active" \| "user_guide" \| "user_inactive" \| "user_passkey" \| "user_permissions" \| "video_add" \| "video_disabled" \| "view_grid" \| "view_list" \| "visibility_off" \| "visibility_on" \| "volume_down" \| "volume_mute" \| "volume_up" \| "vr_xr" \| "warning" \| "warning_outlined" \| "web" \| "wheelbarrow" \| "widgets" \| "wifi" \| "wifi_no_internet" \| "wifi_off" \| "wind" \| "window_dock_undock" \| "window_fit" \| "window_resize" \| "window_side_panel" \| "window_template" \| "window_views" \| "window_wireframe" \| "wintery_mix" \| "wrench" \| "zoom_box" \| "zoom_in" \| "zoom_out"` | `undefined` | -| `size` | `size` | (optional) The size of the Icon | `string` | `'16'` | +| Property | Attribute | Description | Type | Default | +| -------- | --------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `color` | `color` | (optional) The color of the Icon | `string` | `undefined` | +| `name` | `name` | The name of the icon | `"window" \| "address" \| "code" \| "link" \| "map" \| "menu" \| "search" \| "table" \| "video" \| "filter" \| "image" \| "polygon" \| "frame" \| "more_vertical" \| "accessibility" \| "accessibility_circle" \| "add" \| "add_bold" \| "add_circle" \| "add_heavy" \| "advanced_instructions" \| "alarm_add" \| "alarm_off" \| "alarm_on" \| "alert" \| "alert_outlined" \| "align_bottom" \| "align_center_horiz" \| "align_center_vert" \| "align_left" \| "align_right" \| "align_top" \| "angle90" \| "antenna" \| "apps" \| "arc" \| "arrow_back" \| "arrow_down" \| "arrow_down_circle" \| "arrow_expand_diagonal_left" \| "arrow_expand_diagonal_right" \| "arrow_left" \| "arrow_left_circle" \| "arrow_next" \| "arrow_right" \| "arrow_right_circle" \| "arrow_up" \| "arrow_up_circle" \| "artificial_intelligence" \| "backup_restore_cloud" \| "backup_restore_file" \| "barcode" \| "bar_graph" \| "bar_graph_line" \| "bar_graph_square" \| "battery0_horizontal" \| "battery0_vertical" \| "battery25_horizontal" \| "battery25_vertical" \| "battery50_horizontal" \| "battery50_vertical" \| "battery75_horizontal" \| "battery75_vertical" \| "battery_charging_horizontal" \| "battery_charging_vertical" \| "battery_full_horizontal" \| "battery_full_vertical" \| "between" \| "bolt" \| "bookings" \| "bookings_open" \| "box_select" \| "brightness" \| "brush" \| "bug" \| "bug_report" \| "building_corporate" \| "buildings" \| "calculate" \| "calculator" \| "calculator_symbols" \| "calendar" \| "calendar_add" \| "calendar_and_key" \| "calendar_blank" \| "calendar_booking" \| "calendar_cancel" \| "calendar_check" \| "calendar_clock" \| "calendar_event" \| "calendar_loading_unloading" \| "calendar_loading_unloading_date" \| "calendar_plus" \| "calendar_rebook" \| "calendar_reserve" \| "calendar_show" \| "calendar_time_slot" \| "calendar_week" \| "camera" \| "camera_disabled" \| "cancel_circle" \| "cancel_square" \| "cancel_square_outlined" \| "caret_down" \| "caret_down_bold" \| "caret_left" \| "caret_left_bold" \| "caret_right" \| "caret_right_bold" \| "caret_up" \| "caret_up_bold" \| "cell_merge" \| "cell_properties" \| "cell_split" \| "certificate" \| "chat" \| "check" \| "check_bold" \| "check_circle" \| "check_circle_outlined" \| "check_heavy" \| "chevron_double_down" \| "chevron_double_left" \| "chevron_double_right" \| "chevron_double_up" \| "chevron_left" \| "chevron_left_bold" \| "chevron_right" \| "chevron_right_bold" \| "circle_notch" \| "circle_outline" \| "clipboard" \| "clipboard_actions" \| "clipboard_check" \| "clipboard_empty" \| "clipboard_planning" \| "clock" \| "clock_add" \| "clock_locked" \| "close" \| "close_bold" \| "close_heavy" \| "cloud" \| "cloud_connected" \| "cloud_disconnected" \| "cloud_download" \| "cloud_upload" \| "collapse" \| "collapse_bold" \| "color_picker" \| "column_copy" \| "column_cut" \| "column_delete" \| "column_insert_after" \| "column_insert_before" \| "column_paste_after" \| "column_paste_before" \| "column_properties" \| "columns" \| "combine" \| "comment" \| "compare_arrows" \| "compass" \| "component" \| "contacts" \| "contrast" \| "copy_content" \| "credit_card" \| "crop" \| "cube" \| "cursor" \| "cursor_add" \| "cursor_remove" \| "dashboard" \| "day_mostly_cloudy" \| "day_partly_cloudy" \| "delete" \| "delivery_truck" \| "delivery_truck_allocate" \| "delivery_truck_motion" \| "download" \| "download_line" \| "download_xls" \| "drag_corner" \| "drag_horizontal" \| "drag_indicator" \| "drag_vertical" \| "drivers" \| "drizzle" \| "drone" \| "earnings_statement" \| "email" \| "envelope" \| "eraser" \| "exclamation_mark" \| "expand" \| "expand_bold" \| "expand_less" \| "expand_less_bold" \| "expand_less_circle" \| "expand_more" \| "expand_more_bold" \| "expand_more_circle" \| "export" \| "factory" \| "fast_forward" \| "fast_rewind" \| "file" \| "file_bar_graph" \| "file_check_in" \| "file_check_out" \| "file_cloud" \| "file_copy" \| "file_edit" \| "file_merge" \| "file_missing" \| "file_new" \| "file_table" \| "file_type_bmpf" \| "file_type_cur" \| "file_type_doc" \| "file_type_ico" \| "file_type_key" \| "file_type_log" \| "file_type_numbers" \| "file_type_pdf" \| "file_type_rfi" \| "file_type_rfq" \| "file_type_rtf" \| "file_type_text" \| "file_type_tif" \| "file_type_tmp" \| "file_type_xls" \| "filter_list" \| "filter_off" \| "flag" \| "flag_finish" \| "floorplan" \| "flowchart" \| "fog" \| "folder_closed" \| "folder_locked" \| "folder_new" \| "folder_open" \| "folder_personal" \| "folder_project" \| "folder_public" \| "folder_share" \| "folder_unlocked" \| "footprints" \| "freight_market" \| "freight_matching" \| "freight_trolley" \| "full_screen" \| "gantt_chart" \| "gavel" \| "gears" \| "greater_than_equal_to" \| "group_items" \| "hail" \| "hail_heavy" \| "hail_light" \| "hammer" \| "hand" \| "hard_hat" \| "headset" \| "heart" \| "helicopter" \| "help" \| "help_outlined" \| "history" \| "home" \| "hourglass" \| "ice" \| "image_scene" \| "in_cab_device" \| "in_field_device" \| "info" \| "info_outlined" \| "info_token" \| "inspect" \| "invoice" \| "item_begins_with" \| "item_contains" \| "item_does_not_contain" \| "item_does_not_equal" \| "item_ends_with" \| "item_equals" \| "key" \| "keyboard" \| "keyboard_keys" \| "labs" \| "language" \| "launch" \| "launch_bold" \| "layer" \| "learn" \| "less_than_equal_to" \| "lightbulb_off" \| "lightbulb_on" \| "lightning" \| "line_diagonal" \| "line_graph" \| "link_broken" \| "link_off" \| "list_bulleted" \| "list_numbered" \| "location" \| "location_point" \| "lock" \| "lock_open" \| "magic_wand" \| "manage_accounts" \| "map2d" \| "map_marker" \| "map_markers" \| "map_poi" \| "master_data" \| "megaphone" \| "menu_circle" \| "mic" \| "mix" \| "monetarization" \| "moon" \| "more_circle" \| "more_horizontal" \| "mouse" \| "move" \| "move_last_down" \| "move_last_left" \| "move_last_right" \| "move_last_up" \| "night_mostly_cloudy" \| "night_partly_cloudy" \| "notifications" \| "notifications_off" \| "not_synced_bold" \| "object_mirror" \| "object_outline" \| "object_rotate" \| "offers" \| "overcast" \| "package" \| "package_delivered" \| "package_delivery" \| "package_missing" \| "package_pickup" \| "package_sent" \| "paint_bucket" \| "palette" \| "pan" \| "paperclip" \| "password" \| "pause_circle" \| "payment_instant" \| "pen" \| "pencil" \| "people_add" \| "people_couple" \| "people_group" \| "person" \| "person_account" \| "person_add" \| "person_clock" \| "person_edit" \| "person_remove" \| "phone" \| "phone_call" \| "phone_hang_up" \| "phone_mobile" \| "pin" \| "pin_add" \| "pin_straight" \| "pin_straight_cancel" \| "play_circle" \| "point_marker_tool" \| "polygon_area_tool" \| "polygon_concave" \| "polygon_cone" \| "polygon_drag_rectangle" \| "polygon_line_tool" \| "polygon_merge" \| "polygon_select" \| "printer" \| "pulse" \| "qr_code" \| "question" \| "quick_login" \| "rain" \| "raindrop" \| "rain_heavy" \| "rain_icy" \| "redo" \| "redo_bold" \| "refresh" \| "refresh_bold" \| "remove" \| "remove_bold" \| "remove_circle" \| "remove_heavy" \| "reply" \| "row_add" \| "row_copy" \| "row_cut" \| "row_delete" \| "row_highlighted" \| "row_insert_after" \| "row_insert_before" \| "row_paste_after" \| "row_paste_before" \| "row_properties" \| "rows_show_less" \| "rows_show_more" \| "rss_feed" \| "ruler" \| "satellite" \| "save_as" \| "save_disk" \| "scan_barcode" \| "schema" \| "scissors" \| "screen" \| "screenshot" \| "server" \| "server_round" \| "settings" \| "share" \| "shield" \| "shopping_cart" \| "shopping_cart_minus" \| "shopping_cart_plus" \| "shortcut" \| "shovel" \| "signal" \| "sign_in" \| "sign_out" \| "smiley_dissatisfied" \| "smiley_dissatisfied_outlined" \| "smiley_neutral" \| "smiley_neutral_outlined" \| "smiley_satisfied" \| "smiley_satisfied_outlined" \| "smiley_somewhat_dissatisfied" \| "smiley_somewhat_dissatisfied_outlined" \| "smiley_somewhat_satisfied" \| "smiley_somewhat_satisfied_outlined" \| "snowflake" \| "snowflakes" \| "snow_heavy" \| "snow_light" \| "snow_particle" \| "sort" \| "sort_alpha_down" \| "sort_alpha_up" \| "sort_arrow_down" \| "sort_arrow_up" \| "sort_down" \| "sort_up" \| "star" \| "star_half" \| "star_locked" \| "star_northern" \| "star_outlined" \| "stars" \| "stop_circle" \| "street_measurement" \| "submit_expense" \| "sun" \| "swap" \| "switch_account" \| "switch_left" \| "switch_right" \| "sync" \| "sync_bold" \| "sync_off" \| "tablet" \| "text_align_left" \| "text_align_right" \| "text_bold" \| "text_centered" \| "text_grow" \| "text_input" \| "text_input_long" \| "text_input_short" \| "text_italic" \| "text_marker" \| "text_shrink" \| "text_strikethrough" \| "text_truncated" \| "text_underlined" \| "thermometer_cold" \| "thermometer_hot" \| "thumbs_down" \| "thumbs_up" \| "thunderstorm_heavy" \| "thunderstorm_light" \| "ticket" \| "ticket_plane" \| "time_off_work" \| "timer" \| "timer_countdown" \| "timesheet" \| "time_slot_not_reserved" \| "time_slot_reserved" \| "toggle_center" \| "toggle_left_panel" \| "toggle_off" \| "toggle_on" \| "toggle_right_panel" \| "traffic_cone" \| "tree_structure" \| "triangle_down" \| "triangle_left" \| "triangle_right" \| "triangle_up" \| "trimble_logo" \| "tune" \| "tune_circle" \| "uncombine" \| "undo" \| "undo_bold" \| "unfold_less" \| "unfold_more" \| "unsorted_arrows" \| "update" \| "upload" \| "upload_xls" \| "user_account" \| "user_active" \| "user_guide" \| "user_inactive" \| "user_passkey" \| "user_permissions" \| "video_add" \| "video_disabled" \| "view_grid" \| "view_list" \| "visibility_off" \| "visibility_on" \| "volume_down" \| "volume_mute" \| "volume_up" \| "vr_xr" \| "warning" \| "warning_outlined" \| "web" \| "wheelbarrow" \| "widgets" \| "wifi" \| "wifi_no_internet" \| "wifi_off" \| "wind" \| "window_dock_undock" \| "window_fit" \| "window_resize" \| "window_side_panel" \| "window_template" \| "window_views" \| "window_wireframe" \| "wintery_mix" \| "wrench" \| "zoom_box" \| "zoom_in" \| "zoom_out"` | `undefined` | +| `size` | `size` | (optional) The size of the Icon | `string` | `'16'` | ## Events diff --git a/stencil-workspace/src/components/modus-table/models/modus-table.models.ts b/stencil-workspace/src/components/modus-table/models/modus-table.models.ts index 435fcacd8..487fd204e 100644 --- a/stencil-workspace/src/components/modus-table/models/modus-table.models.ts +++ b/stencil-workspace/src/components/modus-table/models/modus-table.models.ts @@ -12,6 +12,7 @@ import { VisibilityState, } from '@tanstack/table-core'; import { BadgeProperties } from '../../modus-badge/modus-badge'; +import { ButtonColor } from '../../modus-button/modus-button.models'; import { COLUMN_DEF_DATATYPE_INTEGER, COLUMN_DEF_DATATYPE_LINK, @@ -65,6 +66,7 @@ export type ModusTableSortingFunction = SortingFnOption boolean; diff --git a/stencil-workspace/src/components/modus-table/parts/row/actions/modus-table-row-actions/modus-table-row-actions.tsx b/stencil-workspace/src/components/modus-table/parts/row/actions/modus-table-row-actions/modus-table-row-actions.tsx index d1b926faf..d33329aaa 100644 --- a/stencil-workspace/src/components/modus-table/parts/row/actions/modus-table-row-actions/modus-table-row-actions.tsx +++ b/stencil-workspace/src/components/modus-table/parts/row/actions/modus-table-row-actions/modus-table-row-actions.tsx @@ -67,13 +67,13 @@ export class ModusTableRowActions { } return ( - {actionButtons?.map(({ label, icon, id, isDisabled = () => false }) => { + {actionButtons?.map(({ label, icon, iconColor, id, isDisabled = () => false }) => { const disabled = isDisabled(this.row.original); return ( boolean; diff --git a/stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx b/stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx index 6349baac9..1557d25c6 100644 --- a/stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx +++ b/stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx @@ -968,6 +968,7 @@ RowActions.args = { { id: '1', icon: 'add', + iconColor: 'primary', label: 'Add', index: 0, }, @@ -981,7 +982,8 @@ RowActions.args = { { id: '3', - icon: 'cancel', + icon: 'cancel_circle', + iconColor: 'danger', label: 'Cancel', index: 2, },