Skip to content

v13.0.0
Compare
Choose a tag to compare
@github-actions github-actions released this 23 Apr 17:49
· 61 commits to master since this release
v13.0.0
3cb2034

BREAKING CHANGES

  • #3101 iconLabel is now a required prop. We've removed the default aria-label of Opens link in new window to better support internationalization. You must provide a value to iconLabel.
  • #3104 - maxWidth has been removed from the usePillModel. This config was used to style sub components. With the refactor to use data-part and stencils, it is no longer needed on the model. You can still apply maxWidth on the parent <Pill> element and the child elements will be styled accordingly.
    • Pill.Icon no longer has a default aria-labe="add". You must provide an aria-label for Pill.Icon to ensure proper accessibility. Our examples have been updated to reflect this change.
    • Pill.IconButton no longer has a default aria-label="remove". You must provide an aria-label for Pill.IconButton to ensure proper accessibility. Our examples have been updated to reflect this change.
    • Pill.Label is a required element when using other sub components like Pill.Icon to ensure that the label truncates correctly.
  • #3204 - If you're using [email protected], you'll need to upgrade to [email protected] to use Canvas Kit v13.

    Note: You'll need to update the way jsx transpiles. The automatic runtime feature, enabled through the @babel/preset-react preset with the runtime: "automatic" option, handles the importing of functions that JSX transpiles to.

  • #3201 There is a codemod that should catch a lot of instances but, if there is an instance that is not caught, users will have to update those names manually. See above table for name references.
  • #3217 The Expandable component has been promoted from Labs to Main. There is a codemod to handle the update of the imports.
  • #3231 The altText prop no longer has a default of "Avatar". You must provide an altText for <Avatar />, <Pill.Avatar />, <Expandable.Avatar /> to ensure proper accessibility. Our examples have been updated to reflect this change.
  • #3254 horizontal is no longer a supported value to the orientation prop on FormField and FormFieldGroup. Please use horizontalStart instead. This value was deprecated in v12 and a codemod was added to rename the value.
  • #3265 The Collection system cursor has been updated to support string | string[]. This won't affect direct comparisons like model.state.cursorId === x if your use-case doesn't use hierarchy. There may be some edge cases where your code is expecting the model.state.cursorId to be a string only. This will have to be updated.

Branding

  • feat: Promote new Dub logos and add codemod to handle change (#3201) (@josh-bagwell)
    We've removed the old Dub Logos in Main and promoted the new logos that were previously in our Preview package to Main as part of the brand refresh. We've also added a codemod to update the import statements as well as the name of the logos used to the new names.

    Old Logo Name New Logo Name
    dubLogoBlue dubLogoPrimary
    dubLogoWhite dubLogoReversed
    wdayLogoBlue wdayLogoPrimary
    wdayLogoWhite wdayLogoReversed

Components

  • feat: Refactor Skeleton to use our new styling utilities and new tokens (#3088) (@thunguyen19)
    We've updatedSkeleton to use our new Tokens and styling utilities. The React interface has not changed, but CSS variables are now used for dynamic properties.

  • feat: Refactor External Hyperlink to use new styling utilities (#3101) (@mannycarrera4, manuel.carrera)
    We've updated ExternalHyperlink to use our new styling utilities and tokens.

  • feat: Refactor Menu and its sub components to use our new styling utilities (#3114) (@mannycarrera4, manuel.carrera, @josh-bagwell)
    We've updated ExternalHyperlink to use our new styling utilities and tokens. Its API remains unchanged.

  • feat: Refactor LoadingSparkles component to use new styling utilities and tokens (#3120) (@NehaAhujaa, Neha Ahuja, @mannycarrera4)

  • feat: Refactor Tabs component to use new styling utilities and tokens (#3119) (@josh-bagwell)

  • feat: Refactor Tooltip component to use new styling utilities and tokens (#3164) (@josh-bagwell)

  • chore: Updated MenuItem and add CSProps to fix type check (@josh-bagwell)

  • Rename skeletonShape.tsx to SkeletonShape.tsx (@)

  • feat: Refactor Pill component to use new styling utilities and tokens (#3104) (@mannycarrera4, manuel.carrera, @josh-bagwell, @NicholasBoll)
    We've updated ExternalHyperlink to use our new styling utilities and tokens.

    • The border color on hover has been updated from licorice400 to licorice500 to match our design specs.
    • We've removed extra elements and leverage [flex box}(https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox) to ensure only the label receives overflow styles. When maxWidth is set, it is set on the parent <Pill/> element and the child elements will be styled accordingly. Before v13, maxWidth wasn't calculating the width of all its elements and wasn't a true pixel value.

  • feat: Refactor SidePanel to use new styling utilities and tokens (#3123) (@thunguyen19, @mannycarrera4)
    Refactored the SidePanel component in Preview to use new styling utilities and tokens.

  • chore: Update ActionBar to use new styling utils and tokens (#3205) (@JaredMaione)
    We've updated ActionBar to use our new tokens and styling utilities. The React interface has not changed.

  • fix: Update Pill styles based on spec (#3208) (@mannycarrera4, manuel.carrera)

  • feat: Refactor Banner component to use new styling utilities and tokens (#3210) (@NehaAhujaa, Neha Ahuja)
    Refactored the Banner component to use new system tokens and style utilities.

  • feat: Promote Expandable and add codemod to handle change (#3217) (@josh-bagwell)
    Promotion of the Expandable component from Labs to Main.

  • fix: Remove default altText for Avatar (#3231) (@NehaAhujaa, Neha Ahuja)
    Removed the default text for the altText prop on Avatar.

  • fix: Ensure stencils are exported for Pill (#3256) (@mannycarrera4, manuel.carrera)

  • feat: Remove horizontal value on FormField and FormFieldGroup orientation prop (#3254) (@mannycarrera4, manuel.carrera)

  • fix: Remove fragments if React isn't imported (#3261) (@mannycarrera4, manuel.carrera)

  • chore: Refactor Select Input to a single Stencil (#3240) (@mannycarrera4, manuel.carrera, @NicholasBoll)

  • feat: Use css transitions for sidepanel instead of animation (#3258) (@mannycarrera4, manuel.carrera, @RayRedGoose)
    When we supported IE 11 we needed to use animation to support animation events. Since we dropped support for IE11, we can now use css transitions to animate the width of the SidePanel when it's expanding or collapsing.

    As part of this change, we also removed the onAnimationStart prop. Since moving to transitions, React doesn't support onTransitionStart, therefore the prop is no longer needed.

  • feat(menu): Add support for hierarchy in the collection system (#3265) (@NicholasBoll)

Documentation

Infrastrcuture

  • feat: Update jsx flag in tsconfig to react-jsx (#3204) (@mannycarrera4, manuel.carrera, @josh-bagwell)
    We've updated the jsx flag in our tsconfig to react-jsx. As part of this change, we've also updated our peer dependencies for our packages to a minimum version of [email protected]. This change is to provide support for modern technologies like vite and ES modules.

Tokens

  • chore: Expandable component style refactor (#3128) (@williamjstanton, @josh-bagwell, manuel.carrera)
    • The ExpandableTarget component is now rendering the BaseButton component, and may have some small impact on the visual styling of the keyboard focus ring.
    • The ExpandableIcon stencil is extending the SystemIcon stencil, and may have had an impact on the chevron icon color.
    • Fixed an accessibility bug in the Avatar component where an aria-label string was rendered on a generic HTML element that did not have an explicit or implicit role
Assets 2
Loading