Design Migration
The transition from Admin UI to Shoreline 1.0 includes the update, addition, and removal of components. Understand what has changed and how to use the new resources.
Library
A new library was created for Shoreline components in Figma, so the Admin UI components won’t change to the Shoreline components automatically. Activate the Shoreline – Components library in your file to start using the new components. In ongoing files that use Admin UI and that will now use Shoreline, we recommend that you deactivate the Admin UI library to avoid confusion when applying foundations and components.
Migrating
Find below the list of Admin UI components and which Shoreline components and their variants replace them in Figma. If you want to know more about the components’ usage, consult their best practices documentation.
Alert
The previous info
and positive
variants are now called informational
and success
, respectively.
Anchor
The component is now called Link
.
Avatar
The component doesn’t exist in Shoreline 1.0. If necessary, use the Admin UI component and customize it with the Shoreline 1.0 foundations.
Bulk Actions
The component doesn’t exist in Shoreline 1.0. If necessary, use the Admin UI component and customize it with the Shoreline 1.0 foundations.
Button
tertiary neutral
was removed and should be replaced bytertiary
in most cases.critical secondary
was removed and should be replaced bytertiaryCritical
in most cases.- A button that includes only an icon now exists as a separate component called
IconButton
.
Card
The component doesn’t exist in Shoreline 1.0. Create and implement a card using the Shoreline 1.0 foundations. The border radius should be border-radius-medium
and the border color should be border-base
.
Checkbox
This component now only includes a single checkbox. For a group of checkboxes, use the the CheckboxGroup
component.
Combobox
The component doesn’t exist in Shoreline 1.0. If necessary, use the Admin UI component and customize it with the Shoreline 1.0 foundations.
Data View
The component is now called Collection
.
Date Picker
- The component now called
DatePicker
includes only a single date selection. - For a date range selection, use the new component
DateRangePicker
.
Divider
The component doesn’t exist in Shoreline 1.0. Create and implement a divider using the Shoreline 1.0 foundations. The border color should be border-base
and the stroke should be 1px.
Filter
This component now only includes a single filter. A group of filters can be implemented using the single filters.
Menu
secondary
andtertiary neutral
variants were removed and should be replaced bytertiary
in most cases.iconPosition start
andiconPosition end
variants were replaced bymore actions
andcustom label
variants respectively.
Modal
- The size variants continue the same.
- A modal that serves to confirm an action should use the new component
ConfirmationModal
.
Number Input
The component doesn’t exist in Shoreline 1.0. Use the TextInput
component and implement it in a way that accepts only numbers.
Page
The layout variants continue the same. Screen size variants were added.
Pagination
The component exists with the same name.
Popover
- Popover doesn’t exist as a separate component in Figma. It exists in code and can be implemented.
- Create a popover using the
content
component from the Support Elements library, the border radius should beborder-radius-medium
, the border color should beborder-base
, and the shadow should beshadow-1
.
Radio Group
The component exists with the same name.
Search
The component exists with the same name.
Select
The component exists with the same name.
Select Inline
The component doesn’t exist in Shoreline 1.0. If necessary, use the Admin UI component and customize it with the Shoreline 1.0 foundations.
Skeleton
The previous roundrect
variant is now called rect.
Spinner
white
was replaced byfg-inverted
.gray
was replaced byfg-soft
.blue
was replaced byfg-accent
.red
was replaced byfg-critical
.orange
was replaced byfg-warning
.green
was replaced byfg-success
.lightBlue
was replaced byfg-informational
.cyan
,pink
,purple
, andteal
were removed and should be replaced by one of the currently existing options, according to the scenario.yellow
was added.
Switch
The component doesn’t exist in Shoreline 1.0. Previous applications can be replaced with another more suitable component, such as a Checkbox if it is a binary selection that needs to be submitted, a Button if it represents an action that requires confirmation, or a custom solution. If it is the case of using a Switch – a binary selection that has an immediate effect – use the Admin UI component and customize it with the Shoreline 1.0 foundations.
Tab
The component is now called TabList
.
Tag
Tags now have two variants related to prominence: primary
and secondary
. Use according to your context. Size and color variants remain the same.
Text Area
The component exists with the same name.
Text Input
The component is now called Input
.
Toast
The previous info
and positive
variants are now called informational
and success
, respectively.
Tooltip
The component exists but its usage was refined. It can be replaced by a Tooltip
or a ContextualHelp
according to the scenario.
Totalizer
The component doesn’t exist in Shoreline 1.0. If necessary, use the Admin UI component and customize it with the Shoreline 1.0 foundations.
What is new
Components that didn’t exist in the Admin UI library and were added to Shoreline:
- Confirmation Modal
- Date Range Picker
- Empty State
- Icon Button
Understand their usage by reading their best practices documentation.