From d0f0e41350327918911169f04eb6d6d59a83f904 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Sat, 30 Dec 2023 15:37:47 +0100 Subject: [PATCH] chore: remove "dot-syntax" from examples --- .../Usage/PaginationExampleControlled.js | 10 +- .../Usage/PaginationExampleOptions.js | 45 +++-- .../Portal/Types/PortalExampleControlled.js | 13 +- .../Portal/Types/PortalExamplePortal.js | 23 ++- .../Radio/States/RadioExampleDisabled.js | 10 +- .../Radio/Types/RadioExampleRadioGroup.js | 14 +- .../examples/addons/TextArea/Usage/index.js | 7 +- .../TransitionablePortalExampleTransition.js | 14 +- .../Content/BreadcrumbExampleDivider.js | 16 +- .../Content/BreadcrumbExampleIconDivider.js | 16 +- .../Content/BreadcrumbExampleLink.js | 18 +- .../Content/BreadcrumbExampleSection.js | 12 +- .../Breadcrumb/Types/BreadcrumbExample.js | 16 +- .../Variations/BreadcrumbExampleSize.js | 17 +- .../Form/Content/FormExampleField.js | 6 +- .../FieldVariations/FormExampleInlineField.js | 6 +- .../FormExampleRequiredField.js | 6 +- .../FormExampleRequiredFieldShorthand.js | 8 +- .../FieldVariations/FormExampleWidthField.js | 32 ++-- .../collections/Form/FieldVariations/index.js | 2 +- .../FormExampleEvenlyDividedGroup.js | 18 +- .../FormExampleInlineGroupedFields.js | 18 +- .../FormExampleUnstackableGroup.js | 26 ++- .../collections/Form/GroupVariations/index.js | 4 +- .../Form/Shorthand/FormExampleFieldControl.js | 28 +-- .../Shorthand/FormExampleFieldControlHTML.js | 34 ++-- .../Shorthand/FormExampleFieldControlId.js | 26 ++- .../Shorthand/FormExampleFieldLabelElement.js | 4 +- .../Shorthand/FormExampleFieldLabelObject.js | 4 +- .../FormExampleSubcomponentControl.js | 37 ++-- .../Shorthand/FormExampleSubcomponentId.js | 10 +- .../collections/Form/Shorthand/index.js | 20 +- .../Form/States/FormExampleError.js | 4 +- .../Form/States/FormExampleFieldDisabled.js | 10 +- .../Form/States/FormExampleFieldError.js | 20 +- .../Form/States/FormExampleFieldErrorLabel.js | 8 +- .../Form/States/FormExampleFieldReadOnly.js | 10 +- .../Form/States/FormExampleLoading.js | 4 +- .../Form/States/FormExampleSuccess.js | 4 +- .../Form/States/FormExampleWarning.js | 4 +- .../collections/Form/Types/FormExampleForm.js | 14 +- .../examples/collections/Form/Types/index.js | 6 +- .../Form/Usage/FormExampleCaptureValues.js | 12 +- .../Form/Usage/FormExampleClearOnSubmit.js | 12 +- .../examples/collections/Form/Usage/index.js | 8 +- .../Form/Variations/FormExampleInverted.js | 19 +- .../Form/Variations/FormExampleSize.js | 10 +- .../Form/Variations/FormExampleUnstackable.js | 18 +- .../Grid/Content/GridExampleColumns.js | 26 +-- .../Grid/Content/GridExampleRows.js | 30 +-- .../GridExampleContainer.js | 14 +- .../GridExampleDoubling.js | 22 +-- .../ResponsiveVariations/GridExampleOnly.js | 94 +++++----- .../GridExampleOnlyMultiple.js | 38 ++-- .../GridExampleResponsiveWidth.js | 38 ++-- .../GridExampleReversedComputer.js | 26 +-- .../GridExampleReversedComputerVertically.js | 26 +-- .../GridExampleReversedMobile.js | 10 +- .../GridExampleReversedMobileVertically.js | 26 +-- .../GridExampleReversedMultiple.js | 12 +- .../GridExampleReversedTablet.js | 10 +- .../GridExampleReversedTabletVertically.js | 26 +-- .../GridExampleStackable.js | 10 +- .../Grid/Types/GridExampleCelled.js | 30 +-- .../Grid/Types/GridExampleCelledInternally.js | 34 ++-- .../Grid/Types/GridExampleDividedNumber.js | 34 ++-- .../Grid/Types/GridExampleDividedPhrase.js | 34 ++-- .../Types/GridExampleDividedVertically.js | 30 +-- .../collections/Grid/Types/GridExampleGrid.js | 6 +- .../Grid/Variations/GridExampleCentered.js | 42 ++--- .../Variations/GridExampleColoredColumn.js | 6 +- .../Grid/Variations/GridExampleColoredRow.js | 8 +- .../Grid/Variations/GridExampleColumnCount.js | 62 +++---- .../Grid/Variations/GridExampleColumnWidth.js | 14 +- .../Variations/GridExampleEqualWidthColumn.js | 14 +- .../Variations/GridExampleEqualWidthRow.js | 50 ++--- .../Grid/Variations/GridExampleFloated.js | 10 +- .../Grid/Variations/GridExampleInverted.js | 18 +- .../Grid/Variations/GridExamplePadded.js | 10 +- .../GridExamplePaddedHorizontally.js | 10 +- .../Variations/GridExamplePaddedVertically.js | 10 +- .../Grid/Variations/GridExampleRelaxed.js | 18 +- .../Grid/Variations/GridExampleRelaxedVery.js | 18 +- .../Grid/Variations/GridExampleStretched.js | 18 +- .../Variations/GridExampleStretchedEqual.js | 34 ++-- .../GridExampleTextAlignmentCenter.js | 28 +-- .../GridExampleTextAlignmentMixed.js | 36 ++-- .../GridExampleTextAlignmentRight.js | 28 +-- .../GridExampleVerticalAlignment.js | 18 +- .../GridExampleVerticalAlignmentRow.js | 50 ++--- .../Menu/Content/MenuExampleButtons.js | 10 +- .../Menu/Content/MenuExampleDropdownItem.js | 12 +- .../Menu/Content/MenuExampleHeader.js | 10 +- .../Menu/Content/MenuExampleHeaderVertical.js | 64 +++---- .../Menu/Content/MenuExampleInputs.js | 10 +- .../Menu/Content/MenuExampleLinkItem.js | 10 +- .../Menu/Content/MenuExampleMenus.js | 22 +-- .../Menu/Content/MenuExampleSubMenu.js | 53 +++--- .../Menu/Content/MenuExampleText.js | 14 +- .../Menu/States/MenuExampleActive.js | 4 +- .../Menu/States/MenuExampleDisabled.js | 4 +- .../Menu/States/MenuExampleHover.js | 6 +- .../Menu/Types/MenuExampleAttached.js | 44 +++-- .../Menu/Types/MenuExampleBasic.js | 14 +- .../Menu/Types/MenuExampleContentProp.js | 8 +- .../Menu/Types/MenuExampleNameProp.js | 8 +- .../Menu/Types/MenuExamplePagination.js | 12 +- .../Menu/Types/MenuExamplePointing.js | 16 +- .../Menu/Types/MenuExampleSecondary.js | 18 +- .../Types/MenuExampleSecondaryPointing.js | 14 +- .../Menu/Types/MenuExampleTabular.js | 6 +- .../Menu/Types/MenuExampleTabularOnBottom.js | 22 +-- .../Menu/Types/MenuExampleTabularOnLeft.js | 18 +- .../Menu/Types/MenuExampleTabularOnRight.js | 18 +- .../Menu/Types/MenuExampleTabularOnTop.js | 14 +- .../collections/Menu/Types/MenuExampleText.js | 10 +- .../Menu/Types/MenuExampleVertical.js | 18 +- .../Menu/Types/MenuExampleVerticalDropdown.js | 25 ++- .../Menu/Types/MenuExampleVerticalPointing.js | 8 +- .../Types/MenuExampleVerticalSecondary.js | 8 +- .../Menu/Types/MenuExampleVerticalText.js | 10 +- .../Variations/MenuExampleAttachedTabular.js | 6 +- .../MenuExampleAttachedToSegment.js | 18 +- .../Menu/Variations/MenuExampleBorderless.js | 14 +- .../Menu/Variations/MenuExampleColored.js | 6 +- .../Variations/MenuExampleColoredInverted.js | 6 +- .../MenuExampleColoredInvertedMenus.js | 8 +- .../Variations/MenuExampleColoredMenus.js | 8 +- .../Menu/Variations/MenuExampleCompact.js | 14 +- .../Variations/MenuExampleCompactVertical.js | 14 +- .../Variations/MenuExampleEvenlyDivided.js | 8 +- .../Menu/Variations/MenuExampleFitted.js | 14 +- .../Menu/Variations/MenuExampleFluid.js | 8 +- .../Menu/Variations/MenuExampleIcons.js | 14 +- .../Variations/MenuExampleIconsVertical.js | 14 +- .../Menu/Variations/MenuExampleInverted.js | 8 +- .../Variations/MenuExampleInvertedPointing.js | 8 +- .../MenuExampleInvertedSecondary.js | 8 +- .../Variations/MenuExampleInvertedSegment.js | 8 +- .../Variations/MenuExampleInvertedVertical.js | 8 +- .../Variations/MenuExampleLabeledIcons.js | 14 +- .../MenuExampleLabeledIconsVertical.js | 14 +- .../Menu/Variations/MenuExampleSizeHuge.js | 32 ++-- .../Menu/Variations/MenuExampleSizeLarge.js | 32 ++-- .../Menu/Variations/MenuExampleSizeMassive.js | 32 ++-- .../Menu/Variations/MenuExampleSizeMini.js | 32 ++-- .../Menu/Variations/MenuExampleSizeSmall.js | 32 ++-- .../Menu/Variations/MenuExampleSizeTiny.js | 32 ++-- .../MenuExampleSizeVerticalLarge.js | 18 +- .../MenuExampleSizeVerticalMassive.js | 18 +- .../Variations/MenuExampleSizeVerticalMini.js | 18 +- .../MenuExampleSizeVerticalSmall.js | 18 +- .../Menu/Variations/MenuExampleStackable.js | 20 +- .../Variations/MenuExampleVerticalFitted.js | 14 +- .../Message/Types/MessageExampleIcon.js | 8 +- .../Message/Types/MessageExampleList.js | 17 +- .../Types/MessageExampleListItemsProp.js | 6 +- .../Message/Types/MessageExampleMessage.js | 4 +- .../Variations/MessageExampleAttached.js | 24 ++- .../Message/Variations/MessageExampleInfo.js | 4 +- .../Variations/MessageExampleNegative.js | 4 +- .../Variations/MessageExamplePositive.js | 4 +- .../Variations/MessageExampleWarning.js | 4 +- .../Table/States/TableExampleActive.js | 67 ++++--- .../Table/States/TableExampleDisabled.js | 67 ++++--- .../Table/States/TableExampleError.js | 70 +++---- .../States/TableExamplePositiveNegative.js | 72 ++++---- .../Table/States/TableExampleWarning.js | 72 ++++---- .../Table/Types/TableExampleApprove.js | 97 +++++----- .../Table/Types/TableExampleCelledStriped.js | 86 +++++---- .../Table/Types/TableExampleCollapsing.js | 93 +++++----- .../Table/Types/TableExampleDefinition.js | 47 +++-- .../Table/Types/TableExamplePadded.js | 77 ++++---- .../Table/Types/TableExamplePagination.js | 92 ++++++---- .../Table/Types/TableExampleStructured.js | 108 ++++++----- .../Table/Variations/TableExampleAttached.js | 37 ++-- .../Table/Variations/TableExampleBasic.js | 57 +++--- .../Table/Variations/TableExampleCelled.js | 72 ++++---- .../Variations/TableExampleCollapsing.js | 72 ++++---- .../Variations/TableExampleCollapsingCell.js | 42 ++--- .../Table/Variations/TableExampleColors.js | 47 +++-- .../Variations/TableExampleColumnCount.js | 92 +++++----- .../Variations/TableExampleColumnWidth.js | 62 ++++--- .../Table/Variations/TableExampleCompact.js | 107 ++++++----- .../Table/Variations/TableExampleFixed.js | 63 ++++--- .../Table/Variations/TableExampleFixedLine.js | 59 +++--- .../Table/Variations/TableExampleFullWidth.js | 97 +++++----- .../Table/Variations/TableExampleInverted.js | 72 ++++---- .../Variations/TableExampleInvertedColors.js | 47 +++-- .../Table/Variations/TableExampleLarge.js | 72 ++++---- .../Table/Variations/TableExamplePadded.js | 51 +++--- .../Variations/TableExampleSelectableCell.js | 99 +++++----- .../TableExampleSelectableInvertedRow.js | 57 +++--- .../Variations/TableExampleSelectableRow.js | 87 +++++---- .../Variations/TableExampleSingleLine.js | 65 ++++--- .../Table/Variations/TableExampleSmall.js | 72 ++++---- .../Table/Variations/TableExampleSortable.js | 43 +++-- .../Table/Variations/TableExampleStackable.js | 57 +++--- .../Table/Variations/TableExampleStriped.js | 125 +++++++------ .../Table/Variations/TableExampleTextAlign.js | 57 +++--- .../Variations/TableExampleUnstackable.js | 57 +++--- .../Variations/TableExampleVerticalAlign.js | 51 +++--- .../Table/Variations/TableExampleVeryBasic.js | 57 +++--- .../Variations/TableExampleVeryCompact.js | 107 ++++++----- .../Variations/TableExampleVeryPadded.js | 51 +++--- .../Content/ButtonExampleConditionals.js | 8 +- .../ButtonExampleConditionalsCustom.js | 8 +- .../ButtonExampleMultipleConditionals.js | 10 +- .../ButtonExampleGroupBasic.js | 10 +- .../ButtonExampleGroupBasicColored.js | 6 +- .../ButtonExampleGroupColored.js | 6 +- .../ButtonExampleGroupEqualWidth.js | 10 +- .../ButtonExampleGroupFloated.js | 10 +- .../GroupVariations/ButtonExampleGroupIcon.js | 6 +- .../ButtonExampleGroupIconShorthand.js | 6 +- .../ButtonExampleGroupIconSize.js | 6 +- .../ButtonExampleGroupLabeledIcon.js | 6 +- .../ButtonExampleGroupMixed.js | 6 +- .../ButtonExampleGroupOrSize.js | 8 +- .../GroupVariations/ButtonExampleGroupSize.js | 6 +- .../ButtonExampleGroupVertical.js | 6 +- .../Button/Groups/ButtonExampleGroup.js | 6 +- .../Button/Groups/ButtonExampleGroupIcon.js | 10 +- .../Groups/ButtonExampleGroupIconShorthand.js | 6 +- .../Groups/ButtonExampleGroupShorthand.js | 4 +- .../Button/Types/ButtonExampleAnimated.js | 18 +- .../Usage/ButtonExampleAttachedEvents.js | 10 +- .../Button/Usage/ButtonExampleFocus.js | 10 +- .../ButtonExampleVerticallyAttachedGroup.js | 10 +- .../Types/DividerExampleHorizontalTable.js | 46 +++-- .../Divider/Types/DividerExampleVertical.js | 10 +- .../Types/DividerExampleVerticalForm.js | 22 ++- .../elements/Flag/Types/FlagExampleTable.js | 42 +++-- .../Header/Content/HeaderExamplePlugIcon.js | 4 +- .../Content/HeaderExampleSettingsIcon.js | 8 +- .../Header/Content/HeaderExampleSubheader.js | 6 +- .../Header/Types/HeaderExampleSettingsIcon.js | 6 +- .../Header/Types/HeaderExampleUsersIcon.js | 4 +- .../Icon/Groups/IconExampleCornerGroup.js | 6 +- .../Groups/IconExampleCornerGroupPositions.js | 18 +- .../Icon/Groups/IconExampleIconGroup.js | 6 +- .../Icon/Groups/IconExampleLoadingGroup.js | 10 +- .../Icon/Groups/IconExampleTwitterGroup.js | 6 +- .../Image/Groups/ImageExampleGroupSize.js | 10 +- .../Label/Content/LabelExampleDetail.js | 4 +- .../Label/Content/LabelExampleLinkDetail.js | 4 +- .../Label/Groups/LabelExampleGroupCircular.js | 6 +- .../Label/Groups/LabelExampleGroupColored.js | 8 +- .../Label/Groups/LabelExampleGroupSize.js | 6 +- .../Label/Groups/LabelExampleGroupTag.js | 6 +- .../Label/Types/LabelExampleAttached.js | 41 +++-- .../Label/Types/LabelExampleCorner.js | 10 +- .../Label/Types/LabelExampleFloating.js | 10 +- .../Label/Types/LabelExampleHorizontal.js | 18 +- .../Label/Types/LabelExampleImageColored.js | 8 +- .../Label/Types/LabelExamplePointing.js | 18 +- .../Types/LabelExamplePointingColored.js | 18 +- .../Label/Types/LabelExamplePrompt.js | 6 +- .../Label/Types/LabelExampleRibbon.js | 10 +- .../Label/Types/LabelExampleRibbonImage.js | 10 +- .../List/Content/ListExampleDescription.js | 73 ++++---- .../List/Content/ListExampleHeader.js | 26 +-- .../elements/List/Content/ListExampleIcon.js | 41 +++-- .../elements/List/Content/ListExampleImage.js | 77 ++++---- .../elements/List/Content/ListExampleItem.js | 8 +- .../elements/List/Content/ListExampleLink.js | 8 +- .../List/Content/ListExampleLinkComplex.js | 22 +-- .../ContentVariations/ListExampleFloated.js | 42 ++--- .../ListExampleFloatedHorizontal.js | 16 +- .../ListExampleVerticallyAligned.js | 20 +- .../elements/List/Types/ListExampleBasic.js | 8 +- .../List/Types/ListExampleBulleted.js | 22 +-- .../Types/ListExampleBulletedHorizontal.js | 8 +- .../List/Types/ListExampleBulletedSimple.js | 24 +-- .../elements/List/Types/ListExampleDivided.js | 51 +++--- .../elements/List/Types/ListExampleIcon.js | 38 ++-- .../List/Types/ListExampleIconShorthand.js | 10 +- .../elements/List/Types/ListExampleLink.js | 10 +- .../elements/List/Types/ListExampleOrdered.js | 22 +-- .../List/Types/ListExampleOrderedSimple.js | 22 +-- .../List/Types/ListExampleOrderedValue.js | 34 ++-- .../elements/List/Types/ListExampleTree.js | 154 ++++++++-------- .../List/Variations/ListExampleAnimated.js | 38 ++-- .../List/Variations/ListExampleCelled.js | 38 ++-- .../Variations/ListExampleCelledHorizontal.js | 8 +- .../Variations/ListExampleCelledOrdered.js | 20 +- .../List/Variations/ListExampleDivided.js | 38 ++-- .../List/Variations/ListExampleHorizontal.js | 38 ++-- .../ListExampleHorizontalBulleted.js | 8 +- .../ListExampleHorizontalOrdered.js | 38 ++-- .../List/Variations/ListExampleInverted.js | 38 ++-- .../List/Variations/ListExampleRelaxed.js | 51 +++--- .../ListExampleRelaxedHorizontal.js | 38 ++-- .../List/Variations/ListExampleSelection.js | 38 ++-- .../List/Variations/ListExampleSizes.js | 38 ++-- .../List/Variations/ListExampleVeryRelaxed.js | 51 +++--- .../ListExampleVeryRelaxedHorizontal.js | 38 ++-- .../Content/PlaceholderExampleHeader.js | 14 +- .../Content/PlaceholderExampleHeaderImage.js | 14 +- .../Content/PlaceholderExampleImage.js | 4 +- .../PlaceholderExampleImageRectangular.js | 30 +-- .../Content/PlaceholderExampleImageSquare.js | 30 +-- .../Content/PlaceholderExampleLine.js | 12 +- .../Content/PlaceholderExampleParagraph.js | 30 +-- .../Types/PlaceholderExampleCard.js | 51 ++++-- .../Types/PlaceholderExampleGrid.js | 70 +++---- .../Types/PlaceholderExamplePlaceholder.js | 27 +-- .../Variations/PlaceholderExampleFluid.js | 25 ++- .../Variations/PlaceholderExampleInverted.js | 26 ++- .../PlaceholderExampleLineLength.js | 14 +- .../PlaceholderExampleLineLengthWithHeader.js | 23 ++- .../Rail/Types/RailExampleDividing.js | 6 +- .../elements/Rail/Types/RailExampleRail.js | 6 +- .../Rail/Variations/RailExampleAttached.js | 6 +- .../Rail/Variations/RailExampleClose.js | 6 +- .../Rail/Variations/RailExampleCloseVery.js | 6 +- .../Rail/Variations/RailExampleSize.js | 6 +- .../Reveal/Content/RevealExampleHidden.js | 10 +- .../Reveal/Content/RevealExampleVisible.js | 10 +- .../Reveal/States/RevealExampleActive.js | 10 +- .../Reveal/States/RevealExampleDisabled.js | 10 +- .../Reveal/Types/RevealExampleFade.js | 10 +- .../Reveal/Types/RevealExampleFadeSmall.js | 10 +- .../Reveal/Types/RevealExampleMove.js | 10 +- .../Reveal/Types/RevealExampleMoveDown.js | 10 +- .../Reveal/Types/RevealExampleMoveRight.js | 10 +- .../Reveal/Types/RevealExampleMoveUp.js | 10 +- .../Reveal/Types/RevealExampleRotate.js | 10 +- .../Reveal/Types/RevealExampleRotateLeft.js | 10 +- .../Reveal/Variations/RevealExampleInstant.js | 10 +- .../SegmentExampleHorizontalSegments.js | 6 +- .../Groups/SegmentExampleNestedSegments.js | 14 +- .../Groups/SegmentExamplePiledSegments.js | 6 +- .../Groups/SegmentExampleRaisedSegments.js | 6 +- .../Segment/Groups/SegmentExampleSegments.js | 6 +- .../Groups/SegmentExampleStackedSegments.js | 6 +- .../Types/SegmentExamplePlaceholderGrid.js | 14 +- .../Types/SegmentExamplePlaceholderInline.js | 6 +- .../Variations/SegmentExampleCircular.js | 6 +- .../Variations/SegmentExampleCompactGroup.js | 6 +- .../Variations/SegmentExampleGroupSizes.js | 6 +- .../Step/Content/StepExampleDescription.js | 10 +- .../StepExampleDescriptionShorthand.js | 6 +- .../elements/Step/Content/StepExampleIcon.js | 21 ++- .../Step/Content/StepExampleIconShorthand.js | 6 +- .../elements/Step/Content/StepExampleLink.js | 29 +-- .../Step/Content/StepExampleLinkClickable.js | 6 +- .../Step/Content/StepExampleLinkHref.js | 29 +-- .../elements/Step/Groups/StepExampleGroup.js | 35 ++-- .../Step/Groups/StepExampleGroupShorthand.js | 4 +- .../Step/Groups/StepExampleOrdered.js | 34 ++-- .../Step/Groups/StepExampleVertical.js | 35 ++-- .../examples/elements/Step/Groups/index.js | 8 +- .../elements/Step/States/StepExampleActive.js | 21 ++- .../Step/States/StepExampleCompleted.js | 21 ++- .../States/StepExampleCompletedOrdered.js | 20 +- .../Step/States/StepExampleDisabled.js | 6 +- .../elements/Step/Types/StepExampleStep.js | 6 +- .../Step/Types/StepExampleStepShorthand.js | 6 +- .../Step/Variations/StepExampleAttached.js | 63 ++++--- .../Variations/StepExampleEvenlyDivided.js | 30 +-- .../StepExampleEvenlyDividedAnother.js | 24 ++- .../Step/Variations/StepExampleFluid.js | 39 ++-- .../Step/Variations/StepExampleSizeBig.js | 24 ++- .../Step/Variations/StepExampleSizeHuge.js | 24 ++- .../Step/Variations/StepExampleSizeLarge.js | 24 ++- .../Step/Variations/StepExampleSizeMassive.js | 24 ++- .../Step/Variations/StepExampleSizeMini.js | 37 ++-- .../Step/Variations/StepExampleSizeSmall.js | 37 ++-- .../Step/Variations/StepExampleSizeTiny.js | 37 ++-- .../Step/Variations/StepExampleStackable.js | 37 ++-- .../Step/Variations/StepExampleUnstackable.js | 37 ++-- .../Advanced/AccordionExampleForm.js | 22 ++- .../Advanced/AccordionExampleMenu.js | 52 +++--- .../Advanced/AccordionExampleNested.js | 6 +- .../Types/AccordionExampleStandard.js | 31 ++-- .../Accordion/Types/AccordionExampleStyled.js | 31 ++-- .../Variations/AccordionExampleFluid.js | 31 ++-- .../Variations/AccordionExampleInverted.js | 32 ++-- .../States/CheckboxExampleDisabled.js | 10 +- .../Types/CheckboxExampleRadioGroup.js | 14 +- .../Usage/CheckboxExampleDOMComparison.js | 61 ++++--- .../Dimmer/Types/DimmerExampleContent.js | 24 ++- .../Dimmer/Types/DimmerExampleDimmer.js | 23 ++- .../modules/Dimmer/Types/DimmerExamplePage.js | 10 +- .../Dimmer/Usage/DimmerExampleEvents.js | 4 +- .../Dimmer/Usage/DimmerExampleLoader.js | 18 +- .../Variations/DimmerExampleBlurring.js | 17 +- .../DimmerExampleBlurringInverted.js | 17 +- .../Variations/DimmerExampleInverted.js | 17 +- .../Dimmer/Variations/DimmerExampleSimple.js | 6 +- .../DimmerExampleVerticalAlignBottom.js | 18 +- .../DimmerExampleVerticalAlignTop.js | 18 +- .../Content/DropdownExampleDescription.js | 22 ++- .../Content/DropdownExampleDivider.js | 22 ++- .../Content/DropdownExampleFloatedContent.js | 29 +-- .../Dropdown/Content/DropdownExampleHeader.js | 19 +- .../Dropdown/Content/DropdownExampleIcon.js | 22 ++- .../Dropdown/Content/DropdownExampleImage.js | 15 +- .../Dropdown/Content/DropdownExampleInput.js | 25 ++- .../Dropdown/Content/DropdownExampleLabel.js | 22 ++- .../Content/DropdownExampleMessage.js | 6 +- .../Dropdown/Types/DropdownExampleDropdown.js | 33 ++-- .../Dropdown/Types/DropdownExampleFloating.js | 6 +- .../Types/DropdownExampleInlineTwo.js | 6 +- .../DropdownExampleMultipleSearchInMenu.js | 23 ++- .../Dropdown/Types/DropdownExamplePointing.js | 62 ++++--- .../Types/DropdownExamplePointingTwo.js | 33 ++-- .../Types/DropdownExampleSearchInMenu.js | 23 ++- .../Usage/DropdownExampleControlled.js | 10 +- .../Dropdown/Usage/DropdownExampleRemote.js | 10 +- .../DropdownExampleSelectOnNavigation.js | 18 +- .../Variations/DropdownExampleFluid.js | 12 +- .../DropdownExampleMenuDirection.js | 6 +- .../DropdownExampleMenuDirectionLeft.js | 46 ++--- .../DropdownExampleSearchInMenuScrolling.js | 23 ++- .../Modal/Content/ModalExampleCloseIcon.js | 17 +- .../Modal/Content/ModalExampleContentImage.js | 24 ++- .../Modal/Content/ModalExampleDimmer.js | 18 +- .../modules/Modal/Types/ModalExampleBasic.js | 17 +- .../modules/Modal/Types/ModalExampleModal.js | 25 ++- .../Modal/Usage/ModalExampleCallbacks.js | 30 ++- .../Modal/Usage/ModalExampleCloseConfig.js | 29 ++- .../Modal/Usage/ModalExampleMultiple.js | 34 ++-- .../Modal/Variations/ModalExampleScrolling.js | 25 ++- .../ModalExampleScrollingContent.js | 25 ++- .../Modal/Variations/ModalExampleSize.js | 19 +- .../Variations/ModalExampleTopAligned.js | 23 ++- .../modules/Modal/Variations/index.js | 4 +- .../Popup/Types/PopupExampleTrigger.js | 28 ++- .../Popup/Usage/PopupExampleActions.js | 10 +- .../Popup/Usage/PopupExampleControlled.js | 17 +- .../Popup/Usage/PopupExampleEventsEnabled.js | 17 +- .../modules/Popup/Usage/PopupExampleNested.js | 10 +- .../Usage/PopupExamplePopperDependencies.js | 26 ++- .../src/examples/modules/Popup/Usage/index.js | 14 +- .../Popup/Variations/PopupExampleFlowing.js | 14 +- .../Popup/Variations/PopupExamplePosition.js | 46 ++--- .../Search/Types/SearchExampleCategory.js | 10 +- .../Types/SearchExampleCategoryCustom.js | 17 +- .../Search/Types/SearchExampleStandard.js | 10 +- .../Types/SearchExampleStandardCustom.js | 17 +- .../Search/Variations/SearchExampleAligned.js | 10 +- .../Search/Variations/SearchExampleFluid.js | 10 +- .../Search/Variations/SearchExampleInput.js | 10 +- .../Examples/SidebarExampleMultiple.js | 44 +++-- .../Examples/SidebarExampleTransitions.js | 54 +++--- .../modules/Sidebar/Examples/index.js | 138 +++++++------- .../modules/Sidebar/Spec/SidebarAndModal.js | 30 +-- .../Sidebar/States/SidebarExampleDimmed.js | 32 ++-- .../Sidebar/States/SidebarExampleVisible.js | 32 ++-- .../Sidebar/Types/SidebarExampleSidebar.js | 32 ++-- .../Sidebar/Usage/SidebarExampleCallback.js | 35 ++-- .../Sidebar/Usage/SidebarExampleTarget.js | 22 ++- .../Types/StickyExampleAdjacentContext.js | 14 +- .../Sticky/Types/StickyExamplePushing.js | 14 +- .../Sticky/Usage/StickyExampleAboveContent.js | 22 ++- .../Sticky/Usage/StickyExampleOffset.js | 14 +- .../Sticky/Variations/StickyExampleActive.js | 5 +- .../Variations/StickyExampleOversized.js | 24 ++- docs/src/examples/modules/Sticky/index.js | 4 +- .../TabExampleAttachedBottom.js | 8 +- .../MenuVariations/TabExampleAttachedFalse.js | 8 +- .../MenuVariations/TabExampleBorderless.js | 8 +- .../Tab/MenuVariations/TabExampleColored.js | 8 +- .../TabExampleColoredInverted.js | 8 +- .../TabExampleMenuPositionRight.js | 8 +- .../MenuVariations/TabExampleTabularFalse.js | 8 +- .../TabExampleVerticalTabular.js | 8 +- .../TabExampleVerticalTabularRight.js | 8 +- .../modules/Tab/States/TabExampleLoading.js | 8 +- .../modules/Tab/Types/TabExampleBasic.js | 8 +- .../modules/Tab/Types/TabExamplePointing.js | 8 +- .../modules/Tab/Types/TabExampleSecondary.js | 8 +- .../Tab/Types/TabExampleSecondaryPointing.js | 8 +- .../modules/Tab/Types/TabExampleText.js | 8 +- docs/src/examples/modules/Tab/Types/index.js | 23 ++- .../Tab/Usage/TabExampleActiveIndex.js | 8 +- .../Tab/Usage/TabExampleCustomMenuItem.js | 10 +- .../Tab/Usage/TabExampleDefaultActiveIndex.js | 8 +- .../Tab/Usage/TabExampleOnTabChange.js | 8 +- .../Tab/Usage/TabExamplePaneShorthand.js | 12 +- .../TransitionExampleGroupExplorer.js | 29 ++- .../TransitionExampleTransitionExplorer.js | 25 ++- .../Types/TransitionExampleGroup.js | 24 ++- .../modules/Transition/Types/index.js | 18 +- .../Usage/TransitionExampleDuration.js | 24 ++- .../Card/Content/CardExampleContentBlock.js | 70 ++++--- .../Card/Content/CardExampleExtraContent.js | 10 +- .../Card/Content/CardExampleHeaderCard.js | 37 ++-- .../Card/Content/CardExampleImageCard.js | 26 ++- .../views/Card/Types/CardExampleCard.js | 28 ++- .../views/Card/Types/CardExampleGroupProps.js | 4 +- .../views/Card/Types/CardExampleGroups.js | 63 ++++--- .../Card/Variations/CardExampleColored.js | 6 +- .../Card/Variations/CardExampleColumnCount.js | 6 +- .../views/Card/Variations/CardExampleFluid.js | 6 +- .../Variations/CardExampleGroupCentered.js | 4 +- .../Comment/Content/CommentExampleActions.js | 42 +++-- .../Comment/Content/CommentExampleAvatar.js | 20 +- .../Comment/Content/CommentExampleMetadata.js | 31 ++-- .../Content/CommentExampleReplyForm.js | 41 +++-- .../Content/CommentExampleReplyFormOuter.js | 63 ++++--- .../Comment/States/CommentExampleCollapsed.js | 80 ++++---- .../Comment/Types/CommentExampleComment.js | 108 ++++++----- .../Variations/CommentExampleGroupSize.js | 172 +++++++++--------- .../Variations/CommentExampleMinimal.js | 99 +++++----- .../Variations/CommentExampleThreaded.js | 99 +++++----- .../Feed/Content/FeedExampleContentDate.js | 25 ++- .../FeedExampleContentDateShorthand.js | 12 +- .../Feed/Content/FeedExampleExtraImages.js | 30 +-- .../FeedExampleExtraImagesShorthand.js | 36 ++-- .../Feed/Content/FeedExampleExtraText.js | 30 +-- .../Content/FeedExampleExtraTextShorthand.js | 36 ++-- .../Feed/Content/FeedExampleIconLabel.js | 28 ++- .../Content/FeedExampleIconLabelShorthand.js | 12 +- .../Feed/Content/FeedExampleImageLabel.js | 14 +- .../Content/FeedExampleImageLabelShorthand.js | 12 +- .../Feed/Content/FeedExampleSummaryDate.js | 27 ++- .../FeedExampleSummaryDateShorthand.js | 20 +- .../views/Feed/Types/FeedExampleBasic.js | 146 ++++++++------- .../Feed/Variations/FeedExampleSizeLarge.js | 88 +++++---- .../Feed/Variations/FeedExampleSizeSmall.js | 56 +++--- .../views/Item/Content/ItemExampleContents.js | 18 +- .../Item/Content/ItemExampleDescriptions.js | 39 ++-- .../Item/Content/ItemExampleExtraContent.js | 46 +++-- .../views/Item/Content/ItemExampleHeaders.js | 32 ++-- .../views/Item/Content/ItemExampleImages.js | 10 +- .../views/Item/Content/ItemExampleLink.js | 45 +++-- .../views/Item/Content/ItemExampleMetadata.js | 45 +++-- .../views/Item/Content/ItemExampleRatings.js | 33 ++-- .../views/Item/Types/ItemExampleItems.js | 48 +++-- .../views/Item/Types/ItemExampleProps.js | 4 +- .../Item/Variations/ItemExampleAlignment.js | 36 ++-- .../Item/Variations/ItemExampleDivided.js | 73 +++++--- .../Item/Variations/ItemExampleFloated.js | 58 +++--- .../views/Item/Variations/ItemExampleLink.js | 44 +++-- .../Item/Variations/ItemExampleRelaxed.js | 36 ++-- .../Item/Variations/ItemExampleUnstackable.js | 10 +- .../Item/Variations/ItemExampleVeryRelaxed.js | 36 ++-- .../Content/StatisticExampleLabel.js | 6 +- .../Content/StatisticExampleValue.js | 35 ++-- .../Content/StatisticExampleValueShorthand.js | 6 +- .../Statistic/Types/StatisticExampleGroup.js | 23 ++- .../Types/StatisticExampleGroupShorthand.js | 4 +- .../Types/StatisticExampleStatistic.js | 6 +- .../Types/StatisticExampleTopLabel.js | 6 +- .../Variations/StatisticExampleColored.js | 59 +++--- .../StatisticExampleColoredGroup.js | 24 ++- .../StatisticExampleEvenlyDivided.js | 35 ++-- .../Variations/StatisticExampleFloated.js | 15 +- .../Variations/StatisticExampleHorizontal.js | 6 +- .../StatisticExampleHorizontalGroup.js | 23 ++- .../Variations/StatisticExampleInverted.js | 59 +++--- .../StatisticExampleInvertedGroup.js | 24 ++- .../Variations/StatisticExampleSize.js | 26 +-- .../Variations/StatisticExampleSizeDivided.js | 31 ++-- .../Variations/StatisticExampleSizeGroup.js | 24 ++- 558 files changed, 7867 insertions(+), 6118 deletions(-) diff --git a/docs/src/examples/addons/Pagination/Usage/PaginationExampleControlled.js b/docs/src/examples/addons/Pagination/Usage/PaginationExampleControlled.js index 633d454185..b6c1eea0ef 100644 --- a/docs/src/examples/addons/Pagination/Usage/PaginationExampleControlled.js +++ b/docs/src/examples/addons/Pagination/Usage/PaginationExampleControlled.js @@ -1,5 +1,5 @@ import React, { Component } from 'react' -import { Grid, Input, Pagination, Segment } from 'semantic-ui-react' +import { GridColumn, Grid, Input, Pagination, Segment } from 'semantic-ui-react' export default class PaginationExampleControlled extends Component { state = { activePage: 1 } @@ -13,7 +13,7 @@ export default class PaginationExampleControlled extends Component { return ( - +
activePage: {activePage}
 - - + + - + ) } diff --git a/docs/src/examples/addons/Pagination/Usage/PaginationExampleOptions.js b/docs/src/examples/addons/Pagination/Usage/PaginationExampleOptions.js index 5d2e0a169e..fbc90acfaf 100644 --- a/docs/src/examples/addons/Pagination/Usage/PaginationExampleOptions.js +++ b/docs/src/examples/addons/Pagination/Usage/PaginationExampleOptions.js @@ -1,5 +1,14 @@ import React, { Component } from 'react' -import { Grid, Form, Pagination, Segment } from 'semantic-ui-react' +import { + GridColumn, + FormInput, + FormGroup, + FormCheckbox, + Grid, + Form, + Pagination, + Segment, +} from 'semantic-ui-react' export default class PaginationExampleCustomization extends Component { state = { @@ -32,7 +41,7 @@ export default class PaginationExampleCustomization extends Component { return ( - + - + - +
- - + - - - - + + - - - - + + - - - +
- + ) } diff --git a/docs/src/examples/addons/Portal/Types/PortalExampleControlled.js b/docs/src/examples/addons/Portal/Types/PortalExampleControlled.js index 6693d92c9e..16c2398872 100644 --- a/docs/src/examples/addons/Portal/Types/PortalExampleControlled.js +++ b/docs/src/examples/addons/Portal/Types/PortalExampleControlled.js @@ -1,5 +1,12 @@ import React, { Component } from 'react' -import { Button, Grid, Header, Segment, Portal } from 'semantic-ui-react' +import { + GridColumn, + Button, + Grid, + Header, + Segment, + Portal, +} from 'semantic-ui-react' export default class PortalExampleControlled extends Component { state = { open: false } @@ -12,7 +19,7 @@ export default class PortalExampleControlled extends Component { return ( - + ) diff --git a/docs/src/examples/collections/Form/GroupVariations/index.js b/docs/src/examples/collections/Form/GroupVariations/index.js index 3f6289e47a..6b40ad1d4f 100644 --- a/docs/src/examples/collections/Form/GroupVariations/index.js +++ b/docs/src/examples/collections/Form/GroupVariations/index.js @@ -13,8 +13,8 @@ const FormGroupVariationsExamples = () => ( > When using the widths='equal' prop declaration on a{' '} - Form.Group, all child Form.Dropdown,{' '} - Form.Input, Form.Select + FormGroup, all child FormDropdown,{' '} + FormInput, FormSelect components must be rendered with a fluid prop to work correctly. diff --git a/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControl.js b/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControl.js index dcbda47967..de29dcb42a 100644 --- a/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControl.js +++ b/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControl.js @@ -1,5 +1,7 @@ import React, { Component } from 'react' import { + FormGroup, + FormField, Button, Checkbox, Form, @@ -24,58 +26,58 @@ class FormExampleFieldControl extends Component { const { value } = this.state return (
- - + - - - - + + - - - - - + - - Submit + Submit ) } diff --git a/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControlHTML.js b/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControlHTML.js index b4edab874c..3552dc0f3a 100644 --- a/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControlHTML.js +++ b/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControlHTML.js @@ -1,39 +1,39 @@ import React from 'react' -import { Form } from 'semantic-ui-react' +import { FormGroup, FormField, Form } from 'semantic-ui-react' const FormExampleFieldControlHTML = () => (
- - - + + + - - - + + + - - - - + + - - - - - + + + + + HTML Button - + ) diff --git a/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControlId.js b/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControlId.js index 1c3fff0378..1bc45194a9 100644 --- a/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControlId.js +++ b/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControlId.js @@ -1,5 +1,13 @@ import React from 'react' -import { Form, Input, TextArea, Button, Select } from 'semantic-ui-react' +import { + FormGroup, + FormField, + Form, + Input, + TextArea, + Button, + Select, +} from 'semantic-ui-react' const genderOptions = [ { key: 'm', text: 'Male', value: 'male' }, @@ -9,20 +17,20 @@ const genderOptions = [ const FormExampleFieldControlId = () => (
- - + - - ( search searchInput={{ id: 'form-select-control-gender' }} /> - - + - ( pointing: 'below', }} /> - ( - I agree to the Terms and Conditions} /> diff --git a/docs/src/examples/collections/Form/Shorthand/FormExampleFieldLabelObject.js b/docs/src/examples/collections/Form/Shorthand/FormExampleFieldLabelObject.js index 7a33dce951..54a544a41c 100644 --- a/docs/src/examples/collections/Form/Shorthand/FormExampleFieldLabelObject.js +++ b/docs/src/examples/collections/Form/Shorthand/FormExampleFieldLabelObject.js @@ -1,9 +1,9 @@ import React from 'react' -import { Checkbox, Form } from 'semantic-ui-react' +import { FormField, Checkbox, Form } from 'semantic-ui-react' const FormExampleFieldLabelObject = () => ( - diff --git a/docs/src/examples/collections/Form/Shorthand/FormExampleSubcomponentControl.js b/docs/src/examples/collections/Form/Shorthand/FormExampleSubcomponentControl.js index 40d0ba1e5c..664ae31080 100644 --- a/docs/src/examples/collections/Form/Shorthand/FormExampleSubcomponentControl.js +++ b/docs/src/examples/collections/Form/Shorthand/FormExampleSubcomponentControl.js @@ -1,5 +1,14 @@ import React, { Component } from 'react' -import { Form } from 'semantic-ui-react' +import { + FormTextArea, + FormSelect, + FormRadio, + FormInput, + FormGroup, + FormCheckbox, + FormButton, + Form, +} from 'semantic-ui-react' const options = [ { key: 'm', text: 'Male', value: 'male' }, @@ -16,40 +25,40 @@ class FormExampleSubcomponentControl extends Component { const { value } = this.state return ( - - - - + + + - - + + - - - - - - - Submit + + + + Submit ) } diff --git a/docs/src/examples/collections/Form/Shorthand/FormExampleSubcomponentId.js b/docs/src/examples/collections/Form/Shorthand/FormExampleSubcomponentId.js index 10bc6ca32b..efddc1a610 100644 --- a/docs/src/examples/collections/Form/Shorthand/FormExampleSubcomponentId.js +++ b/docs/src/examples/collections/Form/Shorthand/FormExampleSubcomponentId.js @@ -1,22 +1,22 @@ import React from 'react' -import { Form } from 'semantic-ui-react' +import { FormInput, FormGroup, Form } from 'semantic-ui-react' const FormExampleSubcomponentId = () => (
- - + - - +
) diff --git a/docs/src/examples/collections/Form/Shorthand/index.js b/docs/src/examples/collections/Form/Shorthand/index.js index 7f388eac43..17bf8926c7 100644 --- a/docs/src/examples/collections/Form/Shorthand/index.js +++ b/docs/src/examples/collections/Form/Shorthand/index.js @@ -6,29 +6,29 @@ import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample' import { Message } from 'semantic-ui-react' const subcomponentComparison = { - shorthand: "", - longhand: ` + shorthand: "", + longhand: ` -`, +`, } const componentPropComparison = { shorthand: - "", - longhand: ` + "", + longhand: ` -`, +
`, } const htmlComparison = { shorthand: - "", - longhand: ` + "", + longhand: ` -`, +`, } const Compare = ({ longhand, shorthand }) => ( @@ -93,7 +93,7 @@ const FormTypesExamples = () => ( diff --git a/docs/src/examples/collections/Form/States/FormExampleError.js b/docs/src/examples/collections/Form/States/FormExampleError.js index 38a2180fb8..ec51d3af0b 100644 --- a/docs/src/examples/collections/Form/States/FormExampleError.js +++ b/docs/src/examples/collections/Form/States/FormExampleError.js @@ -1,9 +1,9 @@ import React from 'react' -import { Button, Form, Message } from 'semantic-ui-react' +import { FormInput, Button, Form, Message } from 'semantic-ui-react' const FormExampleError = () => (
- + ( - - - - + + + + ) diff --git a/docs/src/examples/collections/Form/States/FormExampleFieldError.js b/docs/src/examples/collections/Form/States/FormExampleFieldError.js index 7e78687ff3..7ff37febed 100644 --- a/docs/src/examples/collections/Form/States/FormExampleFieldError.js +++ b/docs/src/examples/collections/Form/States/FormExampleFieldError.js @@ -1,5 +1,11 @@ import React from 'react' -import { Form } from 'semantic-ui-react' +import { + FormSelect, + FormInput, + FormGroup, + FormCheckbox, + Form, +} from 'semantic-ui-react' const options = [ { key: 'm', text: 'Male', value: 'male' }, @@ -9,12 +15,12 @@ const options = [ const FormExampleFieldError = () => (
- - - - - - + + + + + + ) diff --git a/docs/src/examples/collections/Form/States/FormExampleFieldErrorLabel.js b/docs/src/examples/collections/Form/States/FormExampleFieldErrorLabel.js index ac4bc6f384..7fe397f25d 100644 --- a/docs/src/examples/collections/Form/States/FormExampleFieldErrorLabel.js +++ b/docs/src/examples/collections/Form/States/FormExampleFieldErrorLabel.js @@ -1,22 +1,22 @@ import React from 'react' -import { Form } from 'semantic-ui-react' +import { FormInput, FormCheckbox, Form } from 'semantic-ui-react' const FormExampleFieldErrorLabel = () => (
- - - ( - - - - + + + + ) diff --git a/docs/src/examples/collections/Form/States/FormExampleLoading.js b/docs/src/examples/collections/Form/States/FormExampleLoading.js index 218840b4af..07d0df6063 100644 --- a/docs/src/examples/collections/Form/States/FormExampleLoading.js +++ b/docs/src/examples/collections/Form/States/FormExampleLoading.js @@ -1,9 +1,9 @@ import React from 'react' -import { Button, Form } from 'semantic-ui-react' +import { FormInput, Button, Form } from 'semantic-ui-react' const FormExampleLoading = () => (
- + ) diff --git a/docs/src/examples/collections/Form/States/FormExampleSuccess.js b/docs/src/examples/collections/Form/States/FormExampleSuccess.js index f2d5033dda..90100a3398 100644 --- a/docs/src/examples/collections/Form/States/FormExampleSuccess.js +++ b/docs/src/examples/collections/Form/States/FormExampleSuccess.js @@ -1,9 +1,9 @@ import React from 'react' -import { Button, Form, Message } from 'semantic-ui-react' +import { FormInput, Button, Form, Message } from 'semantic-ui-react' const FormExampleSuccess = () => (
- + ( - + ( - + - - + + - - + + - + ) diff --git a/docs/src/examples/collections/Form/Types/index.js b/docs/src/examples/collections/Form/Types/index.js index bdf48760e5..6e2c452e7f 100644 --- a/docs/src/examples/collections/Form/Types/index.js +++ b/docs/src/examples/collections/Form/Types/index.js @@ -1,5 +1,5 @@ import React from 'react' -import { Message, Icon } from 'semantic-ui-react' +import { MessageContent, Message, Icon } from 'semantic-ui-react' import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection' import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample' @@ -13,10 +13,10 @@ const FormTypesExamples = () => ( > - + Forms also have a robust shorthand props API for generating controls wrapped in FormFields. See shorthand examples below. - +
diff --git a/docs/src/examples/collections/Form/Usage/FormExampleCaptureValues.js b/docs/src/examples/collections/Form/Usage/FormExampleCaptureValues.js index 243764deae..cf59d670d9 100644 --- a/docs/src/examples/collections/Form/Usage/FormExampleCaptureValues.js +++ b/docs/src/examples/collections/Form/Usage/FormExampleCaptureValues.js @@ -1,5 +1,5 @@ import React, { Component } from 'react' -import { Form } from 'semantic-ui-react' +import { FormInput, FormGroup, FormButton, Form } from 'semantic-ui-react' class FormExampleCaptureValues extends Component { state = { name: '', email: '', submittedName: '', submittedEmail: '' } @@ -18,21 +18,21 @@ class FormExampleCaptureValues extends Component { return (
- - + - - - + + onChange: 
{JSON.stringify({ name, email }, null, 2)}
diff --git a/docs/src/examples/collections/Form/Usage/FormExampleClearOnSubmit.js b/docs/src/examples/collections/Form/Usage/FormExampleClearOnSubmit.js index 989d6f57ed..f9ae0d9c16 100644 --- a/docs/src/examples/collections/Form/Usage/FormExampleClearOnSubmit.js +++ b/docs/src/examples/collections/Form/Usage/FormExampleClearOnSubmit.js @@ -1,5 +1,5 @@ import React, { Component } from 'react' -import { Form } from 'semantic-ui-react' +import { FormInput, FormGroup, FormButton, Form } from 'semantic-ui-react' class FormExampleClearOnSubmit extends Component { state = {} @@ -13,21 +13,21 @@ class FormExampleClearOnSubmit extends Component { return (
- - + - - - + + ) } diff --git a/docs/src/examples/collections/Form/Usage/index.js b/docs/src/examples/collections/Form/Usage/index.js index 9543ccf78c..f251061b41 100644 --- a/docs/src/examples/collections/Form/Usage/index.js +++ b/docs/src/examples/collections/Form/Usage/index.js @@ -1,5 +1,5 @@ import React from 'react' -import { Message, Icon } from 'semantic-ui-react' +import { MessageHeader, MessageContent, Message, Icon } from 'semantic-ui-react' import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection' import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample' @@ -8,8 +8,8 @@ const FormFormUsageExamples = () => ( - - Tip + + Tip

Our {'

'} handles data just like a vanilla React{' '} {''}. See React's @@ -23,7 +23,7 @@ const FormFormUsageExamples = () => ( docs for more.

- + ( - - - - - + + + + + diff --git a/docs/src/examples/collections/Form/Variations/FormExampleSize.js b/docs/src/examples/collections/Form/Variations/FormExampleSize.js index 64ca98c0a9..0c84ddd432 100644 --- a/docs/src/examples/collections/Form/Variations/FormExampleSize.js +++ b/docs/src/examples/collections/Form/Variations/FormExampleSize.js @@ -1,5 +1,5 @@ import React from 'react' -import { Button, Divider, Form } from 'semantic-ui-react' +import { FormGroup, FormField, Button, Divider, Form } from 'semantic-ui-react' const sizes = ['mini', 'tiny', 'small', 'large', 'big', 'huge', 'massive'] @@ -7,18 +7,18 @@ const FormExampleSize = () => (
{sizes.map((size) => (
- - + - - +
) diff --git a/docs/src/examples/modules/Modal/Types/ModalExampleBasic.js b/docs/src/examples/modules/Modal/Types/ModalExampleBasic.js index b234217d3c..eafd76b62d 100644 --- a/docs/src/examples/modules/Modal/Types/ModalExampleBasic.js +++ b/docs/src/examples/modules/Modal/Types/ModalExampleBasic.js @@ -1,5 +1,12 @@ import React from 'react' -import { Button, Header, Icon, Modal } from 'semantic-ui-react' +import { + ModalContent, + ModalActions, + Button, + Header, + Icon, + Modal, +} from 'semantic-ui-react' function ModalExampleBasic() { const [open, setOpen] = React.useState(false) @@ -17,20 +24,20 @@ function ModalExampleBasic() { Archive Old Messages - +

Your inbox is getting full, would you like us to enable automatic archiving of old messages?

- - + + - + ) } diff --git a/docs/src/examples/modules/Modal/Types/ModalExampleModal.js b/docs/src/examples/modules/Modal/Types/ModalExampleModal.js index ce98a34ef1..dc33091db0 100644 --- a/docs/src/examples/modules/Modal/Types/ModalExampleModal.js +++ b/docs/src/examples/modules/Modal/Types/ModalExampleModal.js @@ -1,5 +1,14 @@ import React from 'react' -import { Button, Header, Image, Modal } from 'semantic-ui-react' +import { + ModalHeader, + ModalDescription, + ModalContent, + ModalActions, + Button, + Header, + Image, + Modal, +} from 'semantic-ui-react' function ModalExampleModal() { const [open, setOpen] = React.useState(false) @@ -11,19 +20,19 @@ function ModalExampleModal() { open={open} trigger={} > - Select a Photo - + Select a Photo + - +
Default Profile Image

We've found the following gravatar image associated with your e-mail address.

Is it okay to use this photo?

- - - + + + @@ -34,7 +43,7 @@ function ModalExampleModal() { onClick={() => setOpen(false)} positive /> - + ) } diff --git a/docs/src/examples/modules/Modal/Usage/ModalExampleCallbacks.js b/docs/src/examples/modules/Modal/Usage/ModalExampleCallbacks.js index c06ffd7376..6d02f5ebe5 100644 --- a/docs/src/examples/modules/Modal/Usage/ModalExampleCallbacks.js +++ b/docs/src/examples/modules/Modal/Usage/ModalExampleCallbacks.js @@ -1,5 +1,15 @@ import React from 'react' -import { Button, Grid, Label, Modal, Segment } from 'semantic-ui-react' +import { + ModalHeader, + ModalContent, + ModalActions, + GridColumn, + Button, + Grid, + Label, + Modal, + Segment, +} from 'semantic-ui-react' function exampleReducer(state, action) { switch (action.type) { @@ -45,7 +55,7 @@ function ModalExampleCloseConfig() { return ( - + dispatch({ event: e.type, name: 'onOpen', type: 'OPEN_MODAL' }) @@ -56,11 +66,11 @@ function ModalExampleCloseConfig() { open={open} trigger={} > - Delete Your Account - + Delete Your Account +

Are you sure you want to delete your account

- - + + - + - - + + {log.length > 0 && ( {log.map((entry, i) => ( @@ -114,7 +124,7 @@ function ModalExampleCloseConfig() { Clear - + ) } diff --git a/docs/src/examples/modules/Modal/Usage/ModalExampleCloseConfig.js b/docs/src/examples/modules/Modal/Usage/ModalExampleCloseConfig.js index 91f3606a65..9826482bc5 100644 --- a/docs/src/examples/modules/Modal/Usage/ModalExampleCloseConfig.js +++ b/docs/src/examples/modules/Modal/Usage/ModalExampleCloseConfig.js @@ -1,5 +1,14 @@ import React from 'react' -import { Button, Checkbox, Grid, Modal } from 'semantic-ui-react' +import { + ModalHeader, + ModalContent, + ModalActions, + GridColumn, + Button, + Checkbox, + Grid, + Modal, +} from 'semantic-ui-react' function exampleReducer(state, action) { switch (action.type) { @@ -27,7 +36,7 @@ function ModalExampleCloseConfig() { return ( - + closeOnEscape }} @@ -43,9 +52,9 @@ function ModalExampleCloseConfig() { dispatch({ type: 'CONFIG_CLOSE_ON_DIMMER_CLICK', value: checked }) } /> - + - + dispatch({ type: 'CLOSE_MODAL' })} trigger={} > - Delete Your Account - + Delete Your Account +

Are you sure you want to delete your account

- - + + - + - + ) } diff --git a/docs/src/examples/modules/Modal/Usage/ModalExampleMultiple.js b/docs/src/examples/modules/Modal/Usage/ModalExampleMultiple.js index 39de78cb32..0243360786 100644 --- a/docs/src/examples/modules/Modal/Usage/ModalExampleMultiple.js +++ b/docs/src/examples/modules/Modal/Usage/ModalExampleMultiple.js @@ -1,5 +1,13 @@ import React from 'react' -import { Button, Icon, Modal } from 'semantic-ui-react' +import { + ModalHeader, + ModalDescription, + ModalContent, + ModalActions, + Button, + Icon, + Modal, +} from 'semantic-ui-react' function ModalExampleMultiple() { const [firstOpen, setFirstOpen] = React.useState(false) @@ -14,37 +22,37 @@ function ModalExampleMultiple() { onOpen={() => setFirstOpen(true)} open={firstOpen} > - Modal #1 - + Modal #1 +
- +

We have more to share with you. Follow us along to modal 2

- - - + + + - + setSecondOpen(false)} open={secondOpen} size='small' > - Modal #2 - + Modal #2 +

That's everything!

- - + + } > - Modal Header - + Modal Header + - +

This is an example of expanded content that will cause the modal's dimmer to scroll. @@ -49,13 +58,13 @@ function ModalScrollingExample() { style={{ marginBottom: 10 }} /> - - - + + + - + ) } diff --git a/docs/src/examples/modules/Modal/Variations/ModalExampleScrollingContent.js b/docs/src/examples/modules/Modal/Variations/ModalExampleScrollingContent.js index 0913fc788d..54002a2a12 100644 --- a/docs/src/examples/modules/Modal/Variations/ModalExampleScrollingContent.js +++ b/docs/src/examples/modules/Modal/Variations/ModalExampleScrollingContent.js @@ -1,5 +1,14 @@ import React from 'react' -import { Button, Icon, Image, Modal } from 'semantic-ui-react' +import { + ModalHeader, + ModalDescription, + ModalContent, + ModalActions, + Button, + Icon, + Image, + Modal, +} from 'semantic-ui-react' const ModalExampleScrollingContent = () => { const [open, setOpen] = React.useState(false) @@ -11,11 +20,11 @@ const ModalExampleScrollingContent = () => { onOpen={() => setOpen(true)} trigger={} > - Profile Picture - + Profile Picture + - +

This is an example of expanded content that will cause the modal's dimmer to scroll. @@ -50,13 +59,13 @@ const ModalExampleScrollingContent = () => { style={{ marginBottom: 10 }} /> - - - + + + - + ) } diff --git a/docs/src/examples/modules/Modal/Variations/ModalExampleSize.js b/docs/src/examples/modules/Modal/Variations/ModalExampleSize.js index 3073021eaa..6227224e82 100644 --- a/docs/src/examples/modules/Modal/Variations/ModalExampleSize.js +++ b/docs/src/examples/modules/Modal/Variations/ModalExampleSize.js @@ -1,5 +1,12 @@ import React from 'react' -import { Button, Icon, Modal } from 'semantic-ui-react' +import { + ModalHeader, + ModalContent, + ModalActions, + Button, + Icon, + Modal, +} from 'semantic-ui-react' function exampleReducer(state, action) { switch (action.type) { @@ -43,18 +50,18 @@ const ModalExampleSize = () => { open={open} onClose={() => dispatch({ type: 'close' })} > - Delete Your Account - + Delete Your Account +

Are you sure you want to delete your account

- - + + - + ) diff --git a/docs/src/examples/modules/Modal/Variations/ModalExampleTopAligned.js b/docs/src/examples/modules/Modal/Variations/ModalExampleTopAligned.js index b1f04faa8c..b4beec4d18 100644 --- a/docs/src/examples/modules/Modal/Variations/ModalExampleTopAligned.js +++ b/docs/src/examples/modules/Modal/Variations/ModalExampleTopAligned.js @@ -1,5 +1,12 @@ import React from 'react' -import { Button, Modal } from 'semantic-ui-react' +import { + ModalHeader, + ModalDescription, + ModalContent, + ModalActions, + Button, + Modal, +} from 'semantic-ui-react' function ModalExampleTopAligned() { const [open, setOpen] = React.useState(false) @@ -12,15 +19,15 @@ function ModalExampleTopAligned() { onOpen={() => setOpen(true)} trigger={} > - Thank you! - - + Thank you! + + Your subscription has been confirmed - - - + + + - + ) } diff --git a/docs/src/examples/modules/Modal/Variations/index.js b/docs/src/examples/modules/Modal/Variations/index.js index 928f4c97a3..64a8f71759 100644 --- a/docs/src/examples/modules/Modal/Variations/index.js +++ b/docs/src/examples/modules/Modal/Variations/index.js @@ -31,8 +31,8 @@ const ModalVariationsExamples = () => ( examplePath='modules/Modal/Variations/ModalExampleScrolling' > - <Modal.Content image /> requires an image with - wrapped markup: <Image wrapped /> + <ModalContent image /> requires an image with wrapped + markup: <Image wrapped />
diff --git a/docs/src/examples/modules/Popup/Types/PopupExampleTrigger.js b/docs/src/examples/modules/Popup/Types/PopupExampleTrigger.js index 8d59a456f4..058e735bda 100644 --- a/docs/src/examples/modules/Popup/Types/PopupExampleTrigger.js +++ b/docs/src/examples/modules/Popup/Types/PopupExampleTrigger.js @@ -1,26 +1,36 @@ import React from 'react' -import { Popup, Card, Image, Rating } from 'semantic-ui-react' +import { + CardHeader, + CardDescription, + CardContent, + PopupHeader, + PopupContent, + Popup, + Card, + Image, + Rating, +} from 'semantic-ui-react' const PopupExampleTrigger = () => ( - - My Neighbor Totoro - + + My Neighbor Totoro + Two sisters move to the country with their father in order to be closer to their hospitalized mother, and discover the surrounding trees are inhabited by magical spirits. - - + + } > - User Rating - + User Rating + - + ) diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleActions.js b/docs/src/examples/modules/Popup/Usage/PopupExampleActions.js index 28e19b1d95..2d933bff4b 100644 --- a/docs/src/examples/modules/Popup/Usage/PopupExampleActions.js +++ b/docs/src/examples/modules/Popup/Usage/PopupExampleActions.js @@ -1,9 +1,9 @@ import React from 'react' -import { Button, Grid, Input, Popup } from 'semantic-ui-react' +import { GridColumn, Button, Grid, Input, Popup } from 'semantic-ui-react' const PopupExampleActions = () => ( - + } content='Sends an email invite to a friend.' @@ -23,15 +23,15 @@ const PopupExampleActions = () => ( content='You may search by genre, header, year and actors' on='focus' /> - - + + Click me or Hover me} header='Movie Search' content='Multiple events can trigger a popup' on={['hover', 'click']} /> - + ) diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleControlled.js b/docs/src/examples/modules/Popup/Usage/PopupExampleControlled.js index bb60a4a171..de514eefee 100644 --- a/docs/src/examples/modules/Popup/Usage/PopupExampleControlled.js +++ b/docs/src/examples/modules/Popup/Usage/PopupExampleControlled.js @@ -1,5 +1,12 @@ import React from 'react' -import { Button, Grid, Header, Popup, Segment } from 'semantic-ui-react' +import { + GridColumn, + Button, + Grid, + Header, + Popup, + Segment, +} from 'semantic-ui-react' const timeoutLength = 2500 @@ -22,7 +29,7 @@ class PopupExampleControlled extends React.Component { render() { return ( - + } content={`This message will self-destruct in ${ @@ -34,13 +41,13 @@ class PopupExampleControlled extends React.Component { onOpen={this.handleOpen} position='top right' /> - - + +
State
{JSON.stringify(this.state, null, 2)}
 - + ) } diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleEventsEnabled.js b/docs/src/examples/modules/Popup/Usage/PopupExampleEventsEnabled.js index c0bbebc02f..363ab688ec 100644 --- a/docs/src/examples/modules/Popup/Usage/PopupExampleEventsEnabled.js +++ b/docs/src/examples/modules/Popup/Usage/PopupExampleEventsEnabled.js @@ -1,5 +1,12 @@ import React from 'react' -import { Button, Checkbox, Divider, Grid, Popup } from 'semantic-ui-react' +import { + GridColumn, + Button, + Checkbox, + Divider, + Grid, + Popup, +} from 'semantic-ui-react' const PopupExampleEventsEnabled = () => { const [eventsEnabled, setEventsEnabled] = React.useState(true) @@ -7,7 +14,7 @@ const PopupExampleEventsEnabled = () => { return ( - + open }} @@ -19,9 +26,9 @@ const PopupExampleEventsEnabled = () => { label={{ children: eventsEnabled }} onChange={(e, data) => setEventsEnabled(data.checked)} /> - + - + { open={open} trigger={} flowing hoverable> - +
Basic Plan

2 projects, $10 a month

- - + +
Business Plan

5 projects, $20 a month

- - + +
Premium Plan

8 projects, $25 a month

- + ) diff --git a/docs/src/examples/modules/Popup/Variations/PopupExamplePosition.js b/docs/src/examples/modules/Popup/Variations/PopupExamplePosition.js index db0173af48..5b9c62f4c6 100644 --- a/docs/src/examples/modules/Popup/Variations/PopupExamplePosition.js +++ b/docs/src/examples/modules/Popup/Variations/PopupExamplePosition.js @@ -1,70 +1,70 @@ import React from 'react' -import { Icon, Popup, Grid } from 'semantic-ui-react' +import { GridRow, GridColumn, Icon, Popup, Grid } from 'semantic-ui-react' const PopupExamplePosition = () => ( - - + + } content='I am positioned to the top left' position='top left' /> - - + + } content='I am positioned to the top center' position='top center' /> - - + + } content='I am positioned to the top right' position='top right' /> - - - - + + + + } content='I am positioned to the left center' position='left center' /> - - + + } content='I am positioned to the right center' position='right center' /> - - - - + + + + } content='I am positioned to the bottom left' position='bottom left' /> - - + + } content='I am positioned to the bottom center' position='bottom center' /> - - + + } content='I am positioned to the bottom right' position='bottom right' /> - - + + ) diff --git a/docs/src/examples/modules/Search/Types/SearchExampleCategory.js b/docs/src/examples/modules/Search/Types/SearchExampleCategory.js index ed6e7cf7e2..8b4eacb284 100644 --- a/docs/src/examples/modules/Search/Types/SearchExampleCategory.js +++ b/docs/src/examples/modules/Search/Types/SearchExampleCategory.js @@ -1,7 +1,7 @@ import _ from 'lodash' import faker from 'faker' import React, { Component } from 'react' -import { Search, Grid, Header, Segment } from 'semantic-ui-react' +import { GridColumn, Search, Grid, Header, Segment } from 'semantic-ui-react' const initialState = { isLoading: false, results: [], value: '' } @@ -62,7 +62,7 @@ export default class SearchExampleCategory extends Component { return ( - + - - + +
State
@@ -85,7 +85,7 @@ export default class SearchExampleCategory extends Component {
               {JSON.stringify(source, null, 2)}
- + ) } diff --git a/docs/src/examples/modules/Search/Types/SearchExampleCategoryCustom.js b/docs/src/examples/modules/Search/Types/SearchExampleCategoryCustom.js index 237370ce89..99ddd7bd66 100644 --- a/docs/src/examples/modules/Search/Types/SearchExampleCategoryCustom.js +++ b/docs/src/examples/modules/Search/Types/SearchExampleCategoryCustom.js @@ -2,7 +2,14 @@ import PropTypes from 'prop-types' import _ from 'lodash' import faker from 'faker' import React, { Component } from 'react' -import { Search, Grid, Header, Segment, Label } from 'semantic-ui-react' +import { + GridColumn, + Search, + Grid, + Header, + Segment, + Label, +} from 'semantic-ui-react' const categoryLayoutRenderer = ({ categoryContent, resultsContent }) => (
@@ -90,7 +97,7 @@ export default class SearchExampleCategory extends Component { return ( - + - - + +
State
@@ -116,7 +123,7 @@ export default class SearchExampleCategory extends Component {
               {JSON.stringify(source, null, 2)}
- + ) } diff --git a/docs/src/examples/modules/Search/Types/SearchExampleStandard.js b/docs/src/examples/modules/Search/Types/SearchExampleStandard.js index 2e61fb7edb..13abd8c540 100644 --- a/docs/src/examples/modules/Search/Types/SearchExampleStandard.js +++ b/docs/src/examples/modules/Search/Types/SearchExampleStandard.js @@ -1,7 +1,7 @@ import _ from 'lodash' import faker from 'faker' import React from 'react' -import { Search, Grid, Header, Segment } from 'semantic-ui-react' +import { GridColumn, Search, Grid, Header, Segment } from 'semantic-ui-react' const source = _.times(5, () => ({ title: faker.company.companyName(), @@ -64,7 +64,7 @@ function SearchExampleStandard() { return ( - + - + - +
State
@@ -88,7 +88,7 @@ function SearchExampleStandard() {
             {JSON.stringify(source, null, 2)}
- + ) } diff --git a/docs/src/examples/modules/Search/Types/SearchExampleStandardCustom.js b/docs/src/examples/modules/Search/Types/SearchExampleStandardCustom.js index 90d86b34f9..f721defdfd 100644 --- a/docs/src/examples/modules/Search/Types/SearchExampleStandardCustom.js +++ b/docs/src/examples/modules/Search/Types/SearchExampleStandardCustom.js @@ -1,7 +1,14 @@ import _ from 'lodash' import faker from 'faker' import React from 'react' -import { Search, Grid, Header, Segment, Label } from 'semantic-ui-react' +import { + GridColumn, + Search, + Grid, + Header, + Segment, + Label, +} from 'semantic-ui-react' const source = _.times(5, () => ({ title: faker.company.companyName(), @@ -66,7 +73,7 @@ function SearchExampleStandardCustom() { return ( - + @@ -77,9 +84,9 @@ function SearchExampleStandardCustom() { results={results} value={value} /> - + - +
State
@@ -90,7 +97,7 @@ function SearchExampleStandardCustom() {
             {JSON.stringify(source, null, 2)}
- + ) } diff --git a/docs/src/examples/modules/Search/Variations/SearchExampleAligned.js b/docs/src/examples/modules/Search/Variations/SearchExampleAligned.js index ac17ad7797..e55aedfbe0 100644 --- a/docs/src/examples/modules/Search/Variations/SearchExampleAligned.js +++ b/docs/src/examples/modules/Search/Variations/SearchExampleAligned.js @@ -1,7 +1,7 @@ import _ from 'lodash' import faker from 'faker' import React, { Component } from 'react' -import { Search, Grid, Header, Segment } from 'semantic-ui-react' +import { GridColumn, Search, Grid, Header, Segment } from 'semantic-ui-react' const source = _.times(5, () => ({ title: faker.company.companyName(), @@ -38,7 +38,7 @@ export default class SearchExampleStandard extends Component { return ( - + - - + +
State
@@ -61,7 +61,7 @@ export default class SearchExampleStandard extends Component {
               {JSON.stringify(source, null, 2)}
- + ) } diff --git a/docs/src/examples/modules/Search/Variations/SearchExampleFluid.js b/docs/src/examples/modules/Search/Variations/SearchExampleFluid.js index c918276419..1e6fdaf852 100644 --- a/docs/src/examples/modules/Search/Variations/SearchExampleFluid.js +++ b/docs/src/examples/modules/Search/Variations/SearchExampleFluid.js @@ -1,7 +1,7 @@ import _ from 'lodash' import faker from 'faker' import React, { Component } from 'react' -import { Search, Grid, Header, Segment } from 'semantic-ui-react' +import { GridColumn, Search, Grid, Header, Segment } from 'semantic-ui-react' const source = _.times(5, () => ({ title: faker.company.companyName(), @@ -38,7 +38,7 @@ export default class SearchExampleStandard extends Component { return ( - + - - + +
State
@@ -61,7 +61,7 @@ export default class SearchExampleStandard extends Component {
               {JSON.stringify(source, null, 2)}
- + ) } diff --git a/docs/src/examples/modules/Search/Variations/SearchExampleInput.js b/docs/src/examples/modules/Search/Variations/SearchExampleInput.js index 8b57ba4763..107094f4c7 100644 --- a/docs/src/examples/modules/Search/Variations/SearchExampleInput.js +++ b/docs/src/examples/modules/Search/Variations/SearchExampleInput.js @@ -1,7 +1,7 @@ import _ from 'lodash' import faker from 'faker' import React, { Component } from 'react' -import { Search, Grid, Header, Segment } from 'semantic-ui-react' +import { GridColumn, Search, Grid, Header, Segment } from 'semantic-ui-react' const source = _.times(5, () => ({ title: faker.company.companyName(), @@ -38,7 +38,7 @@ export default class SearchExampleStandard extends Component { return ( - + - - + +
State
@@ -61,7 +61,7 @@ export default class SearchExampleStandard extends Component {
               {JSON.stringify(source, null, 2)}
- + ) } diff --git a/docs/src/examples/modules/Sidebar/Examples/SidebarExampleMultiple.js b/docs/src/examples/modules/Sidebar/Examples/SidebarExampleMultiple.js index 0e054cddfc..a538bee07c 100644 --- a/docs/src/examples/modules/Sidebar/Examples/SidebarExampleMultiple.js +++ b/docs/src/examples/modules/Sidebar/Examples/SidebarExampleMultiple.js @@ -1,5 +1,9 @@ import React from 'react' import { + SidebarPusher, + SidebarPushable, + MenuItem, + GridColumn, Checkbox, Grid, Header, @@ -15,16 +19,16 @@ const SidebarExampleMultiple = () => { return ( - + visible }} onChange={(e, data) => setVisible(data.checked)} /> - + - - + + { visible={visible} width='thin' > - + Home - - + + Games - - + + Channels - + { vertical visible={visible} > - + File Permissions - - Share on Social - Share by E-mail - Edit Permissions - Delete Permanently + + Share on Social + Share by E-mail + Edit Permissions + Delete Permanently - +
Application Content
 - - - + + + ) } diff --git a/docs/src/examples/modules/Sidebar/Examples/SidebarExampleTransitions.js b/docs/src/examples/modules/Sidebar/Examples/SidebarExampleTransitions.js index a46afb31d2..510236d4b4 100644 --- a/docs/src/examples/modules/Sidebar/Examples/SidebarExampleTransitions.js +++ b/docs/src/examples/modules/Sidebar/Examples/SidebarExampleTransitions.js @@ -1,5 +1,11 @@ import React from 'react' import { + SidebarPusher, + SidebarPushable, + ButtonGroup, + MenuItem, + GridRow, + GridColumn, Button, Checkbox, Grid, @@ -19,22 +25,22 @@ const HorizontalSidebar = ({ animation, direction, visible }) => ( visible={visible} > - - + +
New Content Awaits
- - - - + + + + - - + + - - + + - - + + ) @@ -50,18 +56,18 @@ const VerticalSidebar = ({ animation, direction, visible }) => ( visible={visible} width='thin' > - + Home - - + + Games - - + + Channels - + ) @@ -101,7 +107,7 @@ function SidebarExampleTransitions() { />
Direction
- + - +
All Direction Animations
) } diff --git a/docs/src/examples/modules/Sidebar/Examples/index.js b/docs/src/examples/modules/Sidebar/Examples/index.js index e8ca5c0fae..0ffcced083 100644 --- a/docs/src/examples/modules/Sidebar/Examples/index.js +++ b/docs/src/examples/modules/Sidebar/Examples/index.js @@ -1,5 +1,13 @@ import React from 'react' -import { Icon, Table } from 'semantic-ui-react' +import { + TableRow, + TableHeaderCell, + TableHeader, + TableCell, + TableBody, + Icon, + Table, +} from 'semantic-ui-react' import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample' import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection' @@ -15,88 +23,88 @@ const SidebarExamplesExamples = () => ( examplePath='modules/Sidebar/Examples/SidebarExampleTransitions' > - - - - Multiple Visible - Supports Vertical Sidebars - Supports Horizontal Sidebars - - - - - Overlay - + + + + Multiple Visible + Supports Vertical Sidebars + Supports Horizontal Sidebars + + + + + Overlay + - - + + - - + + - - - - Push - + + + + Push + - - + + - - + + - - - - Scale Down - + + + + Scale Down + - - + + - - + + - - - - Uncover - + + + + Uncover + - - + + - - + + - - - - Slide Along - + + + + Slide Along + - - + + - - + + - - - - Slide Out - + + + + Slide Out + - - + + - - + + - - - + + +
{ Toggle - Hello world! + Hello world! - - + + { visible={visible} width='thin' > - + Home - - + + Games - - + + Channels - + - +
Application Content
{ ]} /> - - - + + + ) diff --git a/docs/src/examples/modules/Sidebar/States/SidebarExampleDimmed.js b/docs/src/examples/modules/Sidebar/States/SidebarExampleDimmed.js index 359abc77ee..ec6d1ad8a4 100644 --- a/docs/src/examples/modules/Sidebar/States/SidebarExampleDimmed.js +++ b/docs/src/examples/modules/Sidebar/States/SidebarExampleDimmed.js @@ -1,5 +1,9 @@ import React from 'react' import { + SidebarPusher, + SidebarPushable, + MenuItem, + GridColumn, Checkbox, Grid, Header, @@ -15,16 +19,16 @@ const SidebarExampleDimmed = () => { return ( - + visible }} onChange={(e, data) => setVisible(data.checked)} /> - + - - + + { visible={visible} width='thin' > - + Home - - + + Games - - + + Channels - + - +
Application Content
 - - - + + + ) } diff --git a/docs/src/examples/modules/Sidebar/States/SidebarExampleVisible.js b/docs/src/examples/modules/Sidebar/States/SidebarExampleVisible.js index b297998058..7f19942d6c 100644 --- a/docs/src/examples/modules/Sidebar/States/SidebarExampleVisible.js +++ b/docs/src/examples/modules/Sidebar/States/SidebarExampleVisible.js @@ -1,8 +1,18 @@ import React from 'react' -import { Header, Icon, Image, Menu, Segment, Sidebar } from 'semantic-ui-react' +import { + SidebarPusher, + SidebarPushable, + MenuItem, + Header, + Icon, + Image, + Menu, + Segment, + Sidebar, +} from 'semantic-ui-react' const SidebarExampleVisible = () => ( - + ( visible width='thin' > - + Home - - + + Games - - + + Channels - + - +
Application Content
 - - + + ) export default SidebarExampleVisible diff --git a/docs/src/examples/modules/Sidebar/Types/SidebarExampleSidebar.js b/docs/src/examples/modules/Sidebar/Types/SidebarExampleSidebar.js index b6ae792b58..660cb75292 100644 --- a/docs/src/examples/modules/Sidebar/Types/SidebarExampleSidebar.js +++ b/docs/src/examples/modules/Sidebar/Types/SidebarExampleSidebar.js @@ -1,5 +1,9 @@ import React from 'react' import { + SidebarPusher, + SidebarPushable, + MenuItem, + GridColumn, Checkbox, Grid, Header, @@ -15,16 +19,16 @@ const SidebarExampleSidebar = () => { return ( - + visible }} onChange={(e, data) => setVisible(data.checked)} /> - + - - + + { visible={visible} width='thin' > - + Home - - + + Games - - + + Channels - + - +
Application Content
 - - - + + + ) } diff --git a/docs/src/examples/modules/Sidebar/Usage/SidebarExampleCallback.js b/docs/src/examples/modules/Sidebar/Usage/SidebarExampleCallback.js index 61179ec549..21788a0f14 100644 --- a/docs/src/examples/modules/Sidebar/Usage/SidebarExampleCallback.js +++ b/docs/src/examples/modules/Sidebar/Usage/SidebarExampleCallback.js @@ -1,5 +1,10 @@ import React from 'react' import { + SidebarPusher, + SidebarPushable, + SegmentGroup, + MenuItem, + GridColumn, Button, Checkbox, Grid, @@ -36,16 +41,16 @@ const SidebarExampleCallback = () => { return ( - + visible }} onChange={(e, data) => setVisible(data.checked)} /> - + - - + + { visible={visible} width='thin' > - Home - Games - Channels + Home + Games + Channels - +
Application Content
 - - - + + + - - + +
) } diff --git a/docs/src/examples/modules/Transition/Types/index.js b/docs/src/examples/modules/Transition/Types/index.js index b8ef457ca7..68f7450768 100644 --- a/docs/src/examples/modules/Transition/Types/index.js +++ b/docs/src/examples/modules/Transition/Types/index.js @@ -1,5 +1,5 @@ import React from 'react' -import { Message } from 'semantic-ui-react' +import { MessageItem, MessageList, Message } from 'semantic-ui-react' import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample' import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection' @@ -13,16 +13,16 @@ const TransitionTypesExamples = () => ( >

Do not unmount a Transition child or else it cannot be animated.

- - + + Use the unmountOnHide prop to unmount the child after the animation exits. - - - Use a Transition.Group to animate children as they - mount and unmount. - - + + + Use a TransitionGroup to animate children as they mount + and unmount. + + - - + - - - + +
- + - + ) } diff --git a/docs/src/examples/views/Card/Content/CardExampleContentBlock.js b/docs/src/examples/views/Card/Content/CardExampleContentBlock.js index f86676ff3b..81e201b8ef 100644 --- a/docs/src/examples/views/Card/Content/CardExampleContentBlock.js +++ b/docs/src/examples/views/Card/Content/CardExampleContentBlock.js @@ -1,44 +1,54 @@ import React from 'react' -import { Card, Feed } from 'semantic-ui-react' +import { + FeedSummary, + FeedLabel, + FeedEvent, + FeedDate, + FeedContent, + CardHeader, + CardContent, + Card, + Feed, +} from 'semantic-ui-react' const CardExampleContentBlock = () => ( - - Recent Activity - - + + Recent Activity + + - - - - - + + + + + You added Jenny Hess to your coworker group. - - - + + + - - - - - + + + + + You added Molly Malone as a friend. - - - + + + - - - - - + + + + + You added Elliot Baker to your musicians group. - - - + + + - + ) diff --git a/docs/src/examples/views/Card/Content/CardExampleExtraContent.js b/docs/src/examples/views/Card/Content/CardExampleExtraContent.js index d8c11790be..ddbb69984f 100644 --- a/docs/src/examples/views/Card/Content/CardExampleExtraContent.js +++ b/docs/src/examples/views/Card/Content/CardExampleExtraContent.js @@ -1,5 +1,5 @@ import React from 'react' -import { Card, Icon } from 'semantic-ui-react' +import { CardContent, Card, Icon } from 'semantic-ui-react' const description = [ 'Amy is a violinist with 2 years experience in the wedding industry.', @@ -8,11 +8,11 @@ const description = [ const CardExampleExtraContent = () => ( - - - + + + 4 Friends - + ) diff --git a/docs/src/examples/views/Card/Content/CardExampleHeaderCard.js b/docs/src/examples/views/Card/Content/CardExampleHeaderCard.js index 4977843eda..968974f33d 100644 --- a/docs/src/examples/views/Card/Content/CardExampleHeaderCard.js +++ b/docs/src/examples/views/Card/Content/CardExampleHeaderCard.js @@ -1,28 +1,35 @@ import React from 'react' -import { Card } from 'semantic-ui-react' +import { + CardMeta, + CardHeader, + CardGroup, + CardDescription, + CardContent, + Card, +} from 'semantic-ui-react' const CardExampleHeaderCard = () => ( - + - - Matthew Harris - Co-Worker - + + Matthew Harris + Co-Worker + Matthew is a pianist living in Nashville. - - + + - - - - - + + + + + - ( meta='Friend' description='Jenny is a student studying Media Management at the New School' /> - + ) export default CardExampleHeaderCard diff --git a/docs/src/examples/views/Card/Content/CardExampleImageCard.js b/docs/src/examples/views/Card/Content/CardExampleImageCard.js index d28a87c232..b87292599a 100644 --- a/docs/src/examples/views/Card/Content/CardExampleImageCard.js +++ b/docs/src/examples/views/Card/Content/CardExampleImageCard.js @@ -1,22 +1,30 @@ import React from 'react' -import { Card, Icon, Image } from 'semantic-ui-react' +import { + CardMeta, + CardHeader, + CardDescription, + CardContent, + Card, + Icon, + Image, +} from 'semantic-ui-react' const CardExampleImageCard = () => ( - - Daniel - Joined in 2016 - + + Daniel + Joined in 2016 + Daniel is a comedian living in Nashville. - - - + + + 10 Friends - + ) diff --git a/docs/src/examples/views/Card/Types/CardExampleCard.js b/docs/src/examples/views/Card/Types/CardExampleCard.js index 9ea23e9aa6..31016a7140 100644 --- a/docs/src/examples/views/Card/Types/CardExampleCard.js +++ b/docs/src/examples/views/Card/Types/CardExampleCard.js @@ -1,24 +1,32 @@ import React from 'react' -import { Card, Icon, Image } from 'semantic-ui-react' +import { + CardMeta, + CardHeader, + CardDescription, + CardContent, + Card, + Icon, + Image, +} from 'semantic-ui-react' const CardExampleCard = () => ( - - Matthew - + + Matthew + Joined in 2015 - - + + Matthew is a musician living in Nashville. - - - + + + 22 Friends - + ) diff --git a/docs/src/examples/views/Card/Types/CardExampleGroupProps.js b/docs/src/examples/views/Card/Types/CardExampleGroupProps.js index e34c796281..9fd941e313 100644 --- a/docs/src/examples/views/Card/Types/CardExampleGroupProps.js +++ b/docs/src/examples/views/Card/Types/CardExampleGroupProps.js @@ -1,5 +1,5 @@ import React from 'react' -import { Card } from 'semantic-ui-react' +import { CardGroup } from 'semantic-ui-react' const items = [ { @@ -22,6 +22,6 @@ const items = [ }, ] -const CardExampleGroupProps = () => +const CardExampleGroupProps = () => export default CardExampleGroupProps diff --git a/docs/src/examples/views/Card/Types/CardExampleGroups.js b/docs/src/examples/views/Card/Types/CardExampleGroups.js index e066c196e1..80681f9310 100644 --- a/docs/src/examples/views/Card/Types/CardExampleGroups.js +++ b/docs/src/examples/views/Card/Types/CardExampleGroups.js @@ -1,22 +1,31 @@ import React from 'react' -import { Button, Card, Image } from 'semantic-ui-react' +import { + CardMeta, + CardHeader, + CardGroup, + CardDescription, + CardContent, + Button, + Card, + Image, +} from 'semantic-ui-react' const CardExampleGroups = () => ( - + - + - Steve Sanders - Friends of Elliot - + Steve Sanders + Friends of Elliot + Steve wants to add you to the group best friends - - - + + +
- + - + - Molly Thomas - New User - + Molly Thomas + New User + Molly wants to add you to the group musicians - - - + + +
- + - + - Jenny Lawrence - New User - + Jenny Lawrence + New User + Jenny requested permission to view your contact details - - - + + +
- + - + ) export default CardExampleGroups diff --git a/docs/src/examples/views/Card/Variations/CardExampleColored.js b/docs/src/examples/views/Card/Variations/CardExampleColored.js index 9bf4b7f468..cdb2204a97 100644 --- a/docs/src/examples/views/Card/Variations/CardExampleColored.js +++ b/docs/src/examples/views/Card/Variations/CardExampleColored.js @@ -1,10 +1,10 @@ import React from 'react' -import { Card } from 'semantic-ui-react' +import { CardGroup, Card } from 'semantic-ui-react' const src = '/images/wireframe/white-image.png' const CardExampleColored = () => ( - + @@ -17,7 +17,7 @@ const CardExampleColored = () => ( - + ) export default CardExampleColored diff --git a/docs/src/examples/views/Card/Variations/CardExampleColumnCount.js b/docs/src/examples/views/Card/Variations/CardExampleColumnCount.js index 98d87ea07d..04f322395d 100644 --- a/docs/src/examples/views/Card/Variations/CardExampleColumnCount.js +++ b/docs/src/examples/views/Card/Variations/CardExampleColumnCount.js @@ -1,10 +1,10 @@ import React from 'react' -import { Card } from 'semantic-ui-react' +import { CardGroup, Card } from 'semantic-ui-react' const src = '/images/wireframe/image.png' const CardExampleColumnCount = () => ( - + @@ -17,7 +17,7 @@ const CardExampleColumnCount = () => ( - + ) export default CardExampleColumnCount diff --git a/docs/src/examples/views/Card/Variations/CardExampleFluid.js b/docs/src/examples/views/Card/Variations/CardExampleFluid.js index ddbcd0174a..46f9ce04bf 100644 --- a/docs/src/examples/views/Card/Variations/CardExampleFluid.js +++ b/docs/src/examples/views/Card/Variations/CardExampleFluid.js @@ -1,12 +1,12 @@ import React from 'react' -import { Card } from 'semantic-ui-react' +import { CardGroup, Card } from 'semantic-ui-react' const CardExampleFluid = () => ( - + - + ) export default CardExampleFluid diff --git a/docs/src/examples/views/Card/Variations/CardExampleGroupCentered.js b/docs/src/examples/views/Card/Variations/CardExampleGroupCentered.js index 4a545d6430..723d5adcca 100644 --- a/docs/src/examples/views/Card/Variations/CardExampleGroupCentered.js +++ b/docs/src/examples/views/Card/Variations/CardExampleGroupCentered.js @@ -1,5 +1,5 @@ import React from 'react' -import { Card } from 'semantic-ui-react' +import { CardGroup } from 'semantic-ui-react' const items = [ { @@ -16,6 +16,6 @@ const items = [ }, ] -const CardExampleGroupCentered = () => +const CardExampleGroupCentered = () => export default CardExampleGroupCentered diff --git a/docs/src/examples/views/Comment/Content/CommentExampleActions.js b/docs/src/examples/views/Comment/Content/CommentExampleActions.js index a7eb4ab60a..10c6bbb0c6 100644 --- a/docs/src/examples/views/Comment/Content/CommentExampleActions.js +++ b/docs/src/examples/views/Comment/Content/CommentExampleActions.js @@ -1,28 +1,38 @@ import React from 'react' -import { Comment, Icon } from 'semantic-ui-react' +import { + CommentText, + CommentGroup, + CommentContent, + CommentAvatar, + CommentActions, + CommentAction, + CommentAuthor, + Comment, + Icon, +} from 'semantic-ui-react' const CommentExampleActions = () => ( - + - - - Tom Lukic - + + + Tom Lukic + This will be great for business reports. I will definitely download this. - - - Reply - Save - Hide - + + + Reply + Save + Hide + Full-screen - - - + + + - + ) export default CommentExampleActions diff --git a/docs/src/examples/views/Comment/Content/CommentExampleAvatar.js b/docs/src/examples/views/Comment/Content/CommentExampleAvatar.js index 2164beb446..a7f8f232ac 100644 --- a/docs/src/examples/views/Comment/Content/CommentExampleAvatar.js +++ b/docs/src/examples/views/Comment/Content/CommentExampleAvatar.js @@ -1,15 +1,21 @@ import React from 'react' -import { Comment } from 'semantic-ui-react' +import { + CommentGroup, + CommentContent, + CommentAvatar, + CommentAuthor, + Comment, +} from 'semantic-ui-react' const CommentExampleAvatar = () => ( - + - - - Elliot Fu - + + + Elliot Fu + - + ) export default CommentExampleAvatar diff --git a/docs/src/examples/views/Comment/Content/CommentExampleMetadata.js b/docs/src/examples/views/Comment/Content/CommentExampleMetadata.js index b7ececccdc..8114102ed4 100644 --- a/docs/src/examples/views/Comment/Content/CommentExampleMetadata.js +++ b/docs/src/examples/views/Comment/Content/CommentExampleMetadata.js @@ -1,25 +1,34 @@ import React from 'react' -import { Comment, Icon } from 'semantic-ui-react' +import { + CommentText, + CommentMetadata, + CommentGroup, + CommentContent, + CommentAvatar, + CommentAuthor, + Comment, + Icon, +} from 'semantic-ui-react' const CommentExampleMetadata = () => ( - + - - - Stevie Feliciano - + + + Stevie Feliciano +
2 days ago
5 Faves
- - + + Hey guys, I hope this example comment is helping you read this documentation. - - + + - + ) export default CommentExampleMetadata diff --git a/docs/src/examples/views/Comment/Content/CommentExampleReplyForm.js b/docs/src/examples/views/Comment/Content/CommentExampleReplyForm.js index 8201a70908..2a1c17b9a1 100644 --- a/docs/src/examples/views/Comment/Content/CommentExampleReplyForm.js +++ b/docs/src/examples/views/Comment/Content/CommentExampleReplyForm.js @@ -1,21 +1,34 @@ import React from 'react' -import { Button, Comment, Form } from 'semantic-ui-react' +import { + CommentText, + CommentMetadata, + CommentGroup, + CommentContent, + CommentAvatar, + CommentActions, + CommentAction, + CommentAuthor, + FormTextArea, + Button, + Comment, + Form, +} from 'semantic-ui-react' const CommentExampleReplyForm = () => ( - + - - - Steve Jobes - + + + Steve Jobes +
2 days ago
- - Revolutionary! - - Reply - + + Revolutionary! + + Reply +
- + - - + + - + - - Watchmen - + + Watchmen + IFC - - {paragraph} - + + {paragraph} + - - + + - + ) export default ItemExampleDivided diff --git a/docs/src/examples/views/Item/Variations/ItemExampleFloated.js b/docs/src/examples/views/Item/Variations/ItemExampleFloated.js index 1655d619ca..990ca0baac 100644 --- a/docs/src/examples/views/Item/Variations/ItemExampleFloated.js +++ b/docs/src/examples/views/Item/Variations/ItemExampleFloated.js @@ -1,46 +1,56 @@ import React from 'react' -import { Button, Image, Item } from 'semantic-ui-react' +import { + ItemImage, + ItemHeader, + ItemGroup, + ItemExtra, + ItemDescription, + ItemContent, + Button, + Image, + Item, +} from 'semantic-ui-react' const paragraph = const ItemExampleFloated = () => ( - + - + - - Content A - {paragraph} - + + Content A + {paragraph} + - - + + - + - - Content B - {paragraph} - + + Content B + {paragraph} + - - + + - + - - Content C - {paragraph} - + + Content C + {paragraph} + - - + + - + ) export default ItemExampleFloated diff --git a/docs/src/examples/views/Item/Variations/ItemExampleLink.js b/docs/src/examples/views/Item/Variations/ItemExampleLink.js index 29101f6f45..48231c12a1 100644 --- a/docs/src/examples/views/Item/Variations/ItemExampleLink.js +++ b/docs/src/examples/views/Item/Variations/ItemExampleLink.js @@ -1,37 +1,45 @@ import React from 'react' -import { Image as ImageComponent, Item } from 'semantic-ui-react' +import { + ItemImage, + ItemHeader, + ItemGroup, + ItemDescription, + ItemContent, + Image as ImageComponent, + Item, +} from 'semantic-ui-react' const paragraph = const ItemExampleLink = () => ( - + - + - - Stevie Feliciano - {paragraph} - + + Stevie Feliciano + {paragraph} + - + - - Veronika Ossi - {paragraph} - + + Veronika Ossi + {paragraph} + - + - - Jenny Hess - {paragraph} - + + Jenny Hess + {paragraph} + - + ) export default ItemExampleLink diff --git a/docs/src/examples/views/Item/Variations/ItemExampleRelaxed.js b/docs/src/examples/views/Item/Variations/ItemExampleRelaxed.js index 1f858754cf..809c7dee67 100644 --- a/docs/src/examples/views/Item/Variations/ItemExampleRelaxed.js +++ b/docs/src/examples/views/Item/Variations/ItemExampleRelaxed.js @@ -1,32 +1,38 @@ import React from 'react' -import { Item } from 'semantic-ui-react' +import { + ItemImage, + ItemHeader, + ItemGroup, + ItemContent, + Item, +} from 'semantic-ui-react' const ItemExampleRelaxed = () => ( - + - + - - 12 Years a Slave - + + 12 Years a Slave + - + - - My Neighbor Totoro - + + My Neighbor Totoro + - + - - Watchmen - + + Watchmen + - + ) export default ItemExampleRelaxed diff --git a/docs/src/examples/views/Item/Variations/ItemExampleUnstackable.js b/docs/src/examples/views/Item/Variations/ItemExampleUnstackable.js index 11ec71d0fb..5fe0e3ae24 100644 --- a/docs/src/examples/views/Item/Variations/ItemExampleUnstackable.js +++ b/docs/src/examples/views/Item/Variations/ItemExampleUnstackable.js @@ -1,18 +1,18 @@ import React from 'react' -import { Item } from 'semantic-ui-react' +import { ItemImage, ItemGroup, Item } from 'semantic-ui-react' const ItemExampleImages = () => ( - + - + - + - + ) export default ItemExampleImages diff --git a/docs/src/examples/views/Item/Variations/ItemExampleVeryRelaxed.js b/docs/src/examples/views/Item/Variations/ItemExampleVeryRelaxed.js index 809225d99e..c2b2f0ee5d 100644 --- a/docs/src/examples/views/Item/Variations/ItemExampleVeryRelaxed.js +++ b/docs/src/examples/views/Item/Variations/ItemExampleVeryRelaxed.js @@ -1,32 +1,38 @@ import React from 'react' -import { Item } from 'semantic-ui-react' +import { + ItemImage, + ItemHeader, + ItemGroup, + ItemContent, + Item, +} from 'semantic-ui-react' const ItemExampleVeryRelaxed = () => ( - + - + - - 12 Years a Slave - + + 12 Years a Slave + - + - - My Neighbor Totoro - + + My Neighbor Totoro + - + - - Watchmen - + + Watchmen + - + ) export default ItemExampleVeryRelaxed diff --git a/docs/src/examples/views/Statistic/Content/StatisticExampleLabel.js b/docs/src/examples/views/Statistic/Content/StatisticExampleLabel.js index bfd75ee65e..25032cb62d 100644 --- a/docs/src/examples/views/Statistic/Content/StatisticExampleLabel.js +++ b/docs/src/examples/views/Statistic/Content/StatisticExampleLabel.js @@ -1,10 +1,10 @@ import React from 'react' -import { Statistic } from 'semantic-ui-react' +import { StatisticValue, StatisticLabel, Statistic } from 'semantic-ui-react' const StatisticExampleLabel = () => ( - 2,204 - Views + 2,204 + Views ) diff --git a/docs/src/examples/views/Statistic/Content/StatisticExampleValue.js b/docs/src/examples/views/Statistic/Content/StatisticExampleValue.js index f72f1feb1c..b42c92843d 100644 --- a/docs/src/examples/views/Statistic/Content/StatisticExampleValue.js +++ b/docs/src/examples/views/Statistic/Content/StatisticExampleValue.js @@ -1,37 +1,44 @@ import React from 'react' -import { Icon, Image, Statistic } from 'semantic-ui-react' +import { + StatisticValue, + StatisticLabel, + StatisticGroup, + Icon, + Image, + Statistic, +} from 'semantic-ui-react' const StatisticExampleValue = () => ( - + - 22 - Saves + 22 + Saves - + Three
Thousand - - Signups + + Signups - + 5 - - Flights + + Flights - + 42 - - Team Members + + Team Members - + ) export default StatisticExampleValue diff --git a/docs/src/examples/views/Statistic/Content/StatisticExampleValueShorthand.js b/docs/src/examples/views/Statistic/Content/StatisticExampleValueShorthand.js index aaf930907a..9bf4f8f11d 100644 --- a/docs/src/examples/views/Statistic/Content/StatisticExampleValueShorthand.js +++ b/docs/src/examples/views/Statistic/Content/StatisticExampleValueShorthand.js @@ -1,13 +1,13 @@ import React from 'react' -import { Statistic } from 'semantic-ui-react' +import { StatisticGroup, Statistic } from 'semantic-ui-react' const StatisticExampleValueShorthand = () => ( - + - + ) export default StatisticExampleValueShorthand diff --git a/docs/src/examples/views/Statistic/Types/StatisticExampleGroup.js b/docs/src/examples/views/Statistic/Types/StatisticExampleGroup.js index b7de50e937..57b9973bcc 100644 --- a/docs/src/examples/views/Statistic/Types/StatisticExampleGroup.js +++ b/docs/src/examples/views/Statistic/Types/StatisticExampleGroup.js @@ -1,22 +1,27 @@ import React from 'react' -import { Statistic } from 'semantic-ui-react' +import { + StatisticValue, + StatisticLabel, + StatisticGroup, + Statistic, +} from 'semantic-ui-react' const StatisticExampleGroup = () => (
- + - 22 - Faves + 22 + Faves - 31,200 - Views + 31,200 + Views - 22 - Members + 22 + Members - +
) diff --git a/docs/src/examples/views/Statistic/Types/StatisticExampleGroupShorthand.js b/docs/src/examples/views/Statistic/Types/StatisticExampleGroupShorthand.js index 1096deed5e..63451b16a6 100644 --- a/docs/src/examples/views/Statistic/Types/StatisticExampleGroupShorthand.js +++ b/docs/src/examples/views/Statistic/Types/StatisticExampleGroupShorthand.js @@ -1,5 +1,5 @@ import React from 'react' -import { Statistic } from 'semantic-ui-react' +import { StatisticGroup } from 'semantic-ui-react' const items = [ { key: 'faves', label: 'Faves', value: '22' }, @@ -7,6 +7,6 @@ const items = [ { key: 'members', label: 'Members', value: '22' }, ] -const StatisticExampleGroupShorthand = () => +const StatisticExampleGroupShorthand = () => export default StatisticExampleGroupShorthand diff --git a/docs/src/examples/views/Statistic/Types/StatisticExampleStatistic.js b/docs/src/examples/views/Statistic/Types/StatisticExampleStatistic.js index 42c7051f60..365de89960 100644 --- a/docs/src/examples/views/Statistic/Types/StatisticExampleStatistic.js +++ b/docs/src/examples/views/Statistic/Types/StatisticExampleStatistic.js @@ -1,10 +1,10 @@ import React from 'react' -import { Statistic } from 'semantic-ui-react' +import { StatisticValue, StatisticLabel, Statistic } from 'semantic-ui-react' const StatisticExampleStatistic = () => ( - 5,550 - Downloads + 5,550 + Downloads ) diff --git a/docs/src/examples/views/Statistic/Types/StatisticExampleTopLabel.js b/docs/src/examples/views/Statistic/Types/StatisticExampleTopLabel.js index 36302cf17f..01858a41f0 100644 --- a/docs/src/examples/views/Statistic/Types/StatisticExampleTopLabel.js +++ b/docs/src/examples/views/Statistic/Types/StatisticExampleTopLabel.js @@ -1,10 +1,10 @@ import React from 'react' -import { Statistic } from 'semantic-ui-react' +import { StatisticValue, StatisticLabel, Statistic } from 'semantic-ui-react' const StatisticExampleTopLabel = () => ( - Views - 40,509 + Views + 40,509 ) diff --git a/docs/src/examples/views/Statistic/Variations/StatisticExampleColored.js b/docs/src/examples/views/Statistic/Variations/StatisticExampleColored.js index a3d1c7aa6c..fc804527ef 100644 --- a/docs/src/examples/views/Statistic/Variations/StatisticExampleColored.js +++ b/docs/src/examples/views/Statistic/Variations/StatisticExampleColored.js @@ -1,57 +1,62 @@ import React from 'react' -import { Statistic } from 'semantic-ui-react' +import { + StatisticValue, + StatisticLabel, + StatisticGroup, + Statistic, +} from 'semantic-ui-react' const StatisticExampleColored = () => ( - + - 27 - red + 27 + red - 8' - orange + 8' + orange - 28 - yellow + 28 + yellow - 7' - olive + 7' + olive - 14 - green + 14 + green - 82 - teal + 82 + teal - 1' - blue + 1' + blue - 22 - violet + 22 + violet - 23 - purple + 23 + purple - 15 - pink + 15 + pink - 36 - brown + 36 + brown - 49 - grey + 49 + grey - + ) export default StatisticExampleColored diff --git a/docs/src/examples/views/Statistic/Variations/StatisticExampleColoredGroup.js b/docs/src/examples/views/Statistic/Variations/StatisticExampleColoredGroup.js index adfc565106..a0ea37173c 100644 --- a/docs/src/examples/views/Statistic/Variations/StatisticExampleColoredGroup.js +++ b/docs/src/examples/views/Statistic/Variations/StatisticExampleColoredGroup.js @@ -1,6 +1,12 @@ import _ from 'lodash' import React, { Component } from 'react' -import { Divider, Statistic } from 'semantic-ui-react' +import { + StatisticValue, + StatisticLabel, + StatisticGroup, + Divider, + Statistic, +} from 'semantic-ui-react' const colors = [ 'red', @@ -37,20 +43,20 @@ export default class StatisticExampleColoredGroup extends Component {